The primitives of the system: colour, type, space, shape and the few motifs that carry the retrofuturist line. Every value on this page is read live from src/shared/css/tokens.css, which is generated from the DTCG files in src/shared/tokens/.
Version
0.1 · draft
Mode
light
Format
W3C DTCG 2025.10
Tokens
55
01Color
Material before colour. A cool neutral ramp does almost all the work; one orange marks the single thing that matters and stays under 5% of the area.
Primitives
neutral.0
--color-neutral-0
Panels
neutral.100
--color-neutral-100
Canvas
neutral.200
--color-neutral-200
Data only
neutral.300
--color-neutral-300
Lines
neutral.400
--color-neutral-400
Data only
neutral.500
--color-neutral-500
Icons, placeholders
neutral.600
--color-neutral-600
Secondary ink
neutral.900
--color-neutral-900
Ink, inverse surface
orange.500
--color-orange-500
Accent fill
orange.700
--color-orange-700
Accent as text
Semantic roles · what pieces actually use
Role
Variable
Points to
Use
--surface-canvas
neutral.100
Page background. Solid, no grid.
--surface-panel
neutral.0
Panels, sidebar. The second and last surface level.
--surface-raised
white
Default button background. A control, not a surface level.
--surface-inverse
neutral.900
Active nav, primary button, solid tag.
--line
neutral.300
Every separator and border.
Aa
--ink
neutral.900
Primary text.
Aa
--ink-muted
neutral.600
Labels, metadata, secondary text.
Aa
--ink-inverse
neutral.0
Text on the inverse surface.
Aa
--accent · --accent-on
orange.500 · neutral.900
Overdue, conflict, urgent. Dark text on it, never white.
Aa
--accent-ink
orange.700
Accent when it has to be text.
Aa
--success · --success-on
green.500 · neutral.900
Done, saved, sent. Dark text on it, never white.
Aa
--success-ink
green.700
Success when it has to be text.
--color-neutral-200 · 400 · 600 · 900
primitives, used directly
Charts: low to high in grey. Accent marks the exception. No semantic layer: it would only rename the neutrals.
02Contrast
Measured with the WCAG 2.1 formula, never estimated. AA asks 4.5:1 for text and 3:1 for large text and graphics.
Pair
Text on surface
Ratio
Result
Aa
ink / panel
AA
Aa
ink / canvas
AA
Aa
ink-muted / panel
AA
Aa
ink-muted / canvas
AA
Aa
accent-ink / panel
AA
Aa
accent-ink / canvas
AA
Aa
accent-on / accent
AA
Aa
success-ink / canvas
AA
Aa
success-on / success
AA
Aa
ink-inverse / inverse
AA
Aa
panel / accent
Don't
Aa
accent / panel
Graphics only
03Type
Two voices. The grotesque speaks text; the mono speaks for the instrument: labels, numbers, dates, sources, navigation.
Families
--font-family-sans
Geist
Aa Bb Cc Gg Rr 0123456789 & ? !
LightRegularMediumSemibold
Titles, body, task text. Open substitute for Teenage Engineering's proprietary grotesque.
--font-family-mono
Geist Mono
EP–133 2.0 09:45 R$ 5.000
LightRegularMedium
Labels, numbers, dates, sources. Tabular figures line columns up.
Text styles · .eis-type-*
.eis-type-displaysans · 56 · 300 · −1.5
Work
.eis-type-headingsans · 24 · 400
Today's agenda
.eis-type-leadsans · 18 · 400 · 1.45
A manual for a machine somebody made too beautiful.
.eis-type-bodysans · 14 · 400 · 1.45
Get API access approved with the new payment provider before the release.
.eis-type-metricmono · 48 · 300 · −1.5
84
.eis-type-monomono · 12 · 400
Sprint review 21.10 · created 2 days ago
.eis-type-labelmono · 11 · 500 · +0.88 · upper
Open task age
Size scale · --font-size-*
100 · 10pxRetrofuturist minimalism
200 · 12pxRetrofuturist minimalism
300 · 14pxRetrofuturist minimalism
400 · 18pxRetrofuturist minimalism
500 · 24pxRetrofuturist minimalism
600 · 36pxRetrofuturist
700 · 48pxRetrofuturist
800 · 56pxRetrofuturist
04Space
Four values, each double the previous. They cover margin, padding, gap and offsets. Each one has a place, so it isn't picked at random.
--space-1008px
Inside a component: icon to label, tag padding.
--space-20016px
Between siblings: rows, list items, panel padding.
--space-30032px
Between blocks: panels, groups.
--space-40064px
Between sections and page gutters.
05Shape
One line weight. Small radii. No shadows: panels separate by surface tone or a hairline.
--radius-1007px · controls
--radius-20010px · panels
--radius-30015px · large surfaces
--radius-40020px · sheets
--radius-fullpills, circles
--border-width-1001px · the only weight
06Motifs
Built only from the tokens above. They come from the Teenage Engineering references: panel silkscreen, key matrices, hatched bands.
UpdateBlock label
Solid rectangle, knocked-out mono text. For graphic pieces (posters, slides, covers). In UI, use a chip.
Hatch
Diagonal line at 135°. Marks what is not yours: personal blocks, unavailable.
Cell matrix
Data as a grid of equal squares, like keys on a device.
Hairline
Separate with a 1px line before reaching for a box.
07Rules
Budgets, not adjectives. The full list lives in docs/visual-guidance/visual-guidance.md.
Accent ≤ 5% of the area
It marks a state, never decorates. One accent per piece.
Two surface levels
Canvas and panel. A third level means the layout needs a line, not a box.
Mono for numbers and labels
Sans for text. Labels are always uppercase and tracked.