Frontend Design

Overview

Craft visually striking frontend interfaces by committing to bold, intentional aesthetic directions rather than defaulting to common patterns.

Design Strategy

Before coding, analyze:

• Purpose and intended audience
• Tone and emotional impact
• Technical constraints
• What will make the interface memorable through a specific conceptual lens

Aesthetic Focus Areas

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter.

Color & Theme

Establish cohesive palettes using CSS variables with:

• Dominant colors
• Sharp accents
• Considered contrast ratios

Motion

Prioritize high-impact animations:

• Page-load sequences
• Scroll-triggered effects
• Micro-interactions

Spatial Composition

• Asymmetry
• Overlap
• Diagonal flow
• Grid-breaking elements

Visual Details

Create atmosphere through:

• Gradients
• Textures
• Patterns
• Contextual effects

Critical Avoidance

Do NOT create "generic AI-generated aesthetics":

• Overused typefaces
• Predictable layouts
• Cookie-cutter design lacking context-specific character
• Excessive centered layouts
• Default purple gradients
• Uniform rounded corners

Implementation Approach

Match code complexity to the vision:

• Maximalist designs require elaborate animations
• Minimalist designs demand restraint and precision in spacing and typography

Output

Production-ready code using:

• React components
• Tailwind CSS
• Modern CSS features
• Accessibility best practices