# Design System: SalesHub CRM (Frontend)

**Project:** SalesHub CRM — `saleshub-frontend`

## 1. Visual Theme & Atmosphere

The interface is **utilitarian yet premium**: a light workspace canvas with **soft indigo-violet accents**, glass surfaces, and clear data hierarchy. Pages feel **airy on desktop** but stay **dense enough for operational CRM work**—KPIs, tables, and filters remain scannable without decorative noise.

**Key characteristics:**
- Cool neutral background (`#F0F1F7`) with white glass cards
- **Electric Periwinkle** accent (`#6C63FF`) for focus, progress, and primary actions
- Lexend / Lexend Deca typography pairing (display vs. meta labels)
- Whisper-soft shadows with subtle accent tint
- Rounded 2xl containers; pill badges for status

## 2. Color Palette & Roles

### Foundation
- **Workspace Mist** (`#F0F1F7`, `--bg`) — Page background behind content.
- **Pure Canvas** (`#FFFFFF`, `--white`) — Card and header glass layers.
- **Ink Navy** (`#1A1D2E`, `--text`) — Headlines and primary values.

### Accent & Interactive
- **Electric Periwinkle** (`#6C63FF`, `--accent`) — Icons, progress bars, badges, primary buttons, focus rings.
- **Muted Slate** (`#6B7280`, `--muted`) — Descriptions, table headers, hints.

### Structural
- **Feather Border** (`#E4E6EF`, `--border`) — Dividers and table outlines.
- **Accent Glow Shadow** (`0 4px 14px rgba(108, 99, 255, 0.07)`) — Elevated cards on hover.

### Success
- **Growth Green** (`#22C55E`, `--green`) — 100%+ attainment, completion rings.

## 3. Typography Rules

- **Lexend** — Page titles, KPI values, team names (bold / extrabold).
- **Lexend Deca** — Labels, filters, hints (10–11px uppercase tracking for section labels; sentence case for stat titles).
- Avoid all-caps on long metric names; use **sentence case** on stat tiles to prevent truncation.

## 4. Component Stylings

* **Page headers:** `rounded-2xl`, `bg-white/45`, `backdrop-blur-xl`, icon in `bg-accent/10` chip, toolbar in nested glass strip.
* **KPI / stat tiles:** `rounded-2xl`, glass border `border-white/50`, icon chip top-right, value `text-xl–2xl` tabular-nums.
* **Hero summary:** Two-column layout on large screens—narrative + overall progress bar with large % readout.
* **Team cards:** Avatar initials gradient, inset stat chips, accordion for member table, `hover` shadow lift.
* **Tables:** Rounded container, uppercase 10px headers, row hover `bg-accent/[0.04]`.

## 5. Layout Principles

- **Max width** ~1600px centered content on wide screens.
- **Section rhythm:** `gap-6` between header, summary, and list blocks.
- **Responsive grids:** Summary tiles `sm:2` / `xl:4`; team stats `sm:3` columns.
- **Reporting period** lives in header filter row—not mixed with page title in a cramped toolbar.

## Usage (Sales Targets & similar admin pages)

- Lead with **glass page header** + period controls.
- Show **organization progress hero** before per-team cards.
- Use **StatTile** pattern (readable labels) instead of ultra-compact uppercase KPI labels when labels exceed ~12 characters.