# Design Micro-decisions that elevate interfaces from functional to refined — structured as standard Error vs. Right patterns with live interactive examples and concrete measurements. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). A component library tells you *which* primitive to pick, but it rarely explains the subtle visual decisions that make an interface feel either unpolished or exceptional: why a play icon feels off-center even when mathematically centered, why a nested panel bulges out of its frame, or why a submit button jerks the entire page when loading. These are **Design Cases**. Every case documented here targets a recurring visual bug or anti-pattern, paired with a live side-by-side comparison, the underlying perception principle, and the exact code formula to solve it. ## How a topic is structured [#how-a-topic-is-structured] The unit is a **Wrong vs. Right** pair: * ❌ **The Anti-Pattern (Wrong)** — The implementation reached for first, and the specific flaw it produces: a layout shift, a 1–2px perceptual imbalance, a surface that inverts when the theme changes. Live examples place it on the left. * ✅ **The Best Practice (Right)** — The correction together with the mechanism, measurement or formula behind it — geometric centroid against visual mass, `R_inner = max(0, R_outer - gap)`, `min-width: auto` — so the fix is understood rather than copied. Live examples place it on the right. Where the topic is measured against a scale, the scale follows as a table: the type ladder, the radius ladder, the z-index ladder. A case is written against it rather than inventing its own numbers. The rule about how far a correction reaches belongs to the topic, not to each case, and closes the page where the topic has one — how local an optical adjustment must stay, which layers application code may occupy, what survives `prefers-reduced-motion`. A boundary that belongs to a single case (`tabular-nums` is for counters, not prose) sits beside that case as a callout instead. ## Design Topics [#design-topics] Explore the micro-craft principles across 8 core design domains: