frontend-design

Ground every design choice in the specific subject matter of the brief rather than defaulting to common patterns. Plan a token system with named colors, deliberate type pairings, and one signature element, then critique the plan for generic choices before coding.

A design token system is a compact set of decisions covering color (4-6 named hex values), typography (display, body, and utility faces), layout concept, and a signature element. It ensures every visual choice derives from a single coherent plan.

Pair a characterful display face used with restraint with a complementary body face, avoiding the same families used on every project. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes memorable.

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

Three overused looks are warm cream backgrounds with serif display type and terracotta accents, near-black backgrounds with acid-green accents, and broadsheet layouts with hairline rules. These are legitimate only when the brief specifically calls for them.