Frontend Design

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear point-of-view
• Meticulously refined in details (spacing, states, contrast, rhythm)

Frontend Aesthetics Guidelines

Prioritize the following:

• Typography: Choose beautiful, characterful fonts. Pair a distinctive display font for headings with a refined body font. Avoid defaulting to generic system fonts.
• Color & Theme: Commit to a cohesive palette. Use CSS variables/tokens for consistency. Dominant colors with sharp accents tend to read better than timid, evenly-distributed palettes.
• Motion: Use motion deliberately for high-impact moments (page load, section reveals, hover affordances). Prefer CSS where possible; use a motion library when available and already used in the codebase.
• Spatial Composition: Consider asymmetry, overlap, grid-breaking elements, and purposeful negative space. Make density a deliberate choice, not an accident.
• Backgrounds & Visual Details: Create atmosphere (gradient meshes, noise/grain overlays, patterns, layered transparencies, refined shadows, decorative borders), but keep it consistent with the chosen aesthetic.

Anti-Patterns (Avoid)

• Generic, repetitive “AI-looking” layouts and component patterns
• Overused safe choices without context (same fonts, same gradients, same cards)
• Low-contrast body text or decorative colors used as backgrounds without readability checks
• Inconsistent spacing and typography scale

Output Expectations

When implementing UI changes:

• Use the project’s existing component system and tokens when available.
• Prefer semantic tokens/variables rather than hardcoded colors.
• Ensure accessibility basics: focus states, readable contrast for body text, correct headings and labels.
• Keep code maintainable: consistent naming, small components, and reusable styling primitives.