---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with exceptional design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code with strong aesthetic direction.
license: Complete terms in LICENSE.txt
---

# Frontend Design Mastery

Create frontend interfaces that feel intentionally designed, not AI-generated. Every decision should serve a cohesive vision.

## Design Process

### 0. Load Design System (If Available)
If building for a Symph Agency product, check for `design/design-system-prompt.md` first. This file contains the distilled brand personality, visual identity, component rules, and anti-patterns from the Discovery + Design phases. Use it as the PRIMARY design reference — it overrides generic defaults.

### 1. Context Analysis
Before writing code, answer:
- **Who uses this?** (developer, consumer, enterprise, creative professional, child, elderly)
- **What emotion should it evoke?** (trust, excitement, calm, urgency, playfulness, sophistication)
- **Where does it live?** (marketing site, dashboard, mobile app, kiosk, internal tool)
- **What's the one memorable detail?** (every great interface has a signature element)

### 2. Commit to an Aesthetic Direction
Choose ONE clear direction and execute with full conviction:

| Direction | Characteristics | Best For |
|-----------|-----------------|----------|
| **Brutalist** | Raw, exposed structure, monospace type, harsh contrast, no decoration | Developer tools, editorial, art |
| **Neo-Minimalist** | Extreme restraint, single accent color, massive whitespace, micro-details | Luxury, finance, productivity |
| **Maximalist** | Layered elements, rich textures, bold color clashes, visual density | Entertainment, creative, youth |
| **Organic** | Fluid shapes, natural palettes, gentle gradients, breathing animations | Wellness, sustainability, lifestyle |
| **Retro-Future** | CRT effects, scan lines, neon on dark, tech-noir atmosphere | Gaming, music, nightlife |
| **Editorial** | Magazine-inspired, dramatic typography scale, asymmetric grids | Media, fashion, storytelling |
| **Geometric** | Sharp angles, art deco influence, mathematical precision | Architecture, design, premium |
| **Soft UI** | Gentle shadows, pastel tones, rounded everything, tactile feel | Consumer apps, social, friendly tools |
| **Industrial** | Utilitarian, high-contrast, warning colors, functional beauty | Manufacturing, logistics, serious tools |
| **Whimsical** | Unexpected animations, playful illustrations, easter eggs | Children, games, creative tools |

**Important**: Match implementation complexity to the vision. Maximalist needs elaborate code. Minimalist needs restraint and precision.

---

## Typography System

### Font Selection Strategy
Never default to Inter, Roboto, Arial, or system fonts. Instead:

**Display Fonts** (headlines, hero text):
- Serif drama: Playfair Display, Cormorant, Libre Baskerville, DM Serif Display
- Geometric: Archivo Black, Bebas Neue, Oswald, League Gothic
- Distinctive sans: Syne, Space Grotesk, Clash Display, Satoshi
- Experimental: Unbounded, Pixelify Sans, Silkscreen, Press Start 2P

**Body Fonts** (readable at small sizes):
- Refined sans: Source Sans 3, Work Sans, Nunito, Karla
- Humanist: Lato, Open Sans (only with distinctive display pairing)
- Readable serif: Merriweather, Lora, Crimson Text

### Typography Scale
Use a consistent ratio (1.25 minor third, 1.333 perfect fourth, 1.618 golden ratio):

```css
:root {
  --text-xs: clamp(0.64rem, 0.5vw + 0.5rem, 0.75rem);
  --text-sm: clamp(0.8rem, 0.7vw + 0.6rem, 0.875rem);
  --text-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  --text-lg: clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem);
  --text-xl: clamp(1.563rem, 2vw + 1rem, 2rem);
  --text-2xl: clamp(1.953rem, 3vw + 1.2rem, 3rem);
  --text-3xl: clamp(2.441rem, 4vw + 1.5rem, 4rem);
  --text-hero: clamp(3.052rem, 6vw + 2rem, 6rem);
}
```

### Typography Details That Matter
- **Letter-spacing**: Tighten headlines (-0.02em to -0.04em), loosen small caps (+0.05em to +0.1em)
- **Line-height**: Tighter for headlines (1.1-1.2), generous for body (1.5-1.7)
- **Font-feature-settings**: Enable ligatures, old-style figures, stylistic alternates
- **Text-wrap: balance**: For headlines to prevent orphans

---

## Color Architecture

### Building a Palette
Start with intent, not random colors:

```css
:root {
  /* Semantic foundation */
  --color-primary: ;      /* Main brand action */
  --color-secondary: ;    /* Supporting accent */
  --color-surface: ;      /* Background layers */
  --color-text: ;         /* Primary content */
  --color-muted: ;        /* Secondary content */
  
  /* Functional states */
  --color-success: ;
  --color-warning: ;
  --color-error: ;
  
  /* Atmosphere */
  --color-glow: ;         /* Highlights, glows */
  --color-shadow: ;       /* Depth, shadows */
}
```

### Color Strategies by Aesthetic

**High contrast editorial**: Near-black (#0a0a0a) + off-white (#fafaf9) + single bold accent
**Warm minimalist**: Cream (#fef7ed) + warm grays + terracotta or rust accent
**Cool tech**: Deep navy (#0f172a) + slate grays + electric blue or cyan
**Nature-inspired**: Sage greens + warm stone + organic browns
**Bold maximalist**: Multiple saturated colors, but control with 60-30-10 rule

### Avoid These Palettes
- Purple gradient on white (screams "AI generated")
- Generic blue (#3b82f6) as primary without context
- Gray-on-white with no warmth or character
- Rainbow gradients without purpose

### Color Consistency (MANDATORY)

Once you define a palette, **USE ONLY THOSE COLORS** throughout the entire page:
- **Primary:** Main brand action color
- **Secondary:** Supporting accent (optional — many designs work with just primary + neutrals)
- **Neutrals:** Background, surface, text, muted text

❌ DON'T introduce random colors "for visual interest"
❌ DON'T use different colors to distinguish items (use icons, spacing, or typography instead)
✅ DO use opacity/tint variations of your primary color if you need differentiation
✅ DO keep semantic colors (success/error/warning) subtle and only where functionally needed

**Example — if your accent is cyan (#00ade5):**
- Problem cards: Use cyan icons or `cyan/10` backgrounds, NOT red/orange/purple text
- Feature highlights: Cyan checkmarks, cyan badges — not mixed colors
- Differentiation: Use `primary/10`, `primary/20`, `primary/30` tints, not different hues

---

## Motion & Animation

### Animation Principles
1. **Purpose**: Every animation should communicate something (state change, hierarchy, delight)
2. **Timing**: Use easing that matches personality (snappy = cubic-bezier(0.34, 1.56, 0.64, 1), elegant = cubic-bezier(0.4, 0, 0.2, 1))
3. **Orchestration**: Stagger related elements, coordinate timing

### High-Impact Animation Patterns

**Page Load Orchestration**:
```css
.hero-title { animation: fadeSlideUp 0.8s ease-out 0.1s both; }
.hero-subtitle { animation: fadeSlideUp 0.8s ease-out 0.2s both; }
.hero-cta { animation: fadeSlideUp 0.8s ease-out 0.3s both; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
```

**Hover Micro-interactions**:
```css
.card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
}
```

**Scroll-Triggered Reveals** (CSS-only with intersection observer or scroll-timeline):
```css
@supports (animation-timeline: scroll()) {
  .reveal-on-scroll {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}
```

### Framework-Specific Motion

**React with Framer Motion**:
```jsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
/>
```

**Vue with built-in transitions**:
```vue
<Transition name="slide-fade">
  <component />
</Transition>
```

---

## Layout & Composition

### Breaking the Grid Intentionally
- **Overlap elements**: Use negative margins or absolute positioning to create depth
- **Asymmetric balance**: Weight one side, balance with whitespace
- **Diagonal flow**: Guide eye with angled elements or gradients
- **Scale contrast**: Pair massive headlines with delicate details

### Spatial Rhythm
```css
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;
  --space-section: clamp(4rem, 10vw, 10rem);
}
```

### Layout Patterns

**Bento Grid** (modern dashboard/portfolio):
```css
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--space-md);
}
.bento-featured { grid-column: span 2; grid-row: span 2; }
```

**Magazine Layout** (editorial):
```css
.editorial {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
.editorial > * { grid-column: 2; }
.editorial .full-bleed { grid-column: 1 / -1; }
```

---

## Visual Atmosphere

### Background Techniques

**Gradient Mesh**:
```css
.gradient-mesh {
  background: 
    radial-gradient(at 40% 20%, hsla(28,100%,74%,0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355,85%,63%,0.2) 0px, transparent 50%),
    var(--color-surface);
}
```

**Noise Texture** (use CSS or tiny base64 image):
```css
.textured {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  opacity: 0.4;
}
```

**Glassmorphism** (use sparingly):
```css
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
```

### Shadow Systems
```css
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 40px var(--color-glow);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.1);
}
```

---

## Icons: Lucide React ONLY

**CRITICAL**: Use Lucide React icons exclusively. Never use:
- ❌ Emoji as icons (🚀, ✨, 💡, etc.)
- ❌ Unicode symbols (→, ✓, ★)
- ❌ Other icon libraries (Heroicons, Font Awesome, etc.)

```jsx
// ✅ CORRECT
import { Rocket, Sparkles, Lightbulb, ArrowRight, Check, Star } from 'lucide-react';

// ❌ WRONG - emoji icons
<span>🚀</span>
<span>✨</span>
```

Lucide provides 1000+ icons with consistent stroke width and sizing. Use them.

---

## Custom Imagery with Nano Banana Pro

Don't settle for stock photos or abstract blobs. Generate custom imagery using `nano-banana-pro` skill:

### Default Style: Geometric (MANDATORY)

Unless brand guidelines explicitly specify otherwise, ALL generated images must use **geometric illustration style**:

- **Sharp angles and clean lines** — no organic/fluid shapes
- **Mathematical precision** — consistent proportions, grid-aligned elements
- **Abstract over realistic** — represent concepts with shapes, not photos
- **Consistent stroke weights** — uniform line thickness throughout
- **Flat or minimal gradients** — avoid complex shading
- **Limited color palette** — use brand colors only, no rainbow chaos

**Example prompts (geometric default):**
```
"Geometric abstract illustration of [concept], sharp angles, clean lines, [brand colors], flat design, mathematical precision, minimal"

"Abstract geometric pattern background, triangles and hexagons, [brand colors], modern, clean edges, no gradients"

"Geometric icon set for [feature], consistent stroke weight, angular shapes, [brand color] on white, minimal style"
```

**When to deviate from geometric:**
- Brand guidelines explicitly request another style (organic, hand-drawn, 3D, etc.)
- Product personality requires it (e.g., children's app → whimsical, wellness → organic)
- Client specifically asks for different aesthetic

**Generate brand-specific images for:**
- Hero section backgrounds/illustrations
- Feature section visuals
- Product mockups
- Decorative elements that match brand personality

**Integration:**
```bash
# From skill: nano-banana-pro
nano-banana-generate --prompt "..." --output ./public/images/hero-bg.png
```

Reference these in design-system-prompt.md so coding agents use generated images, not placeholders.

---

## Copy with Personality

Headlines should have VOICE, not corporate-speak:

| ❌ Generic | ✅ With Personality |
|------------|---------------------|
| "Revolutionize your workflow" | "Yo, going somewhere? Let's prepare for that Visa." |
| "The future of productivity" | "BUILD. COLLECT. DOMINATE." |
| "Smart solutions for modern teams" | "Intelligent chatbots that work while you sleep" |

**Guidelines:**
- Match tone to audience (casual for consumers, punchy for gamers, warm for wellness)
- Use specific benefits, not vague promises
- First-person ("we", "your") over corporate third-person
- Numbers and specifics over adjectives ("3x more leads" not "significantly more")

---

## Social Proof That Works

Generic: "Trusted by 1000+ companies" ❌
Specific: "3x increase in closed deals" ✅

**Rules:**
- Real metrics > vague claims
- Named customers > anonymous logos
- Specific outcomes > general satisfaction
- Industry-specific case studies > generic testimonials

```jsx
// ✅ Good social proof
<TestimonialCard
  company="Mr. Hero Realty"
  industry="Real Estate"
  quote="3x increase in closed deals"
  details={["Automated property inquiries", "Deals closed on autopilot"]}
/>

// ❌ Bad social proof
<div className="flex gap-4 opacity-50">
  <Logo1 /><Logo2 /><Logo3 />
  <p>Trusted by leading companies</p>
</div>
```

---

## Anti-Patterns to Avoid

### Generic AI Aesthetics
- ❌ Purple/blue gradients as default
- ❌ Inter font everywhere
- ❌ Identical 16px border-radius on everything
- ❌ Gray shadows without warmth/coolness
- ❌ Emoji as icons (🚀, ✨, 💡) — use Lucide React
- ❌ "Hero section + 3 feature cards + CTA" template
- ❌ Symmetric, predictable layouts
- ❌ Stock photos and abstract blobs
- ❌ "Trusted by 1000+ companies" without specifics
- ❌ Corporate buzzword headlines ("Revolutionize", "Transform", "Empower")

### Technical Mistakes
- ❌ Animations without prefers-reduced-motion support
- ❌ Fixed pixel values instead of responsive units
- ❌ Missing focus states
- ❌ Text over images without sufficient contrast
- ❌ Layout shifts from loading content

---

## Implementation Checklist

Before considering a design complete:

- [ ] **Distinctive typography** - Font pairing has character
- [ ] **Cohesive color system** - CSS variables, semantic naming
- [ ] **Intentional motion** - Orchestrated animations with purpose
- [ ] **Atmospheric depth** - Backgrounds, shadows, layers create space
- [ ] **Responsive refinement** - Looks intentional at all breakpoints
- [ ] **Accessibility** - Color contrast, focus states, reduced motion support
- [ ] **Performance** - Optimized assets, no layout shift, smooth animations
- [ ] **Memorable detail** - One element someone will remember

---

## Final Principle

The difference between "AI-generated" and "designed" is **intentionality**. Every choice—every font, color, spacing value, animation curve—should serve the vision. When in doubt, make a bolder choice and commit fully. Timid design is forgettable design.