Brand Color
The signature colour(s) that define a brand's visual identity and are used consistently across all touchpoints.
Plain English
Your brand colour is the one colour that, when someone sees it, they think of you. Coca-Cola's red, Spotify's green, Figma's gradients. In UI design, the brand colour becomes the primary accent — used for buttons, links, highlights, and active states. The challenge: a vibrant brand colour that looks great on a billboard might fail WCAG contrast as a text colour on a white UI, requiring a darker shade for digital accessibility.
Technical
Brand colours are defined at full saturation (the "brand swatch") and then translated into a full digital scale for UI use. The full-saturation colour typically works for: backgrounds of buttons with white text (if it passes 4.5:1 contrast), icon fills, accent borders, and progress bars. For text, use a darker shade (60–70% lightness or below). Store the brand colour as a design token and derive the full scale algorithmically using tools like Radix Colors, Leonardo, or Brand.ai.
Live Demo
Bloom — Brand Color System
Primary
#6366f1
Brand identity, CTAs
Secondary
#f59e0b
Accents, highlights
Neutral
#1e293b
Text, backgrounds
Surface
#f8fafc
Cards, panels
A brand palette needs 1 primary, 1 accent, 1 neutral, and surface colors.
Usage
✓ Good usage
Use the brand blue (#2563EB) for primary button backgrounds with white text (4.5:1 contrast passes), a 10% lighter tint for ghost button borders, and a 10% darker shade for hover.
✗ Bad usage
Using the full-saturation brand orange (#FF6B00) as body text on white — it fails WCAG AA at under 3:1 contrast and is visually exhausting to read.
Recommended values
- Use full-saturation brand colour for button backgrounds with white text (check contrast)
- Use a 10–20% darker shade for hover states on brand-coloured elements
- Never use the brand colour for body text — too visually aggressive
- A 5–10% opacity tint of brand colour works for badge backgrounds and subtle highlights
- If the brand colour fails contrast for buttons, use the next darker stop
Common mistakes
- Using the same brand colour for text, backgrounds, icons, and highlights simultaneously — overexposure dilutes impact.
- Not checking brand colour accessibility on white and dark backgrounds.
- Changing the brand colour shade arbitrarily across screens — use exact token values consistently.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply the brand colour (#2563EB) as: primary button background, link colour, and active nav indicator. Use a 10% darker shade (#1D4ED8) on hover. For text on a tinted background, use the 700-stop (#1E40AF). Never apply the brand colour to body text.