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