# Colour > Three 12-step scales in two modes, their step roles, and the contrast rules that govern them. --- LLMS index: [llms.txt](/brand/v2.1.0/llms.txt) --- The palette is three scales — **midnight**, **orange**, and **slate** — each expressed as a 12-step ramp in a light and a dark variant. The step numbering follows the Radix convention, which assigns every step a *role*. Using a step outside its role is the single most common way to break the system. ## Core colours These are the named aliases most projects reach for first. They are shortcuts into the scales, not a separate palette.

Primary

#1d3352

Text, headings, primary surfaces
Primary Light

#2b4d78

Hover states, dark-mode primary
Primary Dark

#132440

Dark backgrounds, navbar, code blocks
Accent

#E05232

CTAs, highlights, active states
Accent Light

#ea7558

Accent hover on dark, syntax strings
Accent Dark

#b84228

Accent pressed state
Accent Solid

#cc4528

Fill for solid controls with white text (4.72:1)
Secondary

#546a82

Supporting text, borders

## Step roles Every scale uses the same twelve roles in the same order: | Steps | Role | Used for | |---|---|---| | 1–2 | App and subtle backgrounds | Page and section surfaces | | 3–5 | Element backgrounds | Component fills, hover, active | | 6–8 | Borders | Subtle, default, and strong borders | | 9–10 | Solid | Solid fills and their hover state | | 11–12 | Text | Low-emphasis and high-emphasis text |

Only 11 and 12 are text steps

Steps 8, 9, and 10 are border and solid-surface roles. They are not held to text contrast thresholds and must not be used for body text. If you need dimmer text than step 11, define a dedicated token and verify its contrast — see [the code-comment token](/brand/v2.1.0/docs/interface/code/) for a worked example.

## Midnight

Midnight light · step 9 #1d3352

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Midnight dark · step 9 #1d3352

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Midnight is the primary. It carries structure, text, and the calm end of the system. Step 9 (`#1d3352`) is the brand primary and is identical in both modes. ## Orange

Orange light · step 9 #E05232

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Orange dark · step 9 #E05232

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Orange is the accent. It marks the primary action, the active state, and little else. Step 9 (`#E05232`) is constant across modes.

Use orange for the single most important action in a view, active navigation state, and focus emphasis.

Don't

Use orange for large background fills, body text, or more than one competing call to action on the same screen.

## Slate

Slate light · step 9 #546a82

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Slate dark · step 9 #546a82

1 App bg

2 Subtle bg

3 Elem bg

4 Hover bg

5 Active bg

6 Subtle brd

7 Border

8 Strong brd

9 Solid bg

10 Solid hvr

11 Lo text

12 Hi text

Slate is the secondary — supporting text, borders, and neutral surfaces. Step 9 (`#546a82`) is the brand secondary and is constant across modes. ## Terminal The three scales cover every surface that has a light mode. A terminal does not: it has one surface, it is dark, and every colour in it is measured against that one background. It also needs six hues where the interface needs three, because programs have been writing to sixteen ANSI slots since long before this system existed. So the terminal palette is a fourth member of the system rather than a fifth scale — a fixed sixteen-slot palette plus its chrome, derived from the ramps and measured against `midnight-dark-1`.

#	Name	Normal	On surface	Bright	On surface	Provenance
0	black	`#0e1720`	—	`#2e4b68`	2.00:1	midnight-dark-1 / midnight-dark-6 — Box drawing and rules, not text — deliberately below the floor.
1	red	`#e55b5b`	5.15:1	`#f08b80`	7.49:1	bright = danger-dark — Never the accent — an error and the brand must not look alike.
2	green	`#3f9d74`	5.41:1	`#6cc090`	8.24:1	bright = success-dark
3	yellow	`#c08a1e`	5.93:1	`#e0a92a`	8.50:1	bright = warning-dark — Gold, matching the warning role in the interface.
4	blue	`#6289b3`	4.95:1	`#8aacc8`	7.59:1	bright = midnight-dark-11
5	magenta	`#bd6d96`	4.98:1	`#d491b4`	7.32:1	terminal-only — The brand defines no magenta; this slot exists only here.
6	cyan	`#3f97a3`	5.31:1	`#74c0c9`	8.71:1	terminal-only — The brand defines no cyan; this slot exists only here.
7	white	`#97a8b8`	7.41:1	`#c5daf0`	12.62:1	slate-dark-11 / midnight-dark-12

Read the provenance column carefully. The **bright** ramp is the brand: where a hue already exists in the system, the bright slot takes that step verbatim. The **normal** ramp has no brand equivalent — the scales define one value per semantic role, not a dim and a bright — so each normal slot is its bright counterpart darkened until it reads a step back while still clearing the floor. Magenta and cyan exist in neither half of the brand. They are here because a terminal requires them, and nowhere else.

A terminal value is not a brand value

`#e55b5b` is the terminal's red. It is **not** `$danger`, which is `#a8261c`. The normal ramp exists to fill ANSI slots and is measured only against the terminal surface; using one of its values in the interface puts an unmeasured colour on an unrelated background.

### Terminal chrome The accent gets no ANSI slot, because it is not semantic — it marks *where you are*. That, and the surfaces around the sixteen, live here.

Role	Value	Measured
Background	`#0e1720`	the surface
Foreground	`#c5daf0`	12.62:1
Cursor	`#e05232`	4.67:1
Cursor text	`#0e1720`	4.67:1 on the cursor
Selection background	`#20354d`	—
Selection text	`#c5daf0`	8.74:1
Dim / comment	`#72889d`	4.93:1
Status bar surface	`#131e2b`	—
Status bar text	`#c5daf0`	11.74:1
Inactive tab and pane label	`#7b8da3`	4.95:1
Active tab fill	`#e05232`	4.67:1 with #0e1720 text
Active pane border	`#e05232`	4.67:1
Inactive pane border	`#7b8da3`	5.32:1

Every non-background value clears 4.5:1 against the surface; the measured floor is 4.95:1. ANSI 0 bright is the one deliberate exception — programs use it for box drawing and rules, not for text. Configuration for tmux, WezTerm, Kitty, Ghostty, iTerm2, and Zellij is on the [Terminal theming page](/brand/v2.1.0/docs/themes/terminal/). ## Contrast rules - **Never use pure `#000` or `#fff` as text.** Use step 12 of the relevant scale: `#142438` on light, `#c5daf0` on dark. - **Step 9 is constant across modes.** The solid accent does not shift when the theme changes. - **Body text targets 4.5:1**, large text (≥24px, or ≥18.66px bold) targets 3:1. - **Verify against the actual surface.** A step that passes on the app background may fail on an elevated panel. ### Where an identity colour cannot carry text Being the brand colour does not make a value a legible background. White on `orange-9` (`#E05232`) measures **3.87:1** — fine as a mark or a border, but below the floor for button labels. Rather than dilute the accent, the system adds a separate fill for that job: | Token | Hex | With white text | |---|---|---| | `--color-accent` | `#E05232` | 3.87:1 — identity only, not for text | | `--color-accent-solid` | `#cc4528` | 4.72:1 — solid controls | | `--color-accent-dark` | `#b84228` | 5.46:1 — hover and pressed | The same principle produced the [`code-comment` token](/brand/v2.1.0/docs/interface/code/): when no existing step can do the job accessibly, name a new one rather than misuse a step. ### Semantic colours are mode-specific The callout hues are tuned for **dark text on tinted light backgrounds**. Used as foregrounds on the dark app surface they fall below AA, so dark mode has its own set: | Role | Light | Dark | On `#0e1720` | |---|---|---|---| | Success | `#2f7d65` | `#6cc090` | 3.65:1 → 8.24:1 | | Warning | `#8b6508` | `#e0a92a` | 3.41:1 → 8.50:1 | | Danger | `#a8261c` | `#f08b80` | 2.55:1 → 7.49:1 | | Info | `#3a5a82` | `#8aacc8` | 2.55:1 → 7.59:1 | ## Data visualisation A chart palette introduces no new colours. It is a set of rules for which existing steps may sit beside each other in a plot, and — more usefully — for when colour stops being the right tool. ### Categorical: three series | Series | Token | Hex | On white | |---|---|---|---| | 1 | `--midnight-9` | `#1d3352` | 12.75:1 | | 2 | `--orange-9` | `#E05232` | 3.87:1 | | 3 | `--slate-9` | `#546a82` | 5.58:1 | One step-9 solid per family, in that order. All three clear the **3:1 non-text contrast floor** against a white plot area, so a bar or a line is visible without a border. Assign them in order and keep the assignment stable across every chart in a deck or a dashboard: if midnight is "cloud" on slide four, it is "cloud" on slide nine. A series that changes colour between charts costs the reader more than a fourth series would have gained them.

Three-series grouped bars — the whole categorical palette

Cloud Agentic AI Agile

Orange and slate differ in hue, not in value

`orange-9` against `slate-9` measures **1.44:1**. On screen they are easy to tell apart — orange against blue-grey is also one of the safest pairs for the common colour-vision deficiencies. Printed in greyscale, or on a projector with the colour turned down, they merge. So when exactly two series are being compared, use **midnight-9 and orange-9** (3.29:1) and leave slate for the third. And direct-label every series — the legend is the fallback, not the mechanism.

### There is no fourth series The palette stops at three, and extending it is the wrong fix. The step-6 tier is not an option: `midnight-6` and `slate-6` measure **1.03:1 against each other** — the same colour, for practical purposes — and all three step-6 values sit at 1.8–2.0:1 against white, below the 3:1 floor for a mark you have to see. When a chart has more than three categories, one of these is the answer: - **Group the tail.** Rank the categories and collapse everything past the third into "Other". If the fourth is genuinely interesting, it is the subject of its own chart. - **Small multiples.** One chart per category, same axes, same scale. Reading eight small charts is faster than decoding an eight-colour legend. - **Direct labelling with one highlight.** Draw every series in `slate-7`, draw the one being discussed in `orange-9`, and label it in place. This is the house style for a line chart in a [deck](/brand/v2.1.0/docs/media/presentations/) — one idea per slide holds for charts too. - **Stop using colour.** A ranked bar chart in a single colour, sorted by value, answers "which is biggest" better than any palette does. ### Sequential and ordinal scales A magnitude scale uses **one family, steps 3 through 8**: `--midnight-3` → `--midnight-4` → `--midnight-5` → `--midnight-6` → `--midnight-7` → `--midnight-8` Six levels, stepping evenly in luminance (each 1.06–1.40× its neighbour) — which is what makes the ramp readable as an ordered scale rather than as six colours. **Step 9 is not the top of that ramp.** It is 3.87× darker than step 8, which is a jump the eye reads as a category boundary rather than one more level. Use it deliberately for exactly that: a four-bucket choropleth of `3 · 5 · 7 · 9`, where the top bucket is meant to separate itself. Do not append it to a six-level heatmap. Steps 3–7 are all below 3:1 against a white plot area, so a sequential fill needs an edge: give the plot a 1px `slate-4` cell grid, or the reader loses the boundary between a light cell and the page. For a diverging scale — where the middle is neutral and both ends are extreme — run `midnight-8 → midnight-3 → orange-3 → orange-8`, with `--midnight-1` at the midpoint. Never build a diverging scale from success and danger: those hues carry a judgement, and "below average" is not "wrong". ### Chart furniture | Element | Value | |---|---| | Axis line, ticks | `--slate-5` | | Grid lines | `--slate-3`, horizontal only | | Axis labels, legend | `--slate-11`, 12px | | Value labels | `--midnight-12`, 12px, IBM Plex Mono | | Plot background | none — the page surface | | Annotation, callout rule | `--orange-9` | Numbers are set in IBM Plex Mono, right-aligned, for the same reason [table numerics are](/brand/v2.1.0/docs/interface/components/): digits have to line up to be compared.

Keep categorical charts to three series and label them directly. Hold a series' colour constant across a deck. Use one family’s steps 3–8 for magnitude.

Don't

Invent a fourth categorical colour from the step-6 tier, rely on a legend as the only way to identify a series, append step 9 to a sequential ramp, or build a diverging scale from the success and danger hues.

## Dark mode Both modes are equally supported. See [Dark mode](/brand/v2.1.0/docs/interface/dark-mode/) for the implementation rules — theme switching, persistence, image treatment, and the always-dark code surface.