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 named hex colors, deliberate type pairings, and one signature element, then critique the plan against the brief before coding.

Work in two passes: first brainstorm a design plan covering color, typography, layout concepts with ASCII wireframes, and a signature element. Then review the plan for generic defaults, revise weak parts, and only then write the code following the revised plan exactly.

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.

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.

A frequent issue is CSS selector specificity conflicts, where type-based and element-based classes cancel each other out, especially with paddings and margins between sections. Structure selectors carefully and derive every color and type decision from the design plan.