frontend-design

Ground the design in the subject matter first, then create a compact token system with 4-6 named hex colors, deliberate typeface choices, and a layout concept. Review the plan against common AI design tells like cream backgrounds with terracotta accents or uniform SaaS card kits, and revise anything that reads as a default.

Use one or two clearly distinct typeface families chosen deliberately for the brief, set a clear type scale, and keep line lengths under 80 characters. Avoid accenting single words in headlines, all-caps labels, and unnecessary typographic labels above content, as these are common generated-page tells.

Use non-user-triggered motion sparingly, only to draw attention, and prefer a single orchestrated moment like one page-load sequence over scattered effects. Motion that responds to user actions like opening or expanding elements is appropriate when it shows what changed.

Common tells include warm cream backgrounds with terracotta accents, near-black backgrounds with acid-green accents, broadsheet layouts with hairline rules, identical rounded SaaS cards with soft grey shadows, tracked-out all-caps eyebrow labels, and arrows appended to every link.

Write from the end user's perspective using plain language, active voice, and sentence case. CTAs should state exactly what happens, like "Save changes" instead of "Submit", and error messages should explain what went wrong and how to fix it without apologizing.