UI tests

UI QC verifies that what the user sees matches the design system. Pixel-perfect parity is not the goal; design-token compliance is. Spacing, color, type-scale, radius, shadow, and motion all flow from the tokens defined in Section 2 — UI QC catches drift from those tokens before it ships.

UI checklist per component

• Every color value matches a design token. Hardcoded hex outside the token file is a defect.
• Every spacing value (margin / padding / gap) is on the 4px grid via spacing-token classes. No arbitrary px values.
• Every type size matches the type-scale tokens (t-display, t-h1..h4, t-body, t-body-sm, t-caption). No `font-size: 17px;` style overrides.
• Every interactive element has all four states wired: rest, hover, focus, active. Focus ring is visible and meets contrast.
• Every icon uses the canonical icon set at the documented size (16/20/24). No icon-font fallbacks, no inline SVGs that drift in stroke weight.
• Cover image fallbacks (when null) render the documented SVG placeholder, not an empty grey box.
• Skeleton loaders match the final layout — no layout shift when data arrives.