diff --git a/boostlook-v3.css b/boostlook-v3.css
index e86977c..35bc010 100644
--- a/boostlook-v3.css
+++ b/boostlook-v3.css
@@ -352,12 +352,15 @@
 
   /* New Look Responsive Mobile First */
   /* Spacing — Metalab 2.0 (mobile) */
-  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */
+  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
+  --spacing-xs: 0.125rem;
+  --spacing-s: 0.25rem;
   --spacing-default: 0.375rem;
   --spacing-medium: 0.5rem;
-  --spacing-large: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-xxl: 1.25rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-xxl: 3rem;
+  --spacing-avatar: 2.5rem;
 
   /* Corner Radius — Metalab 2.0 (mobile) */
   --radius-xs: var(--corner-radius-xs);
@@ -425,11 +428,14 @@
 @media (min-width: 768px) {
   :root {
     /* Spacing — Metalab 2.0 (desktop) */
+    --spacing-xs: 0.125rem;
+    --spacing-s: 0.25rem;
     --spacing-default: var(--spacing-size-2xs);
     --spacing-medium: var(--spacing-size-xs);
-    --spacing-large: var(--spacing-size-sm);
-    --spacing-xl: var(--spacing-size-lg);
-    --spacing-xxl: var(--spacing-size-xl);
+    --spacing-large: var(--spacing-size-lg);
+    --spacing-xl: var(--spacing-size-xl);
+    --spacing-xxl: 3.75rem;
+    --spacing-avatar: var(--spacing-size-3xl);
 
     /* Corner Radius — Metalab 2.0 (desktop) */
     --radius-xs: var(--corner-radius-xs);
diff --git a/preview/_/css/boostlook.css b/preview/_/css/boostlook.css
index e86977c..35bc010 100644
--- a/preview/_/css/boostlook.css
+++ b/preview/_/css/boostlook.css
@@ -352,12 +352,15 @@
 
   /* New Look Responsive Mobile First */
   /* Spacing — Metalab 2.0 (mobile) */
-  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */
+  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
+  --spacing-xs: 0.125rem;
+  --spacing-s: 0.25rem;
   --spacing-default: 0.375rem;
   --spacing-medium: 0.5rem;
-  --spacing-large: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-xxl: 1.25rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-xxl: 3rem;
+  --spacing-avatar: 2.5rem;
 
   /* Corner Radius — Metalab 2.0 (mobile) */
   --radius-xs: var(--corner-radius-xs);
@@ -425,11 +428,14 @@
 @media (min-width: 768px) {
   :root {
     /* Spacing — Metalab 2.0 (desktop) */
+    --spacing-xs: 0.125rem;
+    --spacing-s: 0.25rem;
     --spacing-default: var(--spacing-size-2xs);
     --spacing-medium: var(--spacing-size-xs);
-    --spacing-large: var(--spacing-size-sm);
-    --spacing-xl: var(--spacing-size-lg);
-    --spacing-xxl: var(--spacing-size-xl);
+    --spacing-large: var(--spacing-size-lg);
+    --spacing-xl: var(--spacing-size-xl);
+    --spacing-xxl: 3.75rem;
+    --spacing-avatar: var(--spacing-size-3xl);
 
     /* Corner Radius — Metalab 2.0 (desktop) */
     --radius-xs: var(--corner-radius-xs);
diff --git a/preview/charconv/index.html b/preview/charconv/index.html
index 11c9701..722d39d 100644
--- a/preview/charconv/index.html
+++ b/preview/charconv/index.html
@@ -362,12 +362,15 @@
 
   /* New Look Responsive Mobile First */
   /* Spacing — Metalab 2.0 (mobile) */
-  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */
+  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
+  --spacing-xs: 0.125rem;
+  --spacing-s: 0.25rem;
   --spacing-default: 0.375rem;
   --spacing-medium: 0.5rem;
-  --spacing-large: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-xxl: 1.25rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-xxl: 3rem;
+  --spacing-avatar: 2.5rem;
 
   /* Corner Radius — Metalab 2.0 (mobile) */
   --radius-xs: var(--corner-radius-xs);
@@ -435,11 +438,14 @@
 @media (min-width: 768px) {
   :root {
     /* Spacing — Metalab 2.0 (desktop) */
+    --spacing-xs: 0.125rem;
+    --spacing-s: 0.25rem;
     --spacing-default: var(--spacing-size-2xs);
     --spacing-medium: var(--spacing-size-xs);
-    --spacing-large: var(--spacing-size-sm);
-    --spacing-xl: var(--spacing-size-lg);
-    --spacing-xxl: var(--spacing-size-xl);
+    --spacing-large: var(--spacing-size-lg);
+    --spacing-xl: var(--spacing-size-xl);
+    --spacing-xxl: 3.75rem;
+    --spacing-avatar: var(--spacing-size-3xl);
 
     /* Corner Radius — Metalab 2.0 (desktop) */
     --radius-xs: var(--corner-radius-xs);
diff --git a/preview/index.html b/preview/index.html
index 7a10f33..24b6542 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -60,7 +60,8 @@
     .subtitle { color: var(--muted); margin-bottom: 2.5rem; font-size: 0.9375rem; }
     h2 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; margin-top: 1.75rem; }
     .links { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
-    .link-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; }
+    .link-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; flex-wrap: wrap; }
+    .link-row a { white-space: nowrap; }
     a { color: var(--link); text-decoration: none; }
     a:hover { text-decoration: underline; }
     .tag { font-size: 0.75rem; color: var(--muted); }
diff --git a/preview/style-guide/index.html b/preview/style-guide/index.html
index 38babe2..457dc8b 100644
--- a/preview/style-guide/index.html
+++ b/preview/style-guide/index.html
@@ -654,6 +654,53 @@
 <h2 id="_spacing_scale"><a class="anchor" href="#_spacing_scale"></a>Spacing &amp; Sizing Scale</h2>
 <div class="sectionbody">
 
+<div class="sect2">
+<h3 id="_responsive_spacing"><a class="anchor" href="#_responsive_spacing"></a>Responsive Spacing (Figma Tokens)</h3>
+<div class="paragraph"><p>These tokens are responsive (mobile &rarr; desktop). Resize the browser to see the shift.</p></div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-xs</span>
+  <div class="spacing-bar" style="width: var(--spacing-xs)"></div>
+  <span class="spacing-value">2px / 2px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-s</span>
+  <div class="spacing-bar" style="width: var(--spacing-s)"></div>
+  <span class="spacing-value">4px / 4px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-default</span>
+  <div class="spacing-bar" style="width: var(--spacing-default)"></div>
+  <span class="spacing-value">6px &rarr; 8px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-medium</span>
+  <div class="spacing-bar" style="width: var(--spacing-medium)"></div>
+  <span class="spacing-value">8px &rarr; 12px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-large</span>
+  <div class="spacing-bar" style="width: var(--spacing-large)"></div>
+  <span class="spacing-value">16px &rarr; 24px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-xl</span>
+  <div class="spacing-bar" style="width: var(--spacing-xl)"></div>
+  <span class="spacing-value">20px &rarr; 32px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-xxl</span>
+  <div class="spacing-bar" style="width: var(--spacing-xxl)"></div>
+  <span class="spacing-value">48px &rarr; 60px</span>
+</div>
+<div class="spacing-row">
+  <span class="spacing-label">--spacing-avatar</span>
+  <div class="spacing-bar" style="width: var(--spacing-avatar)"></div>
+  <span class="spacing-value">40px &rarr; 48px</span>
+</div>
+</div>
+
+<div class="sect2">
+<h3 id="_primitive_spacing"><a class="anchor" href="#_primitive_spacing"></a>Primitive Spacing</h3>
 <div class="spacing-row">
   <span class="spacing-label">--spacing-size-4xs</span>
   <div class="spacing-bar" style="width: 0.125rem"></div>
@@ -704,6 +751,7 @@
   <div class="spacing-bar" style="width: 3rem"></div>
   <span class="spacing-value">3rem / 48px</span>
 </div>
+</div>
 
 </div>
 </div>
diff --git a/src/css/01-variables.css b/src/css/01-variables.css
index 3ed06f6..a98fde2 100644
--- a/src/css/01-variables.css
+++ b/src/css/01-variables.css
@@ -237,12 +237,15 @@
 
   /* New Look Responsive Mobile First */
   /* Spacing — Metalab 2.0 (mobile) */
-  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */
+  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
+  --spacing-xs: 0.125rem;
+  --spacing-s: 0.25rem;
   --spacing-default: 0.375rem;
   --spacing-medium: 0.5rem;
-  --spacing-large: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-xxl: 1.25rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-xxl: 3rem;
+  --spacing-avatar: 2.5rem;
 
   /* Corner Radius — Metalab 2.0 (mobile) */
   --radius-xs: var(--corner-radius-xs);
@@ -310,11 +313,14 @@
 @media (min-width: 768px) {
   :root {
     /* Spacing — Metalab 2.0 (desktop) */
+    --spacing-xs: 0.125rem;
+    --spacing-s: 0.25rem;
     --spacing-default: var(--spacing-size-2xs);
     --spacing-medium: var(--spacing-size-xs);
-    --spacing-large: var(--spacing-size-sm);
-    --spacing-xl: var(--spacing-size-lg);
-    --spacing-xxl: var(--spacing-size-xl);
+    --spacing-large: var(--spacing-size-lg);
+    --spacing-xl: var(--spacing-size-xl);
+    --spacing-xxl: 3.75rem;
+    --spacing-avatar: var(--spacing-size-3xl);
 
     /* Corner Radius — Metalab 2.0 (desktop) */
     --radius-xs: var(--corner-radius-xs);