Refactoring UI

What it is

Refactoring UI is a book of concrete visual design tactics aimed at developers with no design training. Each idea is shown as a before and after pair with the specific change named. The authors, Adam Wathan and Steve Schoger, also created Tailwind CSS, and the book's ideas (fixed spacing and type scales, carefully built colour palettes) are the thinking behind Tailwind's design system.

What you get and what it costs

As listed on the official site in September 2026:

• The Essentials, $99: the 218 page book as a PDF, organised into 50 chapters across nine sections, plus three video tutorials.
• The Complete Package, $149: the book and videos plus a component gallery of over 200 designs, more than a dozen colour palettes with ten shades each, 30+ curated font recommendations and 200 SVG icons.
• Team pricing is available for the complete package.

The site says the book has sold over 30,000 copies. On Goodreads it averages about 4.64 out of 5 from over 2,200 ratings (September 2026).

What it covers

The nine sections are: starting from scratch, hierarchy, layout and spacing, designing text, working with colour, creating depth, working with images, finishing touches, and leveling up. Typical tactics:

• Use fewer font sizes and pick them from a fixed scale.
• Do not communicate hierarchy with colour alone; use weight and contrast.
• Start with too much white space, then remove it.
• Build a full palette with many shades rather than picking colours ad hoc.
• Use shadows for elevation instead of borders everywhere.

Why it works when design books usually do not

It gives rules rather than taste. Rules can be applied on a Tuesday afternoon; principles cannot. Reviewers on Goodreads frequently say their interfaces improved visibly soon after reading.

Is it worth the price?

For developers who ship user interfaces (side projects, internal tools, freelance work, portfolios), yes. It is one of the few paid resources that consistently gets strong reviews for immediate, practical impact. For readers in Pakistan the dollar price is significant; the Essentials package is enough for most people, and the extras are nice but optional.

It will not replace a product designer, does not teach user research or UX process, and does not cover Figma. If you want to become a designer, you will need other resources.

How to get the most out of it

• Read it in two or three sittings, then take one screen from your own project and apply ten tactics to it.
• Keep it open while building your next interface and refer to the relevant chapter.
• Screenshot your before and after. It is a good portfolio story.
• Steve Schoger has shared many free design tips publicly; they are a good taste of the book before buying.

Best for: backend and full stack developers who build their own interfaces, and anyone polishing a portfolio.