Design System
Tokens, live.
Material-Web-style discipline: components consume --sys-color-* / --sys-type-* roles only. Flip the theme (top right): every swatch below re-resolves from the[data-theme] attribute. No JavaScript owns color.
Color roles
surface
on: on-surface
surface-container
on: on-surface
surface-container-high
on: on-surface
primary
on: on-primary
primary-container
on: on-surface
error-container
on: on-error-container
on-surface
on-surface-variant
on-surface-muted
outline
outline-variant
positive
error
Typescale
Display
.type-display · Hero name only
Headline
.type-headline · Section h2
Title
.type-title · Card h3
Body
.type-body · Copy, max-w-prose
Label
.type-label · Eyebrows, meta, chips
Motion
| token | value | use |
|---|---|---|
| --sys-motion-duration-short | 150ms | hover states |
| --sys-motion-duration-medium | 300ms | reveals, toggles |
| --sys-motion-duration-long | 500ms | theme flip, page-level |
| --sys-motion-ease-emphasized | cubic-bezier(0.16, 1, 0.3, 1) | everything user-facing |
Shape & spacing
radius-sm
radius-md
radius-lg
radius-full
Spacing sits on a 4px grid; sections use one shared shell (Section.astro) so rhythm never drifts.