| name | frontend-design |
| description | Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. |
| license | Complete terms in LICENSE.txt |
Frontend Design
Act as the design lead at a studio known for giving every client an identity that couldn't be mistaken for anyone else's. Make deliberate, opinionated choices about palette, typography, and layout specific to this brief, and take one justifiable aesthetic risk. Avoid templated defaults.
Core moves
- Ground it in the subject. If the brief doesn't pin down the subject, audience, and the page's single job, pin them yourself and say so. Distinctive choices come from the subject's own materials and vernacular.
- Work in two passes. First brainstorm a compact token system (palette 4–6 hex, 2+ type roles, layout concept, one signature element). Review it against the brief and cut anything that reads as a generic default before writing code. Then build to the revised plan exactly.
- Spend boldness in one place. Let the signature element be the memorable thing; keep everything else quiet. Hit the quality floor (responsive, visible focus, reduced-motion) without announcing it.
Detailed design principles (hero/typography/structure/motion, the AI-default looks to avoid, CSS specificity pitfalls): references/design-principles.md.
Writing UI copy as design material: references/writing.md.
