Design Pattern Library

Status: Comprehensive UI Pattern Guide
Verified: Tested across all use cases

Executive Summary

Consistent patterns create intuitive experiences by establishing a visual and behavioral language users can learn once and apply everywhere. This pattern library documents every reusable interface component, ensuring design consistency while accelerating development through proven solutions.

Pattern Philosophy

Pattern Categories

Section 1: Form Patterns (800 words)

Input, Validation, and Submission

Forms are the primary way users interact with NudgeCampaign. Our patterns prioritize clarity, error prevention, and graceful error handling.

Complete form pattern system with all states and variations

Text Input Pattern

Base Structure:

<div class="form-field">
  <label for="email" class="form-label">
    Email Address
    <span class="required">*</span>
  </label>
  <input 
    type="email" 
    id="email" 
    class="form-input"
    placeholder="you@example.com"
    aria-describedby="email-error email-hint"
  >
  <p class="form-hint" id="email-hint">We'll never share your email</p>
  <p class="form-error" id="email-error" role="alert">Please enter a valid email</p>
</div>

Visual States:

Input Variations

Text Input Types:

• Single line text
• Email with validation
• Password with toggle
• Number with steppers
• Phone with formatting
• Date with calendar
• Time with picker
• URL with protocol

Textarea Pattern:

.form-textarea {
  min-height: 100px;
  max-height: 300px;
  resize: vertical;
  
  /* Character count */
  &[data-count]::after {
    content: attr(data-count) " / " attr(data-max);
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--text-secondary);
  }
}

🔘 Selection Controls

Checkbox Pattern:

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input">
  <span class="checkbox-box"></span>
  <span class="checkbox-label">Remember me</span>
</label>

Radio Button Pattern:

<fieldset class="radio-group" role="radiogroup">
  <legend>Select plan</legend>
  <label class="radio-wrapper">
    <input type="radio" name="plan" value="basic">
    <span class="radio-dot"></span>
    <span class="radio-label">Basic</span>
  </label>
</fieldset>

Select/Dropdown Pattern:

• Native select for simplicity
• Custom dropdown for complex needs
• Multi-select with tags
• Searchable select
• Grouped options
• Icon support

Form Validation

Validation Timing:

1. On blur: Check individual fields
2. On submit: Validate all fields
3. On fix: Clear error immediately
4. Real-time: For critical fields only

Error Message Guidelines:

• Be specific: "Email must include @"
• Be helpful: "Try username@example.com"
• Be positive: "Almost there! Just add..."
• Be brief: Maximum 1 line

Success Feedback:

• Green checkmark appears
• Success message if needed
• Auto-progress to next field
• Save indicator for forms

Section 2: Navigation Patterns (700 words)

Menu, Breadcrumbs, and Tabs

Clear navigation patterns help users understand where they are and where they can go, reducing cognitive load and improving task completion.

Comprehensive navigation patterns for every context

Primary Navigation

Top Navigation Bar:

<nav class="primary-nav" role="navigation">
  <div class="nav-brand">
    <img src="logo.svg" alt="NudgeCampaign">
  </div>
  <ul class="nav-menu">
    <li class="nav-item active">
      <a href="/dashboard">Dashboard</a>
    </li>
    <li class="nav-item">
      <a href="/campaigns">Campaigns</a>
    </li>
  </ul>
  <div class="nav-actions">
    <button class="nav-create">Create Campaign</button>
    <div class="nav-user">
      <img src="avatar.jpg" alt="User">
    </div>
  </div>
</nav>

Visual Hierarchy:

• Logo: 140px width, left aligned
• Menu items: 16px, 500 weight
• Active indicator: 3px bottom border
• CTAs: Primary button style
• User menu: 32px avatar

Breadcrumb Navigation

Pattern Structure:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/campaigns">Campaigns</a></li>
    <li aria-current="page">Welcome Series</li>
  </ol>
</nav>

Styling Rules:

• Separator: "/" or ">" character
• Current page: No link, bold
• Truncation: Middle items on mobile
• Home icon: Optional first item

Tab Navigation

Tab Pattern Types:

Implementation:

// Tab switching behavior
const tabs = {
  init() {
    this.bindEvents();
    this.showTab(0);
  },
  
  bindEvents() {
    document.querySelectorAll('.tab-button').forEach((tab, index) => {
      tab.addEventListener('click', () => this.showTab(index));
    });
  },
  
  showTab(index) {
    // Hide all panels
    document.querySelectorAll('.tab-panel').forEach(panel => {
      panel.hidden = true;
    });
    
    // Show selected
    document.querySelectorAll('.tab-panel')[index].hidden = false;
    
    // Update ARIA
    this.updateAria(index);
  }
};

Pagination

Pattern Options:

• Simple: Previous/Next only
• Numbered: Page numbers
• Load more: Infinite scroll
• Jump to: Page input

Section 3: Data Display Patterns (700 words)

Tables, Charts, and Cards

Data presentation patterns ensure information is scannable, actionable, and accessible across devices.

Flexible data display patterns for various content types

Table Pattern

Responsive Table Structure:

<div class="table-wrapper">
  <table class="data-table">
    <thead>
      <tr>
        <th scope="col" class="sortable">
          Email
          <span class="sort-icon">↕</span>
        </th>
        <th scope="col">Status</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Email">user@example.com</td>
        <td data-label="Status">
          <span class="badge badge-success">Active</span>
        </td>
        <td data-label="Actions">
          <button class="icon-button">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Mobile Adaptation:

@media (max-width: 768px) {
  .data-table {
    thead { display: none; }
    
    tr {
      display: block;
      border: 1px solid #e5e7eb;
      margin-bottom: 8px;
    }
    
    td {
      display: flex;
      justify-content: space-between;
      
      &::before {
        content: attr(data-label);
        font-weight: 600;
      }
    }
  }
}

Card Pattern with shadcn/ui

Card Component Implementation:

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { TrendingUp } from "lucide-react"

export function MetricCard() {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">
          Campaign Performance
        </CardTitle>
        <Button variant="ghost" size="sm">
          View Details
        </Button>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">2,451</div>
        <p className="text-xs text-muted-foreground">
          Opens
        </p>
        <div className="flex items-center text-xs text-green-600">
          <TrendingUp className="mr-1 h-3 w-3" />
          +12% from last month
        </div>
      </CardContent>
      <CardFooter>
        <p className="text-xs text-muted-foreground">
          Updated 5 min ago
        </p>
      </CardFooter>
    </Card>
  )
}

Card Variations with shadcn/ui:

• Metric card: Card with numeric data and trends
• Content card: Card with CardDescription for text
• Action card: Card with Buttons in CardFooter
• Summary card: Card with multiple CardContent sections

Chart Patterns

Chart Types:

• Line: Trends over time
• Bar: Comparisons
• Donut: Proportions
• Sparkline: Inline trends
• Heatmap: Density data

Section 4: Feedback Patterns (700 words)

Alerts, Toasts, and Modals

Feedback patterns communicate system status, confirm actions, and guide users through error recovery.

Comprehensive feedback system for all communication needs

Alert Pattern

Alert Types and Usage:

Alert Structure:

<div role="alert" class="alert alert-success">
  <span class="alert-icon">✅</span>
  <div class="alert-content">
    <h4 class="alert-title">Campaign sent successfully!</h4>
    <p class="alert-message">Your campaign was sent to 1,234 contacts.</p>
  </div>
  <button class="alert-close" aria-label="Close">×</button>
</div>

🍞 Toast Notifications

Toast Behavior:

• Position: Top-right corner
• Duration: 5 seconds default
• Stack: Maximum 3 visible
• Dismiss: Click or swipe
• Queue: FIFO order

Toast Implementation:

class ToastManager {
  show(message, type = 'info', duration = 5000) {
    const toast = this.createToast(message, type);
    this.container.appendChild(toast);
    
    // Auto dismiss
    setTimeout(() => {
      toast.classList.add('toast-exit');
      setTimeout(() => toast.remove(), 300);
    }, duration);
  }
}

🪟 Modal Pattern

Modal Types:

• Confirmation: Yes/No actions
• Form: Data input
• Information: Read-only content
• Media: Image/video display

Modal Structure:

<div class="modal-backdrop" aria-modal="true">
  <div class="modal" role="dialog">
    <header class="modal-header">
      <h2 class="modal-title">Delete Campaign?</h2>
      <button class="modal-close" aria-label="Close">×</button>
    </header>
    <div class="modal-body">
      <p>This action cannot be undone.</p>
    </div>
    <footer class="modal-footer">
      <button class="btn-secondary">Cancel</button>
      <button class="btn-danger">Delete</button>
    </footer>
  </div>
</div>

Section 5: Empty State Patterns (600 words)

Onboarding and Zero-Data States

Empty states are opportunities to guide, educate, and delight users when there's no data to display.

Engaging empty states that guide users to success

Empty State Types

First-Use Empty States:

<div class="empty-state">
  <img src="welcome-illustration.svg" alt="Welcome" class="empty-illustration">
  <h2 class="empty-title">Welcome to NudgeCampaign!</h2>
  <p class="empty-message">
    Create your first campaign and start engaging with your audience.
  </p>
  <button class="btn-primary btn-large">
    <span class="icon">+</span>
    Create First Campaign
  </button>
  <a href="/guide" class="empty-link">Take a guided tour</a>
</div>

No Results States:

• Search: "No results for 'query'"
• Filter: "No items match filters"
• Permission: "You don't have access"
• Error: "Something went wrong"

Design Guidelines

Visual Elements:

• Illustration: 200-300px height
• Title: 24px, bold
• Message: 16px, secondary color
• CTA: Primary button
• Secondary action: Text link

Tone and Messaging:

• Positive: Focus on possibilities
• Clear: Explain why it's empty
• Helpful: Provide next steps
• Brief: 2-3 sentences max

Section 6: Loading & Error Patterns (500 words)

States and Messages

Loading and error states maintain user confidence during wait times and system issues.

Loading patterns that set accurate expectations

Loading Patterns

Skeleton Screens:

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Loading Indicators:

• Spinner: Short operations (<3s)
• Progress bar: Known duration
• Skeleton: Content loading
• Shimmer: Subtle indication

Error Patterns

Error State Types:

• 404: Page not found
• 500: Server error
• Network: Connection lost
• Validation: Form errors
• Permission: Access denied

Error Recovery:

<div class="error-state">
  <img src="error-illustration.svg" alt="Error">
  <h2>Oops! Something went wrong</h2>
  <p>We couldn't load your campaigns. Please try again.</p>
  <button class="btn-primary" onclick="retry()">
    Try Again
  </button>
  <details class="error-details">
    <summary>Error details</summary>
    <code>ERR_NETWORK_TIMEOUT</code>
  </details>
</div>

Best Practices:

• Explain what happened
• Provide recovery action
• Show error details optionally
• Log for debugging
• Maintain visual hierarchy

Conclusion

Great patterns disappear into great experiences. This library provides the building blocks for creating interfaces that feel intuitive, consistent, and delightful—allowing users to focus on their work, not on learning our interface.

Next Steps

1. Review Accessibility Design Guide for inclusive patterns
2. Explore Onboarding Flow Design for user journeys
3. Study Template Gallery Design for content patterns

This pattern library ensures every interface element in NudgeCampaign contributes to our goal of powerful simplicity.