DESIGN_SYSTEM.md
Rama master · réplica de lectura del repositorio original.
# 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](#design-principles)
2. [Color System](#color-system)
3. [CRM-Specific Colors](#crm-specific-colors)
4. [Data Visualization](#data-visualization)
5. [Kanban Board Specs](#kanban-board-specs)
6. [Activity Timeline](#activity-timeline)
7. [Typography](#typography)
8. [Spacing & Layout](#spacing--layout)
9. [Border Radius](#border-radius)
10. [Elevation & Shadows](#elevation--shadows)
11. [Components](#components)
12. [Icons](#icons)
13. [Grid & Breakpoints](#grid--breakpoints)
14. [CSS Variables Reference](#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
```css
--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
```css
--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
```css
.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
```css
: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.