frontend-design

Ground design choices in the brief's subject matter, industry, and audience rather than default patterns. Plan a compact token system with named colors, deliberate typefaces, and a layout concept, then review it against common AI-generated tells before building.

Common tells include cream backgrounds with terracotta accents, near-black backgrounds with acid-green accents, identical rounded SaaS cards with soft grey shadows, tracked-out all-caps eyebrow labels, and fade-and-slide-up entrance animations on every section.

Use one typeface family or two clearly distinct ones, chosen deliberately for the brief rather than default families. Set a clear type scale with intentional weights and spacing, keep line lengths under 80 characters, and give serif body text slightly more line-height.

Use non-user-triggered motion sparingly, only to draw attention—a single orchestrated page-load moment lands better than scattered effects. Motion that answers a user's action, like opening or expanding, is appropriate when it shows what changed.

The guidance is advisory rather than executable code, so results depend on the builder's judgment and iteration. When a brief explicitly requests a specific visual direction, including one of the listed default looks, the brief's own words take priority.