The 45 rules your design system is held to.

Text pairings clear their WCAG bar

Every semantic text pairing (body, secondary, status, text-on-fill) is measured against its WCAG threshold.

WCAG 2.2 SC 1.4.3 / 1.4.6 (AA 4.5:1 · AAA 7:1)

Body text reads comfortably

The body step of the type scale is at least 16px.

Readability research (16px body floor)

Body copy breathes at 1.5

Body line-height is at least 1.5 for comfortable reading.

Readability research · WCAG 2.2 SC 1.4.12 text spacing

Weights sit on the 100 scale

Font weights are multiples of 100 between 100 and 900.

Type hierarchy convention (100-900 ramp)

Lengths sit on a 4px rhythm

Spacing and radius steps off the 4px grid are flagged with the nearest snap (optional - a deliberate off-grid value may stay).

Spatial systems (4/8pt grid) · layout consistency

UI motion lives between 80-500ms

Durations outside the range read as either imperceptible or a drag; findings carry the clamped value.

Motion perception research (~100ms floor, 500ms ceiling)

Voice and visuals marry or say why not

A deterministic read ties the philosophy's inferred direction to the visual personality archetype: married when they pull the same way, a gentle tension note when they pull apart. A nudge, never a gate.

One system, one voice - tension is a choice, never an accident

Failing pairs are repaired, not repainted

A below-bar color keeps its hue and saturation; only the lightness moves, exactly enough to cross the target.

WCAG 2.2 · same-hue lightness adjustment

A motion reference never dangles

Personality re-tunes MERGE the motion maps, and any easing a recipe still references is re-added as an alias of the standard - authorial names like a system's own easing survive every apply.

Referential integrity - re-tune, never amputate

Every creative color stays legible on the canvas

An AI-proposed brand fill (primary/accent) or text role (muted, status) that can't clear the contrast bar against the canvas is lightness-adjusted before it ever reaches a preview or the document.

WCAG 2.2 SC 1.4.3 · recipe reality (canvas-colored button text)

A guided flow never ends below AA

After creative color changes apply, one deterministic contrast pass re-lifts anything they dropped below the bar.

WCAG 2.2 · defense in depth

A light system stays light, a dark one dark

Creative output may never move canvas/surface/foreground to the opposite end - that is a different system, not an adaptation.

Identity coherence - base neutrals define the scheme

Fonts must talk to each other

Every display+body pair is judged deterministically - two competing serifs or a display face at paragraph size never reach the owner unflagged.

Classic pairing practice - contrast of classification

AI fonts come from a curated catalog

Creative font proposals may only pick from the curated catalog - every family is a real, loadable face with the weights the system requests; hallucinated families are dropped.

Quality floor · guaranteed loading

Body text never wears a display cut

Creative output may not set a Tight/Condensed/Compressed family as the body face - long-form legibility wins.

Typography practice - Tight/Condensed cuts are headline faces

Set expectations at the door

Pasted source is read deterministically before the AI runs: SVGs route to the icon library, whole pages to Guides, and data-driven archetypes are flagged as skin-only - so a plausible-but-partial result reads as a known boundary, never as broken.

A recipe is a skin for one component - say what won't fit before generating

A generated variant never ships unreadable

Every AI-generated recipe is repaired deterministically before it reaches the owner: each base/variant's effective text-on-background pair is resolved to hex, and any pair below AA gets its text re-anchored on the semantic role that actually reads - the classic ghost-variant white-on-white can't survive the pipeline.

Beauty from the model, readability from the ruler

The interview asks; only the writing is AI

The philosophy conversation is a scripted interview - the questions never hallucinate and always arrive in the right order; the answers compose the product context deterministically, and a single batched AI call writes the document.

Deterministic questions, one deliberate AI write

Hover always adds definition

A surface whose edge is a box-shadow ring keeps it on hover; the state's shadow stacks on top instead of replacing it.

Feedback consistency - emphasis grows, never inverts

Every interactive has a keyboard focus ring

A base-layer :focus-visible ring covers every interactive the recipes left silent - authored rings win by layer.

WCAG 2.4.7 focus visible

Component color pairs

Every fg/bg pair a recipe paints is measured - AA is the 75 band, AAA the 100.

Color theory · accessibility (WCAG)

Token discipline

Themeable values ride tokens, never literals - the invariant that makes a system re-skinnable.

Consistency · systemic re-theming

Spacing on-scale

A recipe's paddings and gaps come from the spacing scale.

Spacing scale · Gestalt proximity

Type on-scale

Text styles ride the type scale with paired line-heights - no ad-hoc sizes.

Type scale · vertical rhythm

Interaction states exist

Interactive recipes answer hover/focus-visible/active/disabled - silence is a defect.

Feedback · affordance · accessibility

Resting affordance

A component reads as itself at rest - defined edges, surface separation.

Default affordance · figure-ground

Touch-target density

Interactive targets are comfortably hittable and padding scales with type.

Fitts's law · WCAG 2.5.8 · em-proportional padding

Personality fidelity

A component expresses the system's declared personality - a brutalist button doesn't ship pillowy shadows.

Consistency · matching the mental model

Breath scales, the grid survives

A density dial scales every spacing step by one factor and snaps back onto the 4px grid - relationships and rhythm survive, only the breath changes.

White space as voice · 4px spatial grid

Corners are a personality decision

Four curated corner directions (sharp, soft, pill, hard) recompose the existing radius steps as one gesture, each tagged with the personalities it serves.

Shape psychology (sharp=precise · round=friendly)

Controls follow the silhouette

Reshaping the corners also re-anchors pill-shaped controls (button, input) onto the chosen corner language - a brutalist system squares its buttons; avatars and dots stay round.

Shape coherence - a pill is a choice, not a constant

Depth speaks with one voice

Curated shadow voices - flat, quiet, glow, lift, pop, hard offset - derived from the archetype physics, so a system's depth never mixes dialects.

Elevation language (material coherence)

The type scale is a musical interval

A chosen ratio (quiet 1.2 → cinematic 1.414) recomposes the existing scale steps, each size arriving with its line-height already paired by the readability rule.

Modular scale (musical ratios) · paired line-heights

Personalities are coherent token bundles

An archetype re-tunes spacing, shadow, weights, tracking and motion as one gesture - two systems with the same hue read as different products.

Design-language coherence (density/elevation/motion/type move together)

Personality intensity is continuous

Every archetype lever scales from the neutral seed toward its full expression - 'a touch of brutalist' and 'unmistakably brutalist' from one preset.

Interpolation from a neutral baseline (identity at full)

Components carry the soul in their states

Cards lift and buttons press on the system's own easing - playful pops elastic, brutalist stays crisp; authored transforms are always respected.

Microinteraction feedback · feel from easing, amount from personality

Friendly personalities keep card presence

Playful/soft systems give cards a resting elevation so they lift off a sober canvas; flat personalities stay deliberately flat.

Figure-ground on low-contrast palettes

Motion recipes match the personality's material

Each motion recipe declares which archetypes it serves and which it fights - the builder ranks and flags, never blocks.

Material coherence (frosted glass is luxe, raw film is stark)

Import absorbs what it needs

A component that references a token the target system lacks is not blocked: the token's value is copied from the source into the target's foundations (recursively for dependent primitives), so the import fits and the owner's system grows to accommodate it.

Be compatible - a missing token is added, not a rejection

A guide prompt reviewed from four angles

A generated guide prompt is analyzed by three AI lenses (copy against the voice, UI against the personality, UX against the rules) that propose cited edits, then a deterministic Synthesis Engine pass validates the config upholds the owner's rules - grounded by a compact system brief so the AI never drifts generic.

Copy, UI and UX lenses over the prompt - Engine validates compliance

Behavior is chosen, never guessed

The rules that govern generated pages come from curated packs - each shows the exact text that will be saved and why it earns its place, and the recommender reads the owner's philosophy signals (audience, personality, direction) to pre-select what fits. Same signals, same recommendations.

Curated rule packs, deterministic recommendation

A philosophy starts from a feeling, not a blank page

Five curated directions (calm, effortless, playful, precise, warm) each ship a complete philosophy - every section pre-written in a coherent voice, real companies referenced only as cultural pointers on the chip, never inside the prose.

Curated direction presets - brand-free prose, complete coverage

Page rhythm is a deliberate choice

Section padding and block gaps come from a chosen density level - kids pages breathe, dashboards concentrate.

White space & reading rhythm (compact → spacious)

Missing media never fights the system

Every media fallback is composed from the system's own tokens (static panel or animated backdrop) - never a foreign stock asset, never an empty box.

Medium coherence - a photo clashes with a flat system by construction

The DS is a skin, never the business

Generation grounds the page's SUBJECT in the owner's product (objective or philosophy context) - a system's mood may never decide what the page sells.

Philosophy = voice; the subject comes only from the owner