Refactoring UI: Product Summary
Refactoring UI is an essential resource aimed at teaching developers how to design beautiful user interfaces by themselves. It was created by Adam Wathan (full stack developer and co-creator of Tailwind CSS) and Steve Schoger (UI designer). The framework is presented as the "survival kit" the creators wished they had when starting to build applications.
Core Philosophy and Approach
The product is fundamentally built on the belief that good design is achieved through specific tactics, not talent. This approach provides actionable, specific design advice explained from a developer's point-of-view. Adam Wathan noted that he previously struggled with design until he learned "little tricks" from Steve Schoger that made things look better instantly.
Instead of focusing solely on high-level principles like color theory, Refactoring UI delivers practical solutions. A key example of a design tactic taught is to "Use fewer borders"; instead, developers should try applying a box shadow, using contrasting background colors, or simply adding more space between elements to distinguish elements.
Product Contents and Components
Refactoring UI is offered as a comprehensive package that includes multiple resources to start producing better designs immediately:
The Book: This is a 218-page PDF containing 50 incredibly visual chapters that distill everything the creators know about web design. Chapters are written to be short, easy to read, and independent, allowing them to be read in almost any order. The table of contents covers topics such as Starting from Scratch, Hierarchy, Layout and Spacing, Designing Text, Working with Color, Creating Depth, Working with Images, and Finishing Touches.
Video Tutorials: The package includes three in-depth video tutorials (downloadable MP4s) that demonstrate applying the book's concepts to common UI scenarios. These include designing a complex form interface (11:13), building a data-focused dashboard (17:20), and styling a text-focused landing page (12:08).
Component Gallery: This is a large resource featuring 20+ component/layout categories and 200+ individual component styles presented as medium-fidelity mockups. This is intended to provide layout and treatment inspiration for components like card layouts, table styles, and navigation layouts. Crucially, the component gallery does not include CSS.
Color Palettes: The package includes over a dozen comprehensive color palettes tailored for application UIs, with each color featuring 10 shades. It also provides a library of individual color scales for curating custom palettes.
Font Suggestions: A curated font showcase lists 30+ font recommendations broken down across three categories: UI, headlines, and article copy. Each font is shown in an example UI to help users choose a typeface quickly.
Icon Library: An exclusive icon library containing 200 beautifully illustrated SVG icons is included. These SVGs are pre-optimized, and their colors can be easily customized using CSS.
Availability and Logistics
Refactoring UI has been successful, selling over 20,000 copies and receiving a 4.68-star rating on Goodreads.
The product is available in two main configurations:
The Complete Package ($149 USD): Includes the book, video tutorials, component gallery, color palettes, font showcase, and icon library.
The Essentials Package ($99 USD): Includes the 218-page book and the three in-depth video tutorials.
All files are DRM-free. Team discounts are available for purchases covering up to 3, 5, 10, 15, or 25 team members. The product comes with a 60-day full refund policy, no questions asked.
