Design playground
The token layer, rendered. Toggle the theme in the header; everything here must hold up in both. If a new page needs something this page does not have, the token comes first.
Brand palette
Ice Blue
--ice
Ocean Blue
--ocean
Deep Blue
--deep
Mint
--mint
Charcoal
--charcoal
Semantic tokens
bg
surface
raised
line
ink
ink-soft
ink-faint
accent
confirmed
provisional
Type scale
Display, Inter semibold
Heading, Inter semibold
Body, Source Sans 3. Long-form reading happens at this size with relaxed leading, calm and unhurried, like the rest of the platform.
Secondary, Source Sans 3 in soft ink.
Data and code, JetBrains Mono: 1024 nodes, 42 edges
Point states (the honest economy)
confirmedprovisionalNever silently downgraded; the dashed ring always means a teacher has not reviewed it yet.
Elevation
elev-1
elev-2
elev-3
Motion (three durations, two easings)
All motion collapses under prefers-reduced-motion; check with your OS setting.