ui-polish-pass

UI Polish Pass

Core Pack — Always Active

This is a core skill. Use as the final step after design-review and ux-baseline-check on all visual work.

The screen works. Now make it feel right. This is the difference between functional and professional.

Core Lens

• Distill before decorating.
• Strip the screen to its essential structure, then add back only what earns its place.
• If a polish pass needs more color, more cards, and more chrome, it is probably not a polish pass.
• Use /bolder and /quieter as directional moves:
  • /bolder = increase contrast, hierarchy, or confidence without adding clutter
  • /quieter = remove noise, reduce emphasis, let the right thing lead

The Pass (run sequentially)

Pass 1: Spacing & Breathing Room

• Section spacing — major sections have clear visual separation (32-48px minimum between groups)
• Element spacing — consistent gaps within groups (use the project's spacing scale, usually 4/8/12/16/24)
• Edge padding — content doesn't touch container edges. Minimum 16px padding, 24-32px preferred
• The squint test — do clear groups emerge, or is it one undifferentiated blob?
• Remove, don't add — if two elements feel crowded, try removing one before adding more UI

Pass 2: Typography Hierarchy

• One clear headline — the page has exactly one thing that reads as the primary heading
• Three levels max — heading, subheading, body. If you need more, the IA is probably wrong
• Weight before size — try bold before bigger. Try softer opacity before smaller
• Conventional utility type — preserve the product family or use a conventional general-purpose family unless the outcome explicitly earns expressive type
• Natural casing and rhythm — no forced uppercase, arbitrary tracking, or unconventional line height outside the type system
• No orphan labels — labels without content, headers without their section
• Consistent text styles — same content type uses the same style everywhere