frontend-design

Start with a written design plan defining a specific color palette, typefaces, and layout concept tied to the subject matter, then critique it against common defaults like cream backgrounds with terracotta accents or uniform rounded cards. Revise any choice that would appear in any similar brief before writing code.

Create a compact token system with 4-6 named hex colors, typeface roles, a layout concept described in prose and ASCII wireframes, and high-level principles. Review the plan against the brief to confirm each choice is specific to this project, then build following the revised plan.

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 with slightly more line-height for serif body text. Avoid accenting single words in headlines, all-caps labels, and unnecessary eyebrow labels above content.

Use non-user-triggered motion sparingly, ideally as a single orchestrated page-load moment rather than scattered fade-and-slide entrances on every section. Motion that responds to user actions like opening or expanding elements is appropriate when it shows what changed.

The guidance provides principles and process rather than executable code, so output quality depends on the AI's interpretation of the brief. When a brief explicitly requests a specific visual direction, including styles listed as common defaults, the brief's requirements take priority over the anti-default rules.