bottleneckcrm/DESIGN_SYSTEM.md

CRM Design System: Style Guide

Version 1.2 | Last Updated: December 2024

A comprehensive design system reference for building consistent, accessible, and modern CRM interfaces.

---

Table of Contents

1. Design Principles
2. Color System
3. CRM-Specific Colors
4. Data Visualization
5. Kanban Board Specs
6. Activity Timeline
7. Typography
8. Spacing & Layout
9. Border Radius
10. Elevation & Shadows
11. Components
12. Icons
13. Grid & Breakpoints
14. CSS Variables Reference

---

Design Principles

1. Clarity First: Every element should serve a purpose. Remove visual clutter.
2. Data-Driven: Prioritize readability of data in tables, lists, and cards.
3. Consistent Rhythm: Use the 8px grid system for all spacing decisions.
4. Accessible: WCAG 2.0 AA compliant color contrast and interactions.
5. Theme-Ready: Semantic tokens enable light/dark mode switching.

---

Color System

Token Architecture

We use a three-layer token system:

Base Layer (Primitives) → Semantic Layer (Purpose) → Component Layer (Usage)

Brand Colors

Token	Hex	RGB	Usage
--color-brand-primary	#EA580C	234, 88, 12	Primary actions, CTAs, brand accent
--color-brand-dark	#404346	64, 67, 70	Primary text, dark UI elements
--color-brand-white	#FFFFFF	255, 255, 255	Backgrounds, cards, surfaces

Neutral Palette

Token	Hex	Usage
--color-grey-50	#FAFAFA	Subtle backgrounds
--color-grey-100	#F5F5F5	Hover states, zebra stripes
--color-grey-200	#EEEEEE	Subtle dividers, table rows
--color-grey-300	#E0E0E0	Default borders (--border-default)
--color-grey-400	#BDBDBD	Placeholder text
--color-grey-500	#9E9E9E	Secondary icons
--color-grey-600	#757575	Secondary text
--color-grey-700	#616161	Body text
--color-grey-800	#424242	Headings
--color-grey-900	#212121	Primary text

Semantic Colors

Category	Token	Hex	Usage
Primary	--color-primary-default	#EA580C	Primary buttons, links
	--color-primary-hover	#C2410C	Primary hover state
	--color-primary-active	#9A3412	Primary active/pressed
	--color-primary-light	#FFF7ED	Primary backgrounds
Negative/Error	--color-negative-default	#DC3545	Error states, destructive actions
	--color-negative-hover	#C82333	Error hover
	--color-negative-light	#FDEAEA	Error backgrounds
Warning	--color-warning-default	#FFC107	Warning states
	--color-warning-dark	#E0A800	Warning text on light bg
	--color-warning-light	#FFF8E1	Warning backgrounds
Success	--color-success-default	#28A745	Success states
	--color-success-light	#E8F5E9	Success backgrounds
Info	--color-info-default	#17A2B8	Informational states
	--color-info-light	#E3F2FD	Info backgrounds

Surface Colors

Token	Light Mode	Dark Mode	Usage
--surface-default	#FFFFFF	#1E1E1E	Main background
--surface-raised	#FFFFFF	#252525	Cards, elevated elements
--surface-sunken	#F5F5F5	#141414	Inset areas, sidebars
--surface-overlay	#FFFFFF	#2D2D2D	Modals, dropdowns

Text Colors

Token	Light Mode	Dark Mode	Usage
--text-primary	#212121	#FFFFFF	Headings, primary content
--text-secondary	#616161	#B0B0B0	Descriptions, metadata
--text-tertiary	#9E9E9E	#757575	Placeholders, hints
--text-disabled	#BDBDBD	#525252	Disabled states
--text-inverse	#FFFFFF	#212121	Text on colored backgrounds
--text-link	#EA580C	#FB923C	Links
--text-error	#DC3545	#F87171	Error messages

Border Colors

Token	Light Mode	Dark Mode	Usage
--border-default	#E0E0E0	#3D3D3D	Default borders
--border-strong	#BDBDBD	#525252	Emphasized borders
--border-focus	#EA580C	#FB923C	Focus rings
--border-error	#DC3545	#F87171	Error state borders

---

CRM-Specific Colors

Pipeline Stage Colors

Token	Hex	Usage
--stage-new	#EA580C	New/Incoming leads
--stage-contacted	#F97316	Initial contact made
--stage-qualified	#3B82F6	Lead qualified
--stage-proposal	#8B5CF6	Proposal sent
--stage-negotiation	#F59E0B	In negotiation
--stage-won	#22C55E	Deal closed won
--stage-lost	#EF4444	Deal closed lost

Pipeline Stage Backgrounds (Kanban columns)

Token	Hex	Usage
--stage-new-bg	#FFF7ED	New column
--stage-contacted-bg	#FFEDD5	Contacted column
--stage-qualified-bg	#EFF6FF	Qualified column
--stage-proposal-bg	#F5F3FF	Proposal column
--stage-negotiation-bg	#FFFBEB	Negotiation column
--stage-won-bg	#F0FDF4	Won column
--stage-lost-bg	#FEF2F2	Lost column

Activity Type Colors

Token	Hex	Icon	Usage
--activity-call	#22C55E	Phone	Phone calls
--activity-email	#3B82F6	Mail	Emails
--activity-meeting	#8B5CF6	Calendar	Meetings
--activity-task	#F59E0B	Check	Tasks/To-dos
--activity-note	#6B7280	FileText	Notes
--activity-deadline	#EF4444	Clock	Deadlines

Lead Temperature

Token	Hex	Usage
--lead-hot	#EF4444	Hot lead (high intent)
--lead-warm	#F59E0B	Warm lead (engaged)
--lead-cold	#6B7280	Cold lead (low activity)

Lead Temperature Backgrounds

Token	Hex	Usage
--lead-hot-bg	#FEF2F2	Hot lead badge/tag
--lead-warm-bg	#FFFBEB	Warm lead badge
--lead-cold-bg	#F3F4F6	Cold lead badge

Priority Levels

Token	Hex	Usage
--priority-urgent	#DC2626	Urgent priority
--priority-high	#F97316	High priority
--priority-medium	#FBBF24	Medium priority
--priority-low	#22C55E	Low priority
--priority-none	#9CA3AF	No priority set

Deal Health / Probability

Token	Hex	Usage
--probability-high	#22C55E	70-100% close probability
--probability-mid	#F59E0B	40-69% probability
--probability-low	#EF4444	0-39% probability

Task Status

Token	Hex	Usage
--task-overdue	#EF4444	Past due date
--task-due-today	#F59E0B	Due today
--task-upcoming	#3B82F6	Due in future
--task-completed	#22C55E	Completed
--task-cancelled	#9CA3AF	Cancelled

Task Status Backgrounds

Token	Hex	Usage
--task-overdue-bg	#FEF2F2	Overdue task badge
--task-due-today-bg	#FFFBEB	Due today badge
--task-upcoming-bg	#EFF6FF	Upcoming task badge
--task-completed-bg	#F0FDF4	Completed task badge
--task-cancelled-bg	#F3F4F6	Cancelled task badge

---

Data Visualization

Chart Color Palette (Sequential)

For single-metric charts and gradients:

Token	Hex	Usage
--chart-1	#EA580C	Primary series
--chart-2	#F97316	Secondary
--chart-3	#FB923C	Tertiary
--chart-4	#FDBA74	Fourth
--chart-5	#FED7AA	Fifth

Chart Color Palette (Categorical)

For multi-metric/comparison charts:

Token	Hex	Usage
--cat-1	#EA580C	Category 1 (Orange)
--cat-2	#3B82F6	Category 2 (Blue)
--cat-3	#22C55E	Category 3 (Green)
--cat-4	#8B5CF6	Category 4 (Purple)
--cat-5	#EC4899	Category 5 (Pink)
--cat-6	#14B8A6	Category 6 (Teal)

Progress Bar Colors

Token	Hex	Usage
--progress-default	#EA580C	Standard progress
--progress-success	#22C55E	Goal achieved
--progress-warning	#F59E0B	Behind target
--progress-danger	#EF4444	Critical/at risk
--progress-bg	#E5E7EB	Progress track

---

Kanban Board Specs

Property	Value
Column Width	280px - 320px
Column Gap	12px
Card Gap	8px
Column Header Height	48px
Card Min Height	80px
Card Padding	12px
Card Border Radius	--radius-lg (8px)
Column Border Radius	--radius-lg (8px)
Drop Zone Highlight	2px dashed --border-focus
Drag Shadow	--shadow-lg

---

Activity Timeline

Property	Value
Timeline Line Width	2px
Timeline Line Color	--border-default
Node Size	32px
Node Border	2px solid (activity color)
Node Background	--surface-default
Entry Gap	16px
Content Offset	48px from timeline

---

Typography

Font Stack

Geist font from google fonts

--font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  sans-serif;
--font-family-mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace;

Type Scale

Token	Size	Weight	Line Height	Letter Spacing	Usage
--text-display	40px	700	1.2	-0.02em	Hero sections
--text-h1	32px	600	1.25	-0.01em	Page titles
--text-h2	24px	600	1.3	-0.01em	Section headers
--text-h3	20px	600	1.35	0	Subsection headers
--text-h4	16px	600	1.4	0	Card titles
--text-h5	14px	600	1.4	0	Small headers
--text-body-lg	16px	400	1.5	0	Primary body text
--text-body	14px	400	1.5	0	Default body text
--text-body-sm	13px	400	1.45	0	Secondary body text
--text-caption	12px	400	1.4	0.01em	Captions, metadata
--text-label	12px	500	1.3	0.02em	Form labels, badges
--text-overline	11px	600	1.4	0.08em	Overlines (uppercase)

Font Weights

Token	Value	Usage
--font-weight-regular	400	Body text, descriptions
--font-weight-medium	500	Labels, emphasis
--font-weight-semibold	600	Headings, buttons
--font-weight-bold	700	Strong emphasis

Usage Guidelines

• Body text: 14px for dense UI, 16px for reading-focused areas
• Minimum size: 12px (never go below for accessibility)
• Line length: 60-80 characters maximum for readability
• Paragraph spacing: Use --space-300 (24px) between paragraphs

---

Spacing & Layout

Base Unit

All spacing is based on an 8px grid system.

Spacing Scale

Token	Value	Usage
--space-0	0px	No spacing
--space-25	2px	Micro adjustments, borders
--space-50	4px	Tight spacing, icon gaps
--space-100	8px	Base unit, compact layouts
--space-150	12px	Default internal padding
--space-200	16px	Component padding, gaps
--space-250	20px	Medium spacing
--space-300	24px	Section padding
--space-400	32px	Section margins
--space-500	40px	Large component spacing
--space-600	48px	Page sections
--space-700	56px	Large section gaps
--space-800	64px	Major section breaks
--space-900	72px	Extra-large spacing
--space-1000	80px	Page-level spacing

Spacing Usage Guide

Context	Recommended Tokens
Icon to text gap	--space-50 to --space-100 (4-8px)
Button padding (horizontal)	--space-200 to --space-300 (16-24px)
Button padding (vertical)	--space-100 to --space-150 (8-12px)
Card internal padding	--space-200 to --space-300 (16-24px)
Form field gap	--space-200 (16px)
Section gap	--space-400 to --space-600 (32-48px)
Page margins	--space-300 to --space-400 (24-32px)

---

Border Radius

Token	Value	Usage
--radius-none	0px	Sharp corners
--radius-xs	2px	Subtle rounding
--radius-sm	4px	Inputs, small buttons
--radius-md	6px	Buttons, dropdowns
--radius-lg	8px	Cards, containers
--radius-xl	12px	Modals, large cards
--radius-2xl	16px	Large containers
--radius-full	9999px	Pills, avatars, tags

Usage by Component

Component	Radius Token
Buttons	--radius-md (6px)
Input fields	--radius-sm (4px)
Cards	--radius-lg (8px)
Modals	--radius-xl (12px)
Avatars	--radius-full
Tags/Badges	--radius-full
Tooltips	--radius-sm (4px)
Dropdowns	--radius-md (6px)

---

Elevation & Shadows

Shadow Scale

Token	Value	Usage
--shadow-none	none	Flat elements
--shadow-xs	0 1px 2px rgba(0,0,0,0.04)	Subtle lift
--shadow-sm	0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)	Cards (resting)
--shadow-md	0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05)	Cards (hover), dropdowns
--shadow-lg	0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)	Modals, popovers
--shadow-xl	0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04)	Full overlays

Elevation Levels

Level	Shadow Token	Z-Index	Usage
Base	--shadow-none	0	Page background
Raised	--shadow-sm	10	Cards, sections
Dropdown	--shadow-md	100	Dropdowns, tooltips
Sticky	--shadow-md	200	Sticky headers
Modal	--shadow-lg	300	Modals, dialogs
Overlay	--shadow-xl	400	Full overlays
Toast	--shadow-lg	500	Notifications

Focus Ring

--focus-ring: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--color-primary-default);

---

Components

Buttons

Variants

Variant	Background	Text	Border	Usage
Primary	--color-primary-default	--text-inverse	none	Main actions
Secondary	transparent	--color-primary-default	--color-primary-default	Alternative actions
Tertiary	transparent	--text-secondary	none	Low emphasis
Destructive	--color-negative-default	--text-inverse	none	Dangerous actions
Ghost	transparent	--text-primary	none	Minimal UI

Sizes

Size	Height	Padding (H)	Font Size	Icon Size
XS	24px	8px	11px	14px
SM	28px	12px	12px	16px
MD	36px	16px	14px	18px
LG	44px	20px	16px	20px
XL	52px	24px	18px	24px

States

State	Opacity/Change
Default	100%
Hover	Darken 8% or overlay
Active	Darken 12%
Disabled	50% opacity, no pointer
Loading	Show spinner, disable

Button Specs

.btn {
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 150ms ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
}

---

Input Fields

Anatomy

┌─────────────────────────────────────┐
│ Label *                    (Helper) │
├─────────────────────────────────────┤
│ [Icon] Placeholder text      [Icon] │
├─────────────────────────────────────┤
│ Helper text or error message        │
└─────────────────────────────────────┘

Specifications

Property	Value
Height	40px (default), 36px (compact), 48px (large)
Padding	12px horizontal, centered vertical
Border	1px solid --border-default
Border Radius	--radius-sm (4px)
Font Size	14px
Label Font Size	12px
Helper Font Size	12px

States

State	Border Color	Background
Default	--border-default	--surface-default
Hover	--border-strong	--surface-default
Focus	--border-focus (2px)	--surface-default
Error	--border-error	--color-negative-light
Disabled	--border-default	--surface-sunken
Read-only	--border-default	--surface-sunken

---

Cards

Specifications

Property	Value
Background	--surface-raised
Border	1px solid --border-default (optional)
Border Radius	--radius-lg (8px)
Padding	--space-200 to --space-300 (16-24px)
Shadow (resting)	--shadow-sm
Shadow (hover)	--shadow-md

Card Types

Type	Description	Shadow
Flat	Border only, no shadow	--shadow-none
Elevated	Subtle lift	--shadow-sm
Interactive	Hover lift	--shadow-sm → --shadow-md

---

Modals / Dialogs

Size Presets

Size	Width	Max Height	Usage
SM	400px	80vh	Confirmations, alerts
MD	560px	80vh	Forms, standard content
LG	720px	85vh	Complex forms
XL	900px	90vh	Data-heavy content
Full	100% - 48px	100% - 48px	Wizards, editors

Specifications

Property	Value
Border Radius	--radius-xl (12px)
Padding (Header)	--space-200 to --space-300
Padding (Body)	--space-300
Padding (Footer)	--space-200 to --space-300
Shadow	--shadow-lg
Overlay Background	rgba(0, 0, 0, 0.5)

Structure

┌─────────────────────────────────────┐
│ Header                        [×]  │
├─────────────────────────────────────┤
│                                     │
│ Body content                        │
│                                     │
├─────────────────────────────────────┤
│             [Secondary] [Primary]   │
└─────────────────────────────────────┘

---

Select / Dropdown

Specifications

Property	Value
Trigger Height	40px (matches input)
Trigger Padding	12px horizontal
Trigger Border Radius	--radius-sm (4px)
Dropdown Border Radius	--radius-md (6px)
Dropdown Shadow	--shadow-md
Item Height	36px
Item Padding	12px horizontal
Max Dropdown Height	320px (scrollable)

---

Tables

Specifications

Property	Value
Header Height	44px
Row Height	52px (default), 40px (compact), 64px (comfortable)
Cell Padding	16px horizontal, centered vertical
Border	1px solid --border-default
Header Background	--surface-sunken
Row Background	--surface-default
Zebra Stripe	Alternating --surface-default / --surface-sunken
Hover Row	--color-grey-100
Selected Row	--color-primary-light

Column Widths

Content Type	Min Width	Recommended
Checkbox	48px	48px
Avatar	56px	56px
Short text	100px	150px
Medium text	150px	200px
Long text	200px	300px
Actions	80px	120px

---

Tags / Badges

Sizes

Size	Height	Padding (H)	Font Size	Border Radius
SM	20px	6px	11px	--radius-full
MD	24px	8px	12px	--radius-full
LG	28px	10px	13px	--radius-full

Variants

Variant	Background	Text
Default	--color-grey-200	--text-primary
Primary	--color-primary-light	--color-primary-default
Success	--color-success-light	--color-success-default
Warning	--color-warning-light	--color-warning-dark
Error	--color-negative-light	--color-negative-default
Info	--color-info-light	--color-info-default

---

Avatars

Sizes

Size	Dimensions	Font Size	Usage
XS	24px	10px	Inline mentions
SM	32px	12px	Lists, compact UI
MD	40px	14px	Default, cards
LG	56px	20px	Profile headers
XL	80px	28px	Profile pages
2XL	120px	40px	Account settings

Specifications

Property	Value
Border Radius	--radius-full (circle)
Background (fallback)	--color-grey-300
Text Color (initials)	--text-primary
Border (optional)	2px solid --surface-default

---

Toast / Snackbar

Specifications

Property	Value
Min Width	300px
Max Width	500px
Padding	12px 16px
Border Radius	--radius-md (6px)
Shadow	--shadow-lg
Position	Bottom-left, 24px from edges
Duration	4000ms (default), 8000ms (with action)

Variants

Variant	Icon	Left Border
Default	Info	None
Success	Check	--color-success-default
Warning	Warning	--color-warning-default
Error	Error	--color-negative-default

---

Tooltips

Specifications

Property	Value
Max Width	240px
Padding	8px 12px
Border Radius	--radius-sm (4px)
Background	--color-grey-900
Text Color	--text-inverse
Font Size	12px
Shadow	--shadow-md
Arrow Size	6px

---

Icons

Style Guidelines

• Style: Line/outline icons (1.5px stroke weight)
• Corners: Rounded corners (2px radius on strokes)
• Grid: Designed on 24px grid with 2px padding
• Consistency: Uniform stroke weight across all icons

Sizes

Token	Size	Usage
--icon-xs	12px	Inline with small text
--icon-sm	16px	Buttons, form fields
--icon-md	20px	Navigation, default
--icon-lg	24px	Headers, emphasis
--icon-xl	32px	Empty states
--icon-2xl	48px	Illustrations

Icon Colors

Context	Color Token
Default	--text-secondary
Interactive	--text-primary
Primary action	--color-primary-default
Success	--color-success-default
Warning	--color-warning-default
Error	--color-negative-default
Disabled	--text-disabled

---

Grid & Breakpoints

Breakpoints

Token	Width	Columns	Margin	Gutter
--breakpoint-xs	0-479px	4	16px	16px
--breakpoint-sm	480-767px	8	16px	16px
--breakpoint-md	768-1023px	12	24px	24px
--breakpoint-lg	1024-1279px	12	32px	24px
--breakpoint-xl	1280-1439px	12	40px	24px
--breakpoint-2xl	1440px+	12	auto	24px

Container Widths

Token	Max Width	Usage
--container-sm	640px	Narrow content
--container-md	768px	Forms, articles
--container-lg	1024px	Standard content
--container-xl	1280px	Wide content
--container-full	100%	Full width

Layout Patterns

Sidebar Layout

┌────────────┬────────────────────────────┐
│            │                            │
│  Sidebar   │      Main Content          │
│   (240px)  │        (flex: 1)           │
│            │                            │
└────────────┴────────────────────────────┘

Element	Width
Sidebar (collapsed)	64px
Sidebar (expanded)	240px
Secondary panel	320px - 400px
Main content	Remaining space

---

CSS Variables Reference

Complete Token Export

:root {
  /* Colors - Brand */
  --color-brand-primary: #ea580c;
  --color-brand-dark: #404346;
  --color-brand-white: #ffffff;

  /* Colors - Primary */
  --color-primary-default: #ea580c;
  --color-primary-hover: #c2410c;
  --color-primary-active: #9a3412;
  --color-primary-light: #fff7ed;

  /* Colors - Negative */
  --color-negative-default: #dc3545;
  --color-negative-hover: #c82333;
  --color-negative-light: #fdeaea;

  /* Colors - Warning */
  --color-warning-default: #ffc107;
  --color-warning-dark: #e0a800;
  --color-warning-light: #fff8e1;

  /* Colors - Success */
  --color-success-default: #28a745;
  --color-success-light: #e8f5e9;

  /* Colors - Info */
  --color-info-default: #17a2b8;
  --color-info-light: #e3f2fd;

  /* Colors - Grey Scale */
  --color-grey-50: #fafafa;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #eeeeee;
  --color-grey-300: #e0e0e0;
  --color-grey-400: #bdbdbd;
  --color-grey-500: #9e9e9e;
  --color-grey-600: #757575;
  --color-grey-700: #616161;
  --color-grey-800: #424242;
  --color-grey-900: #212121;

  /* Surface */
  --surface-default: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f5f5f5;
  --surface-overlay: #ffffff;

  /* Text */
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-tertiary: #9e9e9e;
  --text-disabled: #bdbdbd;
  --text-inverse: #ffffff;
  --text-link: #ea580c;
  --text-error: #dc3545;

  /* Border */
  --border-default: #e0e0e0;
  --border-strong: #bdbdbd;
  --border-focus: #ea580c;
  --border-error: #dc3545;

  /* Pipeline Stages */
  --stage-new: #ea580c;
  --stage-contacted: #f97316;
  --stage-qualified: #3b82f6;
  --stage-proposal: #8b5cf6;
  --stage-negotiation: #f59e0b;
  --stage-won: #22c55e;
  --stage-lost: #ef4444;

  /* Pipeline Stage Backgrounds */
  --stage-new-bg: #fff7ed;
  --stage-contacted-bg: #ffedd5;
  --stage-qualified-bg: #eff6ff;
  --stage-proposal-bg: #f5f3ff;
  --stage-negotiation-bg: #fffbeb;
  --stage-won-bg: #f0fdf4;
  --stage-lost-bg: #fef2f2;

  /* Activity Types */
  --activity-call: #22c55e;
  --activity-email: #3b82f6;
  --activity-meeting: #8b5cf6;
  --activity-task: #f59e0b;
  --activity-note: #6b7280;
  --activity-deadline: #ef4444;

  /* Lead Temperature */
  --lead-hot: #ef4444;
  --lead-warm: #f59e0b;
  --lead-cold: #6b7280;

  /* Lead Temperature Backgrounds */
  --lead-hot-bg: #fef2f2;
  --lead-warm-bg: #fffbeb;
  --lead-cold-bg: #f3f4f6;

  /* Priority */
  --priority-urgent: #dc2626;
  --priority-high: #f97316;
  --priority-medium: #fbbf24;
  --priority-low: #22c55e;
  --priority-none: #9ca3af;

  /* Deal Probability */
  --probability-high: #22c55e;
  --probability-mid: #f59e0b;
  --probability-low: #ef4444;

  /* Task Status */
  --task-overdue: #ef4444;
  --task-due-today: #f59e0b;
  --task-upcoming: #3b82f6;
  --task-completed: #22c55e;
  --task-cancelled: #9ca3af;

  /* Task Status Backgrounds */
  --task-overdue-bg: #fef2f2;
  --task-due-today-bg: #fffbeb;
  --task-upcoming-bg: #eff6ff;
  --task-completed-bg: #f0fdf4;
  --task-cancelled-bg: #f3f4f6;

  /* Charts - Sequential */
  --chart-1: #ea580c;
  --chart-2: #f97316;
  --chart-3: #fb923c;
  --chart-4: #fdba74;
  --chart-5: #fed7aa;

  /* Charts - Categorical */
  --cat-1: #ea580c;
  --cat-2: #3b82f6;
  --cat-3: #22c55e;
  --cat-4: #8b5cf6;
  --cat-5: #ec4899;
  --cat-6: #14b8a6;

  /* Progress */
  --progress-default: #ea580c;
  --progress-success: #22c55e;
  --progress-warning: #f59e0b;
  --progress-danger: #ef4444;
  --progress-bg: #e5e7eb;

  /* Typography */
  --font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-family-mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-0: 0px;
  --space-25: 2px;
  --space-50: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 56px;
  --space-800: 64px;
  --space-900: 72px;
  --space-1000: 80px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Focus Ring */
  --focus-ring: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--color-primary-default);

  /* Icon Sizes */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;

  /* Z-Index Scale */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-overlay: 400;
  --z-toast: 500;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;
  --transition-slow: 300ms ease;

  /* Breakpoints (for reference in JS) */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* Containers */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark Mode Override */
[data-theme="dark"] {
  --surface-default: #1e1e1e;
  --surface-raised: #252525;
  --surface-sunken: #141414;
  --surface-overlay: #2d2d2d;

  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-tertiary: #757575;
  --text-disabled: #525252;
  --text-inverse: #212121;
  --text-link: #fb923c;
  --text-error: #f87171;

  --border-default: #3d3d3d;
  --border-strong: #525252;
  --border-focus: #fb923c;
  --border-error: #f87171;

  --color-primary-default: #fb923c;
  --color-primary-hover: #fdba74;
  --color-primary-active: #f97316;
  --color-primary-light: #431407;
}

---

Changelog

Version	Date	Changes
1.2	Dec 2024	Fixed font import, added spacing tokens, fixed dark mode hover states
1.1	Dec 2024	Orange primary color, CRM-specific tokens (pipeline, activities, etc.)
1.0	Dec 2024	Initial release

---

Questions? Contact the Design System team.