frontend-design

Ground the design in the subject's own world, define a compact token system of named colors and paired typefaces, and critique the plan against common defaults before coding. Commit boldness to one signature element and keep everything else restrained.

Pair a characterful display face used with restraint with a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes memorable.

It is a compact plan covering color as 4-6 named hex values, typefaces for two or more roles, a layout concept described in prose and ASCII wireframes, and one signature element. Every code decision is then derived from this plan.

Use motion only where it serves the subject, such as a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment usually lands better than scattered effects, and excess animation can make a design feel AI-generated.

They cluster around a few defaults: cream backgrounds with serif display type, near-black with a single acid accent, or broadsheet layouts with hairline rules. These are defaults rather than choices, so spend any free design axis on decisions specific to the brief.