frontend-design

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme aesthetic direction:

- Brutally minimal

- Maximalist chaos

- Retro-futuristic

- Organic/natural

- Luxury/refined

- Playful/toy-like

- Editorial/magazine

- Brutalist/raw

- Art deco/geometric

- Soft/pastel

- Industrial/utilitarian

Use these for inspiration but design one that is true to the aesthetic direction.

• Constraints: Technical requirements (framework, performance, accessibility)
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

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

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Typography

• Choose fonts that are beautiful, unique, and interesting
• Avoid generic fonts like Arial and Inter
• Use distinctive choices that elevate the frontend's aesthetics
• Pair a distinctive display font with a refined body font
• NEVER converge on common choices (Space Grotesk, Inter, Roboto, system fonts)

Color & Theme

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents outperform timid, evenly-distributed palettes
• Vary between light and dark themes across different components

Motion & Animation

• Use animations for effects and micro-interactions
• Prioritize CSS-only solutions for HTML
• Use Motion library for React when available
• Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay)
• Use scroll-triggering and hover states that surprise

Spatial Composition

• Unexpected layouts
• Asymmetry
• Overlap
• Diagonal flow
• Grid-breaking elements
• Generous negative space OR controlled density

Backgrounds & Visual Details

Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors
• Grain overlays

NEVER use generic AI-generated aesthetics:

• Overused font families (Inter, Roboto, Arial, system fonts, Space Grotesk)
• Cliched color schemes (particularly purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character

• No design should be the same
• Vary between light and dark themes
• Use different fonts for different projects
• Apply different aesthetics to different components
• Interpret creatively and make unexpected choices that feel genuinely designed for the context

Match implementation complexity to the aesthetic vision:

• Maximalist designs: Need elaborate code with extensive animations and effects
• Minimalist designs: Need restraint, precision, and careful attention to spacing, typography, and subtle details
• Elegance comes from executing the vision well

Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Create extraordinary, creative work that is genuinely distinctive and memorable.