---
url: https://brand.okrado.com/foundations/colour/
title: Colour
description: Colour roles with their paper and night values, the rules for using them, and the contrast table generated from the tokens.
kind: reference
owner: Ghassen-Hizem
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Colour

> Colour roles with their paper and night values, the rules for using them, and the contrast table generated from the tokens.

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   |