Design system · 03
A cream sheet and one brown ink.
The palette is small on purpose. There is paper, there is ink, and there is a tan the colour of a soft pencil. Everything else in the interface is one of those three, thinned.
Colours are authored in OKLCH and read straight from the site’s stylesheet into this page. Press any swatch to copy it.
Copy as
Sheet and ink
The solid colours. Paper is every page, edge to edge; ink is a warm brown rather than a black, so text sits in the sheet instead of on top of it; tan is the pencil — the underline, a mark, a focus ring.
Tints of ink
Rules, panels, field outlines and secondary text are not separate greys. They are the ink at a lower strength, so every one of them stays in the same warm family whatever it is laid over. Shown here as they land on paper.
The key
The primary action is ink deepened one step, with a lighter tone of the same hue for the edge that catches the light. It is covered in Controls; these are its three colours.
Pigment
No paper, ink or control colour exceeds 0.056 chroma. The colours below break that limit deliberately, and they are not interface: four cloth dyes for the bound volumes, named for the traditional dyes, and shu — the vermilion of a seal. The one saturated colour that is interface is the red of an error, which is meant to interrupt.
Nabi
The mascot changes colour with her mood. These thirteen pastels are hers alone: they are not tokens, they appear nowhere else, and nothing in the interface borrows them.
Contrast
The pairings the site actually uses, with their contrast measured from the tokens above rather than quoted from memory.
- Ink on paper Headings and emphasis 11.03 : 1 AAA
- Quiet ink on paper Body copy 6.80 : 1 AA
- Quiet ink on a panel Body copy inside a card 6.14 : 1 AA
- Tan on paper The underline and display-size marks 3.80 : 1 AA, large text only
- Paper on the key The primary action's label 13.32 : 1 AAA
Rules
Do
- Reach for a tint of ink before introducing a new neutral.
- Use tan for marks made on the text: the underline, a focus ring, a link's underline.
- Keep pigment on physical objects — the volumes and the seal.
- Set body copy in quiet ink, and save full ink for headings and emphasis.
Don’t
- Use shu as an interface colour, a link colour or a logo colour.
- Put a cover dye behind a panel, a button or a section.
- Lower the border or panel tints to make a page feel calmer.
- Set running text in tan; it is a pencil, not a text colour.