A calm, precise system for field sales at scale.
The shared design language behind every RetailConnect surface — from the manager dashboard to the distributor portal. Tokens, components and motion, tuned to read like a financial instrument, not a template.
Color
One confident cobalt carries every action. Cool-slate neutrals hold the canvas, and a disciplined data-viz palette gives charts and status their own identity. Click any swatch to copy.
Primary · Cobalt
Neutral · Slate
Semantic
Data visualisation
Typography
Sora for display and metrics, Plus Jakarta Sans for UI and body, JetBrains Mono for codes and figures. A modular scale, fluid on the largest sizes.
Space & Radius
An 8px base with 4px half-steps keeps rhythm consistent. Radii scale by role — tighter on dense controls, softer on cards and overlays.
Spacing scale
Radius
Elevation & Motion
Depth comes from surface layering and hairline borders; shadows are reserved for surfaces that genuinely float. Motion stays in a 120–320ms ease-out band — present, never showy.
Elevation
Motion
Form controls
Inputs, selects, toggles and choices — all with labels, hints, error and disabled states, and a single shared focus ring.
Shown on the order receipt.
This beat code is already assigned.
Badges & Chips
Low-saturation status pills pulled from the same scale as the charts. Chips are interactive — selectable and removable.
Avatars & Tabs
Deterministic initials fallbacks, status dots and stacked groups. Tabs come in underline and segmented variants with an animated indicator.
Data table
Sortable, paginated, with tabular figures, inline sparklines and status pills. Sort carets reveal on hover; click a header to sort.
| Distributor | Region | Orders | Secondary ₹L | 7-day | Target | Status |
|---|---|---|---|---|---|---|
ST Sunrise TradersD-104 | North | 1284 | 42.8 | 108% | On track | |
MC Metro Distribution Co.D-118 | West | 1102 | 38.1 | 96% | On track | |
AS Anand Super StockistD-092 | West | 640 | 21.4 | 71% | At risk | |
CP Coastal FMCG PartnersD-141 | South | 1560 | 55.6 | 121% | On track | |
NW Northgate WholesaleD-077 | North | 388 | 12.9 | 48% | Off target |
Charts
A consistent SVG chart layer — shared axis, grid, legend and hover tooltip, drawing from the same 8-series palette. Hover to inspect.
Primary vs secondary
₹ lakh · last 7 days
- Primary
- Secondary
Secondary by region
₹ lakh
SKU mix
Share of secondary
- Biscuits42% · 42%
- Beverages28% · 28%
- Snacks18% · 18%
- Confectionery12% · 12%
Gauge, heatmap & date range
Added for the Manager Dashboard. The gauge marks its target with a tick rather than relying on colour alone; the heatmap bands are ABSOLUTE thresholds (not a gradient stretched across whatever data exists today) and every cell prints its own number, so the grid is readable without seeing the colour.
Target vs actual
The dashed mark is where an on-pace performer would be today
Stock cover
Days, by SKU × warehouse
| SKU | Pune | Mumbai | Delhi |
|---|---|---|---|
| Marie Gold 100gSB-MG-100 | 4d | 12d | 38d |
| Choco Chip 300gSB-CC-300 | 21d | 0d | — |
| Glucose 150gSB-GL-150 | 45d | 9d | 16d |
Date range
Inclusive UTC calendar days
2026-07-08 to 2026-08-06 · 30 days
Overlays
Modal, drawer, tooltip and toast — all focus-trapped, Esc-dismissable and reduced-motion aware.
Feedback & Empty states
Every screen ships its loading, empty and error states. Skeletons mirror the real layout; empty states carry an illustration slot and a clear next action.
No orders yet today
Orders booked by sales officers on their beats will appear here in real time.
Upload validation failed
14 rows in the distributor sales file didn't match the expected columns.
Breadcrumbs
In context
The system composed the way it actually ships — a slice of the manager dashboard, built entirely from these components.
Sell-through trend
Primary vs secondary · ₹ lakh
- Primary
- Secondary
Beat coverage
Today
- Visited62 · 62%
- In progress18 · 18%
- Pending20 · 20%