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):

Type Scale (px):

Shadow Scale (5 levels):

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: