frontend-design

Ground every design choice in the subject's own world, materials, and vernacular rather than default patterns. Plan a token system with named colors, deliberate type pairings, and one signature element, then critique the plan against common AI design defaults before coding.

Work in two passes: first brainstorm a compact plan covering color, typography, layout, and a signature element using prose and ASCII wireframes. Then review the plan for generic choices, revise it, 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 memorable.

Use motion deliberately 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 excessive animation can make a design feel AI-generated.

Three overused looks are a cream background with serif display and terracotta accent, a near-black background with a single acid accent, and broadsheet layouts with hairline rules. Follow the brief's explicit direction when given, but avoid these as defaults when the brief leaves the choice open.