These live in app/globals.css under @theme.
Color
- bg#F6F7F9
- surface#FFFFFF
- ink#171A21
- ink-muted#5A6272
- ink-faint#8A93A5
- line#E3E6EC
- deep#101625
- accent#2B5CE6
- accent-press#1B3FA8
- accent-soft#EDF2FE
- correct#0E7A57
- correct-ink#0B5C42
- correct-soft#E9F6F0
- incorrect#B45A16
- incorrect-ink#8A4410
- incorrect-soft#FDF3EA
Type scale
- displayAa52 / 1.05 / −0.035em
- h1Aa40 / 1.1 / −0.025em
- h2Aa32 / 1.2 / −0.025em
- h3Aa25 / 1.3 / −0.02em
- titleAa20 / 1.35 / −0.015em
- body-lgAa17 / 1.6
- bodyAa15 / 1.5
- labelAa13 / 1.4
- mono-xsAa11 / 1.4 / 0.08em caps
Spacing
- space-14px
- space-28px
- space-312px
- space-416px
- space-624px
- space-832px
- space-1248px
- space-1664px
Type family
- sans
- Instrument Sans
- mono
- IBM Plex 0123
- math
- f(x) = x² ln x
Radius & elevation
sm8px
DEFAULT10px
md12px
lg14px
xl18px
full999px
raisedcards, options
overlayfloating
borderprefer this
Components
Eyebrow
What happened here
Mastered
Session bar: answered segments take their outcome, the current one is ink
Ring: correct, wrong, not yet, from the top
8/18
Weak spot2 correct · 1 wrong · 2 to go
Concept chips: labels, never buttons
- Chain rule
- Polynomial
- Exponential
idle
selected
correctCorrect answer
incorrectYour answer, incorrect
muted
Notice: one line where a screen would be
Finding your next question…