UI Aesthetics

From values that accumulated to decisions you can defend

Assembled CSS is what you get when every value arrives from somewhere else. Body text sits at #333 because a reset said so. Corners are 4px because that came off a Stack Overflow answer two years ago. The shadow is rgba(0,0,0,0.1) because a tutorial said 0.1. Pull on any single value and nothing else moves, because nothing else is connected to it. A file where every value is independent is a file where no value was decided. It was collected.

Designed CSS is a file where every value has a reason you can state out loud. The padding is 12px because the type sits on an 8px rhythm and 12px is the half-step that keeps the label from crowding the edge. The shadow is 0.04 opacity because a card should sit nearly flush, not float. You open the :root block and each variable answers a question you can name. A stylesheet built this way reads like an argument: each rule defends itself, and the ones that cannot defend themselves get cut.

This book teaches that move. Not how to invent taste from nothing, but how to make a decision, state the reason, and check whether the reason survives contact with a real screen. Claude earns its place in the audit step: point it at a stylesheet and ask it to name what each decision is doing and why. The answers expose the values that are there by accident and the spacing scale that drifts halfway down the file.

Ten chapters from the diagnostic audit to production verification

• assembled-vs-designed — The diagnostic: the signature of an assembled file (pull on any value and nothing else reacts) versus a designed file (every value has a reason that connects it to the rest). The audit prompt that pulls those reasons into the open where you can judge them.
• color-system — Building a color system with tonal commitment: every neutral pulling in the same direction, measured contrast ratios, and the warm/cool decision made once at the :root level so it propagates everywhere. The difference between a palette chosen for harmony and one collected for availability.
• typography — Typography as a stack of decisions: type scale, weight pairing, line-height as a reading rhythm, and the audit that identifies the font loaded for one heading that shows up nowhere else on the page.
• shadow-depth — Shadow as a spatial argument: how to design a three-level shadow scale (flush, raised, floating), why a modal and a card should not share the same shadow, and the sub-0.04 opacity range that reads as depth without announcing itself.
• component-vocabulary — Component vocabulary: the four properties (radius, shadow, border, padding) that make a button family recognizable, and the audit that finds the button with a different radius than every other button on the page because it came from a different sprint.
• animation — Animation decisions: the transitions worth adding (hover lift, state-change fade) and the ones that make a page feel fussy. The timing values that feel native versus the ones that call attention to themselves.
• css-custom-properties — CSS custom properties as a written argument: the :root block as a design document, not a magic number store. The structure that makes the intent legible six months later and lets Claude answer questions about it accurately.
• reading-design-systems — Reading real design systems: ElevenLabs (sub-0.1 shadows, Waldenburg light) and the Claude/Anthropic interface (ring shadows, warm parchment, Anthropic Serif) — what a funded team decided, what reasons hold those choices together, and what you can carry back to your own work.
• iteration-cycle — The iteration cycle: change a value, push to a live site, open a real browser at real sizes, decide whether the reason holds. The difference between trial-and-error and iteration with intent.
• aesthetic-survived-production — The full aesthetic audit: what the five interfaces in this book look like after shipping under real traffic, what changed under pressure, and what held. The properties that survive production are the ones that had reasons from the start.

A preview

A file where every value is independent is a file where no value was decided. It was collected. Change any number and the rest of the stylesheet does not react, because nothing else is connected to it. That last property is the real signature of assembled CSS.

You do not need a design background. Two things carry the whole book. Reading CSS is the first. The second is a willingness to say out loud what an interface is trying to communicate — the part most engineers skip because it feels unscientific. It is the most useful question here.

Developers who want their CSS to feel designed

This book is for developers who can read CSS and want to stop assembling interfaces and start designing them. You do not need formal design training. The book teaches the audit step — using Claude to surface what a stylesheet is doing and why — and the iteration cycle that follows: make a decision, state the reason, verify it holds on a live screen. Every example comes from real sites the author runs: patriola.com, Voice Lab, Bella Sue Books, and KaspaFAQ, plus readings of the ElevenLabs and Claude/Anthropic design systems.

A longer excerpt is available to newsletter subscribers.

Buy Ebook on Amazon