Design tokens

Mint scale, semantic layer, light + dark.

canvas

canvas-1page base
canvas-2

surface

surface-1
surface-2
surface-3

edge

edge-1
edge-2
edge-3

solid

solid-1
solid-2

content

content-1 — primary, highest-contrast body text.

content-2 — secondary, lower-contrast supporting text.

solid-1 + content-inversesolid-2 + content-inverse

radii

rounded-xs4px
rounded-sm6px
rounded-md8px
rounded-lg12px
rounded-xl16px
rounded-2xl24px

elevation

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

materials

inset panel
material-canvas
resting
material-base
chips
material-small
tooltip
material-tooltip
card
material-medium
panel
material-large
dropdown
material-menu
dialog
material-modal

motion

Class-based presets — they run on mount. The `stagger` utility fans them out via --stagger-index.

fade
animate-subtle-in
fade + lift
animate-subtle-rise
fade + scale
animate-subtle-scale

typography

heading

Heading 64heading-64
Heading 48heading-48
Heading 32 semiboldheading-32-semibold
Heading 24heading-24
Heading 20 mediumheading-20-medium
Heading 16heading-16

body

Body 24 — the quick brown foxbody-24
Body 16 — the quick brown foxbody-16
Body 16 medium — the quick brown foxbody-16-medium
Body 14 — the quick brown foxbody-14
Body 13 — the quick brown foxbody-13
Body 16 mono — the quick brown foxbody-16-mono

label

Label 32 semiboldlabel-32-semibold
Label 16label-16
Label 14 mediumlabel-14-medium
Label 14 mono mediumlabel-14-mono-medium

button

Button 16 mediumbutton-16-medium
Button 14 mediumbutton-14-medium
Button 12 mono mediumbutton-12-mono-medium