## Design Thinking Framework
Before coding, understand the context and commit to a **BOLD** aesthetic direction:
### Context Analysis
```
Before starting any frontend work, answer:
**Purpose**: What problem does this interface solve? Who uses it?
**Tone** (Pick an extreme):
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian
**Constraints**: Technical requirements (framework, performance, accessibility)
**Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
```
### Critical Principle
**Choose a clear conceptual direction and execute it with precision.** Bold maximalism and refined minimalism both work—the key is **intentionality, not intensity**.
## Frontend Aesthetics Guidelines
### Typography Excellence
```
Typography Principles:
1. **Avoid Generic Fonts**
❌ Inter, Roboto, Arial, system fonts
✅ Distinctive choices that elevate aesthetics
2. **Font Pairing Strategy**
- Pair a distinctive DISPLAY font with a refined BODY font
- Choose fonts that are beautiful, unique, and interesting
- Consider: Space Mono, Playfair Display, Clash Display, Satoshi, Cabinet Grotesk
3. **Hierarchy Through Type**
- Dramatic size contrasts
- Weight variations for emphasis
- Letter-spacing for refinement
```
### Color & Theme Mastery
```
Color Strategy:
1. **Commit to a Cohesive Aesthetic**
- Use CSS variables for consistency
- Dominant colors with sharp accents
2. **Avoid Clichés**
❌ Purple gradients on white backgrounds
❌ Generic blue/gray tech palettes
✅ Curated, harmonious color palettes
✅ Unexpected but cohesive combinations
3. **Implementation**
:root {
--primary: hsl(240, 100%, 25%);
--accent: hsl(45, 100%, 60%);
--surface: hsl(220, 15%, 8%);
--text: hsl(220, 10%, 95%);
}
```
### Motion & Animation
```
Animation Philosophy:
1. **High-Impact Moments**
- One well-orchestrated page load with staggered reveals
- animation-delay for sequential entrance
- More delightful than scattered micro-interactions
2. **CSS-First Approach**
- Prioritize CSS-only solutions for HTML
- Use Motion library for React when available
3. **Interaction Triggers**
- Scroll-triggering animations that surprise
- Hover states that respond meaningfully
- Subtle transitions on state changes
```
### Spatial Composition
```
Layout Principles:
1. **Break Expectations**
- Asymmetry over symmetry
- Overlapping elements
- Diagonal flow
- Grid-breaking elements
2. **Spacing Strategy**
- Generous negative space OR controlled density
- Never lukewarm middle-ground
- Intentional white space usage
3. **Visual Hierarchy**
- Clear focal points
- Z-depth through shadows and overlays
- Layered compositions
```
### Backgrounds & Visual Details
```
Atmosphere Creation:
1. **Never Default to Solid Colors**
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparencies
2. **Depth Techniques**
- Dramatic shadows
- Decorative borders
- Grain overlays
- Backdrop filters
3. **Interactive Details**
- Custom cursors
- Hover reveals
- Micro-feedback on actions
```
## Anti-Patterns to Avoid
```
❌ NEVER USE:
1. **Generic AI Aesthetics**
- Overused font families (Inter, Roboto, Arial)
- Clichéd color schemes (purple gradients on white)
- Predictable layouts and component patterns
- Cookie-cutter designs lacking context-specific character
2. **Safe Choices**
- Playing it safe with colors
- Standard Bootstrap/Material layouts
- Template-looking designs
- Converging on common choices across generations
3. **Half-Measures**
- Neither bold nor refined
- Inconsistent aesthetic commitment
- Mixed design languages
```
## Implementation Complexity Matching
```
Match code complexity to aesthetic vision:
**Maximalist Design** → Elaborate code
- Extensive animations and effects
- Multiple layers and overlays
- Complex interactions
**Minimalist Design** → Precision code
- Restraint and careful attention
- Perfect spacing and typography
- Subtle, refined details
Elegance comes from executing the vision FULLY.
```
## Example Session
**User**: "Create a landing page for a creative agency"
**Response**:
> I'll create a bold, editorial-style landing page:
>
> **Aesthetic Direction**: Magazine/editorial with dramatic typography
>
> ```html
> <style>
> @import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;600;700&family=Satoshi:wght@300;400;500&display=swap');
>
> :root {
> --ink: #0a0a0a;
> --paper: #faf8f5;
> --accent: #ff4d00;
> --muted: #6b6b6b;
> }
>
> body {
> font-family: 'Satoshi', sans-serif;
> background: var(--paper);
> color: var(--ink);
> }
>
> .hero-title {
> font-family: 'Clash Display', sans-serif;
> font-size: clamp(4rem, 15vw, 12rem);
> font-weight: 700;
> line-height: 0.9;
> letter-spacing: -0.04em;
> mix-blend-mode: difference;
> }
>
> .hero-title span {
> display: block;
> animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
> animation-delay: calc(var(--i) * 0.1s);
> opacity: 0;
> transform: translateY(100%);
> }
> </style>
> ```
>
> **Key Design Decisions**:
>
> - Clash Display for dramatic headlines
> - Extreme size contrast (15vw hero type)
> - Mix-blend-mode for visual intrigue
> - Staggered reveal animation
> - Intentional negative space
## Best Practices
1. **Vary Output**: Never converge on same fonts/colors across generations
2. **Commit Fully**: Half-measures create mediocrity
3. **Context Matters**: Design for the specific purpose and audience
4. **Details Matter**: Every pixel should be intentional
5. **Show Don't Tell**: Claude is capable of extraordinary creative work—demonstrate it
## Related Resources
- [Awwwards](https://www.awwwards.com/) - Design inspiration
- [Typewolf](https://www.typewolf.com/) - Font pairing ideas
- [Coolors](https://coolors.co/) - Color palette generator
- [CSS Tricks](https://css-tricks.com/) - Advanced CSS techniques