From 9c05e4b26b6735ba19ee3f818faa1a52f3c6dd70 Mon Sep 17 00:00:00 2001 From: Yashas Date: Tue, 8 Sep 2026 23:56:59 +0530 Subject: [PATCH] console: the shell, the trail and the lead header on the same rhythm MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Continues 009153f into the surfaces it had not reached. The top bar was 66px with a hard rule under it — admin chrome. It is 72 now, on the softer line, with the product name at 16px instead of 15. The sidebar gets wider gutters and taller rows, so the queue list stops reading as a dense menu and starts reading as the pipeline it is drawn to represent. The audit trail is where people spend their time on this screen, so it gets the most air: entries at 24px apart rather than 18, quoted text with 12/16 padding instead of 8/12, and the activity name at semibold so an entry has a heading rather than a first line. The stage badge was 15px under a 12px caption. It is the single most important fact about a lead and now reads at 16px semibold, which is legible from across a desk — which is how it will actually be read in a demo. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/Timeline.css | 23 ++++++++-------- src/layout/Shell.css | 55 ++++++++++++++++++------------------- src/screens/screens.css | 17 ++++++------ 3 files changed, 48 insertions(+), 47 deletions(-) diff --git a/src/components/Timeline.css b/src/components/Timeline.css index afefe8b..8b3591a 100644 --- a/src/components/Timeline.css +++ b/src/components/Timeline.css @@ -60,9 +60,9 @@ .tl__body { display: flex; flex-direction: column; - gap: 4px; - padding: 2px 12px 8px; - margin-left: -12px; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3) var(--sp-3); + margin-left: calc(var(--sp-3) * -1); border-radius: var(--r-md); transition: background var(--t-fast); } @@ -75,7 +75,7 @@ display: flex; flex-wrap: wrap; align-items: baseline; - gap: 4px 8px; + gap: var(--sp-1) var(--sp-2); } /* Who and when sit on their own line: in a 384px rail, badge-beside-title wraps @@ -84,12 +84,13 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: 4px 8px; + gap: var(--sp-1) var(--sp-3); } .tl__what { font-size: var(--fs-sm); - font-weight: 500; + font-weight: var(--fw-semi); + letter-spacing: -0.008em; color: var(--zk-ink); } @@ -129,8 +130,8 @@ } .tl__say { - margin-top: 8px; - padding: 8px 12px; + margin-top: var(--sp-2); + padding: var(--sp-3) var(--sp-4); border-left: 2px solid var(--zk-blue-light); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--zk-tint); @@ -143,11 +144,11 @@ .tl__saylabel { display: block; font-size: var(--fs-3xs); - font-weight: 500; - letter-spacing: 0.1em; + font-weight: var(--fw-semi); + letter-spacing: 0.09em; text-transform: uppercase; color: var(--zk-grey); - margin-bottom: 3px; + margin-bottom: var(--sp-2); } .tl__say p { diff --git a/src/layout/Shell.css b/src/layout/Shell.css index bddcf1d..c519808 100644 --- a/src/layout/Shell.css +++ b/src/layout/Shell.css @@ -13,14 +13,13 @@ display: flex; align-items: center; justify-content: space-between; - gap: 24px; - height: 66px; - padding: 0 28px; - background: rgba(255, 255, 255, 0.86); - backdrop-filter: saturate(180%) blur(14px); - -webkit-backdrop-filter: saturate(180%) blur(14px); - border-bottom: 1px solid var(--zk-line); - box-shadow: var(--sh-xs); + gap: var(--sp-6); + height: 72px; + padding: 0 var(--sp-7); + background: rgba(255, 255, 255, 0.82); + backdrop-filter: saturate(180%) blur(18px); + -webkit-backdrop-filter: saturate(180%) blur(18px); + border-bottom: 1px solid var(--zk-line-soft); } .shell__brand { @@ -46,9 +45,9 @@ } .shell__brandtext strong { - font-size: var(--fs-sm); - font-weight: 500; - letter-spacing: -0.005em; + font-size: var(--fs-md); + font-weight: var(--fw-semi); + letter-spacing: -0.012em; color: var(--zk-ink); } @@ -70,33 +69,33 @@ .shell__nav { position: sticky; - top: 66px; + top: 72px; align-self: flex-start; width: 264px; flex: none; - min-height: calc(100vh - 66px); - max-height: calc(100vh - 66px); + min-height: calc(100vh - 72px); + max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; background: var(--zk-white); - border-right: 1px solid var(--zk-line); - padding: 20px 14px 32px; + border-right: 1px solid var(--zk-line-soft); + padding: var(--sp-6) var(--sp-4) var(--sp-8); display: flex; flex-direction: column; } .shell__navlabel { - margin: 0 0 10px; - padding: 0 10px; + margin: 0 0 var(--sp-3); + padding: 0 var(--sp-3); font-size: var(--fs-3xs); - font-weight: 500; - letter-spacing: 0.12em; + font-weight: var(--fw-semi); + letter-spacing: 0.1em; text-transform: uppercase; color: var(--zk-grey); } .shell__group + .shell__group { - margin-top: 22px; + margin-top: var(--sp-7); } /* The stage list is drawn as a rail with a node per state: the sidebar should @@ -105,15 +104,15 @@ position: relative; display: flex; flex-direction: column; - gap: 2px; + gap: var(--sp-1); } .shell__stages::before { content: ''; position: absolute; - left: 17px; - top: 18px; - bottom: 18px; + left: 18px; + top: 20px; + bottom: 20px; width: 2px; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--zk-line) 0%, var(--zk-line-soft) 100%); @@ -124,8 +123,8 @@ display: flex; align-items: center; justify-content: space-between; - gap: 8px; - padding: 9px 12px 9px 38px; + gap: var(--sp-2); + padding: var(--sp-3) var(--sp-3) var(--sp-3) 40px; border-radius: var(--r-md); text-decoration: none; color: var(--zk-muted); @@ -136,7 +135,7 @@ .shell__stage::before { content: ''; position: absolute; - left: 12px; + left: 13px; top: 50%; width: 12px; height: 12px; diff --git a/src/screens/screens.css b/src/screens/screens.css index 9e3e91f..ba432e9 100644 --- a/src/screens/screens.css +++ b/src/screens/screens.css @@ -542,9 +542,9 @@ name is still there for a pointer that hovers and for a screen reader. */ .backbtn { flex: none; - margin-top: 4px; - width: 34px; - height: 34px; + margin-top: var(--sp-1); + width: 38px; + height: 38px; display: grid; place-items: center; cursor: pointer; @@ -582,7 +582,7 @@ .page__lead { display: flex; align-items: flex-start; - gap: 14px; + gap: var(--sp-4); min-width: 0; } @@ -726,7 +726,7 @@ display: flex; flex-direction: column; align-items: flex-end; - gap: 5px; + gap: var(--sp-2); text-align: right; } @@ -745,10 +745,11 @@ } .lead__stage strong { - font-size: var(--fs-sm); - font-weight: 500; + font-size: var(--fs-md); + font-weight: var(--fw-semi); + letter-spacing: -0.01em; color: var(--zk-blue-dark); - padding: 6px 14px; + padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); background: var(--zk-tint-blue); border: 1px solid var(--zk-blue-light);