When design SERVES the product: app UIs, admin dashboards, settings panels, data tables, tools, authenticated surfaces, anything where the user is in a task. The essentials live in SKILL.md’s modes and craft-floor.md; this file is extended depth, written for Operate surfaces. Read surfaces (docs, guides, long-form) take SKILL.md’s Read mode plus this file’s typography and consistency rules; their prose measure and navigation matter more than component density.
Familiarity is often a feature here. The test is whether a category-fluent user can trust the interface immediately or must pause at every subtly-off component.
Product UI’s failure mode isn’t flatness, it’s strangeness without purpose: over-decorated buttons, mismatched form controls, gratuitous motion, display fonts where labels should be, invented affordances for standard tasks. The bar is earned familiarity. The tool should disappear into the task.
One family is often right. Product UIs don’t need display/body pairing. A well-tuned sans carries headings, buttons, labels, body, data.
Fixed rem scale, not fluid. Clamp-sized headings don’t serve product UI. Users view at consistent DPI, and a fluid h1 that shrinks in a sidebar looks worse, not better.
Tighter scale ratio. 1.125–1.2 between steps is typical. More type elements here than on brand surfaces; exaggerated contrast creates noise.
Line length still applies for prose (65–75ch). Data and compact UI can run denser; tables at 120ch+ are fine.
Product defaults to Restrained. A single surface can earn Committed (a dashboard where one category color carries a report, an onboarding flow with a drenched welcome screen), but Restrained is the floor.
Every interactive component has: default, hover, focus, active, disabled, loading, error. Don’t ship with half of these.
Skeleton states for loading, not spinners in the middle of content.
Empty states that teach the interface, not “nothing here.”
Consistent affordances across the surface. Same button shape. Same form-control vocabulary. Same icon style.
Overlays escape their container. An absolutely positioned dropdown inside an overflow: hidden or overflow: auto ancestor gets clipped; reach for <dialog>, the popover API, position: fixed, or a portal.