Brand colour
How components take a brand colour
Acopone yellow is the core brand. Every component reads its colour from a few tokens, so any brand colour can be dropped in. The brand engine works out those tokens and protects the status colours (success, warning, danger, info) so they never get confused with the brand.
Current brand
Pick any colour in Conditions. The engine turns one colour into four roles and checks each against WCAG.
Acopone (input)#f9c424
AaFill · --primary#f9c424Text on it 10.4:1
Text · --primary-ink#93720b4.5:1 on cards
Focus · --ring#b98f003.0:1 on page
What the engine changed (light)
- Brand as text darkened to #93720b to reach 4.5:1.
- Warning too close to the brand: hue −22°, lightness below brand, edge.
brand.css for this colour
/*
* Brand #f9c424. Generated by the Acopone brand engine (design.acopone.com); do not edit by hand.
* Adjustments:
* light: Brand as text darkened to #93720b to reach 4.5:1.
* light: Warning too close to the brand: hue −22°, lightness below brand, edge.
* dark: Warning too close to the brand: hue −22°, lightness below brand, edge.
* contrast: Brand as text darkened to #6f5504 to reach 7:1.
* contrast: Warning too close to the brand: hue −22°, lightness below brand, edge.
*/
html {
--app-brand: #f9c424;
--primary: #f9c424;
--primary-foreground: #1d1d1b;
--primary-ink: #93720b;
--accent: #f9c424;
--accent-foreground: #1d1d1b;
--ring: #b98f00;
--success: #047e39;
--success-foreground: #ffffff;
--success-ink: #007c38;
--success-soft: #e4efe6;
--success-edge: transparent;
--warning: #f28535;
--warning-foreground: #1d1d1b;
--warning-ink: #b15705;
--warning-soft: #fdf2eb;
--warning-edge: #b15705;
--danger: #df2225;
--danger-foreground: #ffffff;
--danger-ink: #d6131c;
--danger-soft: #fde9e6;
--danger-edge: transparent;
--info: #136dbf;
--info-foreground: #ffffff;
--info-ink: #126cbe;
--info-soft: #e4edf8;
--info-edge: transparent;
--destructive: var(--danger);
--destructive-foreground: var(--danger-foreground);
}
html.dark {
--primary: #f9c424;
--primary-foreground: #1d1d1b;
--primary-ink: #f9c424;
--accent: #f9c424;
--accent-foreground: #1d1d1b;
--ring: #f9c424;
--success: #3fc168;
--success-foreground: #1d1d1b;
--success-ink: #3fc168;
--success-soft: #304232;
--success-edge: transparent;
--warning: #f0872d;
--warning-foreground: #1d1d1b;
--warning-ink: #f58b32;
--warning-soft: #4a392b;
--warning-edge: #f58b32;
--danger: #f84b4b;
--danger-foreground: #1d1d1b;
--danger-ink: #fe7770;
--danger-soft: #4d312d;
--danger-edge: transparent;
--info: #58a2f2;
--info-foreground: #1d1d1b;
--info-ink: #5fa9f9;
--info-soft: #313d49;
--info-edge: transparent;
--destructive: var(--danger);
--destructive-foreground: var(--danger-foreground);
}
html.contrast {
--primary: #6f5504;
--primary-foreground: #ffffff;
--primary-ink: #6f5504;
--accent: #6f5504;
--accent-foreground: #ffffff;
--ring: #000000;
--success: #035d28;
--success-foreground: #ffffff;
--success-ink: #035926;
--success-soft: #e2ebe3;
--success-edge: transparent;
--warning: #612202;
--warning-foreground: #ffffff;
--warning-ink: #612202;
--warning-soft: #ece3df;
--warning-edge: #612202;
--danger: #b20011;
--danger-foreground: #ffffff;
--danger-ink: #9f000e;
--danger-soft: #fae5e2;
--danger-edge: transparent;
--info: #01569c;
--info-foreground: #ffffff;
--info-ink: #004d8e;
--info-soft: #e2eaf4;
--info-edge: transparent;
--destructive: var(--danger);
--destructive-foreground: var(--danger-foreground);
}Side by side
The same components in each sample brand, in the current theme. Watch the status badges and the danger alert: next to the red brand, danger turns darker and gets an edge; next to green, success moves toward teal.
Acopone#f9c424
The core brand. Yellow sits next to warning, and is too light for text.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Red#e5243b
Same hue as danger.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Orange#f26b1d
Between warning and danger.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Green#16a34a
Same hue as success.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Blue#2563eb
Same hue as info.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Violet#7c3aed
Clear of every status.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Navy#16245c
Very dark: lifted in dark mode.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Mono#1d1d1b
No hue at all.
BrandPaidDue soonFailedNew
Payment failed
The card was declined.
- Selected row
- Progress
Focused field
Brand vs status
Each cell pairs the brand (left) with that status colour (right) as the engine resolved it. ΔE is how different they look (under 0.1 reads as the same colour). Adjusted ones show what moved.
| Brand | Success | Warning | Danger | Info |
|---|---|---|---|---|
| ClearΔE 0.36 | Adjustedhue −22°, lightness below brand | ClearΔE 0.33 | ClearΔE 0.44 | |
| ClearΔE 0.34 | ClearΔE 0.27 | Adjustedlightness below brand | ClearΔE 0.35 | |
| ClearΔE 0.31 | Adjustedhue +22°, lightness below brand | Adjustedlightness below brand | ClearΔE 0.36 | |
| Adjustedhue +55° | ClearΔE 0.26 | ClearΔE 0.35 | ClearΔE 0.27 | |
| ClearΔE 0.30 | ClearΔE 0.45 | ClearΔE 0.39 | Adjustedhue −55° | |
| ClearΔE 0.37 | ClearΔE 0.46 | ClearΔE 0.34 | ClearΔE 0.17 | |
| ClearΔE 0.31 | ClearΔE 0.58 | ClearΔE 0.41 | Adjustedhue −55° | |
| ClearΔE 0.32 | ClearΔE 0.59 | ClearΔE 0.41 | ClearΔE 0.34 |
Where the brand goes
And where it never goes.
Brand
- The main action on a screen (one filled button)
- Selected tab, segment, row and nav item
- Links and brand text, always as --primary-ink
- Focus rings, switches, checkboxes, progress
- Unread dots and “now” markers
Never brand
- Errors, deletes and failures: danger
- Done, paid, money in: success
- Pending, low, due soon: warning
- New, notes, tips: info
- Large backgrounds (the brand stays an accent)