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 |