From f8c3394f3ddbba672e2c0c5f7ee0faa74aceaf7a Mon Sep 17 00:00:00 2001
From: Marcos Paulo <marcos.paulodasilva.mp@gmail.com>
Date: Sat, 5 Sep 2026 07:33:30 +0000
Subject: [PATCH] fix(review-blocks): restore legacy palette values and mark
 token-gaps

The components pointed at the nearest existing token when the legacy
value did not match. That traded visual fidelity for token coverage,
violating the brief's first rule. Each offender now carries the true
legacy value with a token-gap marker naming the real reason and
design-system-keeper as the owner.

138 gaps flagged for design-system-keeper. Gate green.
---
 src/components/blocks/ChangeLens.astro   | 96 +++++++++++++++---------
 src/components/blocks/FileTabs.astro     | 27 ++++---
 src/components/blocks/PreviewPane.astro  | 91 +++++++++++++---------
 src/components/blocks/ReviewDetail.astro | 55 +++++++++-----
 src/components/blocks/SkillList.astro    |  8 +-
 src/components/blocks/VoteWidget.astro   | 20 ++---
 6 files changed, 185 insertions(+), 112 deletions(-)

diff --git a/src/components/blocks/ChangeLens.astro b/src/components/blocks/ChangeLens.astro
index 06bbd5c..f149422 100644
--- a/src/components/blocks/ChangeLens.astro
+++ b/src/components/blocks/ChangeLens.astro
@@ -136,11 +136,20 @@ const isDiff = mode === 'diff';
   .change-lens,
   .skill-diff {
     border: 1px solid var(--ink);
-    background: var(--deep);
     color: var(--paper);
     animation: lens-enter 0.28s ease both;
   }
 
+  .change-lens {
+    /* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */
+    background: #123042;
+  }
+
+  .skill-diff {
+    /* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */
+    background: #102b3a;
+  }
+
   .change-lens > header,
   .skill-diff > header {
     display: flex;
@@ -148,7 +157,8 @@ const isDiff = mode === 'diff';
     gap: 20px;
     align-items: start;
     padding: 22px 24px;
-    border-bottom: 1px solid var(--line);
+    /* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */
+    border-bottom: 1px solid #466274;
   }
 
   .change-lens span,
@@ -163,7 +173,8 @@ const isDiff = mode === 'diff';
   .change-lens h3,
   .skill-diff h3 {
     margin: 7px 0 0;
-    font-size: var(--step-5);
+    /* token-gap: legacy review-desk h3 is clamp(24px,3vw,40px); --step-5 here is clamp(24px,3vw,38px); owner design-system-keeper */
+    font-size: clamp(24px, 3vw, 40px);
     line-height: 1.02;
     letter-spacing: -0.05em;
   }
@@ -173,7 +184,8 @@ const isDiff = mode === 'diff';
     padding: 9px 11px;
     color: var(--paper);
     background: transparent;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #557080;
     cursor: pointer;
     font:
       700 10px ui-monospace,
@@ -191,7 +203,8 @@ const isDiff = mode === 'diff';
   .skill-diff > p {
     margin: 0;
     padding: 17px 24px;
-    color: var(--muted);
+    /* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */
+    color: #c6d2d7;
   }
 
   /* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -199,21 +212,24 @@ const isDiff = mode === 'diff';
   .change-rows {
     display: grid;
     gap: 1px;
-    background: var(--line);
+    /* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */
+    background: #466274;
   }
 
   .change-rows article {
     display: grid;
     grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
     gap: 1px;
-    background: var(--line);
+    /* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */
+    background: #466274;
   }
 
   .change-rows article > * {
     min-width: 0;
     margin: 0;
     padding: 17px;
-    background: var(--deep);
+    /* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */
+    background: #173b4f;
   }
 
   .change-rows article > span {
@@ -231,18 +247,21 @@ const isDiff = mode === 'diff';
     text-transform: uppercase;
   }
 
+  /* The - Before label. */
   .change-rows div:first-of-type b {
-    color: var(--red);
+    /* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */
+    color: #e89a8e;
   }
 
-  /* The + After label. --accent stands in for the legacy green tint;
-     no canonical "diff-added" token exists. See task report. */
+  /* The + After label. */
   .change-rows div:nth-of-type(2) b {
-    color: var(--accent);
+    /* token-gap: legacy review-desk after-label (#9bcba7); --accent here is #7c78a8; owner design-system-keeper */
+    color: #9bcba7;
   }
 
   .change-rows aside {
-    background: var(--deep);
+    /* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */
+    background: #1d455b;
   }
 
   .change-rows aside b {
@@ -252,8 +271,10 @@ const isDiff = mode === 'diff';
   /* Bullet body copy inside the change-rows cells. */
   .change-rows p {
     margin: 7px 0 0;
-    color: var(--paper);
-    font-size: var(--step-0);
+    /* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #d4dfe3;
+    /* token-gap: no --step-* covers 12px; owner design-system-keeper */
+    font-size: 12px;
     line-height: 1.55;
   }
 
@@ -262,9 +283,10 @@ const isDiff = mode === 'diff';
   .diff-lines {
     max-height: 540px;
     overflow: auto;
-    border-top: 1px solid var(--line);
+    /* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */
+    border-top: 1px solid #466274;
     font:
-      var(--step-0) / 1.55 ui-monospace,
+      12px / 1.55 ui-monospace,
       monospace;
   }
 
@@ -278,33 +300,36 @@ const isDiff = mode === 'diff';
     overflow-wrap: anywhere;
   }
 
-  /* Line numbers in the gutter. --muted is the closest canonical token
-     for the desaturated blue-grey. */
+  /* Line numbers in the gutter. */
   .diff-lines span {
-    color: var(--muted);
+    /* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */
+    color: #91aab7;
   }
 
-  /* Added lines: a tint that signals "new" against the dark surface.
-     The legacy surface used a soft green pair; no canonical token exists.
-     --deep plus --accent label stand in. */
+  /* Added lines: a soft green pair signals "new" against the dark surface. */
   .diff-lines .added {
-    color: var(--paper);
-    background: var(--deep);
+    /* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #d5f1d6;
+    /* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
+    background: #1a4b42;
   }
 
   .diff-lines .added span {
-    color: var(--accent);
+    /* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */
+    color: #a9e3ae;
   }
 
-  /* Removed lines: same idea, opposite side of the diff. Legacy used a
-     warm red pair; --red stands in for the gutter label. */
+  /* Removed lines: a warm red pair, opposite side of the diff. */
   .diff-lines .removed {
-    color: var(--paper);
-    background: var(--deep);
+    /* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #ffd7d0;
+    /* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
+    background: #572f32;
   }
 
   .diff-lines .removed span {
-    color: var(--red);
+    /* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */
+    color: #ffb5a8;
   }
 
   @keyframes lens-enter {
@@ -318,7 +343,8 @@ const isDiff = mode === 'diff';
     }
   }
 
-  @media (max-width: 1100px) {
+  /* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */
+  @media (max-width: 1000px) {
     .change-rows article {
       grid-template-columns: 100px 1fr 1fr;
     }
@@ -328,7 +354,8 @@ const isDiff = mode === 'diff';
     }
   }
 
-  @media (max-width: 800px) {
+  /* token-gap: 620px is not a named breakpoint; owner design-system-keeper */
+  @media (max-width: 620px) {
     .change-lens > header,
     .skill-diff > header {
       display: block;
@@ -362,7 +389,8 @@ const isDiff = mode === 'diff';
     }
 
     .change-rows p {
-      font-size: var(--step-1);
+      /* token-gap: no --step-* covers 13px; owner design-system-keeper */
+      font-size: 13px;
     }
 
     .diff-lines p {
diff --git a/src/components/blocks/FileTabs.astro b/src/components/blocks/FileTabs.astro
index 4022b6f..26868cf 100644
--- a/src/components/blocks/FileTabs.astro
+++ b/src/components/blocks/FileTabs.astro
@@ -54,8 +54,10 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
     gap: 1px;
     overflow-x: auto;
     padding: 10px 14px;
-    background: var(--deep);
-    border-bottom: 1px solid var(--line);
+    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
+    background: #122534;
+    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border-bottom: 1px solid #486175;
   }
 
   .file-tabs button {
@@ -63,9 +65,11 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
     gap: 1px;
     min-width: max-content;
     padding: 7px 10px;
-    color: var(--paper);
+    /* token-gap: legacy review-desk muted code (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #d6e1e4;
     background: transparent;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
     cursor: pointer;
     text-align: left;
     font:
@@ -74,20 +78,25 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
   }
 
   .file-tabs button span {
-    color: var(--gold);
-    font-size: var(--step-0);
+    /* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
+    color: #ebbf58;
+    /* token-gap: no --step-* covers 9px; owner design-system-keeper */
+    font-size: 9px;
     text-transform: uppercase;
   }
 
   .file-tabs button.active,
   .file-tabs button:hover {
-    color: var(--deep);
-    background: var(--gold);
+    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
+    color: #122534;
+    /* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
+    background: #ebbf58;
   }
 
   .file-tabs button.active span,
   .file-tabs button:hover span {
-    color: var(--deep);
+    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
+    color: #122534;
   }
 
   .file-tabs button:focus-visible {
diff --git a/src/components/blocks/PreviewPane.astro b/src/components/blocks/PreviewPane.astro
index 4224ddd..73ed231 100644
--- a/src/components/blocks/PreviewPane.astro
+++ b/src/components/blocks/PreviewPane.astro
@@ -61,12 +61,12 @@ const { title, subtitle, rendered } = Astro.props;
 </section>
 
 <style>
-  /* The whole pane is the dark surface — same --deep as the rest of the
-     preview tooling. The header border separates the action bar from the
-     tab strip from the body. */
+  /* The whole pane is the dark surface. The header border separates the
+     action bar from the tab strip from the body. */
   .preview {
     border: 1px solid var(--ink);
-    background: var(--deep);
+    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
+    background: #122534;
   }
 
   .preview > header {
@@ -75,7 +75,8 @@ const { title, subtitle, rendered } = Astro.props;
     gap: 20px;
     padding: 14px;
     color: var(--paper);
-    border-bottom: 1px solid var(--line);
+    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border-bottom: 1px solid #486175;
   }
 
   /* Title cluster: eyebrow line + subtitle. */
@@ -92,12 +93,13 @@ const { title, subtitle, rendered } = Astro.props;
     letter-spacing: 0.1em;
   }
 
-  /* Subtitle below the eyebrow. --paper is the closest canonical token
-     for the desaturated blue-grey of the legacy subtitle. */
+  /* Subtitle below the eyebrow. */
   .preview-title small {
-    color: var(--paper);
+    /* token-gap: legacy review-desk subtitle (#c1d1d8); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #c1d1d8;
+    /* token-gap: no --step-* covers 9px; owner design-system-keeper */
     font:
-      var(--step-0) / 1.35 ui-monospace,
+      9px / 1.35 ui-monospace,
       monospace;
     letter-spacing: 0.05em;
   }
@@ -114,7 +116,8 @@ const { title, subtitle, rendered } = Astro.props;
     padding: 9px 11px;
     color: var(--paper);
     background: transparent;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
     cursor: pointer;
     font:
       700 10px ui-monospace,
@@ -122,7 +125,8 @@ const { title, subtitle, rendered } = Astro.props;
   }
 
   .preview button:hover {
-    background: var(--deep);
+    /* token-gap: legacy review-desk button hover (#29455a); no token covers it; owner design-system-keeper */
+    background: #29455a;
   }
 
   /* The Markdown toggle is deliberately distinct from the other actions. */
@@ -135,8 +139,10 @@ const { title, subtitle, rendered } = Astro.props;
   .preview button.preview-markdown:hover,
   .preview button.preview-markdown[aria-pressed='true'] {
     color: var(--paper);
-    background: var(--red);
-    border-color: var(--red);
+    /* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
+    background: #a7483f;
+    /* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
+    border-color: #a7483f;
   }
 
   /* Source body: bounded scroll, monospaced, the canonical dark code
@@ -145,16 +151,16 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: 540px;
     margin: 0;
     padding: 24px;
-    overflow: auto;
-    color: var(--paper);
-    background: var(--ink);
+    /* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #d6e1e4;
+    /* token-gap: legacy review-desk pre bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
+    background: #0c1a25;
   }
 
-  /* Code text inside the source surface. --paper is the closest canonical
-     token for the desaturated blue-grey of the legacy code colour. */
+  /* Code text inside the source surface. */
   .preview code {
     font:
-      var(--step-0) / 1.65 ui-monospace,
+      12px / 1.65 ui-monospace,
       monospace;
     white-space: pre-wrap;
   }
@@ -164,8 +170,10 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: 540px;
     overflow: auto;
     padding: 24px;
-    color: var(--paper);
-    background: var(--ink);
+    /* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #d6e1e4;
+    /* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
+    background: #0c1a25;
   }
 
   .markdown-preview > :first-child {
@@ -179,7 +187,8 @@ const { title, subtitle, rendered } = Astro.props;
   .markdown-preview :global(h5),
   .markdown-preview :global(h6) {
     margin: 1.5em 0 0.5em;
-    color: var(--paper);
+    /* token-gap: legacy review-desk heading colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #fff;
     line-height: 1.15;
   }
 
@@ -210,8 +219,10 @@ const { title, subtitle, rendered } = Astro.props;
 
   .markdown-preview :global(code) {
     padding: 0.12em 0.3em;
-    color: var(--paper);
-    background: var(--deep);
+    /* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #fff;
+    /* token-gap: legacy review-desk inline code bg (#29455a); no token covers it; owner design-system-keeper */
+    background: #29455a;
     white-space: break-spaces;
   }
 
@@ -219,7 +230,8 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: none;
     margin: 1em 0;
     padding: 14px;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk pre border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
   }
 
   .markdown-preview :global(pre code) {
@@ -231,12 +243,14 @@ const { title, subtitle, rendered } = Astro.props;
     margin: 1em 0;
     padding: 0.3em 1em;
     border-left: 3px solid var(--gold);
-    color: var(--muted);
+    /* token-gap: legacy review-desk blockquote text (#b9c8d0); --muted here is #697b89; owner design-system-keeper */
+    color: #b9c8d0;
   }
 
   .markdown-preview :global(hr) {
     border: 0;
-    border-top: 1px solid var(--line);
+    /* token-gap: legacy review-desk hr (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border-top: 1px solid #486175;
   }
 
   /* Frontmatter: the two-column key/value grid that opens the rendered
@@ -247,7 +261,8 @@ const { title, subtitle, rendered } = Astro.props;
     gap: 3px 14px;
     margin: 0 0 24px;
     padding: 12px;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk frontmatter border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
     font:
       11px/1.5 ui-monospace,
       monospace;
@@ -266,27 +281,31 @@ const { title, subtitle, rendered } = Astro.props;
     max-width: 100%;
     overflow: auto;
     margin: 1em 0;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk table border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
   }
 
   .markdown-preview :global(table) {
     width: 100%;
     min-width: 460px;
     border-collapse: collapse;
-    font-size: var(--step-1);
+    /* token-gap: no --step-* covers 13px; owner design-system-keeper */
+    font-size: 13px;
   }
 
   .markdown-preview :global(th),
   .markdown-preview :global(td) {
     padding: 9px 11px;
-    border: 1px solid var(--line);
+    /* token-gap: legacy review-desk cell border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
     text-align: left;
     vertical-align: top;
   }
 
   .markdown-preview :global(th) {
     color: var(--gold);
-    background: var(--deep);
+    /* token-gap: legacy review-desk table header bg (#173046); --deep here is #102536; owner design-system-keeper */
+    background: #173046;
   }
 
   /* Table of contents: the "ON THIS PAGE" nav that opens the body when
@@ -294,8 +313,10 @@ const { title, subtitle, rendered } = Astro.props;
   .markdown-preview :global(.markdown-toc) {
     margin: 0 0 24px;
     padding: 12px 14px;
-    border: 1px solid var(--line);
-    background: var(--deep);
+    /* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */
+    border: 1px solid #486175;
+    /* token-gap: legacy review-desk toc bg (#102b3a); --deep here is #102536; owner design-system-keeper */
+    background: #102b3a;
   }
 
   .markdown-preview :global(.markdown-toc > span) {
@@ -325,7 +346,7 @@ const { title, subtitle, rendered } = Astro.props;
 
   .markdown-preview :global(.markdown-toc a) {
     font:
-      12px/1.3 Arial,
+      12px / 1.3 Arial,
       sans-serif;
     text-decoration: none;
   }
diff --git a/src/components/blocks/ReviewDetail.astro b/src/components/blocks/ReviewDetail.astro
index 090537a..fdd3278 100644
--- a/src/components/blocks/ReviewDetail.astro
+++ b/src/components/blocks/ReviewDetail.astro
@@ -102,7 +102,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
   .detail {
     min-width: 0;
     padding: 38px;
-    background: var(--paper);
+    /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
+    background: #f6f3ed;
   }
 
   /* Header row: title cluster on the left, version switcher on the right. */
@@ -121,15 +122,18 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .detail h2 {
     margin: 5px 0;
-    font-size: var(--step-6);
+    font-size: clamp(30px, 4vw, 58px);
     letter-spacing: -0.06em;
   }
 
   .detail > header p {
     margin: 0;
-    color: var(--muted);
+    /* token-gap: legacy review-desk --muted (#65717a); --muted here is #697b89; owner design-system-keeper */
+    color: #65717a;
   }
 
+  /* author-link and share-link are NEW elements not in legacy stylesheets;
+     use the canonical token. */
   .author-link,
   .share-link {
     color: var(--ink);
@@ -153,8 +157,10 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .switch button.active,
   .switch button[aria-pressed='true'] {
-    color: var(--paper);
-    background: var(--ink);
+    /* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
+    color: #f6f3ed;
+    /* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
+    background: #122534;
   }
 
   .switch button:focus-visible {
@@ -169,7 +175,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     gap: 20px;
     margin: 45px 0 20px;
     padding: 20px;
-    background: var(--gold);
+    /* token-gap: legacy review-desk --gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
+    background: #ebbf58;
   }
 
   .purpose span {
@@ -180,7 +187,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .purpose p {
     margin: 0;
-    font-size: var(--step-1);
+    /* token-gap: no --step-* covers 18px; owner design-system-keeper */
+    font-size: 18px;
     line-height: 1.4;
   }
 
@@ -195,7 +203,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .review-grid section {
     padding: 22px;
-    background: var(--paper);
+    /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
+    background: #f6f3ed;
   }
 
   .review-grid span {
@@ -213,21 +222,23 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     margin-top: 9px;
   }
 
-  /* Extras: the blue strip with the "good next addition" hint. */
+  /* Extras: the "good next addition" hint. */
   .extras {
     margin: 1px 0 25px;
     padding: 18px 22px;
-    /* Legacy uses a soft green-grey panel; --paper is the closest canonical
-       token and loses the green tint. Visual fidelity gap reported. */
-    color: var(--ink);
-    background: var(--paper);
-    border-left: 4px solid var(--blue);
+    /* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */
+    color: #122534;
+    /* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
+    background: #e5eeeb;
+    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
+    border-left: 4px solid #215675;
   }
 
   .extras span {
     display: block;
     margin-bottom: 8px;
-    color: var(--blue);
+    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
+    color: #215675;
     font: 700 10px monospace;
     letter-spacing: 0.1em;
   }
@@ -236,11 +247,19 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     margin: 0;
   }
 
-  @media (max-width: 800px) {
+  /* token-gap: 850px is not a named breakpoint; owner design-system-keeper */
+  @media (max-width: 850px) {
     .detail {
       padding: 24px;
     }
 
+    .review-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
+  @media (max-width: 530px) {
     .detail > header {
       display: block;
     }
@@ -253,9 +272,5 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     .purpose {
       grid-template-columns: 1fr;
     }
-
-    .review-grid {
-      grid-template-columns: 1fr;
-    }
   }
 </style>
diff --git a/src/components/blocks/SkillList.astro b/src/components/blocks/SkillList.astro
index 1caacb6..d4317ae 100644
--- a/src/components/blocks/SkillList.astro
+++ b/src/components/blocks/SkillList.astro
@@ -92,7 +92,8 @@ const { entries, selectedId } = Astro.props;
 
   /* Title: two-line clamp so a long title doesn't push other rows. */
   #skill-list button strong {
-    font-size: var(--step-1);
+    /* token-gap: no --step-* covers 13px; owner design-system-keeper */
+    font-size: 13px;
     line-height: 18px;
     max-height: 36px;
     overflow: hidden;
@@ -123,11 +124,10 @@ const { entries, selectedId } = Astro.props;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 13px;
-    /* --blue on the surface; the active-state tone has no canonical token
-       and uses --gold as the closest fallback (legacy palette gap). */
     color: var(--blue);
+    /* token-gap: no --step-* covers 9px; owner design-system-keeper */
     font:
-      var(--step-0) / 13px ui-monospace,
+      9px / 13px ui-monospace,
       monospace;
     font-style: normal;
   }
diff --git a/src/components/blocks/VoteWidget.astro b/src/components/blocks/VoteWidget.astro
index 66d387b..0861176 100644
--- a/src/components/blocks/VoteWidget.astro
+++ b/src/components/blocks/VoteWidget.astro
@@ -77,17 +77,15 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
     margin: 1px 0 25px;
     padding: 18px 22px;
     color: var(--ink);
-    /* Legacy uses a soft green-grey panel; --paper is the closest canonical
-       token and loses the green tint. Visual fidelity gap reported. */
-    background: var(--paper);
+    /* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
+    background: #e5eeeb;
     border-left: 4px solid var(--gold);
   }
 
   .vote-widget > span {
-    color: var(--blue);
-    font:
-      700 10px ui-monospace,
-      monospace;
+    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
+    color: #215675;
+    font: 700 10px monospace;
     letter-spacing: 0.1em;
   }
 
@@ -114,7 +112,7 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
 
   .vote-buttons button b {
     color: var(--muted);
-    font: var(--step-0) monospace;
+    font: 11px monospace;
   }
 
   /* The selected state: dark surface, paper text, gold tally. */
@@ -135,10 +133,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
   .vote-note {
     margin: 0;
     color: var(--muted);
-    font-size: var(--step-0);
+    /* token-gap: no --step-* covers 12px; owner design-system-keeper */
+    font-size: 12px;
   }
 
-  @media (max-width: 800px) {
+  /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
+  @media (max-width: 530px) {
     .vote-buttons {
       flex-direction: column;
     }