Design Inspiration

---
name: design-inspiration
description: Curated collection of top-tier website designs organized by category, style, and pattern. Includes SaaS, marketing, e-commerce, and portfolio sites with analysis of what makes them effective. Use when looking for design inspiration or examples of specific patterns.
allowed-tools: Read, Write, Edit, Grep, Glob, mcp__playwright
---

# Design Inspiration

**Purpose:** Provide curated design inspiration and patterns from top-tier websites to inform design decisions.

**Activation Triggers:**
- Looking for design inspiration
- Researching competitors
- Finding examples of specific patterns
- Building landing pages
- Designing SaaS dashboards
- Creating marketing sites

## Curated Site Collections

### 🚀 SaaS & Product Sites

**Minimal & Clean**
| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [linear.app](https://linear.app) | Dark mode, smooth animations, developer-focused | Sticky nav, product screenshots, keyboard shortcuts showcase |
| [raycast.com](https://raycast.com) | macOS-native feel, premium aesthetic | Command palette hero, extension gallery, dark theme |
| [arc.net](https://arc.net) | Bold typography, playful illustrations | Split hero, waitlist CTA, feature cards |
| [height.app](https://height.app) | Gradient mesh backgrounds, clean UI | Animated hero, timeline feature display |

**Enterprise & Trust**
| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [stripe.com](https://stripe.com) | Premium feel, gradient accents, developer trust | API code samples, globe animation, pricing table |
| [vercel.com](https://vercel.com) | Speed-focused messaging, dark mode | Edge network visualization, framework logos, deploy button |
| [planetscale.com](https://planetscale.com) | Database-specific messaging, technical credibility | Schema visualization, branching explanation |
| [supabase.com](https://supabase.com) | Open source trust, feature comparison | GitHub stats, pricing comparison, real-time demo |

**Friendly & Approachable**
| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [notion.so](https://notion.so) | Warm, template-focused, community | Template gallery, use case tabs, team testimonials |
| [slack.com](https://slack.com) | Playful illustrations, channel demos | Product demo GIFs, enterprise logos, integration grid |
| [airtable.com](https://airtable.com) | Colorful, template gallery | Universe showcase, formula builder, view switcher |
| [figma.com](https://figma.com) | Creative, collaborative focus | Real-time cursor demo, plugin showcase, community |

### 💼 Marketing & Agency Sites

**Bold & Creative**
| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [apple.com](https://apple.com) | Minimal, product-focused, premium | Large product photography, scroll animations, comparison tables |
| [spotify.com](https://spotify.com) | Duotone colors, music-focused | Artist features, playlist cards, year-wrapped style |
| [airbnb.com](https://airbnb.com) | Photography-driven, human warmth | Search hero, experience cards, host stories |
| [mailchimp.com](https://mailchimp.com) | Quirky illustrations, yellow brand | Freddie mascot, feature illustrations, pricing clarity |

**Professional & Corporate**
| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [hubspot.com](https://hubspot.com) | Orange accent, clear value prop | Product suite tabs, ROI calculator, case studies |
| [salesforce.com](https://salesforce.com) | Enterprise trust, cloud imagery | Trailhead learning, industry solutions, character mascots |
| [zendesk.com](https://zendesk.com) | Green accent, support-focused | Product demos, customer logos, pricing tiers |

### 🛒 E-commerce & Marketplace

| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [shopify.com](https://shopify.com) | Merchant success focus, green brand | Store examples, pricing clarity, 14-day trial |
| [gumroad.com](https://gumroad.com) | Creator-focused, simple pricing | Fee transparency, creator testimonials, product cards |
| [lemonsqueezy.com](https://lemonsqueezy.com) | Modern e-commerce, yellow brand | Dashboard preview, global payments, tax handling |

### 🎨 Design Tools & Resources

| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [ui.shadcn.com](https://ui.shadcn.com) | Component documentation, copy-paste | Code previews, theme customizer, installation steps |
| [tailwindui.com](https://tailwindui.com) | Premium components, preview grid | Category organization, responsive previews, code tabs |
| [framer.com](https://framer.com) | Motion-focused, template gallery | Site builder demo, animation examples, pricing |
| [webflow.com](https://webflow.com) | Visual builder, template showcase | Interactions demo, CMS explanation, university |

### 📊 Analytics & Data

| Site | Why It's Great | Key Patterns |
|------|----------------|--------------|
| [plausible.io](https://plausible.io) | Privacy-focused, simple dashboard | Live demo, GDPR compliance, open source |
| [posthog.com](https://posthog.com) | All-in-one analytics, hedgehog brand | Product suite, self-host option, pricing calculator |
| [mixpanel.com](https://mixpanel.com) | Event analytics, funnel visualization | Dashboard demos, integration logos, case studies |

## Design Patterns Library

### Hero Section Patterns

**1. Split Hero (Text + Image)**
```
┌─────────────────────────────────────────┐
│  ┌──────────────┐  ┌──────────────────┐ │
│  │ Badge        │  │                  │ │
│  │ Headline     │  │   Product Image  │ │
│  │ Subheadline  │  │   or Screenshot  │ │
│  │ [CTA] [CTA]  │  │                  │ │
│  │ Trust text   │  │                  │ │
│  └──────────────┘  └──────────────────┘ │
└─────────────────────────────────────────┘
```
**Used by:** Notion, Slack, Airtable

**2. Centered Hero**
```
┌─────────────────────────────────────────┐
│                 Badge                   │
│              Headline                   │
│            Subheadline                  │
│           [CTA]  [CTA]                  │
│            Trust logos                  │
│                                         │
│         ┌─────────────────┐             │
│         │ Product Preview │             │
│         └─────────────────┘             │
└─────────────────────────────────────────┘
```
**Used by:** Linear, Vercel, Stripe

**3. Full-Width Hero with Video**
```
┌─────────────────────────────────────────┐
│ ╔═══════════════════════════════════════╗
│ ║      Background Video/Animation      ║
│ ║                                       ║
│ ║            Headline                   ║
│ ║          Subheadline                  ║
│ ║            [CTA]                      ║
│ ╚═══════════════════════════════════════╝
└─────────────────────────────────────────┘
```
**Used by:** Apple, Spotify, Tesla

### Navigation Patterns

**1. Minimal Nav**
```
┌─────────────────────────────────────────┐
│ Logo          Links            [CTA]    │
└─────────────────────────────────────────┘
```

**2. Mega Menu Nav**
```
┌─────────────────────────────────────────┐
│ Logo    Products ▼  Resources ▼  [CTA]  │
├─────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│  │
│ │ Desc     │ │ Desc     │ │ Desc     │  │
│ └──────────┘ └──────────┘ └──────────┘  │
└─────────────────────────────────────────┘
```

### Pricing Patterns

**1. Three-Tier Pricing**
```
┌────────────┐ ┌────────────┐ ┌────────────┐
│   Starter  │ │    Pro     │ │ Enterprise │
│            │ │  POPULAR   │ │            │
│   $29/mo   │ │   $79/mo   │ │  Contact   │
│            │ │            │ │            │
│ ✓ Feature  │ │ ✓ Feature  │ │ ✓ Feature  │
│ ✓ Feature  │ │ ✓ Feature  │ │ ✓ Feature  │
│            │ │ ✓ Feature  │ │ ✓ Feature  │
│            │ │            │ │ ✓ Feature  │
│  [Start]   │ │  [Start]   │ │ [Contact]  │
└────────────┘ └────────────┘ └────────────┘
```

**2. Usage-Based Pricing**
```
┌─────────────────────────────────────────┐
│          Monthly API Calls              │
│    ──────────●────────────────          │
│         10,000 calls                    │
│                                         │
│         Estimated: $49/month            │
│              [Get Started]              │
└─────────────────────────────────────────┘
```

### Social Proof Patterns

**1. Logo Cloud**
```
Trusted by teams at:
[Logo] [Logo] [Logo] [Logo] [Logo]
```

**2. Stats Bar**
```
┌──────────┬──────────┬──────────┬──────────┐
│  50K+    │   1M+    │   99.9%  │   4.9/5  │
│  Users   │  Pages   │  Uptime  │  Rating  │
└──────────┴──────────┴──────────┴──────────┘
```

**3. Testimonial Grid**
```
┌────────────┐ ┌────────────┐ ┌────────────┐
│ ★★★★★      │ │ ★★★★★      │ │ ★★★★★      │
│ "Quote..." │ │ "Quote..." │ │ "Quote..." │
│            │ │            │ │            │
│ 👤 Name    │ │ 👤 Name    │ │ 👤 Name    │
│ Title, Co  │ │ Title, Co  │ │ Title, Co  │
└────────────┘ └────────────┘ └────────────┘
```

## Color Palettes by Style

### Dark Mode (Developer)
```css
--background: hsl(0 0% 4%);      /* #0a0a0a */
--foreground: hsl(0 0% 98%);     /* #fafafa */
--primary: hsl(217 91% 60%);     /* #3b82f6 */
--muted: hsl(0 0% 15%);          /* #262626 */
--border: hsl(0 0% 20%);         /* #333333 */
```

### Light Mode (SaaS)
```css
--background: hsl(0 0% 100%);    /* #ffffff */
--foreground: hsl(222 47% 11%);  /* #0f172a */
--primary: hsl(221 83% 53%);     /* #2563eb */
--muted: hsl(210 40% 96%);       /* #f1f5f9 */
--border: hsl(214 32% 91%);      /* #e2e8f0 */
```

### Warm & Friendly
```css
--background: hsl(30 50% 98%);   /* #fefcfa */
--foreground: hsl(20 14% 20%);   /* #3d3531 */
--primary: hsl(25 95% 53%);      /* #f97316 */
--muted: hsl(30 25% 93%);        /* #f5efe8 */
--accent: hsl(47 96% 53%);       /* #facc15 */
```

## Typography Scales

### Modular Scale 1.25 (Minor Third)
```css
--text-xs: 0.64rem;    /* 10.24px */
--text-sm: 0.8rem;     /* 12.8px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.25rem;    /* 20px */
--text-xl: 1.563rem;   /* 25px */
--text-2xl: 1.953rem;  /* 31.25px */
--text-3xl: 2.441rem;  /* 39px */
--text-4xl: 3.052rem;  /* 48.8px */
```

### Modular Scale 1.333 (Perfect Fourth)
```css
--text-sm: 0.75rem;    /* 12px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.333rem;   /* 21.3px */
--text-xl: 1.777rem;   /* 28.4px */
--text-2xl: 2.369rem;  /* 37.9px */
--text-3xl: 3.157rem;  /* 50.5px */
--text-4xl: 4.209rem;  /* 67.3px */
```

## Spacing Systems

### 8pt Grid
```css
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-24: 6rem;     /* 96px */
--space-32: 8rem;     /* 128px */
```

### Section Spacing
```css
/* Desktop */
--section-padding: 7.5rem;  /* 120px */

/* Tablet */
--section-padding: 5rem;    /* 80px */

/* Mobile */
--section-padding: 4rem;    /* 64px */
```

## Using This Skill

```bash
# Load the skill
!{skill design-inspiration}

# Analyze a specific site
/analyze-design https://linear.app

# Compare multiple sites
/analyze-design https://vercel.com --compare https://stripe.com

# Apply patterns to your project
/build-landing-page homepage --saas
```