Additional token categories: sizes, z-index, aspect ratios, gradients, media queries, plus two cross-cutting patterns (fluid sizing, private props) and a selection cheat sheet.
--size-*Used for padding, margin, gap, and fixed dimensions. Full range: --size-000 (−0.5 rem) through --size-15 (30 rem).
Also available: --size-fluid-1..--size-fluid-10 (viewport-scaling clamp() values),
--size-content-1..3 (20 ch / 45 ch / 60 ch — readable line lengths),
and --size-px-* for static pixel variants.
Guideline: fluid for outer container padding, static for internal component spacing.
Use --size-fluid-* / --font-size-fluid-* instead of @media for values that should scale smoothly with the viewport.
--layer-1..--layer-5, --layer-important--ratio-square, --ratio-landscape, --ratio-portrait, --ratio-widescreen, --ratio-ultrawide, --ratio-golden--gradient-1..--gradient-30 (premade conic / linear / radial combinations)--xxs-only, --sm-n-above, --md-n-above, --motionOK, --touch, --mouse, --OSdark — these are @custom-media names, not custom properties, and no browser resolves them. There is no build step here to expand them, so @media (--md-n-above) parses as a condition that never matches and none of the block's rules apply. Write the condition out and keep the Open Props name in a comment, to make conversion straightforward if a build step is added later (Breakpoints lists the numeric equivalent of each name).
Use --_name (leading underscore) for values that outer context should be able to override.
See Conventions for the full convention.
| Need | Reach for |
|---|---|
| Component padding | --size-3 to --size-5 — except a form field's inset, which is --size-2 on both axes (Forms § Anatomy) |
| Outer page padding | --size-fluid-3 |
| Body text | --font-size-2 + --font-weight-4 |
| Headline | --font-size-fluid-2..3 + --font-weight-7 |
| Card background (light) | --surface-2 (alias over --stone-1) |
| Body text color | --text-1 (alias) |
| Subtle border | --border-color (alias over --stone-4) |
| Floating panel background | --surface-overlay (Elevation § Overlay surfaces) |
| Resting shadow | --shadow-1 |
| Hover lift, and any anchored overlay | --shadow-3 |
| Modal shadow | --shadow-5 (what ui-dialog ships) |
| All shadows look too faint | --shadow-strength in /index.css — the shared shadow-strength setting |
| Card corner | --radius-3 |
| Colour transition on a small control | .12s + --ease-1 — the duration is a literal, only the curve is a token (Motion § Durations) |
| Alpha over solid color | color-mix(in oklch, var(--brand) 10%, transparent) |
16px or #3b82f6. A transition duration uses a literal because no duration token is loaded. Choose a value from the short list on Motion § Durations.color-mix for alpha. Don't hand-author #rrggbb+opacity; compose with color-mix(in oklch, var(--brand) 20%, transparent). A mix with transparent measures the same in either space, but check the second color before copying the example: mixing into a near-neutral surface needs in oklab, because even a surface that looks gray can have a residual hue that produces different results across engines (Radio group § Theming).--_ private props for variants.