Implements the design in zurich-kotak-leaddesk across every screen. Foundation: Source Sans 3 bundled from src/assets/fonts (no Google Fonts request), 15px root, navy/blue/amber/teal/red palette where blue is the AI, amber a person, teal the customer and red is reserved for risk; flat white 10px cards on a grey canvas, no shadows. Shell: 56px navy masthead (Z wordmark, Lead Desk, user), 232px white nav grouped Needs you / Scheduled / History with coloured count pills and the closed stages folded. Overview: the hero says who holds each open lead (stacked bar + legend) beside the renewals-at-risk card; five KPIs incl. Closed to date; Waiting on a person queue with owner dots and "N more with the AI"; Pipeline by stage with owner-coloured bars; Renewal exposure with tabs, dropdown filters and a Holding it column. Lead: back button, id line, holder pill; one attention banner (amber your turn / blocked, red stalled, blue with the AI, teal with the customer) that carries its button; four facts with a confidence bar; navy steps rail whose current step takes its holder's colour; timeline as an avatar gutter with title, stage pill, by-line + AI tag and text-link actions (See reasoning · N steps, Hear the call, Open thread); side column flows. Lists: card with search + hide-closed toggle, columns Customer / Stage / Renewal due / Holding it / Premium / Last activity, stalled rows get a red inset, closed rows dim, person-gated queues split into Your turn / With the AI group rows. src/api/holder.js is the single rule for holder tone + label so the table cells, the overview and the lead header cannot disagree. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
32 KiB
32 KiB