Colour

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.

Rules

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.

Surfaces

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`

Text and lines

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`

Primary, accent and the Record

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`

Status and focus

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`

Contrast

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

Owner: Okrado founders
Updated: November 3, 2026
Review by: February 28, 2027
Markdown version: /foundations/colour.md