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	Dark mode, smooth animations, developer-focused	Sticky nav, product screenshots, keyboard shortcuts showcase
raycast.com	macOS-native feel, premium aesthetic	Command palette hero, extension gallery, dark theme
arc.net	Bold typography, playful illustrations	Split hero, waitlist CTA, feature cards
height.app	Gradient mesh backgrounds, clean UI	Animated hero, timeline feature display

Enterprise & Trust

Site	Why It's Great	Key Patterns
stripe.com	Premium feel, gradient accents, developer trust	API code samples, globe animation, pricing table
vercel.com	Speed-focused messaging, dark mode	Edge network visualization, framework logos, deploy button
planetscale.com	Database-specific messaging, technical credibility	Schema visualization, branching explanation
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	Warm, template-focused, community	Template gallery, use case tabs, team testimonials
slack.com	Playful illustrations, channel demos	Product demo GIFs, enterprise logos, integration grid
airtable.com	Colorful, template gallery	Universe showcase, formula builder, view switcher
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	Minimal, product-focused, premium	Large product photography, scroll animations, comparison tables
spotify.com	Duotone colors, music-focused	Artist features, playlist cards, year-wrapped style
airbnb.com	Photography-driven, human warmth	Search hero, experience cards, host stories
mailchimp.com	Quirky illustrations, yellow brand	Freddie mascot, feature illustrations, pricing clarity

Professional & Corporate

Site	Why It's Great	Key Patterns
hubspot.com	Orange accent, clear value prop	Product suite tabs, ROI calculator, case studies
salesforce.com	Enterprise trust, cloud imagery	Trailhead learning, industry solutions, character mascots
zendesk.com	Green accent, support-focused	Product demos, customer logos, pricing tiers

🛒 E-commerce & Marketplace

Site	Why It's Great	Key Patterns
shopify.com	Merchant success focus, green brand	Store examples, pricing clarity, 14-day trial
gumroad.com	Creator-focused, simple pricing	Fee transparency, creator testimonials, product cards
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	Component documentation, copy-paste	Code previews, theme customizer, installation steps
tailwindui.com	Premium components, preview grid	Category organization, responsive previews, code tabs
framer.com	Motion-focused, template gallery	Site builder demo, animation examples, pricing
webflow.com	Visual builder, template showcase	Interactions demo, CMS explanation, university

📊 Analytics & Data

Site	Why It's Great	Key Patterns
plausible.io	Privacy-focused, simple dashboard	Live demo, GDPR compliance, open source
posthog.com	All-in-one analytics, hedgehog brand	Product suite, self-host option, pricing calculator
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)

--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)

--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

--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)

--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)

--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

--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

/* Desktop */
--section-padding: 7.5rem;  /* 120px */

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

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

Using This Skill

# 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