# ProbizCRM design tokens

The visual system, fixed now so that every screen built from Phase 4 onward
derives from it rather than inventing colours locally.

Brief: neutral light background, deep navy primary, vibrant accent hues for
data states.

## The idea

A CRM is a dense data instrument, not a marketing page. The interface is quiet
almost everywhere — light neutral ground, navy structure, one weight of border
— and spends all of its colour on the only thing colour should carry here:
**where a record sits in the funnel, and whether a number is good or bad**.

**Signature: the funnel spectrum.** Pipeline stages are coloured on a fixed
cool-to-warm ramp, cyan through amber, ending in emerald for won and red for
lost. Colour temperature rises as a deal approaches close. This means a Kanban
board, a funnel chart, a stage badge in a table and a dot beside a name in a
timeline all agree, and a manager can read a board's health across the room
without a legend. Stage colour is assigned by funnel position, never picked
per tenant, which is why `pipeline_stages.colour_token` stores a token name and
not a hex value.

## Colour

### Ground and structure

| Token | Hex | Use |
| --- | --- | --- |
| `paper` | `#F6F7F9` | App background |
| `surface` | `#FFFFFF` | Cards, tables, panels |
| `surface-sunken` | `#EEF1F5` | Table headers, inset wells, disabled fields |
| `line` | `#DEE3EB` | All borders and dividers, one weight only |
| `ink-900` | `#0B1B33` | Primary navy: sidebar, headings, primary buttons |
| `ink-700` | `#1E3A63` | Hover state for navy surfaces |
| `ink-500` | `#46587A` | Body text |
| `ink-400` | `#6B7C99` | Secondary text, placeholders, table meta |

Navy carries brand and structure. It is never used to signal a state, so a navy
element is always chrome and never information.

### Data states

| Token | Hex | Meaning |
| --- | --- | --- |
| `positive` | `#0F9D74` | Growth, won, on target, paid |
| `negative` | `#DC2626` | Decline, lost, failed payment, overdue |
| `warning` | `#D97706` | At risk, rotting, past due, approaching a plan limit |
| `info` | `#2563EB` | Neutral highlight, in progress, informational |
| `muted` | `#64748B` | No data, cancelled, archived |

### Funnel spectrum

| Token | Hex | Typical stage |
| --- | --- | --- |
| `stage-1` | `#06B6D4` | New |
| `stage-2` | `#3B82F6` | Contacted |
| `stage-3` | `#6366F1` | Qualified |
| `stage-4` | `#A855F7` | Proposal |
| `stage-5` | `#F59E0B` | Negotiation |
| `stage-won` | `#10B981` | Won |
| `stage-lost` | `#EF4444` | Lost |

Each has a `-soft` variant at 12% alpha for badge and column backgrounds, so a
board reads as tinted columns rather than seven saturated blocks.

## Type

| Role | Face | Notes |
| --- | --- | --- |
| Display | **Instrument Sans** 600/700 | Page titles, KPI values, section headings. Tighter and more confident than the interface default. |
| Interface | **Public Sans** 400/500/600 | Everything else. Built for interfaces, legible at 13–14px where a CRM lives. |
| Figures | **IBM Plex Mono** 500 | Currency, percentages, counts, IDs, dates in tables. Tabular by construction, so columns of numbers align on the decimal without `font-variant-numeric` hacks. |

Scale: 30 / 24 / 20 / 16 / 14 / 13 / 11px. Body is 14px, tables 13px, labels and
eyebrows 11px uppercase with 0.06em tracking. Line height 1.5 for prose, 1.35 in
tables.

Numbers in a data table are the content, so they get their own face. This is the
one place the design spends a whole typeface on a detail, and it earns it: a
pipeline column that does not align is a pipeline column nobody reads.

## Layout and motion

- 4px spacing base. Card padding 20px, table cell padding 10px/12px.
- Radius: 8px on cards and inputs, 6px on buttons, 999px on badges. Nothing sharp, nothing pill-shaped except badges.
- One elevation only: `0 1px 2px rgba(11, 27, 51, 0.06)`. Depth is not information here.
- Motion is confined to state changes that need confirming: 120ms for hovers, 180ms for panel and drawer entry, and the Kanban card drop. `prefers-reduced-motion` removes all of it.
- Focus is always visible: 2px `info` ring with 2px offset, never removed.

## Quality floor

Every screen: usable from 320px, keyboard reachable in DOM order, focus visible,
contrast at least 4.5:1 for text and 3:1 for interface elements. Colour never
carries meaning alone — every state has a label or an icon beside it, which also
covers the roughly 1 in 12 men with a colour vision deficiency who will be
reading these pipelines.