Unclassified

V0 Dashboard Style Guide — Account Success Shell

Tier C — Historical. This document is a point-in-time snapshot preserved for reference. For current architecture, see CANONICAL_PLATFORM_ARCHITECTURE.md.

Overview

The AccountSuccessShellV0 component implements the clean, minimal V0 dashboard aesthetic. This guide documents the design system, component patterns, and implementation details.

Visual Design Principles

Core Aesthetic

✓ Minimal & Clean — No clutter, maximum clarity
✓ Soft Colors — Green accents on neutral backgrounds
✓ Card-Based Layout — Distinct visual blocks with breathing room
✓ Professional Spacing — Generous padding and margins
✓ Subtle Shadows — Soft hover effects, no harsh borders
✓ Dark Mode Ready — Full light/dark mode support

Color Palette

Light Mode:

  • Background: #ffffff (white)
  • Foreground: #0f172a (slate-900)
  • Muted: #64748b (slate-500)
  • Primary: #22c55e (green-500)
  • Accent: #10b981 (green-600)

Dark Mode:

  • Background: #020617 (slate-950)
  • Foreground: #f1f5f9 (slate-100)
  • Muted: #94a3b8 (slate-400)
  • Primary: #22c55e (green-500)
  • Accent: #10b981 (green-600)

Typography

  • Headlines: Bold, large, dark
  • Body: Regular weight, medium size, slate-600
  • Labels: Small, uppercase, muted
  • Data/Metrics: Large, bold, prominent

Component Architecture

Layout Structure

┌─────────────────────────────────────────────────────────┐
│  Command Bar (Search, Notifications, Settings)          │
├──────────────────────────────────────────────────────────┤
│          │                                               │
│ Sidebar  │  Main Content                                 │
│ Navigation  ├── Page Header                             │
│          │  ├── KPI Cards Grid                          │
│          │  └── Content View                            │
│          │                                               │
└──────────────────────────────────────────────────────────┘

Components

1. Command Bar

  • Fixed sticky header (h-16)
  • Left: Menu toggle + logo
  • Center: Search input
  • Right: Notifications, settings, user avatar
  • Keyboard shortcut display (⌘K)

2. Sidebar

  • Collapsible (toggle via button)
  • Navigation items with icons
  • Workbench switcher
  • User info footer
  • Smooth transitions

3. KPI Cards

  • 4-column grid on desktop
  • Green gradient backgrounds
  • Large metric values
  • Change indicators
  • Hover effects

4. Content Views

  • Card-based containers
  • Consistent padding (p-8)
  • Table support with striped rows
  • Empty states

Implementation Details

File Location

packages/domain-shells/account-success-shell-v0.tsx

Key Features

  1. Responsive Design

    • Mobile: Single column
    • Tablet: 2 columns
    • Desktop: Full layout

  2. Dark Mode Support

    • All colors have dark variants
    • Uses dark: Tailwind prefixes
    • Smooth transitions

  3. Integration Hooks

    • useDomainNavigation() — Multi-app switching
    • useSignalDetection() — Critical signals
    • useSpineData() — Account data
    • Full type safety

  4. State Management

    • Active view tracking
    • Sidebar toggle
    • Search focus state

Usage

Basic Implementation


  return <AccountSuccessShellV0 />;
}

With Custom Props (Future)

<AccountSuccessShellV0
  defaultView="dashboard"
  theme="light"
  showBrandLogo={true}
/>

Design Tokens

Spacing Scale

  • p-2 = 8px
  • p-4 = 16px
  • p-6 = 24px
  • p-8 = 32px
  • gap-3 = 12px
  • gap-4 = 16px

Border Radius

  • Small: rounded-lg = 8px
  • Medium: rounded-xl = 12px
  • Large: rounded-2xl = 16px

Typography Sizes

  • text-3xl = 32px (metrics)
  • text-lg = 18px (headings)
  • text-base = 16px (body)
  • text-sm = 14px (labels)
  • text-xs = 12px (captions)

Transitions

  • transition-colors — 150ms color changes
  • transition-shadow — 150ms shadow effects
  • transition-all — Smooth duration-300

Navigation Structure

Main Views

  1. Home (Dashboard)

    • KPI metrics overview
    • Recent activity
    • Quick actions

  2. Account Master

    • All accounts table
    • Filtering options
    • Add/edit actions

  3. People & Team

    • Team members
    • Roles and permissions
    • Engagement metrics

  4. Objectives

    • Strategic goals
    • Progress tracking
    • Milestone view

  5. Health Metrics

    • Score visualizations
    • Trend indicators
    • Benchmark comparison

  6. Initiatives

    • Active projects
    • Timeline view
    • Resource allocation

Workbenches

Quick links to:

  • RevOps Dashboard
  • SalesOps Dashboard
  • Personal Dashboard

KPI Metrics (Home View)

Four key metrics displayed in card grid:

  1. Active Accounts

    • Count of all active accounts
    • Change indicator
    • Green tint background

  2. Avg Health Score

    • Portfolio average
    • Percentage format
    • Trend comparison

  3. At-Risk Accounts

    • Count of accounts below threshold
    • Warning indicator
    • Action link available

  4. Critical Signals

    • Intelligence alerts
    • Real-time count
    • Notification badge

Dark Mode Implementation

All components include dark mode support:

className="bg-white dark:bg-slate-900"
className="text-slate-900 dark:text-white"
className="border-slate-200 dark:border-slate-800"

Users can toggle dark mode via settings panel.

Accessibility Features

✓ Semantic HTML elements
✓ Proper heading hierarchy (h1 → h2 → p)
✓ Keyboard navigation (Tab, Enter, Escape)
✓ WCAG AA contrast ratios (4.5:1 minimum)
✓ Icon + text labels
✓ Focus states on all interactive elements
✓ ARIA labels where appropriate

Performance Optimizations

✓ Image optimization (next/image)
✓ Lazy loading for views
✓ Memoized components
✓ CSS-in-JS minimal overhead
✓ Efficient re-renders

Customization Guide

Modify Colors

Edit packages/domain-shells/utils/branding.ts:

const themeConfig = {
  colors: {
    primary: '#your-color',
    accent: '#your-accent',
  }
}

Add New Navigation Items

Update navItems array in component:

const navItems = [
  { id: "custom", label: "Custom View", icon: CustomIcon },
  // ...
];

Adjust Spacing

Modify Tailwind classes:

// Increase padding
p-8  // increase from 32px to 40px
gap-4 // increase from 16px to 20px

Browser Support

  • Chrome/Edge: Latest 2 versions
  • Firefox: Latest 2 versions
  • Safari: Latest 2 versions
  • Mobile browsers: Full support

Future Enhancements

  • Customizable KPI metrics
  • Drag-and-drop dashboard builder
  • Advanced filtering on tables
  • Real-time data updates (WebSocket)
  • Export functionality
  • Custom chart integrations
  • Advanced analytics panel

File Reference

Main Component:

  • packages/domain-shells/account-success-shell-v0.tsx (414 lines)

Dependencies:

  • packages/domain-shells/hooks/use-workbench-integration.ts
  • packages/domain-shells/utils/branding.ts
  • packages/domain-shells/components/theme-switcher.tsx

Exports:

export { AccountSuccessShellV0 } from '@integratewise/domain-shells';

Migration Guide (From Redesigned to V0)

If upgrading from AccountSuccessShellRedesigned:

  1. Replace import:

    // Old
// New

  2. No prop changes needed — Both use same integration hooks

  3. Visual differences:

    • V0 has cleaner card-based layout
    • Green accent color dominant
    • Sidebar more minimal
    • Command bar simplified

Testing Checklist

  • Render on desktop/tablet/mobile
  • Dark mode toggle works
  • All navigation items functional
  • Search input receives focus
  • Keyboard shortcuts work (⌘K)
  • KPI cards display data
  • Table renders with accounts
  • Sidebar collapse/expand smooth
  • No console errors
  • All hover states visible

Summary

The AccountSuccessShellV0 component provides a clean, professional dashboard matching the V0 aesthetic. It's production-ready, fully typed, and integrates with all 7 integration hooks for real backend connectivity.

Deploy with confidence. 🚀