design_guidelines.md

AI Call Operations Manager Dashboard - Design Guidelines

Design Approach

Selected System: Carbon Design System with Material Design influences Justification: Data-heavy enterprise dashboard requiring clarity, consistency, and efficient information density. Carbon excels at complex data visualization and real-time monitoring interfaces.

Layout System

Grid Structure

• Container: Full viewport width with fixed max-width of max-w-screen-2xl
• Three-column dashboard layout:
  • Left Panel (AI Agents): w-80 (320px)
  • Middle Panel (Call Detail): Flexible flex-1
  • Right Panel (Customer): w-96 (384px)
• Spacing Units: Use Tailwind units of 2, 3, 4, 6, 8 consistently (e.g., p-4, gap-6, space-y-3)
• Panel Padding: Interior panel padding p-6, card spacing gap-4
• Responsive: Stack panels vertically on tablet/mobile (lg: breakpoint for multi-column)

Typography

Font Families

• Primary: Inter (Google Fonts) - UI text, labels, data
• Monospace: JetBrains Mono - Call IDs, timestamps, metrics
• Weights: Regular (400), Medium (500), Semibold (600)

Hierarchy

• Dashboard Title: text-2xl font-semibold
• Panel Headers: text-lg font-semibold
• Agent/Customer Names: text-base font-medium
• Call Metrics/KPIs: text-3xl font-semibold (large display)
• Labels: text-sm font-medium uppercase tracking-wide
• Body/Transcripts: text-sm leading-relaxed
• Timestamps/IDs: text-xs font-mono

Component Library

Status Indicators

• Active (Green): Pulsing dot with ring animation animate-pulse
• Waiting (Yellow): Steady dot
• Issue (Red): Pulsing dot with alert icon
• Size: h-3 w-3 dots with h-8 w-8 background circle for prominence

AI Agent Tiles

• Structure: Card with header (agent name/ID + status), body (active call count), footer (5 mini call cards in grid)
• Mini Call Cards: p-3 border rounded-lg with call ID, duration, status dot
• Interactive: Hover state with subtle elevation, cursor pointer
• Spacing: space-y-3 between tiles

Call Detail Widgets

• Call Timer: Large centered display text-4xl font-mono with elapsed time
• Soundwave Indicator: Horizontal bars showing speaking activity, two-tone for AI vs Customer
• Live Transcript: Scrollable container max-h-96 overflow-y-auto with message bubbles (AI left-aligned, Customer right-aligned)
• Interaction Timeline: Vertical timeline with dots and connecting lines, chronological flow

Customer Profile Card

• Header: Avatar placeholder + name + VIP badge (if applicable)
• Info Grid: 2-column layout for key metrics (ID, engagement score, purchase history)
• Personalized Offers: Card list with offer title, description, and CTA
• Compact Design: Dense information without clutter, space-y-2

Data Flow Diagram

• Block Design: Rounded rectangles with labels inside
• Arrow Style: Solid lines with arrowheads, directional flow left-to-right or top-to-bottom
• Placement: Header area or dedicated section, flex gap-2 horizontal arrangement
• Labels: Clear text-xs font-medium inside each block

KPI Summary Cards (Footer)

• Layout: Horizontal flex row flex gap-4
• Card Structure: Icon + metric value + label
• Metric Value: text-2xl font-semibold
• Compact: p-4 each card

Alert System

• Toast-style notifications: Fixed position bottom-left fixed bottom-4 left-4
• Alert levels: Info, warning, critical (visual differentiation)
• Auto-dismiss: 5-second duration with progress bar

Interactions & States

Navigation

• Full keyboard support: Tab order follows left-to-right, top-to-bottom flow
• Selected call: Highlighted border on selected agent tile, corresponding middle panel update
• Focus states: Visible outline for all interactive elements

Real-time Updates

• Smooth transitions: Fade-in for new data transition-opacity duration-300
• Pulsing indicators: For active status and speaking activity
• Auto-scroll: Transcript auto-scrolls to latest message with smooth behavior

Responsive Behavior

• Desktop priority: Optimized for 1920x1080+ displays
• Tablet (lg:): Stack to two-column (combine middle+right or left+middle)
• Mobile: Single column stack with collapsible panels

Accessibility Features

WCAG 2.1 AA Compliance

• Contrast ratios: Minimum 4.5:1 for text, 3:1 for UI components
• ARIA labels: All status indicators, interactive elements
• Heading hierarchy: Proper H1-H6 structure throughout panels
• Screen reader announcements: Live region for transcript updates aria-live="polite"

Keyboard Navigation

• Tab order: Logical flow through all interactive elements
• Shortcuts: Quick panel switching (Alt+1, Alt+2, Alt+3)
• Focus management: Clear focus indicators ring-2 ring-offset-2

Visual Treatment

Panel Structure

• Panel backgrounds: Subtle depth differentiation between panels
• Borders: Thin dividing lines border-r between panels
• Cards: Rounded corners rounded-lg, subtle shadows shadow-sm

Data Density

• Maximize information: Efficient use of space without overcrowding
• Whitespace: Consistent gap-4 and space-y-3 for readability
• Scannable: Clear visual separation between data groups

Professional Aesthetic

• Clean lines: Minimal decorative elements
• Functional: Every element serves a purpose
• Monitoring-focused: Dashboard-first, not marketing-focused

Images

No hero images or decorative imagery needed. Focus on data visualization, icons for status indicators, and functional UI elements only.