Design Patterns Reference

This skill provides a curated library of proven design patterns that generate high-quality, non-vibe-coded UI.

Layout Patterns

Hero Sections

Pattern 1: Split Hero Best for: SaaS, product landing pages

code

┌─────────────────────────────────────────────┐
│  [Content]              [Media]             │
│  Headline               Image/Video/        │
│  Subhead                Illustration        │
│  CTA Buttons                                │
└─────────────────────────────────────────────┘

Pattern 2: Centered Hero Best for: Announcements, events, minimal designs

code

┌─────────────────────────────────────────────┐
│              [Eyebrow Badge]                │
│                 Headline                    │
│                 Subhead                     │
│           [CTA]    [Secondary]              │
│              [Social Proof]                 │
└─────────────────────────────────────────────┘

Pattern 3: Product Showcase Best for: E-commerce, physical products

code

┌─────────────────────────────────────────────┐
│  [Product Image - Large, High Quality]      │
│  ─────────────────────────────────────────  │
│  Product Name          Price                │
│  Brief Description     [Add to Cart]        │
│  [Feature Icons]                            │
└─────────────────────────────────────────────┘

Navigation Patterns

Top Navigation (Desktop)

code

┌─────────────────────────────────────────────┐
│ [Logo]  Nav Items...        [CTA] [Account] │
└─────────────────────────────────────────────┘

Sidebar Navigation (Dashboard)

code

┌─────────────────────────────────────────────┐
│ [Logo]           │  Page Content            │
│ ───────────────  │                          │
│ Nav Item 1       │                          │
│ Nav Item 2       │                          │
│ Nav Item 3       │                          │
│                  │                          │
│ [Collapsed User] │                          │
└─────────────────────────────────────────────┘

Card Patterns

Content Card

code

┌─────────────────┐
│ [Image]         │
│ Category        │
│ Title           │
│ Description...  │
│ [Meta] [Action] │
└─────────────────┘

Feature Card

code

┌─────────────────┐
│ [Icon]          │
│ Feature Name    │
│ Description     │
│ that explains   │
│ the benefit.    │
└─────────────────┘

Pricing Card

code

┌─────────────────┐
│ Plan Name       │
│ $XX/mo          │
│ Description     │
│ ─────────────── │
│ ✓ Feature 1     │
│ ✓ Feature 2     │
│ ✓ Feature 3     │
│ [CTA Button]    │
└─────────────────┘

Component Patterns

Buttons

Primary Button

•Background: Primary color
•Text: White/contrast color
•Padding: 12px 24px (or 16px 32px for large)
•Border-radius: 6px (or 8px)
•Font-weight: 500 or 600
•Hover: Darken 10%

Secondary Button

•Background: Transparent
•Border: 1px solid primary or gray
•Text: Primary color or gray-700
•Same padding and radius as primary

Ghost Button

•Background: Transparent
•No border
•Text: Primary color
•Underline or subtle hover effect

Forms

Input Field

html

<div class="form-group">
  <label for="input">Label</label>
  <input type="text" id="input" placeholder="Placeholder">
  <span class="hint">Helper text</span>
</div>

Styling:

•Border: 1px solid gray-300
•Border-radius: 6px
•Padding: 10px 14px
•Focus: Border primary color + ring
•Error: Border red + red text

Feedback

Toast Notification

code

┌────────────────────────────┐
│ [Icon] Message text   [X]  │
└────────────────────────────┘

Position: Top-right or bottom-center Duration: 3-5 seconds

Alert Banner

code

┌──────────────────────────────────────────┐
│ [Icon] Alert message with more details.  │
│        [Action Link]                 [X] │
└──────────────────────────────────────────┘

Sector-Specific Patterns

Fintech

Trust Indicators:

•Security badges (SOC2, bank-level encryption)
•Regulatory compliance logos
•Trust pilot/review scores
•"Protected by..." messaging

Data Display:

•Clean data tables with sorting
•Clear number formatting (currency, percentages)
•Status indicators (green/yellow/red)
•Trend indicators (arrows, sparklines)

Color Guidance:

•Primary: Blues, teals
•Success: Greens (money positive)
•Warning: Amber (caution)
•Avoid: Aggressive reds except for losses

Healthcare

Accessibility Priority:

•WCAG AAA contrast where possible
•Large touch targets (48px minimum)
•Clear, readable fonts (18px+ body)
•High-contrast mode option

Information Hierarchy:

•Critical info: Prominent placement
•Warnings: Clear visual distinction
•Patient data: Clear labeling
•Actions: Confirmation for destructive

Color Guidance:

•Calming: Soft blues, greens
•Clinical: Clean whites
•Avoid: Harsh, aggressive colors

E-commerce

Product Display:

•High-quality images (multiple angles)
•Clear pricing (original + sale)
•Stock status
•Quick add to cart

Trust & Conversion:

•Reviews and ratings
•Free shipping threshold
•Return policy highlight
•Secure checkout badges

Urgency (use sparingly):

•Low stock indicators
•Sale countdown
•Limited time offers

SaaS

Onboarding:

•Progressive disclosure
•Progress indicators
•Skip options
•Contextual help

Dashboard:

•Key metrics prominent
•Clear navigation
•Quick actions
•Recent activity

Pricing Page:

•Clear comparison
•Recommended plan highlight
•Feature differentiation
•FAQ section

Anti-Patterns (Avoid These)

Layout Anti-Patterns

•❌ Walls of text without visual breaks
•❌ Too many competing focal points
•❌ Inconsistent alignment
•❌ Cramped spacing

Component Anti-Patterns

•❌ Mystery meat navigation (icons without labels)
•❌ Infinite scroll without way back
•❌ Carousel as primary content
•❌ Pop-ups on page load

Visual Anti-Patterns

•❌ Generic purple-blue gradients
•❌ Floating decorative blobs
•❌ Stock photos of business handshakes
•❌ Default framework colors unchanged