Scale tokens

The non-color primitives: type, spacing, radius, shadow, motion, and layering. They live in tokens/scale.css inside @layer tokens and don't change between themes. Consume them everywhere instead of hardcoding pixel values.

Type scale

A modular ramp from --text-2xs (11px) to --text-8xl (128px). Values are in rem; the pixel note is the value at a 16px root.

Token	rem	px
--text-2xs	0.6875	11
--text-xs	0.75	12
--text-sm	0.875	14
--text-base	1	16
--text-md	1.125	18
--text-lg	1.25	20
--text-xl	1.5	24
--text-2xl	1.875	30
--text-3xl	2.25	36
--text-4xl	3	48
--text-5xl	3.75	60
--text-6xl	4.5	72
--text-7xl	6	96
--text-8xl	8	128

Weights

Token	Value
--weight-thin	100
--weight-light	300
--weight-regular	400
--weight-medium	500
--weight-semibold	600
--weight-bold	700
--weight-black	900

Leading and tracking

Line height:

Token	Value
--leading-none	1
--leading-tight	1.15
--leading-snug	1.3
--leading-body	1.5
--leading-relaxed	1.65
--leading-loose	1.85

Letter spacing:

Token	Value
--tracking-tighter	-0.04em
--tracking-tight	-0.02em
--tracking-snug	-0.01em
--tracking-normal	0
--tracking-wide	0.02em
--tracking-wider	0.06em
--tracking-widest	0.14em

Font families

• --font-sans: the system UI sans stack; the default for the whole app.
• --font-mono: the system monospace stack; used by code, <pre>, the terminal component, and inline CLI helpers.
• --font-serif: a system serif stack. It is defined and exposed as the .font-serif utility, but nothing in the package consumes it by default. It's there for apps that want a serif; point a class at it to use it.

Spacing

A 4-based scale from --space-0 to --space-64, with fractional half-steps for tight work (--space-0-5, --space-1-5, --space-2-5, --space-3-5) and a hairline --space-px (1px). --space-4 is 1rem (16px), the base rhythm unit.

--space-0  --space-px  --space-0-5  --space-1  --space-1-5  --space-2  --space-2-5
--space-3  --space-3-5  --space-4  --space-5  --space-6  --space-7  --space-8
--space-9  --space-10  --space-11  --space-12  --space-14  --space-16  --space-20
--space-24  --space-28  --space-32  --space-40  --space-48  --space-56  --space-64

Radius

A scale plus semantic role slots. The scale:

Token	Value
--radius-none	0
--radius-xs	2px
--radius-sm	4px
--radius-md	6px
--radius-lg	8px
--radius-xl	12px
--radius-2xl	16px
--radius-3xl	24px
--radius-4xl	32px
--radius-full	9999px

The role slots (defined in the theme) map those onto component intents so the radius is adjustable in one place. See component tokens.

Shadow

Elevation ramp: --shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl, plus --shadow-inner. Tuned on a cool navy tint to match the neutral ramp.

Motion

Durations:

Token	Value
--duration-instant	80ms
--duration-fast	120ms
--duration-normal	180ms
--duration-slow	280ms
--duration-slower	500ms

Easings: --ease-linear, --ease-out, --ease-in, --ease-in-out, --ease-spring.

The theme also ships ready-made transition presets (--transition-colors, --transition-shadow, --transition-transform, --transition-opacity) used by components and available as .transition-* utilities.

Reduced motion. themes/default.css ships a global @media (prefers-reduced-motion: reduce) block that near-zeroes all animation and transition durations and disables smooth scroll. You get this for free; you don't need to guard your own transitions unless they're essential.

Layering (z-index)

A named stack so overlapping UI stays consistent:

Token	Value
--z-base	0
--z-raised	10
--z-sticky	100
--z-fixed	200
--z-overlay	1000
--z-modal	1010
--z-popover	1020
--z-dropdown	1030
--z-tooltip	1040
--z-toast	1050
--z-top	max int

Opacity

Token	Value
--opacity-disabled	0.55
--opacity-muted	0.7
--opacity-overlay	0.5

Breakpoints

Reference values only. CSS custom properties can't be used inside a media query, so these document the intended widths; the @media rules across the package hardcode the same rem values.

Token	Value
--bp-sm	40rem
--bp-md	48rem
--bp-lg	64rem
--bp-xl	80rem
--bp-2xl	96rem

The package does not apply one uniform breakpoint everywhere. The breakpoints that actually fire are mixed by design: the two-column form grid collapses at 40rem, the app sidebar collapses at 48rem, and the responsive utility variants (md:, lg:) key on 48rem and 64rem. Match the breakpoint to the thing you're making responsive rather than assuming a single system.

Container widths

Max-width tokens for constraining content, --container-xs … --container-7xl (see elements man style/reference/scale for every value), plus role widths --container-prose (65ch), --container-shell (72rem), --container-wide (80rem), and --container-padding (the default gutter, --space-8). These back the .page-shell variants and the .max-w-* utilities.