10 KiB
New Project: Aesthetic Design Philosophy
Use this when building from scratch - no existing codebase to match, full creative freedom.
This guide helps you create bold, distinctive frontend interfaces that avoid generic "AI slop" aesthetics and deliver memorable user experiences.
Design Thinking Process
Before coding, understand the context and commit to a BOLD aesthetic direction.
1. Understand the Context
Purpose
- What problem does this interface solve?
- Who are the users?
- What are their goals and pain points?
Constraints
- Technical requirements (framework, performance targets)
- Accessibility standards (WCAG compliance)
- Browser support needs
- Device/viewport considerations
Differentiation
- What makes this interface UNFORGETTABLE?
- What's the one thing someone will remember?
- How does it stand out from competitors?
2. Choose an Aesthetic Direction
Pick an extreme - commit fully to a clear conceptual direction:
- Brutally minimal: Sparse layouts, monochrome palette, extreme negative space
- Maximalist chaos: Dense information, bold colors, layered complexity
- Retro-futuristic: Nostalgic elements with modern tech aesthetic
- Organic/natural: Flowing forms, earthy tones, biomimicry
- Luxury/refined: Sophisticated typography, muted elegance, premium feel
- Playful/toy-like: Rounded shapes, bright colors, whimsical interactions
- Editorial/magazine: Strong typography hierarchy, grid-based, content-focused
- Brutalist/raw: Exposed structure, harsh contrasts, utilitarian
- Art deco/geometric: Symmetry, geometric patterns, metallic accents
- Soft/pastel: Gentle gradients, low contrast, calming atmosphere
- Industrial/utilitarian: Function-first, mechanical aesthetics, technical precision
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
3. Implementation Goals
Create working code that is:
✅ Production-grade and functional
- Real, working code (not mockups)
- Properly structured components
- Responsive across devices
- Accessible to all users
✅ Visually striking and memorable
- Immediate visual impact
- Distinctive from generic templates
- Reinforces brand/purpose
✅ Cohesive with clear aesthetic point-of-view
- Every element serves the chosen direction
- Consistent visual language
- Intentional design decisions throughout
✅ Meticulously refined in every detail
- Precise spacing and alignment
- Thoughtful micro-interactions
- Polish in typography, color, motion
Frontend Aesthetics Guidelines
Apply these principles when executing your design vision:
Typography
Go beyond generic fonts - typography is personality.
✅ DO:
- Choose distinctive, characterful fonts
- Pair a bold display font with a refined body font
- Use font variation (weight, width, slant) for hierarchy
- Consider custom/variable fonts for uniqueness
- Test readability across sizes and contexts
❌ AVOID:
- Generic system fonts (Arial, Helvetica, system-ui)
- Overused web fonts (Inter, Roboto - unless intentional)
- Poor contrast or readability
- Inconsistent font pairing
Examples:
- Display: Ginto, Clash Display, Syne, Archivo Black, Fraunces
- Body: Work Sans, Söhne, Untitled Sans, Sentient, Supreme
- Mono: JetBrains Mono, Commit Mono, Berkeley Mono
Color & Theme
Commit to a cohesive palette - colors create atmosphere.
✅ DO:
- Use CSS variables for consistency
- Choose dominant colors with sharp accents
- Create intentional color relationships
- Consider color psychology (warm/cool, energetic/calming)
- Test contrast for accessibility (WCAG AA minimum)
❌ AVOID:
- Timid, evenly-distributed palettes
- Clichéd combinations (purple gradient on white)
- Poor contrast ratios
- Randomness without purpose
Approaches:
- Monochrome + accent: Single base color with one bold accent
- Analogous harmony: Adjacent colors on color wheel
- Bold contrast: High-contrast complementary colors
- Muted elegance: Desaturated tones with subtle variation
Motion & Animation
Animate with purpose - motion should delight and inform.
✅ DO:
- Prioritize CSS-only solutions for performance
- Use Motion library (Framer Motion) for React when needed
- Focus on high-impact moments (page load, key interactions)
- Use staggered reveals (animation-delay) for orchestration
- Add scroll-triggered animations for engagement
- Create surprising hover states
❌ AVOID:
- Scattered, meaningless micro-interactions
- Performance-heavy JavaScript animations for simple effects
- Motion that distracts from content
- Animations without easing (linear motion feels robotic)
High-Impact Patterns:
- Staggered fade-in on page load
- Smooth scroll-triggered reveals
- Morphing shapes on interaction
- Parallax effects (use sparingly)
- Magnetic cursor effects
- Elastic hover states
Spatial Composition
Break expectations - layouts should surprise and guide.
✅ DO:
- Use asymmetry intentionally
- Overlap elements for depth
- Create diagonal flow to guide eye
- Add grid-breaking elements for interest
- Use generous negative space OR controlled density (not in-between)
❌ AVOID:
- Predictable centered layouts
- Uniform spacing everywhere
- Tight, cramped compositions
- Lack of visual hierarchy
Techniques:
- Asymmetric grids: Offset columns, uneven distribution
- Z-index layering: Overlap for depth and dimensionality
- Diagonal flow: Angles create energy and movement
- Negative space: Breathing room emphasizes important content
- Controlled density: Information-rich areas with clear structure
Backgrounds & Visual Details
Create atmosphere - go beyond solid colors.
✅ DO:
- Add contextual textures and effects
- Use gradient meshes for depth
- Apply subtle noise/grain overlays
- Create layered transparencies
- Add dramatic shadows for elevation
- Consider decorative borders and ornaments
- Experiment with custom cursor styles
❌ AVOID:
- Plain solid color backgrounds everywhere
- Overused gradient patterns
- Details that don't match aesthetic direction
- Visual noise without purpose
Techniques:
- Gradient meshes: Soft, organic color transitions
- Noise textures: Subtle grain for tactile quality
- Geometric patterns: Structured, repeating motifs
- Radial gradients: Spotlight effects, vignettes
- Blurred shapes: Abstract background elements
- Glass morphism: Frosted glass effects (backdrop-filter)
Anti-Patterns: Avoiding AI Slop
NEVER create generic AI-generated aesthetics. Recognize and avoid these patterns:
❌ Overused font families
- Inter everywhere (it's become the Arial of AI-generated designs)
- Roboto (overused, lacks character)
- System fonts without intentionality
- Space Grotesk (recently overused in AI designs)
❌ Clichéd color schemes
- Purple gradients on white backgrounds
- Generic blue/teal combinations
- Pastel everything without purpose
- Rainbow gradients without restraint
❌ Predictable layouts
- Centered hero → 3 feature cards → testimonials → CTA
- Same component patterns as every SaaS landing page
- No surprises, no memorable moments
- Cookie-cutter grid systems
❌ Lack of context-specific character
- Designs that could be for any product/service
- No connection to brand, purpose, or audience
- Generic stock photography aesthetic
- Templated feel throughout
Creative Freedom Guidelines
Interpret creatively - make unexpected choices that feel genuinely designed for the context.
Vary Your Approach
No two designs should be the same. Intentionally vary:
- Theme: Light vs dark (or something in between)
- Density: Spacious vs information-rich
- Tone: Professional vs playful vs experimental
- Complexity: Minimal vs maximalist
- Typography: Serif vs sans-serif vs mixed
- Color: Monochrome vs vibrant vs muted
NEVER converge on common choices across different projects. If you used Space Grotesk last time, choose something completely different this time.
Match Complexity to Vision
Aesthetic vision dictates code complexity:
Maximalist designs → Elaborate implementation
- Extensive animations and effects
- Complex layering and composition
- Rich interactions and micro-animations
- Advanced CSS techniques
Minimalist designs → Restrained implementation
- Precise spacing and alignment
- Subtle, purposeful animations
- Careful typography tuning
- Attention to micro-details
Elegance comes from executing the vision well, not from choosing "simple" vs "complex."
Implementation Checklist
Before finalizing your design:
Context & Strategy
- Clearly defined purpose and audience
- Identified key differentiator (the memorable element)
- Chosen specific aesthetic direction (not generic)
- Considered technical constraints
Typography
- Distinctive font choices (not Inter/Roboto by default)
- Clear hierarchy (display vs body vs UI)
- Tested readability across sizes
- Proper font pairing
Color & Theme
- Cohesive color palette with CSS variables
- Intentional color relationships
- Tested contrast for accessibility (WCAG AA+)
- Avoided clichéd combinations
Motion & Animation
- High-impact moments identified and animated
- CSS-first approach for performance
- Easing curves feel natural
- Animations enhance, not distract
Spatial Composition
- Unexpected or intentional layout choices
- Visual hierarchy guides user attention
- Appropriate use of space (generous or dense)
- Breaking the grid where appropriate
Visual Details
- Contextual backgrounds and textures
- Atmospheric depth (gradients, shadows, layers)
- Details match chosen aesthetic
- Polish in every interaction
Originality
- Doesn't look like generic AI output
- Context-specific character throughout
- Memorable and distinctive
- Different from previous projects
Remember
Claude is capable of extraordinary creative work.
Don't hold back. Show what can truly be created when:
- Thinking outside the box
- Committing fully to a distinctive vision
- Avoiding generic templates and patterns
- Designing with intention and purpose
Create something unforgettable.
See also:
- EXAMPLES.md - Real-world design examples and case studies
- REFERENCE.md - Deep-dive into specific aesthetic techniques