Design Patterns
Proven design patterns for websites. Layouts, components, and visual hierarchy that work.
Design patterns that consistently work. Use these as building blocks.
Page Layouts
Standard Marketing Page
[Header - Logo, Nav, CTA] [Hero - Headline, Subhead, CTA, Visual] [Social Proof - Logos or testimonials] [Features - 3-4 key benefits] [How It Works - Steps or process] [Testimonials - Customer quotes] [Pricing - Plans comparison] [FAQ - Common questions] [CTA - Final call to action] [Footer - Links, contact, legal]
Documentation Page
[Header - Logo, Search, Nav] [Sidebar - Navigation tree] [Content - Prose, code, examples] [TOC - Right sidebar on desktop] [Prev/Next - Navigation] [Footer - Edit link, feedback]
Blog Post
[Header] [Hero Image] [Title, Meta, Author] [Content] [Share Links] [Author Bio] [Related Posts] [Newsletter Signup] [Footer]
Hero Sections
Split Hero
Visual on one side, content on the other:
[Content Column] [Visual Column] - Tagline - Image, video, or - Headline illustration - Description - CTA buttons
Works for: SaaS, products, apps
Centered Hero
All content centered:
[Tagline]
[Headline]
[Description]
[CTA] [CTA]
Works for: Landing pages, campaigns
Hero with Background
Full-width background image or gradient:
┌──────────────────────────────────┐ │ [Background Image/Gradient] │ │ │ │ [Headline] │ │ [Description] │ │ [CTA] │ │ │ └──────────────────────────────────┘
Works for: Bold statements, portfolios
Feature Sections
Feature Grid
3 or 4 column grid with icons:
[Icon] [Icon] [Icon] Title Title Title Desc Desc Desc [Icon] [Icon] [Icon] Title Title Title Desc Desc Desc
Alternating Features
Image and text alternate sides:
[Text] [Image] ---------------------------- [Image] [Text] ---------------------------- [Text] [Image]
Feature Cards
Each feature in its own card:
┌─────────┐ ┌─────────┐ ┌─────────┐ │ [Icon] │ │ [Icon] │ │ [Icon] │ │ Title │ │ Title │ │ Title │ │ Desc │ │ Desc │ │ Desc │ │ [Link] │ │ [Link] │ │ [Link] │ └─────────┘ └─────────┘ └─────────┘
Social Proof
Logo Bar
Grayscale client/press logos in a row:
"Trusted by teams at:" [Logo] [Logo] [Logo] [Logo] [Logo]
Testimonial Cards
Quote cards in grid or carousel:
┌────────────────┐ │ "Quote text │ │ goes here..." │ │ │ │ [Photo] Name │ │ Title │ └────────────────┘
Stats Row
Key numbers with context:
[2,000+] [$5M] [4.9★] Users Processed Rating
Pricing Tables
Three-Tier Standard
┌─────────┐ ┌──────────┐ ┌─────────┐ │ Free │ │ Pro │ │Enterprise│ │ │ │ Popular │ │ │ │ $0 │ │ $29/mo │ │ Custom │ │ │ │ │ │ │ │ • Feat │ │ • Feat │ │ • Feat │ │ • Feat │ │ • Feat │ │ • Feat │ │ │ │ • Feat │ │ • Feat │ │ │ │ • Feat │ │ • Feat │ │ │ │ │ │ │ │ [Start] │ │ [Start] │ │[Contact] │ └─────────┘ └──────────┘ └─────────┘
Comparison Table
For detailed feature comparison:
Feature | Free | Pro | Enterprise ─────────────┼──────┼─────┼─────────── Projects | 3 | 10 | Unlimited Team members | 1 | 5 | Unlimited Support | Docs | Email| Dedicated
CTAs
Primary CTA
High contrast, clear action:
[██████████████████] Get Started Free
Secondary CTA
Lower emphasis, alternative action:
[──────────────────]
Learn More
CTA Section
Full-width final call to action:
┌──────────────────────────────────┐ │ Ready to get started? │ │ [Primary CTA] [Secondary CTA] │ └──────────────────────────────────┘
Navigation
Standard Header
[Logo] [Nav Links] [CTA]
Docs Header
[Logo] [Search] [Docs] [API] [CTA]
Mobile Menu
Hamburger that opens to:
┌────────────────┐ │ [×] │ │ Link │ │ Link │ │ Link │ │ [CTA] │ └────────────────┘
Footer
Standard Footer
[Logo] [Product] [Company] [Legal]
Features About Privacy
Description Pricing Blog Terms
Docs Careers
[Social Icons] © 2025 Company
Minimal Footer
© 2025 Company | Privacy | Terms | [Social]
Visual Hierarchy
Contrast
Guide attention with contrast:
- Large vs. small
- Bold vs. light
- Color vs. gray
- Filled vs. outlined
Spacing
Use consistent spacing scale:
- Within components: small (4-8px)
- Between elements: medium (16-24px)
- Between sections: large (64-96px)
Alignment
Align to a grid:
- Left-align body text
- Center for emphasis
- Consistent margins
Responsive Patterns
Stack on Mobile
Desktop: [A] [B] [C]
Mobile: [A]
[B]
[C]
Hide on Mobile
Remove secondary elements on small screens.
Different Order
Reorder for mobile priority:
- CTA before content
- Hero image after headline
Related Docs
- Templates — Pre-built designs
- Prompt Engineering — Describe patterns to AI
- Use Cases — Full implementations