Internal reference
Styleguide
Every colour, type role and component state in the portal. If something on a page doesn't match what's here, the page is wrong.
Colour
Accent means "you can act on this". Signal means "you have made progress here". No other colour carries meaning.
ink
#10151F
Text, headings
ink-soft
#5A6472
Secondary text
paper
#FBFAF7
Page background
surface
#FFFFFF
Cards, panels
line
#E4E2DC
Hairlines, dividers
accent
#1F5FA8
Links, active state, primary action
accent-soft
#E8EFF8
Accent backgrounds, chips
signal
#C77B2B
Progress, completion, new
Type
Display · Fraunces 500 · titles only, never below 24px
Resourcing, made legible
Body · Inter · 17px / 1.65
Utilisation is a lagging signal. By the time the number drops, the work that would have filled the gap has already gone somewhere else. The portal exists to help you read the earlier signals.
Utility · IBM Plex Mono · 12px, uppercase, 0.08em
8 min · v4.2 · Updated 12 Jun 2026
Buttons and links
Chips
Progress
The pathway spine — the one flourish
- Completed lesson
- Completed lesson
- Current lesson
- Not started
Inputs
Focus any element with Tab to see the focus ring.