Design system
Primitive, semantic and component tokens, and the primitives built on them.
- 163
- Color tokens
- 3
- Tiers
- 20
- Primitives
Tiers
Primitives hold raw values, semantic tokens give them a job, and component CSS only names the job.
72primitives6 ramps × 1232UI semanticbg, fg, border54intentbrand, accent, status9component rulesa sample
Tier 1 · Primitives
blueh268
secondaryh8
tertiaryh2
greyh280
greenh150
redh18
achromatic
Tier 2 · UI semantic
Background
Foreground
On solid
Border
Scrollbar
Tier 3 · Intent
Brand
Brand depth
Brand border
Accent gradient
Accent
Destructive
Success
Error
Component CSS
- Buttonprimary fill
- Buttonemphasize fill
- Buttonkeyboard focus ring
- Inputfocus glow
- Inputresting border
- Toggleon track
- Badgesuccess text
- ErrorBannerfill
- Modaldestructive glow
Chain
- Component · Button.module.css
.root[data-type="primary"] { background: var(--color-brand-solid); }
Color
Six OKLCH ramps of twelve steps, where each step number means the same role in every hue.
72 primitives
100200300400500600700800900100011001200app bgsubtle bgelementhoveractiveborderssolidsolid hovertexttext hiblueh268 · brand secondaryh8 · accent, light end tertiaryh2 · accent, deep end greyh280 · neutral greenh150 · success redh18 · destructive, error
P3 outside sRGB
Intent × role
brandaccentdestructivesuccesserror
-subtle……………
-element……………
-hover……………
-solid……………
-solid-hover……………
-text……………
UI semantic
Background
- bg-app…
- bg-subtle…
- bg-element…
- bg-hover…
- bg-active…
- bg-inverse…
Foreground
- fg-default…
- fg-secondary…
- fg-muted…
- fg-subtle…
Border
- border-faint…
- border-subtle…
- border-default…
- border-strong…
- border-active…
On solid
- fg-on-brand…
- fg-on-accent…
- fg-on-destructive…
- fg-on-success…
Lightness per step
Each ramp on its own curve.
Type
Text uses a named style that owns size, weight, leading and tracking; an instance may only change its color.
fluid, clamp()
Frame width
1280px.type-display-xl…
Learn it out loud
.type-heading…
How it works
.type-title…
Ask in your own words
.type-body…
Your teacher explains each step, then checks what stuck.
.type-body-sm…
Works for homework, exam prep and open questions.
.type-prose…
Long-form reading copy gets roomier leading and looser tracking than UI body text.
.type-lead…
Built for students who learn by talking
.type-label…
Calculus II
.type-meta…
.type-meta-sm…
.type-tag…
Voice first
.type-handle…
@maya.studies
.type-location…
Portland, OR
.type-button-xs…
.type-button-sm…
.type-button-md…
.type-button-lg…
Space
Spacing runs on a 2px base, and radius and elevation are named for what an element is.
Spacing · 2px base
--space-N = N × 2pxspace-px…
space-1…
space-2…
space-3…
space-4…
space-5…
space-6…
space-7…
space-8…
space-9…
space-10…
space-12…
space-14…
space-16…
space-18…
space-20…
space-24…
space-32…
space-36…
space-40…
space-48…
space-72…
space-96…
Radius · with a usage rule
only buttons and round things are pillsradius-none…
radius-xs…
radius-sm…
radius-md…menus
radius-lg…option cards, menu rows
radius-xl…inputs, select, control shell
radius-2xl…cards, modals
radius-full…buttons, chips, avatars
Named by role
shadow-raisedchrome, flat cards
shadow-carda surface that floats
shadow-overlaymenus, popovers
shadow-modaltakes over the screen
shadow-modal-branddialog, brand intent
shadow-modal-destructivedialog, destructive intent
Motion
Four easings named by job, a 400ms ceiling for anything a person triggers, and one press scale.
Four curves, named by job
--duration-slower × 4--ease-out
…the everyday decelerate; hovers, fades, most entrances--ease-out-attention
…snappier, for things meant to be noticed arriving--ease-in-out
…only for continuous sweeps, never an entrance--ease-spring
…a reserved overshoot; do not sprinkle bounceOne-shot and loop
--duration-loop-spinthe Spinner…
--duration-loop-pulsesoft pulses, the writing caret…
--duration-loop-sweepthe indeterminate progress bar…
Press
--press-scale: …Primitives
Twenty components, every state rendered from the same CSS the product ships.
Types × states
resthoverfocus-visibleactive (press)loadingdisabled
primary
secondary
destructive
emphasize
ghost
neutral
white
secondary-on-accent
Sizes and icon-only
xs
sm
default
lg
xlg
neutral · sm
ghost · sm
ghost · xs
secondary
primary · lg
with icon
Playground
size
States
default
filled
hover
focus
disabled
read-only
error
error · focus
Field wiring
Enter a full email address, like maya@example.com.
- label[for]
- …
- input#id
- …
- aria-describedby
- …
- message#id · role
- … · …
Multiline
Trigger states
placeholder
filled
hover
focus
open
error
disabled
Listbox and option states
- Undergraduate
- Graduate
- High school
- Working professional
- Unavailable for now
Keyboard model
- open
- false
- aria-activedescendant
- none
- value
- none
Pick an inquiry type.
- ↓open, or next enabled option (no wrap)
- ↑open, or previous enabled option
- Homefirst enabled option
- Endlast enabled option
- Enteropen, or commit the active option
- Spacesame as Enter
- Escclose, focus stays on the trigger
- Tabclose and move on
- a to ztypeahead, 500ms buffer
Menu
Modal
tone default · brand glow
Rename lesson
tone destructive · red glow
Delete this lesson?
This will hide it from your history. You can't undo this from the app.
SegmentedControl
rest · hover · selected
focus-visible
live · Tutor mode
Toggle
off
on
hover
focus
disabled off
disabled on
live
Slider
ControlShell
1.2×
Subtitles
Badge
neutralneutral
successPaid
brandbrand
accentaccent
destructivedestructive
Spinner
ErrorBanner
Collapse and AnimateHeight
Attachmentschapter-3-notes.pdf · problem-set.pdf
Practice set 1Practice set 2
BackButton and volume
rest
hover
focus-visible
Volume
40Also TextField, Textarea, SelectField, Field, FieldMessage, Icon
Built
Plain CSS custom properties and CSS Modules, with the rules written beside the tokens they govern.
--color-blue-900: oklch(49% 0.19 268); /* primitive */
--color-brand-solid: var(--color-blue-900); /* intent */
.root[data-type="primary"] { /* component */
background: var(--color-brand-solid);
}