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

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

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

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

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

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

Navigation Patterns

Top Navigation (Desktop)

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

Sidebar Navigation (Dashboard)

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

Card Patterns

Content Card

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

Feature Card

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

Pricing Card

┌─────────────────┐ │ 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

<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

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

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

Alert Banner

┌──────────────────────────────────────────┐ │ [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