frontend-design

Ground every choice in the subject matter: derive palette, typography, and layout from the product's industry and audience. Plan a token system first, then review it against common defaults like cream backgrounds with terracotta accents or uniform rounded cards, and revise anything that reads as templated.

Frequent tells include warm 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, middle-dot meta strings, and fade-and-slide-up entrances on every section.

Use one typeface family, or two that are clearly distinct, chosen deliberately for the brief rather than default picks. 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 than sans-serif.

Use non-user-triggered motion sparingly, ideally as a single orchestrated page-load moment rather than scattered effects. Motion that responds to a user's action, such as opening or confirming, is appropriate when it shows what changed.

The guidance covers aesthetic direction, typography, layout, motion, and interface copy, but it does not provide component code, design assets, or framework-specific implementations. It also defers to the client's brief whenever the brief explicitly requests a particular visual direction.