Interface craft

Most interfaces do not fail on ideas. They fail on execution — spacing that is nearly consistent, hierarchy that is nearly clear, type that is nearly right.

Diagnose before restyling

Ask what the screen is for. One primary action, at most one secondary. If you cannot name the primary action, the layout problem is a product problem and no amount of styling fixes it.

The things that actually read as quality

Hierarchy. A viewer should know where to look before they read anything. Achieve it with size, weight, and space — in that order. Color is the weakest hierarchy tool and the most overused.

Spacing rhythm. Related things sit closer than unrelated things, and the gaps come from one scale. Inconsistent spacing is the defect people feel but cannot name. Get proximity right and a plain layout reads as designed.

Type. One family for the interface, two at most on the page. Set a real scale and use its steps rather than inventing sizes. Body text wants a comfortable measure — roughly 60–75 characters — and line height that grows as the measure widens.

Restraint in surfaces. Borders, shadows, and fills all separate things. Pick one per boundary. Stacking all three is why interfaces look busy at normal density.

Alignment. Everything lines up with something. An element aligned to nothing reads as a mistake even when it is intentional.

Density is a decision

An information-dense tool and a marketing page want opposite treatments. Decide which this is and commit — the uncomfortable middle, where a data table has landing-page padding, serves neither.

Finish the states

Loading, empty, error, and overflow are where products feel unfinished. An empty state is a design opportunity; a spinner with no context is an admission. Long strings, long lists, and small screens must all be handled, not hoped about.

Dark mode is a palette, not an inversion

Inverting a light theme produces the characteristic bad dark mode: pure black backgrounds, pure white text, and shadows that do nothing.

• Use a very dark gray rather than pure black, and a slightly dimmed white rather than pure white. Maximum contrast between the two causes halation and is genuinely tiring to read.
• Elevation reverses: in light themes raised surfaces cast shadows, in dark themes they get lighter. Shadow alone conveys nothing on a dark ground.
• Saturated colors that worked on white will vibrate on dark. Desaturate and lighten accent colors for the dark palette rather than reusing them.
• Define both palettes together, at token level, from the start. Retrofitting means auditing every surface.

Accessibility floor

These are not polish items — below them, some people cannot use the interface at all.

• Text contrast meeting the standard ratio against its actual background, including text over images and inside colored buttons.
• Never carry meaning by color alone. A red border indicating an error needs text or an icon too.
• Every interactive element reachable by keyboard, in a sensible order, with a visible focus state.
• Touch targets large enough to hit reliably, with spacing between adjacent ones.
• Respect the reduced-motion preference: animation that cannot be disabled causes real symptoms for some users.
• Real semantic elements — buttons that are buttons, headings in order. A styled div is invisible to assistive technology.

Sources

references/sources.md in this skill lists the outside authorities that settle the questions here — what each one is authoritative for, and what you may do with it. Check them before answering on anything they cover, and cite what you used. Most are free to read and not free to reproduce; the use note on each is binding.

Never

• Add visual weight to fix a hierarchy problem caused by too many equal elements. Remove instead.
• Center body text.
• Ship a hover state without the matching focus state.