frontend-design

Ground every design choice in the subject's own world—its materials, artifacts, and vernacular—rather than defaulting to common patterns. Plan a token system with named hex colors, deliberate type pairings, and one signature element, then critique the plan for generic choices before coding.

A design token system is a compact plan defining color as 4-6 named hex values, typography with 2+ roles such as display and body faces, a layout concept, and a signature element. It ensures every color and type decision in the code derives from a deliberate plan.

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, 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.

Conflicts happen when selector specificities cancel each other out, such as a type-based selector like .section clashing with an element-based selector like .cta. This commonly affects paddings and margins between sections, so structure selectors carefully when writing the code.

AI designs cluster around three looks: cream backgrounds with serif displays and terracotta accents, near-black backgrounds with acid-green accents, and broadsheet layouts with hairline rules. These are defaults rather than choices, so they should only be used when the brief explicitly calls for them.