Colours

Colours

No component names a colour. Colour lives in the palette, as scales of twelve tones given for the light face and the dark one; the colour scheme picks which face the page reads; a component reads a role — a surface, a border, a text — which is one place on a scale. The skin never says a colour. Switch the scheme from the header and every swatch below moves without a single one being redefined.

Scales

A palette is a neutral, an accent — the brand — and the four states, each a scale of twelve tones, laid out the way Radix Themes and Material 3 lay a colour out. A place on a scale means the same on every scale and on both faces: what the numbers below are for. An application brings its palette by giving its accent; every scale follows.
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
  1. 1 the ground of a work region
  2. 2 the ground of the page, around and between regions
  3. 3 a field's ground; the faint ground a state sits on
  4. 4 a raised control; a hovered ground
  5. 5 a card, a block — and its discreet border
  6. 6 a border
  7. 7 a border between two regions
  8. 8 a strong border, a focus ring
  9. 9 the colour whole, filling what it marks
  10. 10 the same, hovered
  11. 11 the colour as ink, readable on the grounds
  12. 12 strong ink — for the neutral, the text itself

Surfaces

The grounds, from the region outward — each one a place on the neutral scale. The light face of the dashboard orders them by lightness up to white, the dark face by how far each one is lifted off the ground.
--surface-zoneThe ground a region of a page stands on
--surface-pageThe page itself, and what shows between the zones
--surface-shellMenu, header, footer
--surface-1Inputs and fields
--surface-2Buttons, toolbars
--surface-3Blocks, cards, modals
--surface-invertA control standing out by taking the text's colour

Text

Three levels of attention — neutral 12, 11 and 9: what is being read, what qualifies it, and what is only there to be found when looked for.

--text-color-default — What is being read

--text-color-muted — Labels, meta, subtitles

--text-color-subtle — Separators and empty states

Borders

Four weights, told apart by what they separate — neutral 5 to 8: two things inside one region, a field from what is behind it, two regions of a page, and the ring of what has the focus.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Categories

Thirteen colours that mean nothing but "not the one beside it": the series of a chart, the segments of a distribution, the stages of a workflow. Named, not numbered — an app picks `cat-mint` because it looks like mint — and each a scale like the others, so a category is worn the way a state is: its ground at 3, its ink at 11, filled at 9.
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12
v1.0.29