the craft floor

• Contrast — body and placeholder text ≥4.5:1, large text ≥3:1. on colored surfaces, tint secondary text from that hue — never gray.
• Depth — shadows carry offset and soft blur; a zero-offset colored halo is decoration.
• Spacing — tight groups, generous separation, more space above a heading than below.
• Type — body measure 65–75ch, obvious scale and weight steps; run real copy at every breakpoint and fix what overflows.
• Motion — one authored moment, not scattered effects and not one identical entrance per section. reach past transform/opacity: blur, backdrop-filter, clip-path, mask, shadow.
• States — hover, disabled, loading, error, empty. real content, working controls, keyboard focus.
• Browser surfaces — selection, caret, scrollbars, focus rings, underline offset, tabular numerals: the parts you didn't draw. theming these is the cheapest "built, not assembled" signal, and the one models skip most reliably.
• Copy — controls name their action; errors name the problem and the recovery.
• Images — choose the final display frame before producing the asset. match source ratio, CSS aspect-ratio, object-fit, and intended crop; keep important subjects inside safe margins at every supported viewport.

reaching for one when the axis is free means you weren't deciding. recognizing it means rewriting the element, not softening it:

• same-size icon+heading+text card grids as page structure — cards are the lazy container.
• the hero-metric template; eyebrows above headings (a true ban — the heading carries its own weight); reflex section numbers.
• gradient text; glass/blur as decoration; side-stripe borders above 1px; hard offset shadows outside an actually-neobrutalist world.
• monospace as a "technical" costume; system display faces for an own-world page; emoji standing in for an icon system.
• geometric masks approximating photographic edges.

without a floor, "good enough" drifts to whatever generation produced: contrast eyeballed (a low-vision visitor reads nothing), states missing (a keyboard user doesn't know if a button is disabled), browser surfaces defaulted (the page loses identity). without named refusals, the free axes — structure, motion, color application — get filled by category reflex instead of by decision: card grids everywhere, eyebrows above headings, glass blur as "premium," emoji replacing proper icons. the floor spends human judgment only where choice actually exists; checking the mechanical details is the difference between an interface people can use and one they can't.

immediately before editing UI, after analysis and direction resolve. verify in batched inspection rounds, not one screenshot per rule.

bad

<button className="text-gray-400 hover:animate-bounce">save</button>

weak contrast, arbitrary motion, no focus or disabled state. low-vision readers lose the label, keyboard users tab past a button they cannot see focused, everyone gets motion with no authored intent. nothing fails a build, so these defects ship silently and accumulate surface by surface until the interface signals assembly rather than craft.

good

<Button tone="primary" disabled={isSaving}>
  save workflow
</Button>

checked as a full state surface against the shared craft floor: accessibility, states, and browser surfaces are verified facts, and the free design axes get actual decisions instead of category reflex. the floor then holds across every page without repeated judgment.

honest states enforced as a standard · documented design systems · the four modes