vignesh/bottleneckcrm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
bottleneckcrm/DESIGN_SYSTEM.md
Ashwin 6e9fd8c98c chore: update dependencies and configurations 
- Updated `pnpm-workspace.yaml` to force patch for `cookie` package to address GHSA-pxg6-pf52-xh8x vulnerability.
- Modified `vitest.config.js` to set `maxWorkers` to '50%' for improved test performance.
- Bumped version in `pubspec.yaml` from 1.2.1+12 to 1.9.0+13 for mobile application.
2026-09-05 22:49:29 +05:30

1075 lines
38 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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.
Reference in a new issue View git blame Copy permalink