Nineteen reference pages covering color, type, motion, voice, a11y, and the patterns we compose from them. One shared _shared.css holds every token — pull it once, consume the roles, and every surface stays in sync. New here? Start with the front door →
Three ways in, file structure, token layers, section map, and the six house rules.
Primary lockup, brand-surface treatments, clear space, minimum sizes, and don'ts.
Start here. All three ramps, state roles, and aliases on a single reference page.
The brand violet. Used for primary actions, key surfaces, and focus states.
Warm accent paired with iris. Used for highlights, tags, and illustrations.
Cool counterweight. Used for data viz, supporting UI, and illustration accents.
Success, warning, danger, and info — role tokens with paired surface + on-color.
Surface, ink, muted, and rule tokens. The quiet layer that lets brand color breathe.
4px spacing scale (14 steps), 7 radii, 8 elevations, and motion curves.
Breakpoints, container widths, a 12-column grid, and responsive rules.
Three easings, five durations, and eight patterns. Reduced-motion aware.
Token mirror — violet-black neutrals and accents lifted to step 300.
Contrast matrix, focus styles, touch targets, and ARIA patterns.
Voice pillars, tone spectrum, error formula, and the mechanics we spell the same way.
Empty states, loading, confirmation, forms, and feedback recipes.
Buttons, inputs, cards, badges, navigation, alerts — all wired to tokens.
Categorical, sequential, diverging palettes plus six chart primitives.
Lucide outline system — 24×24 grid, 2px stroke, 40-icon starter set.
