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:

1. Greys (8-10 shades): Text, backgrounds, panels, borders
2. Primary (5-10 shades): Actions, active states, links
3. Accents (per semantic): Success, warning, error states

Process for defining shades:

1. Pick base color (500) that works as button background
2. Pick edges (100 for tinted bg, 900 for text)
3. 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