Colour
Colour in Palette carries authorship first. Three inks map to three authors, three state colours map to outcomes, and nothing is coloured for decoration.
Three inks
Each author on the screen has its own ink. Use them by role, never by taste.
- Ink is the darkest neutral in light mode and the lightest in dark mode. Only people’s content and primary text use it.
- Lapis marks what you can operate: links, toggles, focus rings and the selection in a list.
- Pigment marks the model. It is the only gradient in the system.
Pigment
Pigment runs through four hues (lapis, tyrian, madder and viridian) at one locked lightness: 0.50 in light mode and 0.76 in dark mode, in OKLCH. Only the hue moves, so contrast stays constant while the colour flows.
Pigment has two states. Flowing means the model is writing, or its work is waiting for a person. Still means a person accepted it. Accepted model text never turns into ink.
Live demo: this sentence is flowing pigment, and this one was accepted.
State colours
Three colours mark outcomes. Each one always pairs with a word or a shape, so it reads without colour too.
- Don’t use state colours for categories, charts or decoration. A green that isn’t “done” teaches people to ignore green.
- Pair every state colour with a word or a mark: a flag, a tick, a struck value.
Grounds and surfaces
The interface sits on warm paper in light mode and deep blue-black in dark mode. Surfaces step up in small increments; lines separate them.
Contrast
Every text colour meets WCAG AA (4.5:1) on the ground and on surfaces, in both modes. Pigment is the hard case, because a gradient is only as legible as its lightest stop.
| Colour | Light, on ground | Dark, on ground |
|---|---|---|
| Ink | 17.1 : 1 | 17.2 : 1 |
| Ink 2 | 6.5 : 1 | 8.6 : 1 |
| Ink 3 | 4.8 : 1 | 4.7 : 1 |
| Pigment, weakest stop | 4.8 : 1 (viridian) | 8.6 : 1 (tyrian) |
| Tyrian | 5.8 : 1 | 7.9 : 1 |
| Madder | 5.1 : 1 | 7.4 : 1 |
| Ochre | 4.7 : 1 | 11 : 1 |
Pigment text uses a weight of 560 to 600. Thin strokes break a gradient into specks.
Dark mode
Dark mode keeps every hue and swaps lightness. Pigment rises to 0.76 lightness with slightly less chroma, so it glows without vibrating against the dark ground. Shadows deepen; lines replace most of the elevation.
- Design both modes at once. Every token has a dark value; never hard-code a colour.
- Check pigment on the darkest surface you use, not only on the ground.