frontend-design

Ground the design in the subject's own world—its materials, artifacts, and vernacular—rather than reaching for default looks. Plan a compact token system with a named palette, deliberate type pairing, and one signature element, then critique the plan for templated choices before coding.

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 a memorable part of the design.

Three recurring defaults are a warm cream background with serif display and terracotta accent, a near-black background with acid-green or vermilion accent, and broadsheet layouts with hairline rules. These are legitimate when the brief asks for them, but should not fill axes the brief leaves free.

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

Conflicting selector specificity—such as a type-based selector like .section clashing with an element-based selector like .cta—often cancels paddings and margins between sections. Structure selector specificity carefully when writing the code to avoid these collisions.