Aesthetic Standards
Typography
- Pair a distinctive display font (headings) with a refined body font.
- Source from Google Fonts, Adobe Fonts, or system variable fonts — never system-ui defaults.
- Never use: Inter, Roboto, Arial, Helvetica, system-ui, sans-serif as a primary choice.
- Vary weight, size, tracking dramatically. Let type carry visual weight.
Color
- Use CSS custom properties (
--color-*) for all palette values. - Commit to a dominant color with sharp accents — avoid evenly distributed "tasteful" palettes.
- Light and dark themes are both valid — vary across designs, never default to one.
- Never use: purple-on-white gradients, generic blue CTAs, gray placeholder schemes.
Motion
- CSS-only preferred for HTML; Motion library for React.
- One well-orchestrated page load (staggered reveals via
animation-delay) beats scattered micro-interactions. - Use scroll-triggered reveals and hover states that genuinely surprise.
- Match motion intensity to the aesthetic — minimalist designs get subtle easing, not bounces.
Layout & Space
- Break the grid deliberately: asymmetry, overlap, diagonal flow, pinned elements.
- Generous negative space or controlled density — not the safe middle.
- Grid-breaking hero elements, offset section headers, bleed images.
Backgrounds & Depth
- No solid flat backgrounds. Add atmosphere: gradient meshes, noise textures, geometric patterns, layered SVG, grain overlays.
- Dramatic shadows, glows, or depth via
backdrop-filterand layeredbox-shadow. - Match the texture to the aesthetic — don't apply grain to a clean luxury design.
Anti-Patterns (Never Do)
- Generic font families as primary choices (Inter, Roboto, Arial, system fonts)
- Purple gradients on white — or any clichéd startup color scheme
- Predictable card → header → CTA layouts without intentional deviation
- Cookie-cutter component patterns that lack context-specific character
- Converging on the same aesthetic across different generations (Space Grotesk, glassmorphism, etc.)
Output Checklist
Before finishing, verify:
- [ ] Aesthetic direction is clear and intentional — not a blend of defaults
- [ ] Typography uses distinctive, non-generic font choices
- [ ] Color scheme uses CSS variables with a dominant + accent structure
- [ ] At least one layout surprise or visual moment worth remembering
- [ ] Animations serve the aesthetic and don't feel scattered
- [ ] Code is production-ready and functional (no placeholder logic)
- [ ] For Flask/Jinja: template syntax is valid and extends the appropriate base