From 83b5795b227e3c3c200b16dbba142f75fe2d2f72 Mon Sep 17 00:00:00 2001 From: Yashas Date: Wed, 9 Sep 2026 01:05:20 +0530 Subject: [PATCH] =?UTF-8?q?console:=20the=20surface=20pass=20=E2=80=94=20d?= =?UTF-8?q?isplay=20face,=20depth,=20and=20whose=20move=20it=20is?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The layout was right but the surface still read as a flat corporate form. Three levers, all from the approved mockup: - A DISPLAY FACE (Bricolage Grotesque) on the things the eye lands on — the lead name, panel headings, and every figure. Zurich Sans stays the body voice; this gives the numbers and titles the tighter, more current character the plain grotesque could not. Loaded from Google Fonts with Zurich Sans as the fallback, so a blocked CDN degrades to the brand face rather than breaking. - DEPTH. Panels and the metric tiles lift from the barely-there --sh-sm to a real --sh-md with rounder corners, so cards read as objects on a surface rather than boxes drawn on paper. - WHOSE MOVE IT IS. The header said "STAGE / Quote Presented" — a label. It now carries a coloured pill: "Right now · With the customer" (teal), "With the AI" (blue), "Waiting on a person" (amber). The stage name is in the rail below; the pill answers the question an operator actually opens a lead to ask. Co-Authored-By: Claude Opus 5 (1M context) --- index.html | 7 ++++ src/index.css | 6 ++++ src/screens/Lead.jsx | 55 ++++++++++++++++++++-------- src/screens/screens.css | 79 ++++++++++++++++++++++++++++++++++++++--- 4 files changed, 129 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 7b07a9e..efc2918 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,13 @@ Zurich Kotak | Lead Desk + + + +