Visual Identity
BugPort's visual identity is a warm, restrained palette built around deep aubergine. The page sits on a cream canvas, content lives on white elevated cards, lavender tints group supporting material, and a deep plum inverse carries the rare narrative or milestone moment. This page defines the palette, the four surface families, button treatments, gradient and screenshot rules, and the icon and illustration direction.
The governing idea: aubergine is a signal, not wallpaper. Colour earns its place by meaning something. Everything that is not a signal stays calm.
Brand palette
The full aubergine ramp, from the brand voice colour through inverse storytelling tones to the neutral ink and muted greys. Use these exact hex values.
Roles in brief:
- Iris Mid #730394 — the brand voice. Primary actions, active states, links, the navbar accent.
- Plum Shadow #3d0157 and Plum Deep #481a54 — inverse and storytelling surfaces; deep narrative bands.
- Magenta Pulse #9602c7 — a hotter accent for emphasis and gradients; use sparingly.
- Violet Glow #d17dfe / Iris Edge #eac8fe — bright tints for keylines, focus rings, and gradient ends.
- Lavender Wash #f9f0ff / Lilac Veil #f2defe — support surfaces and hover/muted tints.
- Cream Canvas #fefbff — the page background. Warm, never flat white.
- Midnight Plum #1d1c1d — primary body text. Eggplant Ink #2e0039 — headings. Graphite #454245 — secondary body. Steel #696969 — muted/caption text.
State colours
State colour is functional, not brand. It signals status and never competes with aubergine for attention. Keep it muted and use it only where it carries meaning.
- Success — muted green, for resolved/healthy states.
- Warning — amber/copper, for quota approaching and non-blocking cautions.
- Destructive — rose-red, deliberately distinct from aubergine, reserved for dangerous or irreversible actions.
- Info — blue, status only. Blue is never a brand colour in BugPort; it lives strictly in status chips.
The four surface families
Surfaces stack from the warm page background up to the rare inverse band. Most of the product lives in the first two layers.
Button treatments
BugPort uses three button treatments. There is exactly one primary action per area — that is where aubergine goes.
Gradient rules
Gradients are atmospheric only. They set mood on marketing hero sections, dark storytelling bands, and empty-state ghost frames — never on functional controls, cards, or data.
- Allowed: soft aubergine-to-magenta or plum-to-violet washes behind marketing copy and inside empty illustrations.
- Not allowed: gradient buttons, gradient table rows, gradient text on operational screens, or any gradient inside the dashboard data area.
- Keep gradients low-contrast and slow; they are background atmosphere, not a focal point.
Screenshot presentation
Product screenshots are the hero imagery. They are always framed consistently so the product looks like one coherent system.
- Place the screenshot on a white card with a 16px radius.
- Apply a soft shadow (the default very-soft elevation, or up to a 32px blur for a feature hero — see Layout & Spacing).
- Add a 1px Iris Edge #eac8fe keyline around the frame so the screenshot edge reads cleanly against cream.
- Never composite screenshots onto a stock photo, a tilted laptop, or a phone mockup.
Icon and illustration direction
- Product-led. Prefer real, framed screenshots of the actual dashboard, plugin, or bug detail over abstract art.
- Minimal line icons in a single weight, tinted Eggplant Ink or Graphite; aubergine reserved for active/selected icons.
- No stock photography, no decorative mock devices, no clip-art mascots.
- Illustrations, where used (mainly empty states), are simple ghost frames in lavender and iris-edge tones — quiet, never the focal point.
Colour usage do's and don'ts
- Keep the page on cream and content on white cards.
- Spend aubergine on the one primary action and the active state.
- Use lavender to group supporting material like filters and summaries.
- Reserve plum-deep inverse for one or two narrative or milestone bands.
- Keep state colours muted and meaningful.
- Don't use aubergine as a background fill behind large areas of content.
- Don't put two primary aubergine buttons in the same area.
- Don't use info blue or any state colour as a brand accent.
- Don't apply gradients to buttons, tables, or data.
- Don't frame screenshots on stock backgrounds or device mockups.