interface-design

Interface Design

Plan and review user-facing surfaces that read as part of their host and spend the user's attention deliberately. This method applies when writing an interface plan, reviewing an interface plan, or reviewing implemented interface code. It does not implement frontend code. Correctness, accessibility, and the host platform's conventions are hard gates.

Input

Start with the requested surface change, the host it renders in, and the host's existing visual system: shared tokens, type scale, spacing rhythm, theme structure, and interaction conventions. Extend that system rather than introducing a parallel one, and report any deliberate deviation.

Principles

• Establish hierarchy before decoration. A reader must find the primary action and the primary information without scanning twice. Type scale, weight, and spacing carry hierarchy; color and ornament come last.
• Spend emphasis (color, motion, size, weight) only where the user's attention must go, and spend it in one place rather than everywhere.
• Keep one source of truth for shared visual values. Repeated or theme-dependent sizes, colors, radii, and durations live as tokens the components read. Keep a genuinely component-local decision local when it does not duplicate an existing token.
• Design every theme the host offers as a set. A color defined for one theme and inherited in another is a defect, not a default. Verify contrast on every theme's ground.
• Fit the host surface. An embedded panel reads as part of its editor, terminal, or window: its spacing rhythm, focus treatment, and typography. A surface that looks pasted in from another product is a defect even when it is attractive.
• Give every interactive element its states: hover, focus-visible, active, disabled, and busy. Design empty, loading, and error as first-class states, not as absences.
• Let layout own spacing. Sibling gaps come from the container, not from per-element margins that collapse or double. Wide content scrolls inside its own region; the page never scrolls sideways.
• Restrain motion. Animation explains a state change or directs attention; it never runs for its own sake, and reduced-motion preferences are respected.
• Treat copy as design material. Controls say exactly what happens, labels name what users recognize, and errors say what went wrong and what fixes it.