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);