Version: 1.0.0 Last Updated: 2025-11-17 Purpose: UI/UX design guidelines for Media Coverage Admin Dashboard

Media Coverage Dashboard - Design Reference

Version: 1.0.0 Last Updated: 2025-11-17 Purpose: UI/UX design guidelines for Media Coverage Admin Dashboard

Design Philosophy
Layout Structure
Component Library
Color Palette
Typography
Iconography
Data Visualization
Responsive Breakpoints
Interactive States
Accessibility

Design Philosophy

Principles

Data-First: Information should be scannable and actionable
Progressive Disclosure: Show overview first, details on demand
Consistent Patterns: Reuse familiar admin dashboard patterns
Performance Indicators: Make caching and loading states visible
Action-Oriented: Every insight should lead to an action

Design Goals

Enable quick assessment of media coverage health
Identify parts needing media enrichment
Track quality improvements over time
Support data export for further analysis

Layout Structure

Page Layout

┌─────────────────────────────────────────────────────────────┐
│  Header                                                      │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Title                         [Env Switch] [Refresh] │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│  Overview Stats (4-column grid)                             │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐                      │
│  │Stat 1│ │Stat 2│ │Stat 3│ │Stat 4│                      │
│  └──────┘ └──────┘ └──────┘ └──────┘                      │
├─────────────────────────────────────────────────────────────┤
│  Quality Impact Card (full-width)                           │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ With 360° | Without 360° | Difference               │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│  Charts (2-column grid)                                     │
│  ┌──────────────────┐  ┌──────────────────┐               │
│  │ Distribution     │  │ Breakdown        │               │
│  │ (Pie Chart)      │  │ (Bar Chart)      │               │
│  └──────────────────┘  └──────────────────┘               │
├─────────────────────────────────────────────────────────────┤
│  Media Gaps Table (full-width)                              │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Filters & Search                    [Export CSV]    │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │ Part # │ Title │ Quality │ Media │ Missing │ Actions│   │
│  │ ───────┼───────┼─────────┼───────┼─────────┼────────│   │
│  │        │       │         │       │         │        │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Grid System

Desktop: 12-column grid, 24px gutters
Tablet: 8-column grid, 16px gutters
Mobile: 4-column grid, 16px gutters

Spacing Scale

/* Tailwind spacing scale recommended */
--spacing-xs: 0.25rem;  /* 4px */
--spacing-sm: 0.5rem;   /* 8px */
--spacing-md: 1rem;     /* 16px */
--spacing-lg: 1.5rem;   /* 24px */
--spacing-xl: 2rem;     /* 32px */
--spacing-2xl: 3rem;    /* 48px */

Component Library

1. Stat Card

Purpose: Display key metrics with icon and supporting text

Anatomy:

┌─────────────────────────┐
│ Title            [Icon] │
│                         │
│ 1,234                   │
│ Subtitle text           │
└─────────────────────────┘

Variants:

Default (gray)
Primary (blue)
Success (green)
Warning (orange)
Info (purple)

States:

Default
Hover (slight shadow increase)
Loading (skeleton)

Design Specs:

Padding: 24px
Border radius: 8px
Border: 1px solid
Icon size: 20x20px
Value font size: 30px, bold
Title font size: 14px, medium weight

2. Environment Switcher

Purpose: Toggle between production, development, and staging environments

Design:

┌───────────────────────────┐
│ [Prod] Dev  Stage         │ ← Active state: filled blue
│ Prod [Dev] Stage          │ ← Hover state: light gray bg
└───────────────────────────┘

Specs:

Height: 40px
Padding: 4px (container), 12px (buttons)
Border radius: 8px (container), 6px (buttons)
Active: bg-blue-600, text-white
Inactive: text-gray-700, hover:bg-gray-100

3. Distribution Pie Chart

Purpose: Show image type distribution visually

Design:

        Gallery Only
           ╱╲
          ╱  ╲
    Both ◢────◣ No Media
          ╲  ╱
           ╲╱
        360° Only

Specs:

Chart diameter: 240px
Label distance: 10px from edge
Show percentage on labels
Legend below chart
Colors: Blue, Green, Orange, Red, Purple sequence

Interactions:

Hover: highlight slice + tooltip
Click: (future) filter table by category

4. Bar Chart - Media Breakdown

Purpose: Compare coverage percentages across categories

Design:

Percentage
100% │
 80% │     ▓▓▓▓▓
 60% │     ▓▓▓▓▓ ▓▓▓▓▓
 40% │     ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓
 20% │ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓
  0% └─────────────────────────────
      Any  Both Gallery 360°  None

Specs:

Bar width: 40px
Gap: 8px
Bar color: Primary blue (#3b82f6)
Hover: darken bar + show tooltip
Axis labels: 12px, gray-600
Grid lines: dashed, gray-200

5. Media Gaps Table

Purpose: List parts needing media enrichment with search and filters

Header:

┌─────────────────────────────────────────────────────┐
│ Parts Needing Media Enrichment    [Export CSV]     │
│ X,XXX parts with quality > 60                       │
│                                                     │
│ [Search: _________________________]                │
│                                                     │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Missing  │ │Missing  │ │Missing  │ │Missing  │ │
│ │Gallery  │ │ 360°    │ │ PDFs    │ │ All     │ │
│ │  XXX    │ │  XXX    │ │  XXX    │ │  XXX    │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────────────────┘

Table Design:

Header: sticky, gray-50 background
Rows: hover state gray-50
Alternating rows: optional, very subtle
Cell padding: 24px horizontal, 16px vertical
Border: 1px solid gray-200

Column Specs:

Part Number: 150px, monospace, bold
Title: flex-1, truncate with ellipsis
Quality: 80px, center-aligned, badge
Gallery: 60px, center-aligned, number
360°: 60px, center-aligned, checkmark/x
PDFs: 60px, center-aligned, number
Missing: 200px, wrapped badges
Actions: 120px, right-aligned, link button

Quality Badge:

┌──────┐
│  85  │  Green: 80-100
└──────┘  Yellow: 60-79
          Red: 0-59

Missing Media Badges:

[gallery] [360_view] [pdfs]
Orange background, small, rounded

6. Quality Impact Card

Purpose: Highlight correlation between 360° views and quality scores

Design:

┌─────────────────────────────────────────────────────┐
│ [Icon] Media Quality Impact                         │
│                                                     │
│   ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│   │   85.2   │  │   72.3   │  │  +12.9   │       │
│   │ With 360°│  │ No 360°  │  │ Boost    │       │
│   └──────────┘  └──────────┘  └──────────┘       │
│                                                     │
│ Parts with 360° views have 12.9 points higher      │
│ quality scores on average                          │
└─────────────────────────────────────────────────────┘

Specs:

Gradient background: purple-50 to blue-50
Border: purple-200
Value size: 36px, bold
Highlight important number in green

Color Palette

Primary Colors

--blue-50:  #eff6ff;
--blue-100: #dbeafe;
--blue-500: #3b82f6;  /* Primary */
--blue-600: #2563eb;  /* Primary hover */
--blue-700: #1d4ed8;

Semantic Colors

Success (Green):

--green-50:  #f0fdf4;
--green-100: #dcfce7;
--green-600: #16a34a;
--green-700: #15803d;

Warning (Orange):

--orange-50:  #fff7ed;
--orange-100: #ffedd5;
--orange-600: #ea580c;
--orange-700: #c2410c;

Error (Red):

--red-50:  #fef2f2;
--red-100: #fee2e2;
--red-600: #dc2626;
--red-700: #b91c1c;

Info (Purple):

--purple-50:  #faf5ff;
--purple-100: #f3e8ff;
--purple-600: #9333ea;
--purple-700: #7e22ce;

Neutrals

--gray-50:  #f9fafb;  /* Background */
--gray-100: #f3f4f6;  /* Hover states */
--gray-200: #e5e7eb;  /* Borders */
--gray-600: #4b5563;  /* Secondary text */
--gray-700: #374151;  /* Body text */
--gray-900: #111827;  /* Headings */

Chart Colors (in order)

#3b82f6 (Blue)
#10b981 (Green)
#f59e0b (Amber)
#ef4444 (Red)
#8b5cf6 (Purple)

Typography

Font Family

--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

Type Scale

/* Headings */
--text-3xl: 30px / 36px, bold;        /* Page title */
--text-2xl: 24px / 32px, bold;        /* Section title */
--text-xl:  20px / 28px, semibold;    /* Card title */
--text-lg:  18px / 28px, semibold;    /* Subsection */

/* Body */
--text-base: 16px / 24px, regular;    /* Body text */
--text-sm:   14px / 20px, regular;    /* Helper text */
--text-xs:   12px / 16px, medium;     /* Labels, badges */

Font Weights

--font-normal:   400;
--font-medium:   500;
--font-semibold: 600;
--font-bold:     700;

Number Formatting

Large numbers: Use toLocaleString() (1,234,567)
Percentages: 1 decimal place (67.3%)
Quality scores: Integer (85)
Averages: 1 decimal place (2.4 images/part)

Iconography

Recommended Icon Library

Lucide React (preferred):

npm install lucide-react

Icon Mapping

Concept	Icon	Size
Total Parts	`PackageIcon`	20px
360° View	`CameraIcon`	20px
Gallery Images	`ImageIcon`	20px
Documents/PDFs	`FileTextIcon`	20px
Quality/Trending	`TrendingUpIcon`	20px
Refresh	`RefreshCw`	16px
Download/Export	`DownloadIcon`	16px
Search	`SearchIcon`	16px
Error	`AlertCircle`	20px
External Link	`ExternalLinkIcon`	14px

Icon Usage Guidelines

Consistent sizing: 16px (small), 20px (medium), 24px (large)
Stroke width: 2px for all icons
Color: Match parent text color
Alignment: Vertically centered with text
Spacing: 8px gap between icon and text

Data Visualization

Chart Library

Recharts (recommended):

npm install recharts

Pie Chart Configuration

<PieChart width={400} height={400}>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    outerRadius={120}
    label={({ percentage }) => `${percentage.toFixed(1)}%`}
    labelLine={true}
  >
    {/* Dynamic cells with colors */}
  </Pie>
  <Tooltip />
  <Legend verticalAlign="bottom" height={36} />
</PieChart>

Bar Chart Configuration

<BarChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" angle={-45} textAnchor="end" height={100} />
  <YAxis label={{ value: 'Percentage', angle: -90, position: 'insideLeft' }} />
  <Tooltip />
  <Bar dataKey="value" fill="#3b82f6" />
</BarChart>

┌─────────────────────┐
│ Gallery Only        │
│ 297 parts (7.9%)    │
└─────────────────────┘

Specs:

Background: white
Border: 1px solid gray-200
Shadow: subtle drop shadow
Padding: 12px
Font size: 14px

Responsive Breakpoints

Breakpoint System

/* Tailwind breakpoints */
--breakpoint-sm: 640px;   /* Small devices */
--breakpoint-md: 768px;   /* Tablets */
--breakpoint-lg: 1024px;  /* Laptops */
--breakpoint-xl: 1280px;  /* Desktops */

Layout Adjustments

Desktop (1024px+):

4-column stat cards
2-column charts
Full table width

Tablet (768px - 1023px):

2-column stat cards
Single column charts
Scrollable table

Mobile (< 768px):

Single column everything
Stacked stat cards
Simplified table (hide less important columns)
Bottom sheet for filters

Mobile Table Simplification

Hide columns on mobile:

Hide "Title" (show in expanded row)
Hide individual media counts
Show only "Part Number", "Quality", "Missing" summary

Interactive States

Button States

Primary Button:

/* Default */
background: #2563eb;
color: white;

/* Hover */
background: #1d4ed8;

/* Active */
background: #1e40af;

/* Disabled */
background: #93c5fd;
cursor: not-allowed;
opacity: 0.5;

Secondary Button:

/* Default */
background: white;
border: 1px solid #e5e7eb;
color: #374151;

/* Hover */
background: #f9fafb;
border-color: #d1d5db;

Loading States

Skeleton Screen:

/* Shimmer animation */
background: linear-gradient(
  90deg,
  #f3f4f6 0%,
  #e5e7eb 50%,
  #f3f4f6 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;

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

Spinner:

/* Rotating border */
width: 32px;
height: 32px;
border: 4px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;

@keyframes spin {
  to { transform: rotate(360deg); }
}

Focus States

/* Keyboard focus (accessibility) */
outline: 2px solid #3b82f6;
outline-offset: 2px;

/* Remove default outline */
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

Accessibility

WCAG 2.1 AA Compliance

Color Contrast:

Text on white: minimum 4.5:1 contrast ratio
Large text (18px+): minimum 3:1
UI components: minimum 3:1

Tested Combinations:

gray-900 on white: 16.1:1 ✓
gray-700 on white: 9.2:1 ✓
gray-600 on white: 7.2:1 ✓
blue-600 on white: 5.9:1 ✓

Tab order: logical, top-to-bottom, left-to-right
Focus indicators: visible 2px blue outline
Skip links: "Skip to content" for screen readers
Escape key: Close modals/dropdowns

ARIA Labels:

<button aria-label="Refresh dashboard data">
  <RefreshIcon />
</button>

<table aria-label="Parts with media gaps">
  <caption class="sr-only">
    List of parts needing media enrichment
  </caption>
</table>

Status Messages:

<div role="status" aria-live="polite">
  Data refreshed successfully
</div>

Alternative Text

<!-- Charts -->
<div role="img" aria-label="Pie chart showing 67% of parts have 360° views">
  <PieChart ... />
</div>

<!-- Loading states -->
<div role="status" aria-label="Loading dashboard data">
  <LoadingSpinner />
</div>

Animation Guidelines

Timing Functions

--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);

Duration Scale

Instant: 100ms (hover feedback)
Fast: 200ms (button clicks)
Normal: 300ms (modal open/close)
Slow: 500ms (page transitions)

Animated Elements

Stat Cards:

transition: box-shadow 200ms ease-in-out;

/* Hover */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

Loading Spinner:

animation: spin 1s linear infinite;

Chart Transitions:

<Bar animationDuration={500} animationEasing="ease-out" />

Implementation Checklist

Phase 1: Core Components

Stat card component
Environment switcher
Loading states
Error boundaries

Phase 2: Data Visualization

Distribution pie chart
Breakdown bar chart
Chart tooltips
Legend components

Phase 3: Table & Filters

Media gaps table
Search input
Column sorting
CSV export

Phase 4: Polish

Responsive design
Accessibility audit
Animation refinement
Loading skeletons

Phase 5: Advanced Features

Filter presets
Bookmark views
Dashboard customization
Real-time updates

Design Tools

Recommended Tools

Figma: For mockups and prototypes
Tailwind CSS: For rapid UI development
Storybook: For component documentation
Chromatic: For visual regression testing

Figma File Structure

CROP Media Coverage Dashboard
├── 1. Design System
│   ├── Colors
│   ├── Typography
│   ├── Components
│   └── Icons
├── 2. Desktop Views
│   ├── Dashboard Overview
│   ├── Table Detail
│   └── Loading States
├── 3. Tablet Views
│   └── Responsive Layouts
├── 4. Mobile Views
│   └── Stacked Layouts
└── 5. Component Library
    ├── Stat Cards
    ├── Charts
    ├── Tables
    └── Buttons

Resources

Design Inspiration

Datadog: Dashboard layouts
Grafana: Data visualization
Retool: Admin tables
Linear: Clean UI patterns

Component Libraries

Shadcn/ui: Headless components
Radix UI: Accessible primitives
Recharts: Chart library
React Table: Advanced tables

Color Tools

Coolors: Palette generation
Contrast Checker: WCAG compliance
Tailwind Colors: Ready-made palettes

Changelog

v1.0.0 (2025-11-17)

Initial design reference
Component specifications
Color palette and typography
Accessibility guidelines
Responsive breakpoints

Contact

For design questions or feedback:

Frontend Team: [contact]
Design Team: [contact]
Accessibility: [contact]

Media Coverage Dashboard - Design Reference

On this page