System · Minima
The system this site is built on.
Minima is a Tailwind v4 theme: neutral carries the structure, and colour is spent on state, identity and data. This page is drawn with its own tokens, and every figure on it is computed from the installed theme at build time.
Text
The quick brown fox
foreground · Headings, the thing itself
17.64:1 · 17.68:1
The quick brown fox
muted · Paragraphs
7.36:1 · 9.55:1
The quick brown fox
subtle · Metadata, secondary lines
5.74:1 · 7.39:1
The quick brown fox
faint · This site only — quietest tier
5.74:1 · 5.01:1
Colour
Gray
1
2
3
4
5
6
7
8
9
10
Red
1
2
3
4
5
6
7
8
9
10
Orange
1
2
3
4
5
6
7
8
9
10
Amber
1
2
3
4
5
6
7
8
9
10
Green
1
2
3
4
5
6
7
8
9
10
Teal
1
2
3
4
5
6
7
8
9
10
Cyan
1
2
3
4
5
6
7
8
9
10
Blue
1
2
3
4
5
6
7
8
9
10
Purple
1
2
3
4
5
6
7
8
9
10
Pink
1
2
3
4
5
6
7
8
9
10
- 1
- bg
- 2
- bg-subtle
- 3
- fill
- 4
- fill-hover
- 5
- fill-active
- 6
- border
- 7
- border-strong
- 8
- solid
- 9
- text
- 10
- text-strong
Every colour on this site is one of these, asked for by role — the text step for coloured type, the solid for a dot beside its label, the fill and border for a tinted panel. Nothing asks for a step number.
Type
type-display
Production software
type-title
Production software, end to end
type-heading
A heading inside a page
type-subheading
A subheading, or a list title
type-lead
The paragraph that opens a page and says why it exists.
type-body
Body text for interface copy, at fourteen pixels.
type-caption
A caption under something it describes.
type-label
Signal · scanned
type-label-sm
Signal · scanned
type-label-xs
Signal · scanned
Space
inset
Inside a control
gutter
Between things in a group
stack
Between groups
section
Between regions of a page
This site runs Minima’s comfortable density — 10, 20, 40, 80 — the ladder meant for a page that is read rather than operated.
Depth
canvas
raised
modal
Components
Button
Status
A tone is a state, never a category.