Token Reference

All design decisions live in --cajon-* CSS custom properties. Components never hard-code values — they reference these tokens, so re-theming is a single source change. Swatches below reflect the active theme (use the switcher on the Theming page).

Brand scale

Semantic

Surfaces & text

Spacing

Built on an 8px grid: --cajon-space-1 (4px) through --cajon-space-30 (120px).

Radius

--cajon-radius-sm (4px, buttons) · --cajon-radius-md (8px, cards/inputs) · --cajon-radius-lg (12px) · --cajon-radius-xl (16px) · --cajon-radius-pill.

Typography

Font families: --cajon-font-sans (UI), --cajon-font-display (headings), --cajon-font-body (long-form), --cajon-font-serif (editorial/long-form serif, opt in via <Typography font="serif">), and --cajon-font-mono (code). Each theme re-points these, so text re-themes automatically. The brand and default families are self-hosted by the package (no runtime Google Fonts dependency); mood-theme fonts load from the CDN — see Installation → Fonts.

Every semantic role composes a complete text style from five per-role tokens — --cajon-type-{role}-size, -line (line height), -weight, -tracking (letter spacing), and -font (one of the three families above). The thirteen roles run from display (56px) down to caption / overline (12px):

Consume these through the Typography component or the .cajon-text--{role} classes — don't hand-author font rules.

Elevation

Subtle card shadows (--cajon-shadow-card) through premium elevations (--cajon-shadow-xs … --cajon-shadow-xl) and ambient brand glows (--cajon-glow-primary).