'Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
Refactoring UI Design System
A practical, opinionated approach to UI design. Apply these principles when generating frontend code, reviewing designs, or advising on visual improvements.
Core Principle
Design in grayscale first. Add color last. This forces proper hierarchy through spacing, contrast, and typography before relying on color as a crutch.
The foundation: Great UI isn't about talent — it's about systems. Constrained scales for spacing, type, color, and shadows produce consistently professional results. Start with too much white space and remove; leave details (icons, shadows, micro-interactions) until layout and hierarchy work.
Scoring
Goal: 10/10. When reviewing or creating UI designs or frontend code, rate 0-10 against the principles below — 10/10 means full alignment, lower scores indicate gaps. Always give the current score and the specific improvements needed to reach 10/10.
The Refactoring UI Framework
Seven principles for building professional interfaces without a designer:
1. Visual Hierarchy
Core concept: Not everything can be important. Create hierarchy through three levers: size, weight, and color.
Why it works: When every element competes for attention, nothing stands out; deliberately de-emphasizing secondary content makes primary content powerful by contrast.
Key insights:
- Combine levers, don't multiply — primary text = large OR bold OR dark, not all three; save "all three" for the single most important element
- Labels are secondary — form labels, table headers, and metadata support the data, not compete with it; make them smaller, lighter, or uppercase-small
- Semantic color ≠ visual weight — a muted secondary button often beats screaming red for routine destructive actions
Product applications:
| Context |
Hierarchy Technique |
Example |
| Form fields |
De-emphasize labels, emphasize values |
Small uppercase label above large value |
| Dashboards |
Key metric large, context small |
"$42,300" large, "vs last month" small |
| Tables |
De-emphasize headers, emphasize data |
Headers uppercase small gray, data normal |
Design patterns:
- Three-level hierarchy: Size (large/base/small), Weight (bold/medium/normal), Color (dark/medium/light gray)
- Button hierarchy: primary (filled), secondary (outlined or muted), tertiary (text only)
Ethical boundary: Don't use hierarchy tricks to hide important information like pricing, terms, or cancellation options.
See:
Ready to use wondelai-refactoring-ui?
