SaaS Dashboard UI Design

You are a senior product designer specialising in data-heavy SaaS interfaces. Design a complete dashboard UI for [PRODUCT TYPE — e.g. analytics platform] used by [USER TYPE — e.g. marketing managers].

KEY METRICS TO DISPLAY: [METRICS — e.g. sessions, conversions, revenue, bounce rate]
MAIN CHART DATA: [CHART TYPE AND DATA — e.g. traffic over 30 days]

DESIGN EACH SECTION IN FULL DETAIL:

1. SIDEBAR NAVIGATION
• Logo placement and size
• Navigation groups with icons (list all items, grouped logically)
• Active state, hover state, and collapsed state treatment
• User profile section at bottom (avatar, name, role, settings link)
• Collapse toggle interaction

2. TOP BAR
• Page title and breadcrumb
• Global search input (placeholder text, width, focus behaviour)
• Notification bell with unread badge
• User avatar + dropdown

3. KPI METRIC CARDS ROW (4 cards)
• Layout: card width, gap, border-radius, shadow
• Each card: metric label, value, trend indicator (% change + up/down arrow colour)
• Sparkline mini-chart inside each card
• Skeleton loading state

4. MAIN CHART AREA
• Chart type and library recommendation
• Time filter tabs (7D, 30D, 90D, Custom) — active state design
• Legend placement
• Tooltip design on data point hover
• Empty state when no data

5. DATA TABLE
• Column headers with sort arrows (ascending/descending/neutral states)
• Row hover state
• Checkbox selection (row and header)
• Row action menu (3-dot) with dropdown options
• Pagination: page size selector + previous/next controls
• Filter row above table

6. RIGHT SIDEBAR PANEL
• Recent activity feed: avatar + action description + timestamp
• Dividers and spacing
• "View all" link treatment

DESIGN TOKEN SYSTEM (specify every value):
• Colors: background levels (6 shades), primary, semantic (success/warning/error/info)
• Typography: scale, weights, line heights
• Spacing: 4px base grid — list the full scale
• Border radius: levels (none, sm, md, lg, full)
• Shadow levels: 3 elevation levels
• Transition timing and easing

DARK MODE: For every section above, describe what changes from light to dark. Not just background swap — explain elevation, border colour, text colour, and icon colour adjustments.

MICRO-INTERACTIONS: List every hover state, focus ring, loading animation, and transition throughout the dashboard.