designer-ui-uxlisted

# Designer: UI/UX Review A review, not a vibe check. Name the file, the line, and the fix. ## Step 1 — Scope it ```bash git diff --name-only origin/main...HEAD -- 'website/**/*.tsx' 'website/**/*.css' ``` No diff (a design question, not a change) → review the component the operator named. Read the project's palette and typography from `docs/brand/style-guide.md` first; a contrast failure is judged against the brand's real hex values, not assumed ones. ## Step 2 — Check each item, on the actual markup **Contrast** — WCAG 2.1 AA: **4.5:1** body text, **3:1** for large text (≥24px, or ≥19px bold) and for the non-text parts of controls. Compute it, don't estimate: ```bash python3 - <<'EOF' def lum(h): h = h.lstrip('#'); c = [int(h[i:i+2], 16) / 255 for i in (0, 2, 4)] c = [v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4 for v in c] return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2] def ratio(a, b): la, lb = sorted([lum(a), lum(b)], reverse=True) return round((la + 0.05) / (lb + 0.05), 2) print(ratio('#1A1A1A', '#FFFFFF')) # text vs background — needs >= 4.5 EOF ``` **Semantics** — one `<h1>` per page and no skipped heading levels; `<button>` for actions and `<a href>` for navigation (never a `<div onClick>`); every input has an associated `<label>`; every image has `alt` (`alt=""` if decorative); icon-only controls carry `aria-label`. **Interactive states** — hover, focus-visible, active, disabled, loading, and error must each be style