Clear space = x, where x is the diameter of the dot.
160 PX — LOCKUP
96 PX — COMPACT
24 PX — SYMBOL
Below these sizes the dot closes up and the arc loses its curve. Use the symbol alone rather than shrinking the lockup further.
02 / COLOUR
Colour
Warm monochrome — ivory #FFF9F2 anchors both modes
SURFACES — SECTIONS ARE THE EXTREME, THE GROUND IS ONE STEP IN
INK
ACTION
DATA SCALE
STATE — SIGNAL ONLY, NEVER DECORATION
STATE AS TYPE — SAME HUE, DARKENED UNTIL IT READS
The three above are picked to read as marks. Set as small type on the ivory they fall
short — the green measures 2.66:1 against the page, where 4.5:1 is the floor. These are
the same hues darkened until they clear it on every ground, including each badge's own
tint. A badge, a delta, an error line takes these; anything that draws keeps
the original. In dark mode the originals already clear 8:1, so there the two are identical.
GRADIENTS — DATA FILLS ONLY
WARM — PRIMARY SERIES
Ink fading into the ground, so the leading curve always sits on top.
COOL — SECONDARY SERIES
The only cool tone in the system. Deep petrol, never saturated enough to read as blue at a glance.
WASH — NEUTRAL LIFT
Grid columns and specimen grounds. Never a card or a section.
RULES
03 / TYPOGRAPHY
Typography
Geist + Geist Mono — two faces, nothing else
Aa
Geist
HEADINGS AND BODY
300 · 400 · 500 · 600 · 700
The quick brown fox jumps over the lazy dog 0123456789
Max content width 1400 px · side margin 100 px · gutter 24 px
SPACING RHYTHM
$space-1 … $space-9 · every step a multiple of 4 px
TEXTURES AND SURFACES
45° hatch, 10 px pitch. True token $hatch.
Dot grid, 18 px. Page margins.
Construction grid, nodes 5–13 px.
0
Corner radius = 0. No exceptions.
DEPTH — SECTIONS SIT BELOW THE GROUND, NOT ABOVE IT
$PAPER — GROUND
$SURFACE — CARD, SECTION
$SURFACE-SUNK
Toolbars, code blocks, search fields. Never darker than the card it sits in.
Each step down the stack is roughly four per cent apart. The steps are deliberately small — a section should read as a cut into one plane, not as a card floating above a lighter page.