Foundations
The token layer the components are built on — rendered from the same tokens, in sync with Figma. Typography first; Color, Spacing, Elevation, and Motion will land here too.
Typeface
Two families: Quantico for display/headings (the brand's technical feel), Instrument Sans for everything else.
Aa
SMART tag
Quantico · Display / headings · font-display
Aa
SMART tag ridership
Instrument Sans · UI / body · default
Type scale
Nine UI-relevant steps (the token scale extends to 9xl/128px for display). Each is a variable, so components reference the token, never a raw px.
size/2xs
10px
SMART tag ridership
size/xs
12px
SMART tag ridership
size/sm
14px
SMART tag ridership
size/base
16px
SMART tag ridership
size/lg
18px
SMART tag ridership
size/xl
20px
SMART tag ridership
size/2xl
24px
SMART tag ridership
size/3xl
30px
SMART tag ridership
size/4xl
36px
SMART tag ridership
Weights
Instrument Sans ships 400–700 (the token scale defines thin 100 → black 900 for flexibility). Body uses Regular; Labels/buttons use Medium; SemiBold for emphasis; Bold for Quantico headings.
weight/regular
400
SMART tag
weight/medium
500
SMART tag
weight/semibold
600
SMART tag
weight/bold
700
SMART tag
Text styles
The 34 named styles that bundle family + size + line-height — identical to the Figma text styles. Display & Heading are Quantico (Bold + Regular weights); Body & Label are Instrument Sans. Apply a role rather than picking properties à la carte.
Display · Quantico · Bold
Display · Quantico · Regular
Heading · Quantico · Bold
Heading · Quantico · Regular
Body · Instrument Sans · Regular
Label · Instrument Sans · Medium
Color
Semantic roles built on the primitive palette — components consume these, never raw hex. Dark-only theme.
Surfaces
bg/sunken
bg/canvas
bg/subtle
bg/surface
bg/raised
bg/elevated
bg/overlay
bg/muted
Foreground
fg/default
fg/muted
fg/subtle
fg/disabled
fg/placeholder
fg/link
fg/on-brand
Border
border/subtle
border/default
border/strong
border/interactive
Brand & status
brand/default
brand/hover
brand/subtle
status/success
status/warning
status/danger
status/info
Route colors
25 categorical colors — one per route in a school's route group. Not from the Tailwind palette: authored in OKLCH as stratified hue families with light/dark variants (orange↔brown, green↔forest, blue↔navy, red↔maroon…) so each is nameable and distinct, then baked to sRGB hex for CSS, MapLibre, and Figma. A student's map dot takes its route's color.
route/10
#9be03c
route/11
#21ae4c
route/12
#09672e
route/13
#66e6ba
route/14
#14938d
route/15
#0fcbdb
route/16
#40b8ee
route/17
#1e78e1
route/18
#284e99
route/19
#685cc6
route/20
#ae8ff7
route/21
#ccc6ff
route/22
#984cbe
route/23
#ca48bd
route/24
#fe91cf
route/25
#e75596
route/01
#ea3d35
route/02
#93323c
route/03
#f08d6a
route/04
#e97f00
route/05
#86481e
route/06
#e3a924
route/07
#a49157
route/08
#f0df3e
route/09
#6f7911
Spacing
A 4px-based scale used for padding, gaps, and layout. Components reference the named token, never a raw px.
Radius
Corner radii. Controls use sm; cards/menus use md; pills and avatars use full.
radius/sm
2px
radius/md
4px
radius/lg
6px
radius/xl
8px
radius/2xl
12px
radius/full
full
Elevation
On a dark theme, surface lightness (see Surfaces) is the primary lift; shadows are a quiet secondary cue, strongest on floating overlays.
elevation/none
elevation/sm
elevation/md
elevation/lg
Motion
How things move. Pair a duration with an easing — snappy (75ms) for controls, spring for the switch toggle.
Duration
Easing
Hover a card — the box rides that exact curve, and the graph shows its shape.
linear
linearConstant speed — progress bars, spinners, anything mechanical. Avoid for moving UI elements.
standard
cubic-bezier(0.42, 0, 0.58, 1)Balanced ease-in-out — the default for elements moving within the screen.
accelerate
cubic-bezier(0.42, 0, 1, 1)Ease-in, for things LEAVING — dismissals and exits. Slow start, fast finish.
decelerate
cubic-bezier(0, 0, 0.58, 1)Ease-out, for things ENTERING — menus, popovers. Fast start, gentle landing.
emphasized
cubic-bezier(0.83, 0, 0.17, 1)Dramatic ease-in-out for important or large transitions — very slow ends, quick middle.
spring
cubic-bezier(0.34, 1.56, 0.64, 1)Overshoot — tactile, skeuomorphic motion (the switch thumb). Use sparingly.