{"slug":"internal/development/integratewise_design_system","title":"IntegrateWise Design System","section":"internal","sectionLabel":"Internal","status":"unclassified","type":"document","path":"internal/development/integratewise_design_system.mdx","bytes":33075,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n> A human-first CRM design system where AI is ambient, human work is prominent, and intelligence is opt-in.\n\n---\n\n## Table of Contents\n\n1. [Design Philosophy](#design-philosophy)\n2. [Color Palette](#color-palette)\n3. [Typography](#typography)\n4. [Spacing System](#spacing-system)\n5. [Component Styles](#component-styles)\n6. [Layout Patterns](#layout-patterns)\n7. [Motion & Animation](#motion--animation)\n8. [Dark Mode Variants](#dark-mode-variants)\n\n---\n\n## Design Philosophy\n\n### Human-First Principles\n\n- **AI is Ambient**: AI intelligence is conveyed through subtle indicators — small colored dots, lightweight badges, and collapsible side panels. AI never dominates the viewport.\n- **Human Work is Prominent**: Clean entity lists, clear action hierarchies, and uncluttered detail views put human workflow first.\n- **Intelligence is Opt-In**: The \"Lead Intelligence\" sidebar is a secondary panel that can be collapsed. It is not persistent or intrusive.\n- **Workbench Over Dashboard**: The interface feels like a precision tool — functional, clean, and task-oriented. Data density is balanced with breathable whitespace.\n- **Progressive Disclosure**: Complex AI outputs and enrichment data are hidden behind expandable cards. The default view shows only what's actionable.\n\n---\n\n## Color Palette\n\n### Primary Colors\n\n| Token                 | Hex       | Usage                                                                    |\n| --------------------- | --------- | ------------------------------------------------------------------------ |\n| `--color-primary-500` | `#2563EB` | Primary buttons, active states, links, score bars, status badges (\"New\") |\n| `--color-primary-600` | `#1D4ED8` | Primary button hover, link hover                                         |\n| `--color-primary-50`  | `#EFF6FF` | Light blue backgrounds, hover tints                                      |\n| `--color-primary-100` | `#DBEAFE` | Active tab background, subtle highlights                                 |\n\n### Secondary Colors\n\n| Token                   | Hex       | Usage                                                               |\n| ----------------------- | --------- | ------------------------------------------------------------------- |\n| `--color-secondary-500` | `#7C3AED` | Workspace pill \"SaaS / Software\" background, avatar gradient accent |\n| `--color-secondary-50`  | `#F5F3FF` | Purple tint backgrounds                                             |\n| `--color-secondary-600` | `#6D28D9` | Secondary hover states                                              |\n\n### Neutral / Gray Scale\n\n| Token              | Hex       | Usage                                                       |\n| ------------------ | --------- | ----------------------------------------------------------- |\n| `--color-gray-50`  | `#F9FAFB` | Page background, card hover background                      |\n| `--color-gray-100` | `#F3F4F6` | Input backgrounds, stat card backgrounds, subtle separators |\n| `--color-gray-200` | `#E5E7EB` | Borders (cards, inputs, tabs), dividers                     |\n| `--color-gray-300` | `#D1D5DB` | Disabled borders, placeholder text                          |\n| `--color-gray-400` | `#9CA3AF` | Secondary text, muted icons, inactive tab text              |\n| `--color-gray-500` | `#6B7280` | Body text, labels, descriptions                             |\n| `--color-gray-600` | `#4B5563` | Primary body text on light backgrounds                      |\n| `--color-gray-700` | `#374151` | Headings, bold labels                                       |\n| `--color-gray-800` | `#1F2937` | Primary headings, primary text                              |\n| `--color-gray-900` | `#111827` | Maximum contrast text                                       |\n\n### Semantic / Functional Colors\n\n| Token                 | Hex       | Usage                                                  |\n| --------------------- | --------- | ------------------------------------------------------ |\n| `--color-success-500` | `#22C55E` | \"Qualified\" count (green), positive indicators         |\n| `--color-success-50`  | `#F0FDF4` | Success tint backgrounds                               |\n| `--color-warning-500` | `#F59E0B` | Warning states, enrichment alerts, amber indicators    |\n| `--color-warning-50`  | `#FFFBEB` | Warning banner background (intelligence not connected) |\n| `--color-warning-100` | `#FEF3C7` | Warning banner border                                  |\n| `--color-danger-500`  | `#EF4444` | Error states, destructive actions                      |\n| `--color-danger-50`   | `#FEF2F2` | Error tint backgrounds                                 |\n\n### Accent Colors (Badges & Icons)\n\n| Token                        | Hex       | Usage                                       |\n| ---------------------------- | --------- | ------------------------------------------- |\n| `--color-accent-apollo`      | `#F3F4F6` | Source badge \"Apollo\" background (gray-100) |\n| `--color-accent-apollo-text` | `#374151` | Source badge \"Apollo\" text (gray-700)       |\n| `--color-accent-linkedin`    | `#0A66C2` | LinkedIn icon hover                         |\n| `--color-accent-email`       | `#6B7280` | Email icon default                          |\n| `--color-accent-phone`       | `#6B7280` | Phone icon default                          |\n\n### Background Colors\n\n| Token                | Hex       | Usage                                  |\n| -------------------- | --------- | -------------------------------------- |\n| `--color-bg-page`    | `#F8F9FA` | Main page background (light warm gray) |\n| `--color-bg-surface` | `#FFFFFF` | Cards, panels, modals, top bar         |\n| `--color-bg-sidebar` | `#FFFFFF` | Right intelligence sidebar             |\n| `--color-bg-input`   | `#FFFFFF` | Input fields                           |\n| `--color-bg-hover`   | `#F9FAFB` | Row/card hover states                  |\n\n### Avatar Gradients\n\n| Token                      | Value                                       | Usage                                     |\n| -------------------------- | ------------------------------------------- | ----------------------------------------- |\n| `--avatar-gradient-blue`   | `linear-gradient(135deg, #3B82F6, #8B5CF6)` | Default avatar background (blue → purple) |\n| `--avatar-gradient-purple` | `linear-gradient(135deg, #7C3AED, #C084FC)` | Variant avatar background                 |\n\n---\n\n## Typography\n\n### Font Family\n\n```css\n--font-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n--font-mono: \"JetBrains Mono\", \"Fira Code\", monospace;\n```\n\n> **Note**: The interface uses a clean, geometric sans-serif with excellent legibility at small sizes. Inter is the assumed primary typeface based on character shapes and metrics.\n\n### Type Scale\n\n| Style                  | Size             | Weight         | Line Height | Letter Spacing | Usage                        |\n| ---------------------- | ---------------- | -------------- | ----------- | -------------- | ---------------------------- |\n| **H1 — Page Title**    | 24px (1.5rem)    | 700 (Bold)     | 1.2         | -0.02em        | Page headings (\"Leads\")      |\n| **H2 — Section Title** | 18px (1.125rem)  | 600 (Semibold) | 1.3         | -0.01em        | Card headers, section titles |\n| **H3 — Entity Name**   | 20px (1.25rem)   | 600 (Semibold) | 1.3         | -0.01em        | Detail view entity names     |\n| **H4 — List Name**     | 16px (1rem)      | 600 (Semibold) | 1.4         | 0              | List view entity names       |\n| **Body**               | 14px (0.875rem)  | 400 (Regular)  | 1.5         | 0              | Paragraphs, descriptions     |\n| **Body Small**         | 13px (0.8125rem) | 400 (Regular)  | 1.5         | 0              | Card descriptions, metadata  |\n| **Caption**            | 12px (0.75rem)   | 400 (Regular)  | 1.4         | 0              | Labels, timestamps, hints    |\n| **Caption Uppercase**  | 11px (0.6875rem) | 500 (Medium)   | 1.2         | 0.05em         | Section labels, badge text   |\n| **Button**             | 14px (0.875rem)  | 500 (Medium)   | 1           | 0              | Button labels                |\n| **Tab**                | 14px (0.875rem)  | 500 (Medium)   | 1           | 0              | Filter tabs                  |\n| **Stat Value**         | 28px (1.75rem)   | 700 (Bold)     | 1.1         | -0.02em        | KPI numbers                  |\n| **Score**              | 14px (0.875rem)  | 500 (Medium)   | 1           | 0              | Score values                 |\n\n### Text Colors by Context\n\n| Context            | Color Token           | Hex       |\n| ------------------ | --------------------- | --------- |\n| Primary text       | `--color-gray-800`    | `#1F2937` |\n| Secondary text     | `--color-gray-500`    | `#6B7280` |\n| Muted text         | `--color-gray-400`    | `#9CA3AF` |\n| Link / Interactive | `--color-primary-500` | `#2563EB` |\n| Link hover         | `--color-primary-600` | `#1D4ED8` |\n| Inverse text       | `--color-bg-surface`  | `#FFFFFF` |\n| Placeholder        | `--color-gray-400`    | `#9CA3AF` |\n\n---\n\n## Spacing System\n\n### Base Unit\n\nThe spacing system uses **4px** as the base unit:\n\n| Token        | Value   | Pixels |\n| ------------ | ------- | ------ |\n| `--space-1`  | 0.25rem | 4px    |\n| `--space-2`  | 0.5rem  | 8px    |\n| `--space-3`  | 0.75rem | 12px   |\n| `--space-4`  | 1rem    | 16px   |\n| `--space-5`  | 1.25rem | 20px   |\n| `--space-6`  | 1.5rem  | 24px   |\n| `--space-8`  | 2rem    | 32px   |\n| `--space-10` | 2.5rem  | 40px   |\n| `--space-12` | 3rem    | 48px   |\n\n### Common Spacing Patterns\n\n| Pattern       | Value          | Usage                                     |\n| ------------- | -------------- | ----------------------------------------- |\n| Page padding  | 24px (1.5rem)  | Horizontal page margins                   |\n| Card padding  | 20px (1.25rem) | Internal card padding                     |\n| Card gap      | 16px (1rem)    | Gap between stat cards, list cards        |\n| Section gap   | 24px (1.5rem)  | Between major sections                    |\n| Element gap   | 8px (0.5rem)   | Between inline elements (buttons, badges) |\n| Icon gap      | 6px (0.375rem) | Between icon and text                     |\n| Input padding | 10px 14px      | Internal input field padding              |\n\n---\n\n## Component Styles\n\n### Buttons\n\n#### Primary Button\n\n```css\nbackground-color: #2563eb;\ncolor: #ffffff;\nfont-size: 14px;\nfont-weight: 500;\npadding: 8px 16px;\nborder-radius: 6px;\nborder: none;\ntransition: background-color 150ms ease;\n```\n\n- **Hover**: `background-color: #1D4ED8`\n- **Active**: `background-color: #1E40AF`\n- **Disabled**: `background-color: #93C5FD; color: #FFFFFF; opacity: 0.6`\n- **Icon**: 16px icon, 6px gap to text\n- **Examples**: \"Convert to Client\", \"Log\", \"Add Lead\"\n\n#### Secondary Button (Outline)\n\n```css\nbackground-color: #ffffff;\ncolor: #374151;\nfont-size: 14px;\nfont-weight: 500;\npadding: 8px 16px;\nborder-radius: 6px;\nborder: 1px solid #d1d5db;\ntransition: all 150ms ease;\n```\n\n- **Hover**: `background-color: #F9FAFB; border-color: #9CA3AF`\n- **Active**: `background-color: #F3F4F6`\n- **Disabled**: `opacity: 0.5; cursor: not-allowed`\n- **Examples**: \"Mark Contacted\", \"Qualify\"\n\n#### Text Button / Link\n\n```css\nbackground: transparent;\ncolor: #2563eb;\nfont-size: 14px;\nfont-weight: 500;\npadding: 4px 8px;\nborder: none;\ntext-decoration: none;\ntransition: color 150ms ease;\n```\n\n- **Hover**: `color: #1D4ED8; text-decoration: underline`\n- **Examples**: \"Back to Leads\", entity name links\n\n#### Icon Button\n\n```css\nbackground: transparent;\ncolor: #6b7280;\npadding: 8px;\nborder-radius: 6px;\nborder: none;\ntransition: all 150ms ease;\n```\n\n- **Hover**: `background-color: #F3F4F6; color: #374151`\n- **Active**: `background-color: #E5E7EB`\n- **Size**: 36px × 36px touch target\n- **Icon size**: 18px–20px\n\n---\n\n### Cards\n\n#### Entity Card (List View)\n\n```css\nbackground-color: #ffffff;\nborder: 1px solid #e5e7eb;\nborder-radius: 12px;\npadding: 20px;\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\ntransition:\n  box-shadow 150ms ease,\n  border-color 150ms ease;\n```\n\n- **Hover**: `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-color: #D1D5DB`\n- **Layout**: Horizontal flex, space-between, align-center\n- **Left section**: Avatar (40px) + Entity info (name, company, role, location)\n- **Right section**: Score bar + Source badge + Status badge + Action icons\n\n#### Stat Card (KPI)\n\n```css\nbackground-color: #ffffff;\nborder: 1px solid #e5e7eb;\nborder-radius: 12px;\npadding: 20px;\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n```\n\n- **Layout**: Label top-left, value bottom-left, icon top-right\n- **Icon container**: 36px × 36px, rounded-lg, light background tint\n- **Value color**: Contextual — gray-800 (default), primary-500 (New), success-500 (Qualified)\n- **Icon colors**: Gray-400 (Total), Primary-50 bg + Primary-500 icon (New), Success-50 bg + Success-500 icon (Qualified), Primary-50 bg + Primary-500 icon (Converted)\n\n#### Detail Card\n\n```css\nbackground-color: #ffffff;\nborder: 1px solid #e5e7eb;\nborder-radius: 12px;\npadding: 20px;\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n```\n\n- **Header**: Section title (H2) + optional action buttons\n- **Content**: Full-width, no internal padding beyond card padding\n\n#### Intelligence Card (Sidebar)\n\n```css\nbackground-color: #ffffff;\nborder: 1px solid #e5e7eb;\nborder-radius: 8px;\npadding: 16px;\nmargin-bottom: 12px;\n```\n\n- **Header**: Question title (14px, semibold) + \"Unknown\" badge\n- **Body**: 13px gray-500 text, italic for \"unknown — needs enrichment\"\n- **Last item**: No bottom margin\n\n---\n\n### Input Fields\n\n#### Text Input\n\n```css\nbackground-color: #ffffff;\ncolor: #1f2937;\nfont-size: 14px;\nfont-weight: 400;\npadding: 10px 14px;\nborder-radius: 8px;\nborder: 1px solid #d1d5db;\noutline: none;\ntransition:\n  border-color 150ms ease,\n  box-shadow 150ms ease;\n```\n\n- **Placeholder**: `color: #9CA3AF`\n- **Focus**: `border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1)`\n- **Disabled**: `background-color: #F3F4F6; color: #9CA3AF`\n- **Error**: `border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)`\n\n#### Search Input\n\n```css\n/* Extends text input */\npadding-left: 40px; /* Space for search icon */\nbackground-image: url(\"search-icon.svg\");\nbackground-position: 14px center;\nbackground-repeat: no-repeat;\nbackground-size: 16px;\n```\n\n- **Width**: 320px–400px (contextual)\n- **Examples**: \"Search this workspace...\", \"Search leads...\"\n\n#### Activity Input (Inline)\n\n```css\n/* Extends text input */\nflex: 1;\nborder-radius: 8px;\nmargin-right: 8px;\n```\n\n- **Accompanied by**: Submit button (\"Log\") on the right\n- **Full-width** within its container\n\n---\n\n### Icons\n\n#### Icon Specifications\n\n| Property           | Value     |\n| ------------------ | --------- |\n| **Size (default)** | 18px–20px |\n| **Size (small)**   | 14px–16px |\n| **Size (large)**   | 24px      |\n| **Stroke width**   | 1.5px–2px |\n| **Default color**  | `#6B7280` |\n| **Hover color**    | `#374151` |\n| **Active color**   | `#2563EB` |\n\n#### Icon Types Used\n\n| Icon                      | Usage                 | Default Color                  |\n| ------------------------- | --------------------- | ------------------------------ |\n| Search (magnifying glass) | Search inputs         | `#9CA3AF`                      |\n| LinkedIn                  | External profile link | `#6B7280` → `#0A66C2` on hover |\n| Email                     | Contact action        | `#6B7280`                      |\n| Phone                     | Contact action        | `#6B7280`                      |\n| More (three dots)         | Overflow menu         | `#6B7280`                      |\n| Check / Checkmark         | Qualify action        | `#374151`                      |\n| User / Person             | Stat card             | `#9CA3AF`                      |\n| Star                      | New stat card         | `#2563EB`                      |\n| Trending up               | Qualified stat card   | `#22C55E`                      |\n| Arrow up-right            | Converted stat card   | `#2563EB`                      |\n| Chevron left              | Back navigation       | `#6B7280`                      |\n| Building                  | Company indicator     | `#9CA3AF`                      |\n| Clock / Activity          | Activity section      | `#374151`                      |\n| Sparkles / Magic          | AI intelligence       | `#F59E0B`                      |\n| Info circle               | Unknown status        | `#9CA3AF`                      |\n\n---\n\n### Badges & Labels\n\n#### Status Badge (\"New\")\n\n```css\nbackground-color: #2563eb;\ncolor: #ffffff;\nfont-size: 11px;\nfont-weight: 500;\npadding: 3px 10px;\nborder-radius: 9999px; /* Pill shape */\ntext-transform: none;\nline-height: 1;\n```\n\n- **Variants**:\n  - New: `bg: #2563EB; color: #FFFFFF`\n  - Contacted: `bg: #F3F4F6; color: #374151; border: 1px solid #E5E7EB`\n  - Qualified: `bg: #22C55E; color: #FFFFFF`\n  - Unqualified: `bg: #F3F4F6; color: #9CA3AF`\n\n#### Source Badge (\"Apollo\")\n\n```css\nbackground-color: #f3f4f6;\ncolor: #374151;\nfont-size: 12px;\nfont-weight: 400;\npadding: 3px 10px;\nborder-radius: 6px;\nborder: 1px solid #e5e7eb;\n```\n\n#### \"Unknown\" Badge\n\n```css\nbackground-color: #f3f4f6;\ncolor: #6b7280;\nfont-size: 11px;\nfont-weight: 500;\npadding: 3px 10px;\nborder-radius: 9999px;\ndisplay: inline-flex;\nalign-items: center;\ngap: 4px;\n```\n\n- **Icon**: Small info circle (12px) before text\n\n#### Location Tag\n\n```css\nbackground-color: #f9fafb;\ncolor: #6b7280;\nfont-size: 12px;\nfont-weight: 400;\npadding: 4px 10px;\nborder-radius: 6px;\nborder: 1px solid #e5e7eb;\n```\n\n---\n\n### Avatar\n\n#### Default Avatar\n\n```css\nwidth: 40px;\nheight: 40px;\nborder-radius: 50%;\nbackground: linear-gradient(135deg, #3b82f6, #8b5cf6);\ncolor: #ffffff;\nfont-size: 14px;\nfont-weight: 600;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n```\n\n- **Size variants**:\n  - Small: 32px (list view compact)\n  - Default: 40px (list view standard)\n  - Large: 48px (detail view header)\n- **Text**: First + last initials (e.g., \"KL\", \"AM\", \"GK\")\n- **Border**: None (uses background gradient for definition)\n\n---\n\n### Progress Bar / Score Bar\n\n```css\n/* Container */\nwidth: 48px;\nheight: 6px;\nbackground-color: #e5e7eb;\nborder-radius: 9999px;\noverflow: hidden;\n\n/* Fill */\nheight: 100%;\nbackground-color: #2563eb;\nborder-radius: 9999px;\ntransition: width 300ms ease-out;\n```\n\n- **Width variants**: 48px (compact), 64px (standard)\n- **Height**: 6px\n- **Fill color**: `#2563EB` (primary)\n- **Background**: `#E5E7EB`\n- **Label**: Score number (14px, medium) to the right of bar\n- **Full score (100)**: Fill at ~35–40% width (normalized scale, not literal percentage)\n\n---\n\n### Tabs / Filter Pills\n\n#### Active Tab\n\n```css\nbackground-color: #2563eb;\ncolor: #ffffff;\nfont-size: 14px;\nfont-weight: 500;\npadding: 8px 16px;\nborder-radius: 8px;\nborder: none;\n```\n\n#### Inactive Tab\n\n```css\nbackground-color: transparent;\ncolor: #6b7280;\nfont-size: 14px;\nfont-weight: 500;\npadding: 8px 16px;\nborder-radius: 8px;\nborder: 1px solid #e5e7eb;\ntransition: all 150ms ease;\n```\n\n- **Hover**: `background-color: #F9FAFB; color: #374151`\n- **Gap between tabs**: 8px\n- **Examples**: All, New, Contacted, Qualified, Unqualified\n\n---\n\n### Sidebar / Intelligence Panel\n\n#### Panel Container\n\n```css\nwidth: 380px;\nbackground-color: #ffffff;\nborder-left: 1px solid #e5e7eb;\npadding: 24px;\noverflow-y: auto;\n```\n\n- **Header**: Panel title (14px, semibold, gray-800) + action link (\"Obtain It\" — text button style)\n- **Position**: Fixed right side, full height below top bar\n- **Collapsible**: Can be toggled open/closed\n- **When collapsed**: Only a subtle indicator (colored dot or icon) remains visible\n\n#### Warning Banner\n\n```css\nbackground-color: #fffbeb;\nborder: 1px solid #fef3c7;\nborder-radius: 8px;\npadding: 12px 16px;\nmargin-bottom: 16px;\n```\n\n- **Icon**: Warning triangle (16px, `#F59E0B`)\n- **Title**: 14px, medium, `#92400E` (amber-800)\n- **Body**: 13px, regular, `#B45309` (amber-700)\n- **Example**: \"Live intelligence not connected\" banner\n\n---\n\n### Navigation\n\n#### Top Bar\n\n```css\nheight: 56px;\nbackground-color: #ffffff;\nborder-bottom: 1px solid #e5e7eb;\npadding: 0 24px;\ndisplay: flex;\nalign-items: center;\ngap: 16px;\n```\n\n- **Left**: Logo / workspace icon (20px square)\n- **Center**: Search input (400px max-width)\n- **Right**: Workspace pills + theme toggle (moon icon)\n\n#### Workspace Pill\n\n```css\nfont-size: 12px;\nfont-weight: 500;\npadding: 4px 12px;\nborder-radius: 6px;\nborder: 1px solid transparent;\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\n```\n\n- **Active pill** (\"Business Ops\"):\n  - `background-color: #EFF6FF`\n  - `color: #2563EB`\n  - `border-color: #BFDBFE`\n  - Dot indicator: 6px circle, `#2563EB`\n- **Inactive pill** (\"SaaS / Software\"):\n  - `background-color: #F5F3FF`\n  - `color: #7C3AED`\n  - `border-color: #DDD6FE`\n\n#### Breadcrumb / Back Link\n\n```css\ncolor: #6b7280;\nfont-size: 14px;\nfont-weight: 400;\ntext-decoration: none;\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\n```\n\n- **Hover**: `color: #374151`\n- **Icon**: Chevron left (16px)\n- **Example**: \"← Back to Leads\"\n\n---\n\n### Divider / Separator\n\n```css\nborder: none;\nborder-top: 1px solid #e5e7eb;\nmargin: 16px 0;\n```\n\n---\n\n## Layout Patterns\n\n### Page Layout (List View)\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│ TOP BAR (56px)                                              │\n├─────────────────────────────────────────────────────────────┤\n│ PAGE HEADER                                                │\n│ Title + Subtitle                                    [Add]   │\n├─────────────────────────────────────────────────────────────┤\n│ STAT CARDS ROW (4 cards, grid)                             │\n├─────────────────────────────────────────────────────────────┤\n│ SEARCH + FILTER TABS                                       │\n├─────────────────────────────────────────────────────────────┤\n│ ENTITY CARD LIST                                           │\n│ [Card 1]                                                   │\n│ [Card 2]                                                   │\n│ [Card 3]                                                   │\n└─────────────────────────────────────────────────────────────┘\n```\n\n- **Page padding**: 24px horizontal, 24px top\n- **Max content width**: 100% (full-width layout)\n- **Stat cards grid**: 4 columns, 16px gap\n- **Card list gap**: 12px between entity cards\n\n### Page Layout (Detail View)\n\n```\n┌──────────────────────────────────────────────────┬──────────────┐\n│ TOP BAR (56px)                                   │              │\n├──────────────────────────────────────────────────┼──────────────┤\n│ ← Back to Leads                                  │              │\n├──────────────────────────────────────────────────┤              │\n│ HEADER                                           │  LEAD        │\n│ Avatar + Name + Badge        [LinkedIn] [Email]  │  INTELLIGENCE│\n├──────────────────────────────────────────────────┤  SIDEBAR     │\n│ ACTION CARD                                      │  (380px)     │\n│ Score Bar              [Mark] [Qualify] [Convert]│              │\n├──────────────────────────────────────────────────┤              │\n│ ACTIVITY CARD                                    │              │\n│ Input field + Log button                         │              │\n│ No activity yet...                               │              │\n└──────────────────────────────────────────────────┴──────────────┘\n```\n\n- **Main content**: Flexible width (~60–65%)\n- **Sidebar**: Fixed 380px width\n- **Gap between main and sidebar**: 24px\n- **Responsive**: Sidebar collapses to drawer below 1024px\n\n---\n\n## Motion & Animation\n\n### Principles\n\n- **Subtle**: Animations should not distract from workflow\n- **Fast**: Most transitions complete in 150ms\n- **Purposeful**: Every motion guides attention or confirms action\n\n### Transition Tokens\n\n| Token                 | Value                                     | Usage                        |\n| --------------------- | ----------------------------------------- | ---------------------------- |\n| `--transition-fast`   | `150ms ease`                              | Hover states, color changes  |\n| `--transition-base`   | `200ms ease-out`                          | Card hover, sidebar toggle   |\n| `--transition-slow`   | `300ms ease-out`                          | Page transitions, modal open |\n| `--transition-bounce` | `300ms cubic-bezier(0.34, 1.56, 0.64, 1)` | Badge pop, score fill        |\n\n### Specific Animations\n\n#### Card Hover\n\n```css\ntransition:\n  box-shadow 150ms ease,\n  border-color 150ms ease,\n  transform 150ms ease;\n```\n\n- **Default**: `box-shadow: 0 1px 3px rgba(0,0,0,0.04); transform: translateY(0)`\n- **Hover**: `box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); border-color: #D1D5DB`\n\n#### Button Press\n\n```css\ntransition:\n  transform 100ms ease,\n  background-color 150ms ease;\n```\n\n- **Active (pressed)**: `transform: scale(0.97)`\n\n#### Score Bar Fill\n\n```css\ntransition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);\n```\n\n- Animates from 0 to target width on page load\n- Uses ease-out curve for natural deceleration\n\n#### Sidebar Toggle\n\n```css\ntransition:\n  transform 200ms ease-out,\n  opacity 200ms ease-out;\n```\n\n- **Open**: `transform: translateX(0); opacity: 1`\n- **Closed**: `transform: translateX(100%); opacity: 0`\n- **Overlay** (mobile): `background-color: rgba(0,0,0,0.3); transition: opacity 200ms ease`\n\n#### Badge / Tag Pop\n\n```css\nanimation: badge-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n```\n\n```css\n@keyframes badge-pop {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n```\n\n#### Skeleton Loading (Inferred)\n\n```css\nbackground: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);\nbackground-size: 200% 100%;\nanimation: skeleton-shimmer 1.5s infinite;\nborder-radius: 6px;\n```\n\n```css\n@keyframes skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n```\n\n---\n\n## Dark Mode Variants\n\n### Backgrounds\n\n| Light Token          | Dark Token                | Hex       |\n| -------------------- | ------------------------- | --------- |\n| `--color-bg-page`    | `--color-bg-page-dark`    | `#0F1115` |\n| `--color-bg-surface` | `--color-bg-surface-dark` | `#1A1D23` |\n| `--color-bg-sidebar` | `--color-bg-sidebar-dark` | `#1A1D23` |\n| `--color-bg-input`   | `--color-bg-input-dark`   | `#1A1D23` |\n| `--color-bg-hover`   | `--color-bg-hover-dark`   | `#252830` |\n\n### Text Colors\n\n| Light Token                       | Dark Token                    | Hex       |\n| --------------------------------- | ----------------------------- | --------- |\n| `--color-gray-800` (primary text) | `--color-text-primary-dark`   | `#F3F4F6` |\n| `--color-gray-500` (secondary)    | `--color-text-secondary-dark` | `#9CA3AF` |\n| `--color-gray-400` (muted)        | `--color-text-muted-dark`     | `#6B7280` |\n\n### Borders & Separators\n\n| Light Token        | Dark Token                   | Hex       |\n| ------------------ | ---------------------------- | --------- |\n| `--color-gray-200` | `--color-border-dark`        | `#2D3139` |\n| `--color-gray-100` | `--color-border-subtle-dark` | `#252830` |\n\n### Component Adaptations\n\n#### Card (Dark)\n\n```css\nbackground-color: #1a1d23;\nborder: 1px solid #2d3139;\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n```\n\n- **Hover**: `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border-color: #374151`\n\n#### Primary Button (Dark)\n\n```css\nbackground-color: #3b82f6; /* Slightly lighter for contrast */\ncolor: #ffffff;\n```\n\n- **Hover**: `background-color: #60A5FA`\n\n#### Secondary Button (Dark)\n\n```css\nbackground-color: #1a1d23;\ncolor: #d1d5db;\nborder: 1px solid #4b5563;\n```\n\n- **Hover**: `background-color: #252830; border-color: #6B7280`\n\n#### Input (Dark)\n\n```css\nbackground-color: #1a1d23;\ncolor: #f3f4f6;\nborder: 1px solid #4b5563;\n```\n\n- **Placeholder**: `color: #6B7280`\n- **Focus**: `border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2)`\n\n#### Badge — Status \"New\" (Dark)\n\n```css\nbackground-color: #2563eb;\ncolor: #ffffff;\n```\n\n- Unchanged — maintains brand consistency\n\n#### Badge — Source \"Apollo\" (Dark)\n\n```css\nbackground-color: #252830;\ncolor: #d1d5db;\nborder: 1px solid #374151;\n```\n\n#### Warning Banner (Dark)\n\n```css\nbackground-color: #451a03;\nborder: 1px solid #78350f;\n```\n\n- **Title**: `#FCD34D`\n- **Body**: `#FDE68A`\n\n#### Avatar Gradient (Dark)\n\n- Same gradients work in dark mode\n- Consider adding a subtle `box-shadow: 0 0 0 2px #1A1D23` for definition against dark cards\n\n### Shadows (Dark Mode)\n\n| Elevation      | Light Shadow                   | Dark Shadow                   |\n| -------------- | ------------------------------ | ----------------------------- |\n| Low (cards)    | `0 1px 3px rgba(0,0,0,0.04)`   | `0 1px 3px rgba(0,0,0,0.2)`   |\n| Medium (hover) | `0 4px 12px rgba(0,0,0,0.08)`  | `0 4px 12px rgba(0,0,0,0.4)`  |\n| High (modals)  | `0 10px 40px rgba(0,0,0,0.12)` | `0 10px 40px rgba(0,0,0,0.5)` |\n\n---\n\n## Accessibility Notes\n\n### Color Contrast\n\n- All text on colored backgrounds meets WCAG AA (4.5:1 for body, 3:1 for large text)\n- Primary blue (`#2563EB`) on white: **4.6:1** ✅\n- Gray-500 (`#6B7280`) on white: **6.2:1** ✅\n- White on primary blue: **4.6:1** ✅\n\n### Focus States\n\n- All interactive elements have visible focus rings\n- Focus ring: `box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3)`\n- Focus ring color adapts to element context (error = red, success = green)\n\n### Touch Targets\n\n- Minimum touch target: **36px × 36px**\n- Buttons and icon buttons meet 44px × 44px where possible\n\n### Reduced Motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n---\n\n## Token Quick Reference\n\n### CSS Custom Properties\n\n```css\n:root {\n  /* Colors */\n  --iw-primary-500: #2563eb;\n  --iw-primary-600: #1d4ed8;\n  --iw-primary-50: #eff6ff;\n  --iw-secondary-500: #7c3aed;\n  --iw-success-500: #22c55e;\n  --iw-warning-500: #f59e0b;\n  --iw-danger-500: #ef4444;\n  --iw-gray-50: #f9fafb;\n  --iw-gray-100: #f3f4f6;\n  --iw-gray-200: #e5e7eb;\n  --iw-gray-300: #d1d5db;\n  --iw-gray-400: #9ca3af;\n  --iw-gray-500: #6b7280;\n  --iw-gray-600: #4b5563;\n  --iw-gray-700: #374151;\n  --iw-gray-800: #1f2937;\n  --iw-gray-900: #111827;\n  --iw-bg-page: #f8f9fa;\n  --iw-bg-surface: #ffffff;\n\n  /* Typography */\n  --iw-font-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  --iw-font-mono: \"JetBrains Mono\", \"Fira Code\", monospace;\n\n  /* Spacing */\n  --iw-space-1: 0.25rem;\n  --iw-space-2: 0.5rem;\n  --iw-space-3: 0.75rem;\n  --iw-space-4: 1rem;\n  --iw-space-5: 1.25rem;\n  --iw-space-6: 1.5rem;\n  --iw-space-8: 2rem;\n\n  /* Radii */\n  --iw-radius-sm: 6px;\n  --iw-radius-md: 8px;\n  --iw-radius-lg: 12px;\n  --iw-radius-full: 9999px;\n\n  /* Shadows */\n  --iw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);\n  --iw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\n  --iw-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);\n\n  /* Transitions */\n  --iw-transition-fast: 150ms ease;\n  --iw-transition-base: 200ms ease-out;\n}\n```\n\n---\n\n_Document generated from analysis of IntegrateWise UI screenshots — Lead Detail View and Leads List View._\n_Last updated: Based on screenshots v1.0._\n"}