UI Design Checklist

🎯 Visual Hierarchy

I can identify my Level 1 element in under 3 seconds No more than 3 hierarchy levels visible at once Bold, regular, and light weights used intentionally — not everything the same Color contrast alongside size builds hierarchy Competing elements are de-emphasized — lighter, smaller, or lower contrast

📏 Spacing

All spacing is a multiple of 4 — 4, 8, 12, 16, 24, 32, 48, 64px Space between groups is noticeably larger than space within groups Started with generous whitespace — only removed what felt excessive Related elements are close; unrelated elements have breathing room

🔤 Typography

4 or fewer font sizes — no arbitrary in-between values Large headlines have tighter letter spacing (~−0.02em) All-caps labels have looser letter spacing (at least +0.05em) Body text is 16–20px with 1.4–1.5 line height Mixed-size text on the same line is baseline-aligned

📐 Alignment

I can draw an invisible line through the left edges of my content Elements that look aligned actually are aligned — not approximately Icons beside text align to the optical center, not the bounding box

🎨 Color

One primary accent color — used only for actions and interactive elements Accent color is rare — not on more than ~10% of the screen All text/background pairs pass 4.5:1 contrast minimum Not using pure grey — neutrals have a warm or cool tint Color is not the only indicator of state — icons, borders, or text added No color on non-interactive headings — it makes them look like links

🏷 Labels & Data

Not showing data as "Label: Value" everywhere — labels embedded into values"In stock: 12" → "12 left in stock" Necessary labels are de-emphasized — smaller, lighter, lower contrast Form fields have visible labels above the input — not just placeholder text

✂️ Restraint

Cover test: covered each element — if removing it loses nothing, considered cutting it Haven't added elements because something "felt empty" — fixed hierarchy instead Cards and borders only exist because spacing alone doesn't create the grouping

♿ Accessibility

All text passes 4.5:1 contrast against its background Errors and status states use icons or text, not color alone Touch targets are at least 44×44px

🚨 Quick Gut-Check

No "Label: Value" dumps — data has hierarchy No equidistant spacing — tighter within groups, wider between No color as the only error indicator — icon or message added No light text on medium-saturation color — contrast checked No random font sizes — every size from my defined scale No same-size, same-weight everything — clear hierarchy exists