Design system

Field contracts and worked examples for the design system blocks — converted at build time from the repo's authoring-skill reference. Every example body is YAML; in a real doc the fence language is the block type (for example sequence … ). Schemas are strict — unknown fields are rejected. See the field contract for the at-a-glance shape of all 77 blocks, or the block catalog for live previews.

Design system

palette — color-token swatches

A responsive card grid (cols 2-6, default 4): each card is a swatch filled with value, the hex shown in mono inside it (auto-contrast — dark text on light swatches, white on dark; on overrides), then the token name and usage. Always quote hex values ("#0E54A1") — an unquoted # starts a YAML comment. Invalid colors fall back to a neutral gray swatch. Use palette for color tokens; use stats for KPI numbers.

typescale — a live type specimen

One row per style: a meta column (name, NNpx / weight NNN, note) and the sample text rendered live at that size / weight / lineHeight (default 1.3) in the chosen font (display | body | mono, default body). Sizes over 64px render clamped at 64 but the label keeps the true size. size, weight, and lineHeight are plain numbers. Use typescale for type ramps; use table for token tables with no visual payoff.

dodont — do / don't guideline cards

Two cards side by side — DO (green band, ✓) and DON'T (red band, ✕), one column on mobile. Both dos and donts are required. An item's optional example renders beneath it as a mono chip — great for label copy or code. Use dodont for usage guidelines; use proscons to weigh a decision and callout for a single warning.

inventory — component / feature status board

Compact hairline-separated rows, scannable like a status page: name (+ tiny mono tag chip), an optional note beneath, and a right-aligned color-coded status chip — stable green · beta blue · experimental purple · deprecated red · planned gray. Use inventory for component / feature maturity; use statustable for task work and changelog for shipped history.

UI mockups

wireframe — low-fi screen mockups (desktop / browser / phone)

screens lay out left-to-right; each picks a device frame (desktop / browser / phone) and stacks elements top-to-bottom. device: browser shows an address bar (url); phone adds a notch + home indicator. title is the window/status-bar text, label is the caption under the frame.

Element type is one of: header · subheader · text · button · input · search · image · avatar · card · list · nav · tabs · divider · badge · toggle · spacer. rows repeats stack-like elements (list / card) or sizes text / spacer. nav / tabs read their items from a comma-separated label (quote it). align is l | c | r; tone is accent | muted | danger (colours buttons, badges, toggles). Keep it low-fidelity — it's a wireframe, not a comp.