Colour is used by role, never by value. A role is a token with a paper value and a night value; switching mode switches every role at once. Use the CSS variable (--okr-ui-bg-canvas) or the Tailwind class from @okrado/brand, and nothing else.
- The primary button is ink: night on paper, cream on night. Amber fill is for the single commit action in a view.
- One amber element per viewport on marketing surfaces: the logo square plus at most one record marker.
- Warning is orange-red, never amber. Show it with a dot and a word. Amber means “record”, never “attention”.
- Links use the link role and are underlined. Never amber.
- No gradients, except one radial amber wash at 10 % behind a night hero. Never on text or on the logo.
- Status is never colour alone: a word or an icon always comes with it.
| Token | Paper | Night |
|---|
ui.bg.canvas | #faf8f3 | #0d1015 |
|---|
ui.bg.surface | #fefdfa | #161a22 |
|---|
ui.bg.raised | #fefdfa | #1e232b |
|---|
ui.bg.hover | #f3efe6 | #262b34 |
|---|
ui.bg.active | #ebe7de | #2e343d |
|---|
| Token | Paper | Night |
|---|
ui.text.primary | #161a22 | #f3efe6 |
|---|
ui.text.secondary | #52575f | #c1bdb4 |
|---|
ui.text.tertiary | #63676e | #97938c |
|---|
ui.text.inverse | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.border.subtle | #e2ded6 | #2e343d |
|---|
ui.border.default | #d8d4cc | #383e47 |
|---|
ui.border.strong | #b4b1a9 | #646973 |
|---|
ui.border.control | #7c8088 | #86837b |
|---|
| Token | Paper | Night |
|---|
ui.primary.solid | #161a22 | #f3efe6 |
|---|
ui.primary.hover | #52575f | #c1bdb4 |
|---|
ui.primary.on | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.accent.solid | #f6b048 | #f6b048 |
|---|
ui.accent.hover | #e78d02 | #fcc05c |
|---|
ui.accent.subtle | #fdeedb | #30200b |
|---|
ui.accent.border | #e8bb7f | #6e4400 |
|---|
ui.accent.text | #9c5906 | #fcd180 |
|---|
ui.accent.on | #161a22 | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.record.solid | #c47500 | #f6b048 |
|---|
ui.record.logo | #e48a00 | #f6b048 |
|---|
ui.record.text | #9c5906 | #fcd180 |
|---|
ui.record.subtle | #fdeedb | #30200b |
|---|
| Token | Paper | Night |
|---|
ui.success.solid | #008451 | #2fcf8d |
|---|
ui.success.hover | #00784a | #47dc9d |
|---|
ui.success.subtle | #e0f7e9 | #0f2a1c |
|---|
ui.success.border | #8fd7ad | #085d3c |
|---|
ui.success.text | #14764a | #5ee6a8 |
|---|
ui.success.on | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.warning.solid | #bb5300 | #f77f20 |
|---|
ui.warning.hover | #ae4800 | #ff9645 |
|---|
ui.warning.subtle | #ffece2 | #361c0d |
|---|
ui.warning.border | #fdaf88 | #7a3a0b |
|---|
ui.warning.text | #a84811 | #fca864 |
|---|
ui.warning.on | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.danger.solid | #d22632 | #f1424e |
|---|
ui.danger.hover | #c01c2b | #ff4d5e |
|---|
ui.danger.subtle | #ffebe9 | #3a1717 |
|---|
ui.danger.border | #ffaaa7 | #852b2e |
|---|
ui.danger.text | #be222d | #ff898b |
|---|
ui.danger.on | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.info.solid | #3769e0 | #6294fa |
|---|
ui.info.hover | #2e5dd0 | #71a0ff |
|---|
ui.info.subtle | #e8f1ff | #17233a |
|---|
ui.info.border | #a4c5ff | #2d4c87 |
|---|
ui.info.text | #2f5bc2 | #7aa7ff |
|---|
ui.info.on | #fefdfa | #0d1015 |
|---|
| Token | Paper | Night |
|---|
ui.focus.ring | #3769e0 | #7aa7ff |
|---|
Every pair below is checked in both modes by the brand build: text at 4.5:1, large text and non-text at 3:1 (WCAG 2.2 AA). A new role that carries text or state ships with its pairs in the same change. This table is generated from the same report the brand tests gate on.
| Foreground / background | Kind | Floor | Paper | Night | Result |
|---|
text.primary / bg.canvas | Text | 4.5 | 16.42 | 16.61 | Pass |
|---|
text.secondary / bg.canvas | Text | 4.5 | 6.85 | 10.17 | Pass |
|---|
text.primary / bg.surface | Text | 4.5 | 17.13 | 15.19 | Pass |
|---|
text.secondary / bg.surface | Text | 4.5 | 7.15 | 9.30 | Pass |
|---|
text.primary / bg.raised | Text | 4.5 | 17.13 | 13.75 | Pass |
|---|
text.secondary / bg.raised | Text | 4.5 | 7.15 | 8.42 | Pass |
|---|
text.primary / bg.hover | Text | 4.5 | 15.19 | 12.39 | Pass |
|---|
text.secondary / bg.hover | Text | 4.5 | 6.34 | 7.58 | Pass |
|---|
text.primary / bg.active | Text | 4.5 | 14.12 | 10.93 | Pass |
|---|
text.secondary / bg.active | Text | 4.5 | 5.89 | 6.69 | Pass |
|---|
text.tertiary / bg.canvas | Text | 4.5 | 5.35 | 6.23 | Pass |
|---|
text.tertiary / bg.surface | Text | 4.5 | 5.59 | 5.70 | Pass |
|---|
text.tertiary / bg.raised | Text | 4.5 | 5.59 | 5.16 | Pass |
|---|
text.tertiary / bg.hover | Text | 4.5 | 4.95 | 4.65 | Pass |
|---|
text.tertiary / bg.active | Large text | 3 | 4.60 | 4.10 | Pass |
|---|
text.inverse / text.primary | Text | 4.5 | 17.13 | 16.61 | Pass |
|---|
primary.on / primary.solid | Text | 4.5 | 17.13 | 16.61 | Pass |
|---|
primary.on / primary.hover | Text | 4.5 | 7.15 | 10.17 | Pass |
|---|
text.primary / selection | Text | 4.5 | 14.14 | 10.98 | Pass |
|---|
accent.text / bg.canvas | Text | 4.5 | 5.15 | 13.22 | Pass |
|---|
accent.text / bg.surface | Text | 4.5 | 5.37 | 12.09 | Pass |
|---|
accent.text / accent.subtle | Text | 4.5 | 4.79 | 10.90 | Pass |
|---|
link / bg.canvas | Text | 4.5 | 5.83 | 7.98 | Pass |
|---|
link / bg.surface | Text | 4.5 | 6.08 | 7.30 | Pass |
|---|
accent.on / accent.solid | Text | 4.5 | 9.31 | 10.18 | Pass |
|---|
accent.on / accent.hover | Text | 4.5 | 6.81 | 11.65 | Pass |
|---|
record.solid / bg.canvas | Non-text | 3 | 3.36 | 10.18 | Pass |
|---|
record.solid / bg.surface | Non-text | 3 | 3.50 | 9.31 | Pass |
|---|
record.solid / bg.hover | Non-text | 3 | 3.11 | 7.60 | Pass |
|---|
record.text / bg.canvas | Text | 4.5 | 5.15 | 13.22 | Pass |
|---|
record.text / bg.surface | Text | 4.5 | 5.37 | 12.09 | Pass |
|---|
record.text / record.subtle | Text | 4.5 | 4.79 | 10.90 | Pass |
|---|
chart.now / bg.surface | Non-text | 3 | 3.50 | 9.31 | Pass |
|---|
success.text / bg.canvas | Text | 4.5 | 5.32 | 12.12 | Pass |
|---|
success.text / bg.surface | Text | 4.5 | 5.55 | 11.09 | Pass |
|---|
success.text / success.subtle | Text | 4.5 | 5.01 | 9.76 | Pass |
|---|
success.on / success.solid | Text | 4.5 | 4.67 | 9.46 | Pass |
|---|
success.on / success.hover | Text | 4.5 | 5.45 | 10.88 | Pass |
|---|
success.solid / bg.canvas | Non-text | 3 | 4.48 | 9.46 | Pass |
|---|
warning.text / bg.canvas | Text | 4.5 | 5.50 | 9.91 | Pass |
|---|
warning.text / bg.surface | Text | 4.5 | 5.73 | 9.07 | Pass |
|---|
warning.text / warning.subtle | Text | 4.5 | 5.10 | 8.22 | Pass |
|---|
warning.on / warning.solid | Text | 4.5 | 4.75 | 7.27 | Pass |
|---|
warning.on / warning.hover | Text | 4.5 | 5.54 | 8.80 | Pass |
|---|
warning.solid / bg.canvas | Non-text | 3 | 4.55 | 7.27 | Pass |
|---|
danger.text / bg.canvas | Text | 4.5 | 5.72 | 8.35 | Pass |
|---|
danger.text / bg.surface | Text | 4.5 | 5.97 | 7.64 | Pass |
|---|
danger.text / danger.subtle | Text | 4.5 | 5.30 | 7.00 | Pass |
|---|
danger.on / danger.solid | Text | 4.5 | 5.08 | 5.11 | Pass |
|---|
danger.on / danger.hover | Text | 4.5 | 6.00 | 5.88 | Pass |
|---|
danger.solid / bg.canvas | Non-text | 3 | 4.87 | 5.11 | Pass |
|---|
info.text / bg.canvas | Text | 4.5 | 5.83 | 7.98 | Pass |
|---|
info.text / bg.surface | Text | 4.5 | 6.08 | 7.30 | Pass |
|---|
info.text / info.subtle | Text | 4.5 | 5.43 | 6.58 | Pass |
|---|
info.on / info.solid | Text | 4.5 | 4.85 | 6.47 | Pass |
|---|
info.on / info.hover | Text | 4.5 | 5.75 | 7.42 | Pass |
|---|
info.solid / bg.canvas | Non-text | 3 | 4.65 | 6.47 | Pass |
|---|
border.control / bg.canvas | Non-text | 3 | 3.73 | 5.03 | Pass |
|---|
focus.ring / bg.canvas | Non-text | 3 | 4.65 | 7.98 | Pass |
|---|
border.control / bg.surface | Non-text | 3 | 3.90 | 4.60 | Pass |
|---|
focus.ring / bg.surface | Non-text | 3 | 4.85 | 7.30 | Pass |
|---|
border.control / bg.raised | Non-text | 3 | 3.90 | 4.17 | Pass |
|---|
focus.ring / bg.raised | Non-text | 3 | 4.85 | 6.61 | Pass |
|---|
chart.1 / bg.surface | Non-text | 3 | 17.13 | 15.19 | Pass |
|---|
chart.2 / bg.surface | Non-text | 3 | 3.65 | 8.09 | Pass |
|---|
chart.3 / bg.surface | Non-text | 3 | 3.35 | 8.62 | Pass |
|---|
chart.4 / bg.surface | Non-text | 3 | 3.81 | 7.72 | Pass |
|---|
chart.5 / bg.surface | Non-text | 3 | 3.41 | 8.48 | Pass |
|---|
chart.6 / bg.surface | Non-text | 3 | 3.89 | 7.59 | Pass |
|---|
