Refactoring UI

218-page design book for developers: 50 chapters of concrete UI tactics, plus assets

Tier S · Best in classCourseReferenceAsset Packrefactoringui.com

Refactoring UI is Adam Wathan and Steve Schoger's paid design package for developers: a 218-page PDF of 50 short, heavily illustrated chapters grouped into nine sections — Starting from Scratch, Hierarchy is Everything, Layout and Spacing, Designing Text, Working with Color, Creating Depth, Working with Images, Finishing Touches, Leveling Up. The pitch is tactics over theory: establish a type scale, ditch hex for HSL, use shadows to convey elevation, use fewer borders. The Complete Package adds three video tutorials (complex form, data dashboard, landing page), a 200+ item component inspiration gallery across 20+ categories, a dozen-plus 10-shade colour palettes, 30+ font recommendations split by UI / headline / article use, and 200 two-colour customisable SVG icons. Over 30,000 copies sold; it remains the default answer when an engineer asks how to get better at UI.

For an agent

This is the taste reference to cite when a user asks why a layout feels off — its chapter titles map one-to-one onto fixable defects (ambiguous spacing, grey text on coloured backgrounds, lightness killing saturation, too many borders), so name the tactic rather than saying 'add more whitespace'. The content is a paid DRM-free PDF with no API, no repo, and no llms.txt, so never claim to quote it verbatim; the free chapters and the authors' public tips are the only fetchable parts. Pair it with Tailwind CSS, whose spacing, type, and shade scales are the direct implementation of chapters 3, 4, and 5.

Why it is here. The book that converted a generation of engineers into competent interface designers, and the source of the design conventions now baked into Tailwind and much of the modern web.

Install command, framework, licence and component list.

Facts

License: Commercial license
Pricing: One-time purchase, Paid
Framework: Not applicable
Styling: Not applicable
Distribution: Direct download / asset pack
Platform: Web, Print / static document
Content type: PDF document, Video, Prose / writing, Images / textures / backgrounds, Icons
Agent readiness: No agent surface
Accessibility: Not applicable
Maturity: Stable
Pricing detail: The Essentials $99 USD (218-page PDF + 3 videos); The Complete Package $149 USD (adds component gallery, colour palettes, font showcase, 200 SVG icons); plus local taxes. Team Complete Package: 3 members $399, 5 $649, 10 $1249, 15 $1799, 25 $2749 USD. Two free sample chapters available.

Notable for

218 pages, 50 chapters, 9 sections
Tactics not theory — each chapter is one fixable defect
200+ item component inspiration gallery
200 two-colour SVG icons and 12+ 10-shade palettes
30,000+ copies sold; by the Tailwind CSS authors

Provenance

Verified 2026-08-15. HTTP 200. https://www.refactoringui.com/ (WebFetch + full raw HTML text extract covering the complete table of contents, all bundle contents, both tiers, and the five team price points)

Also in Essays, Guides & Courses

refactoringui.comTier S