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
1---2name: design-inspiration3description: 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.4---5
6# Design Inspiration
7
8**Purpose:** Provide curated design inspiration and patterns from top-tier websites to inform design decisions.
9
10**Activation Triggers:**
11- Looking for design inspiration
12- Researching competitors
13- Finding examples of specific patterns
14- Building landing pages
15- Designing SaaS dashboards
16- Creating marketing sites
17
18## Curated Site Collections
19
20### 🚀 SaaS & Product Sites
21
22**Minimal & Clean**
23| Site | Why It's Great | Key Patterns |
24|------|----------------|--------------|
25| [linear.app](https://linear.app) | Dark mode, smooth animations, developer-focused | Sticky nav, product screenshots, keyboard shortcuts showcase |
26| [raycast.com](https://raycast.com) | macOS-native feel, premium aesthetic | Command palette hero, extension gallery, dark theme |
27| [arc.net](https://arc.net) | Bold typography, playful illustrations | Split hero, waitlist CTA, feature cards |
28| [height.app](https://height.app) | Gradient mesh backgrounds, clean UI | Animated hero, timeline feature display |
29
30**Enterprise & Trust**
31| Site | Why It's Great | Key Patterns |
32|------|----------------|--------------|
33| [stripe.com](https://stripe.com) | Premium feel, gradient accents, developer trust | API code samples, globe animation, pricing table |
34| [vercel.com](https://vercel.com) | Speed-focused messaging, dark mode | Edge network visualization, framework logos, deploy button |
35| [planetscale.com](https://planetscale.com) | Database-specific messaging, technical credibility | Schema visualization, branching explanation |
36| [supabase.com](https://supabase.com) | Open source trust, feature comparison | GitHub stats, pricing comparison, real-time demo |
37
38**Friendly & Approachable**
39| Site | Why It's Great | Key Patterns |
40|------|----------------|--------------|
41| [notion.so](https://notion.so) | Warm, template-focused, community | Template gallery, use case tabs, team testimonials |
42| [slack.com](https://slack.com) | Playful illustrations, channel demos | Product demo GIFs, enterprise logos, integration grid |
43| [airtable.com](https://airtable.com) | Colorful, template gallery | Universe showcase, formula builder, view switcher |
44| [figma.com](https://figma.com) | Creative, collaborative focus | Real-time cursor demo, plugin showcase, community |
45
46### 💼 Marketing & Agency Sites
47
48**Bold & Creative**
49| Site | Why It's Great | Key Patterns |
50|------|----------------|--------------|
51| [apple.com](https://apple.com) | Minimal, product-focused, premium | Large product photography, scroll animations, comparison tables |
52| [spotify.com](https://spotify.com) | Duotone colors, music-focused | Artist features, playlist cards, year-wrapped style |
53| [airbnb.com](https://airbnb.com) | Photography-driven, human warmth | Search hero, experience cards, host stories |
54| [mailchimp.com](https://mailchimp.com) | Quirky illustrations, yellow brand | Freddie mascot, feature illustrations, pricing clarity |
55
56**Professional & Corporate**
57| Site | Why It's Great | Key Patterns |
58|------|----------------|--------------|
59| [hubspot.com](https://hubspot.com) | Orange accent, clear value prop | Product suite tabs, ROI calculator, case studies |
60| [salesforce.com](https://salesforce.com) | Enterprise trust, cloud imagery | Trailhead learning, industry solutions, character mascots |
61| [zendesk.com](https://zendesk.com) | Green accent, support-focused | Product demos, customer logos, pricing tiers |
62
63### 🛒 E-commerce & Marketplace
64
65| Site | Why It's Great | Key Patterns |
66|------|----------------|--------------|
67| [shopify.com](https://shopify.com) | Merchant success focus, green brand | Store examples, pricing clarity, 14-day trial |
68| [gumroad.com](https://gumroad.com) | Creator-focused, simple pricing | Fee transparency, creator testimonials, product cards |
69| [lemonsqueezy.com](https://lemonsqueezy.com) | Modern e-commerce, yellow brand | Dashboard preview, global payments, tax handling |
70
71### 🎨 Design Tools & Resources
72
73| Site | Why It's Great | Key Patterns |
74|------|----------------|--------------|
75| [ui.shadcn.com](https://ui.shadcn.com) | Component documentation, copy-paste | Code previews, theme customizer, installation steps |
76| [tailwindui.com](https://tailwindui.com) | Premium components, preview grid | Category organization, responsive previews, code tabs |
77| [framer.com](https://framer.com) | Motion-focused, template gallery | Site builder demo, animation examples, pricing |
78| [webflow.com](https://webflow.com) | Visual builder, template showcase | Interactions demo, CMS explanation, university |
79
80### 📊 Analytics & Data
81
82| Site | Why It's Great | Key Patterns |
83|------|----------------|--------------|
84| [plausible.io](https://plausible.io) | Privacy-focused, simple dashboard | Live demo, GDPR compliance, open source |
85| [posthog.com](https://posthog.com) | All-in-one analytics, hedgehog brand | Product suite, self-host option, pricing calculator |
86| [mixpanel.com](https://mixpanel.com) | Event analytics, funnel visualization | Dashboard demos, integration logos, case studies |
87
88## Design Patterns Library
89
90### Hero Section Patterns
91
92**1. Split Hero (Text + Image)**
93```
94┌─────────────────────────────────────────┐
95│ ┌──────────────┐ ┌──────────────────┐ │
96│ │ Badge │ │ │ │
97│ │ Headline │ │ Product Image │ │
98│ │ Subheadline │ │ or Screenshot │ │
99│ │ [CTA] [CTA] │ │ │ │
100│ │ Trust text │ │ │ │
101│ └──────────────┘ └──────────────────┘ │
102└─────────────────────────────────────────┘
103```
104**Used by:** Notion, Slack, Airtable
105
106**2. Centered Hero**
107```
108┌─────────────────────────────────────────┐
109│ Badge │
110│ Headline │
111│ Subheadline │
112│ [CTA] [CTA] │
113│ Trust logos │
114│ │
115│ ┌─────────────────┐ │
116│ │ Product Preview │ │
117│ └─────────────────┘ │
118└─────────────────────────────────────────┘
119```
120**Used by:** Linear, Vercel, Stripe
121
122**3. Full-Width Hero with Video**
123```
124┌─────────────────────────────────────────┐
125│ ╔═══════════════════════════════════════╗
126│ ║ Background Video/Animation ║
127│ ║ ║
128│ ║ Headline ║
129│ ║ Subheadline ║
130│ ║ [CTA] ║
131│ ╚═══════════════════════════════════════╝
132└─────────────────────────────────────────┘
133```
134**Used by:** Apple, Spotify, Tesla
135
136### Navigation Patterns
137
138**1. Minimal Nav**
139```
140┌─────────────────────────────────────────┐
141│ Logo Links [CTA] │
142└─────────────────────────────────────────┘
143```
144
145**2. Mega Menu Nav**
146```
147┌─────────────────────────────────────────┐
148│ Logo Products ▼ Resources ▼ [CTA] │
149├─────────────────────────────────────────┤
150│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
151│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
152│ │ Desc │ │ Desc │ │ Desc │ │
153│ └──────────┘ └──────────┘ └──────────┘ │
154└─────────────────────────────────────────┘
155```
156
157### Pricing Patterns
158
159**1. Three-Tier Pricing**
160```
161┌────────────┐ ┌────────────┐ ┌────────────┐
162│ Starter │ │ Pro │ │ Enterprise │
163│ │ │ POPULAR │ │ │
164│ $29/mo │ │ $79/mo │ │ Contact │
165│ │ │ │ │ │
166│ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │
167│ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │
168│ │ │ ✓ Feature │ │ ✓ Feature │
169│ │ │ │ │ ✓ Feature │
170│ [Start] │ │ [Start] │ │ [Contact] │
171└────────────┘ └────────────┘ └────────────┘
172```
173
174**2. Usage-Based Pricing**
175```
176┌─────────────────────────────────────────┐
177│ Monthly API Calls │
178│ ──────────●──────────────── │
179│ 10,000 calls │
180│ │
181│ Estimated: $49/month │
182│ [Get Started] │
183└─────────────────────────────────────────┘
184```
185
186### Social Proof Patterns
187
188**1. Logo Cloud**
189```
190Trusted by teams at:
191[Logo] [Logo] [Logo] [Logo] [Logo]
192```
193
194**2. Stats Bar**
195```
196┌──────────┬──────────┬──────────┬──────────┐
197│ 50K+ │ 1M+ │ 99.9% │ 4.9/5 │
198│ Users │ Pages │ Uptime │ Rating │
199└──────────┴──────────┴──────────┴──────────┘
200```
201
202**3. Testimonial Grid**
203```
204┌────────────┐ ┌────────────┐ ┌────────────┐
205│ ★★★★★ │ │ ★★★★★ │ │ ★★★★★ │
206│ "Quote..." │ │ "Quote..." │ │ "Quote..." │
207│ │ │ │ │ │
208│ 👤 Name │ │ 👤 Name │ │ 👤 Name │
209│ Title, Co │ │ Title, Co │ │ Title, Co │
210└────────────┘ └────────────┘ └────────────┘
211```
212
213## Color Palettes by Style
214
215### Dark Mode (Developer)
216```css
217--background: hsl(0 0% 4%); /* #0a0a0a */
218--foreground: hsl(0 0% 98%); /* #fafafa */
219--primary: hsl(217 91% 60%); /* #3b82f6 */
220--muted: hsl(0 0% 15%); /* #262626 */
221--border: hsl(0 0% 20%); /* #333333 */
222```
223
224### Light Mode (SaaS)
225```css
226--background: hsl(0 0% 100%); /* #ffffff */
227--foreground: hsl(222 47% 11%); /* #0f172a */
228--primary: hsl(221 83% 53%); /* #2563eb */
229--muted: hsl(210 40% 96%); /* #f1f5f9 */
230--border: hsl(214 32% 91%); /* #e2e8f0 */
231```
232
233### Warm & Friendly
234```css
235--background: hsl(30 50% 98%); /* #fefcfa */
236--foreground: hsl(20 14% 20%); /* #3d3531 */
237--primary: hsl(25 95% 53%); /* #f97316 */
238--muted: hsl(30 25% 93%); /* #f5efe8 */
239--accent: hsl(47 96% 53%); /* #facc15 */
240```
241
242## Typography Scales
243
244### Modular Scale 1.25 (Minor Third)
245```css
246--text-xs: 0.64rem; /* 10.24px */
247--text-sm: 0.8rem; /* 12.8px */
248--text-base: 1rem; /* 16px */
249--text-lg: 1.25rem; /* 20px */
250--text-xl: 1.563rem; /* 25px */
251--text-2xl: 1.953rem; /* 31.25px */
252--text-3xl: 2.441rem; /* 39px */
253--text-4xl: 3.052rem; /* 48.8px */
254```
255
256### Modular Scale 1.333 (Perfect Fourth)
257```css
258--text-sm: 0.75rem; /* 12px */
259--text-base: 1rem; /* 16px */
260--text-lg: 1.333rem; /* 21.3px */
261--text-xl: 1.777rem; /* 28.4px */
262--text-2xl: 2.369rem; /* 37.9px */
263--text-3xl: 3.157rem; /* 50.5px */
264--text-4xl: 4.209rem; /* 67.3px */
265```
266
267## Spacing Systems
268
269### 8pt Grid
270```css
271--space-1: 0.25rem; /* 4px */
272--space-2: 0.5rem; /* 8px */
273--space-3: 0.75rem; /* 12px */
274--space-4: 1rem; /* 16px */
275--space-6: 1.5rem; /* 24px */
276--space-8: 2rem; /* 32px */
277--space-12: 3rem; /* 48px */
278--space-16: 4rem; /* 64px */
279--space-24: 6rem; /* 96px */
280--space-32: 8rem; /* 128px */
281```
282
283### Section Spacing
284```css
285/* Desktop */
286--section-padding: 7.5rem; /* 120px */
287
288/* Tablet */
289--section-padding: 5rem; /* 80px */
290
291/* Mobile */
292--section-padding: 4rem; /* 64px */
293```
294
295## Using This Skill
296
297```bash
298# Load the skill
299!{skill design-inspiration}
300
301# Analyze a specific site
302/analyze-design https://linear.app
303
304# Compare multiple sites
305/analyze-design https://vercel.com --compare https://stripe.com
306
307# Apply patterns to your project
308/build-landing-page homepage --saas
309```
majiayu000