Web Design Mastery
Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.
Core Design Workflow
1. Start with a Feature, Not a Layout
- •Design the actual piece of functionality first
- •Don't start with navigation, sidebar, or shell
- •Details come later—work in grayscale first
- •Don't design too much—work in cycles
2. Establish Systems Before Designing
Define these systems up front to eliminate decision fatigue:
Spacing Scale (px):
| Token | Size | Use Case |
|---|---|---|
| 1 | 4 | Micro gaps |
| 2 | 8 | Tight, within components |
| 3 | 12 | Related elements |
| 4 | 16 | Section padding |
| 6 | 24 | Between sections |
| 8 | 32 | Major separation |
| 12 | 48 | Large gaps |
| 16 | 64 | Hero spacing |
| 24 | 96 | Maximum separation |
Type Scale (px):
| Size | Use Case |
|---|---|
| 12 | Labels, meta, fine print |
| 14 | Body text, default |
| 16 | Emphasis, subheadings |
| 18 | Section headings |
| 20 | Card titles |
| 24 | Page section titles |
| 30 | Page headings |
| 36 | Hero subheading |
| 48 | Hero heading |
| 60-72 | Display text |
Shadow Scale (5 levels):
| Level | Use Case |
|---|---|
| 1 | Buttons, subtle lift |
| 2 | Cards, inputs |
| 3 | Dropdowns, popovers |
| 4 | Sticky elements |
| 5 | Modals, dialogs |
3. Build Hierarchy, Not Decoration
- •Primary: Dark color (headlines, key actions)
- •Secondary: Grey (supporting text, dates)
- •Tertiary: Light grey (metadata, copyright)
Key principles:
- •Size isn't everything—use weight and color
- •Emphasize by de-emphasizing competing elements
- •Labels are a last resort—combine with values
- •Semantics are secondary to hierarchy
4. Apply Depth Meaningfully
- •Light comes from above
- •Shadows convey elevation (closer = more attention)
- •Use two-part shadows for premium look
- •Consider overlapping elements for layers
5. Finish with Polish
- •Supercharge defaults (bullets → icons, style quotes)
- •Add accent borders for visual interest
- •Design empty states as first impressions
- •Use fewer borders—prefer shadows or spacing
Color System
Categories needed:
- •Greys (8-10 shades): Text, backgrounds, panels, borders
- •Primary (5-10 shades): Actions, active states, links
- •Accents (per semantic): Success, warning, error states
Process for defining shades:
- •Pick base color (500) that works as button background
- •Pick edges (100 for tinted bg, 900 for text)
- •Fill gaps: 700, 300 → 800, 600, 400, 200
Key rules:
- •Use HSL for intuitive adjustments
- •Increase saturation at lightness extremes
- •Rotate hue toward bright (60°, 180°, 300°) for lighter
- •Greys can be warm (yellow/orange tint) or cool (blue tint)
- •Accessibility: 4.5:1 contrast for normal text, 3:1 for large
Anti-Patterns
NEVER do:
- •Grey text on colored backgrounds (hand-pick colors instead)
- •Fill the whole screen when content needs less
- •Use grids religiously (fixed widths often better)
- •Ambiguous spacing (more space between groups than within)
- •Relative sizing that doesn't scale
- •Scale icons beyond intended size
- •Rely on color alone for meaning
Reference Files
For detailed guidance on specific topics:
| Topic | File | When to Read |
|---|---|---|
| Visual hierarchy, labels, emphasis | hierarchy.md | Balancing element importance |
| Spacing, white space, layout grids | spacing-layout.md | Layout decisions |
| Typography, fonts, line-height | typography.md | Text styling |
| HSL, shades, accessibility | color.md | Color palette creation |
| Shadows, elevation, layers | depth.md | Adding depth to UI |
| Borders, backgrounds, empty states | finishing-touches.md | Polishing design |