Foundations
Iconography
One set, one weight, two sizes. Phosphor bold, 16px with a 1.5px line, coloured like the text beside it.
Foundation 05
Iconography
One set, one weight, two sizes. Phosphor bold, 16px with a 1.5px line, coloured like the text beside it.
Role
Rule
Sample
Use
Set and weight
Icon set
Phosphor only
Reuse an existing glyph before drawing one
Weight
Bold, 1.5px at 16px
Set once in IconContext. No per-icon weight props.
Size and colour
Default size
16px · size-4
Add job
Nav, buttons, menus, cells. Matches 14 / 20 text.
Small size
12px · size-3
Stage
Chevrons, pills, field messages, secondary actions. No 14px icons.
Larger icons
16px on a 32px tile
Empty states, connections, onboarding. Never a bare 20 or 24px icon.
Colour
The label's colour
Standalone icons use color.icon.subtle. Green only on the primary button.
Labels
aria-label plus a tooltip
On icon-only buttons. Icons next to words are aria-hidden.
Rules
1. Phosphor bold is the default in one IconContext provider. Keep weight="fill" where a filled state means something.
2. Two sizes: 16px and 12px. Anything larger is a 16px icon on a 32px tile.
3. Icons take the colour of their label. Icon-only buttons get an aria-label and a tooltip.
Motion
Short and functional, copied from the app's code. Six durations, three curves, ten shared patterns that every component names, and a few signature motions on their own component pages.
Layout and scaffold
The layer between tokens and components. Tailwind with a spacing lint for primitives, and one app shell every page sits in.