High-Fidelity Mockup Specifications with shadcn/ui

Status: Complete Design Specifications
Framework: shadcn/ui + Radix UI + Tailwind CSS
Verified: Based on competitor analysis and user research
Reference: UI Architecture Guide

Executive Summary

Transform wireframes into pixel-perfect mockups that balance visual appeal with functional clarity. This specification defines the complete visual design language for NudgeCampaign's interface, ensuring every screen delights users while maintaining the simplicity that differentiates us from complex competitors.

Design Philosophy

Mockup Overview

Section 1: Dashboard Mockups (800 words)

Main Dashboard Design

The dashboard represents the user's command center, providing immediate visibility into campaign performance while maintaining visual simplicity. Unlike ActiveCampaign's overwhelming 20+ widget dashboard, our design focuses on the 5 metrics that matter most.

Clean dashboard design prioritizing actionable insights over data overload

Visual Design Elements

Color Palette with shadcn/ui CSS Variables:

/* shadcn/ui theme configuration */
@layer base {
  :root {
    --background: 0 0% 100%;           /* White background */
    --foreground: 222.2 84% 4.9%;      /* Dark text */
    
    --card: 0 0% 100%;                 /* Card backgrounds */
    --card-foreground: 222.2 84% 4.9%; /* Card text */
    
    --primary: 221.2 83.2% 53.3%;      /* #2563EB - Primary blue */
    --primary-foreground: 210 40% 98%; /* White on primary */
    
    --secondary: 271.5 81.3% 55.9%;    /* #7C3AED - Purple */
    --secondary-foreground: 210 40% 98%;
    
    --destructive: 0 84.2% 60.2%;      /* #EF4444 - Red */
    --destructive-foreground: 210 40% 98%;
    
    --muted: 210 40% 96.1%;            /* Muted backgrounds */
    --muted-foreground: 215.4 16.3% 46.9%;
    
    --accent: 210 40% 96.1%;           /* Accent color */
    --accent-foreground: 222.2 47.4% 11.2%;
    
    --border: 214.3 31.8% 91.4%;       /* Border color */
    --input: 214.3 31.8% 91.4%;        /* Input borders */
    --ring: 222.2 84% 4.9%;            /* Focus rings */
    
    /* Custom semantic colors */
    --success: 158 64% 39%;            /* #10B981 - Green */
    --warning: 38 92% 50%;             /* #F59E0B - Amber */
    
    --radius: 0.5rem;                  /* Border radius */
  }
}

Layout Grid System:

• 12-column grid with 24px gutters
• Maximum content width: 1440px
• Responsive breakpoints: 1440px, 1024px, 768px, 375px
• Card-based layout with 8px border radius
• Consistent 16px padding within cards

Key Metrics Cards with shadcn/ui

// Metric card implementation using shadcn/ui
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { TrendingUp, TrendingDown, ArrowUpRight } from "lucide-react"
import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis } from "recharts"

export function MetricCard({ 
  title, 
  value, 
  change, 
  trend, 
  data 
}: MetricCardProps) {
  const isPositive = change > 0;
  
  return (
    <Card className="hover:shadow-lg transition-shadow cursor-pointer">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">
          {title}
        </CardTitle>
        <Button variant="ghost" size="icon" className="h-8 w-8">
          <ArrowUpRight className="h-4 w-4" />
        </Button>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <div className="flex items-center space-x-2">
          <Badge 
            variant={isPositive ? "default" : "destructive"}
            className="flex items-center gap-1"
          >
            {isPositive ? (
              <TrendingUp className="h-3 w-3" />
            ) : (
              <TrendingDown className="h-3 w-3" />
            )}
            {Math.abs(change)}%
          </Badge>
          <span className="text-xs text-muted-foreground">
            vs last period
          </span>
        </div>
        
        {/* Sparkline Chart */}
        <div className="h-[60px] mt-3">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data}>
              <Line
                type="monotone"
                dataKey="value"
                stroke="hsl(var(--primary))"
                strokeWidth={2}
                dot={false}
              />
              <Tooltip />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}

Metric Card Specifications with shadcn/ui:

• Card component with hover shadow transition
• Typography using Tailwind utilities
• Badge component for trend indicators
• Recharts integration for sparklines
• Responsive design with shadcn/ui breakpoints
• Built-in dark mode support via CSS variables

Navigation Design

Primary Navigation Bar:

• Fixed position with backdrop blur effect
• Height: 64px with centered content
• Logo placement: Left aligned, 140px width
• Navigation items: 16px font size, 500 weight
• Active indicator: 3px bottom border in primary color
• User menu: Right aligned with avatar and dropdown

Secondary Navigation (Sidebar):

• Width: 260px (desktop), collapsible to 64px
• Icon + label navigation items
• Nested navigation with smooth accordion
• Current page highlight with background tint
• Quick action buttons at bottom

Responsive Behavior

Desktop (1440px+):

• Full sidebar navigation visible
• 4-column metric card layout
• Side-by-side content arrangement

Tablet (768px-1439px):

• Collapsible sidebar (icon only)
• 2-column metric card layout
• Stacked content sections

Mobile (375px-767px):

• Bottom tab navigation
• Single column layout
• Swipeable metric cards
• Condensed information density

Section 2: Email Editor Mockups (800 words)

Drag-and-Drop Editor Interface

The email editor embodies our "powerful yet simple" philosophy, providing professional design capabilities without the complexity of Klaviyo's 100+ options interface.

Intuitive three-panel editor layout optimized for productivity

Editor Layout Structure

Three-Panel Architecture:

Block Palette (Left Panel):

• Fixed width: 240px
• Grouped categories with icons
• Drag indicators on hover
• Search/filter functionality
• Custom block section
• Recently used blocks

Canvas Area (Center):

• Email width: 600px centered
• Background customization
• Zoom controls (50%-200%)
• Device preview toggle
• Grid/guide overlays
• Drop zone indicators

Properties Panel (Right):

• Contextual controls
• Tabbed organization
• Real-time preview
• Advanced options toggle
• Mobile preview pane

Content Block Design

Block Visual Treatment:

• Hover state: Blue border with drag cursor
• Active state: Blue border with resize handles
• Drop zones: Dashed border with plus icon
• Block toolbar: Appears on hover/selection
• Nested blocks: Indented with connection lines

Core Block Types:

Editor Controls

Top Toolbar Design:

• Save button: Primary CTA styling
• Preview button: Secondary with icon
• Send test: Tertiary action
• Undo/redo: Icon buttons
• Settings: Gear icon dropdown
• Template name: Inline editable

Mobile Editor Adaptations:

• Stacked panels with tab switching
• Touch-optimized controls
• Pinch to zoom canvas
• Swipe between panels
• Floating action button for blocks

Responsive Editor States

Section 3: Automation Builder Mockups (700 words)

Visual Workflow Interface

The automation builder transforms complex logic into visual flows, making it accessible to non-technical users while maintaining the power needed for sophisticated campaigns.

Node-based automation builder with intuitive drag-and-drop workflow creation

Canvas Design

Visual Design Language:

• Grid background: Subtle dots at 20px intervals
• Canvas size: Infinite scroll with minimap
• Zoom range: 25% to 200%
• Pan: Click and drag or spacebar
• Connection paths: Bezier curves with animation

Node Design System with shadcn/ui:

// Workflow node component using shadcn/ui
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Zap, Mail, GitBranch, Clock, Target } from "lucide-react"

const nodeTypes = {
  trigger: {
    icon: Zap,
    color: "border-l-blue-500",
    bgColor: "bg-blue-50 dark:bg-blue-950",
    badge: "primary"
  },
  action: {
    icon: Mail,
    color: "border-l-green-500",
    bgColor: "bg-green-50 dark:bg-green-950",
    badge: "success"
  },
  condition: {
    icon: GitBranch,
    color: "border-l-amber-500",
    bgColor: "bg-amber-50 dark:bg-amber-950",
    badge: "warning"
  },
  delay: {
    icon: Clock,
    color: "border-l-purple-500",
    bgColor: "bg-purple-50 dark:bg-purple-950",
    badge: "secondary"
  },
  goal: {
    icon: Target,
    color: "border-l-teal-500",
    bgColor: "bg-teal-50 dark:bg-teal-950",
    badge: "outline"
  }
};

export function WorkflowNode({ type, title, description, status }) {
  const config = nodeTypes[type];
  const Icon = config.icon;
  
  return (
    <Card className={cn(
      "min-w-[200px] cursor-move transition-all",
      "hover:shadow-lg hover:scale-105",
      "border-l-4",
      config.color
    )}>
      <CardHeader className={cn("pb-3", config.bgColor)}>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Icon className="h-4 w-4" />
            <span className="text-sm">{title}</span>
          </div>
          <Badge variant={config.badge as any} className="text-xs">
            {status}
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="pt-3">
        <p className="text-sm text-muted-foreground">{description}</p>
        <div className="flex gap-1 mt-3">
          <Button size="sm" variant="ghost">Edit</Button>
          <Button size="sm" variant="ghost">Delete</Button>
        </div>
      </CardContent>
    </Card>
  )
}

Node Types and Visual Treatment

Connection Path Styling:

• Active path: 2px solid with flow animation
• Inactive path: 1px solid with 50% opacity
• Hover state: Highlight with tooltip
• Error state: Red color with warning icon
• Success state: Green with checkmark

Workflow Controls

Canvas Toolbar:

• Zoom controls: +/- buttons with percentage
• Fit to screen: Auto-zoom to show all nodes
• Grid toggle: Show/hide background grid
• Validate: Check for errors/warnings
• Run test: Execute with sample data
• Save/publish: Primary action buttons

Node Palette:

• Categorized by type
• Search functionality
• Drag to add
• Popular nodes highlighted
• Custom node creation

Mobile Automation Builder

Touch Optimizations:

• Larger touch targets (44px minimum)
• Pinch to zoom gesture
• Long press for context menu
• Simplified connection drawing
• Node carousel for adding

Section 4: Contact Management Mockups (700 words)

List and Segment Interface

Contact management balances powerful segmentation with intuitive organization, learning from ConvertKit's simplicity while avoiding Klaviyo's overwhelming filter complexity.

Clean contact management with powerful filtering and bulk actions

Table Design

Visual Structure:

• Sticky header with sort indicators
• Zebra striping for readability
• Hover row highlighting
• Checkbox selection column
• Inline action buttons
• Pagination controls

Column Specifications with shadcn/ui Table:

// Contact table using shadcn/ui Table component
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { MoreHorizontal, Edit, Trash } from "lucide-react"

export function ContactTable({ contacts }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[40px]">
            <Checkbox />
          </TableHead>
          <TableHead className="w-[30%]">Email</TableHead>
          <TableHead className="w-[20%]">Name</TableHead>
          <TableHead className="w-[20%]">Tags</TableHead>
          <TableHead className="w-[15%]">Status</TableHead>
          <TableHead className="w-[15%]">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {contacts.map((contact) => (
          <TableRow key={contact.id}>
            <TableCell>
              <Checkbox />
            </TableCell>
            <TableCell className="font-medium">
              {contact.email}
            </TableCell>
            <TableCell>{contact.name}</TableCell>
            <TableCell>
              <div className="flex gap-1 flex-wrap">
                {contact.tags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            </TableCell>
            <TableCell>
              <Badge 
                variant={contact.status === 'active' ? 'default' : 'destructive'}
              >
                {contact.status}
              </Badge>
            </TableCell>
            <TableCell>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="h-8 w-8 p-0">
                    <span className="sr-only">Open menu</span>
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>
                    <Edit className="mr-2 h-4 w-4" />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuItem className="text-destructive">
                    <Trash className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Filter and Search Design

Search Bar Styling:

• Full width with icon
• Real-time suggestions
• Search history dropdown
• Clear button on input
• Advanced search link

Filter Builder Interface:

• Visual filter chips
• Drag to combine conditions
• AND/OR logic toggles
• Save filter sets
• Quick filter presets

Responsive Table Behavior

Mobile Optimization:

• Card-based layout
• Essential fields visible
• Swipe for actions
• Expandable details
• Floating action button

Section 5: Analytics View Mockups (600 words)

Reports and Insights Dashboard

Analytics mockups focus on actionable insights rather than vanity metrics, presenting data in digestible visual formats.

Data visualization that tells a story and drives decisions

Chart Design System

Consistent Visual Language:

• Chart height: 300px standard
• Color palette: Sequential blues
• Grid lines: Subtle gray
• Tooltips: On hover with details
• Legends: Interactive filtering

Chart Types:

Dashboard Layout

Grid-Based Organization:

• Summary cards: Full width
• Primary chart: 2/3 width
• Secondary metrics: 1/3 width
• Time selector: Top right
• Export controls: Inline

Interactive Elements:

• Date range picker
• Metric toggles
• Drill-down capability
• Comparison mode
• Annotation tools

Mobile Analytics

Simplified Views:

• Swipeable chart cards
• Collapsed timeframes
• Essential metrics only
• Gesture-based interactions
• Progressive disclosure

Section 6: Mobile Responsive Mockups (400 words)

Key Mobile Screens

Mobile-first design ensures every feature remains accessible and delightful on smaller screens.

Responsive design maintaining functionality across all device sizes

Mobile Design Principles

Touch-Optimized Interface with shadcn/ui:

// Mobile-optimized components using shadcn/ui
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Menu, Plus, Home, Mail, BarChart3, Settings } from "lucide-react"

// Bottom Tab Navigation
export function MobileTabBar() {
  return (
    <Tabs defaultValue="home" className="fixed bottom-0 left-0 right-0 bg-background border-t">
      <TabsList className="grid w-full grid-cols-4 h-16">
        <TabsTrigger value="home" className="flex flex-col gap-1 h-full">
          <Home className="h-5 w-5" />
          <span className="text-xs">Home</span>
        </TabsTrigger>
        <TabsTrigger value="campaigns" className="flex flex-col gap-1 h-full">
          <Mail className="h-5 w-5" />
          <span className="text-xs">Campaigns</span>
        </TabsTrigger>
        <TabsTrigger value="analytics" className="flex flex-col gap-1 h-full">
          <BarChart3 className="h-5 w-5" />
          <span className="text-xs">Analytics</span>
        </TabsTrigger>
        <TabsTrigger value="settings" className="flex flex-col gap-1 h-full">
          <Settings className="h-5 w-5" />
          <span className="text-xs">Settings</span>
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

// Mobile Sheet for Actions
export function MobileActionSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button
          size="icon"
          className="fixed bottom-20 right-4 h-14 w-14 rounded-full shadow-lg"
        >
          <Plus className="h-6 w-6" />
        </Button>
      </SheetTrigger>
      <SheetContent side="bottom" className="h-auto">
        <div className="grid gap-4 py-4">
          <Button className="h-12 justify-start" variant="ghost">
            <Mail className="mr-3 h-5 w-5" />
            Create Campaign
          </Button>
          <Button className="h-12 justify-start" variant="ghost">
            <Plus className="mr-3 h-5 w-5" />
            Add Contact
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}

Navigation Patterns with shadcn/ui:

Responsive Breakpoints

Adaptation Strategy:

• 375px: Single column, stacked
• 768px: Two columns, tabs
• 1024px: Sidebar visible
• 1440px: Full desktop layout

Progressive Enhancement:

• Core features mobile-first
• Advanced features desktop-only
• Touch gestures mobile
• Keyboard shortcuts desktop

Conclusion

Every pixel has purpose in our mockup specifications. By maintaining visual consistency while optimizing for each use case, we create an interface that feels both powerful and approachable—exactly what our users need.

Next Steps

1. Review Interactive Prototype Specifications for interaction details
2. Explore Design Pattern Library for component specifications
3. Study Accessibility Guide for inclusive design

These mockup specifications ensure NudgeCampaign delivers a visually stunning yet functionally superior experience compared to complex, expensive competitors.