Skip to content

DESIGN_SYSTEM.md

Latest commit

 

History

History
1075 lines (854 loc) · 38.1 KB

DESIGN_SYSTEM.md

File metadata and controls

1075 lines (854 loc) · 38.1 KB

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.
⚡