diff --git a/src/assets/css/blocks/styleguide.css b/src/assets/css/blocks/styleguide.css
index 8bdf14d..6243ee8 100644
--- a/src/assets/css/blocks/styleguide.css
+++ b/src/assets/css/blocks/styleguide.css
@@ -1,3 +1,13 @@
+.styleguide {
+  --region-space-top: var(--space-xl-2xl);
+  --spot-color: color-mix(in oklab, var(--color-bg) 97%, var(--color-text));
+}
+
+.styleguide section {
+  --region-space-bottom: var(--space-l-xl);
+  --region-space-top: var(--space-l-xl);
+}
+
 .styleguide :is(h2, h3) {
   font-size: var(--size-step-0);
   font-family: var(--font-base);
@@ -8,12 +18,6 @@
   letter-spacing: var(--tracking-wide);
 }
 
-.styleguide section {
-  padding: var(--space-l-xl);
-  outline: 2px solid var(--color-bg-accent); /* Increase the outline thickness for better visibility */
-  outline-offset: -1px; /* Negative value to make outlines overlap */
-}
-
 .styleguide .colors {
   --cluster-vertical-alignment: flex-start;
 }
diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
index 15ce721..e0b08c4 100644
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@@ -4,7 +4,9 @@ permalink: /styleguide/index.html
 layout: base
 eleventyExcludeFromCollections: true
 customColors:
+  - property: '--color-text'
   - property: '--color-text-accent'
+  - property: '--color-bg'
   - property: '--color-bg-accent'
   - property: '--color-bg-accent-2'
   - property: '--color-primary'
@@ -18,19 +20,19 @@ customGradients:
 
 <!-- Inspired by: https://stevenwoodson.com/blog/eleventy-style-guide-generator-step-by-step-guide-adding-to-an-existing-site/ -->
 
-<div class="region wrapper flow" style="--region-space-top: var(--space-xl-2xl)">
-  <article class="styleguide">
-    <section class="intro flow">
-      <h1 class="gradient-text-linear">{{ title }}</h1>
+<article class="styleguide | wrapper flow">
+  <header class="intro flow region">
+    <h1 class="gradient-text-linear">{{ title }}</h1>
 
-      <p>
-        All design tokens can be found in <code>src/_data/designTokens</code>. <br />
-        This includes all baseline fonts, colors, sizes, and spacing.
-      </p>
-    </section>
+    <p>
+      All design tokens can be found in <code>src/_data/designTokens</code>. <br />
+      This includes all baseline fonts, colors, sizes, and spacing.
+    </p>
+  </header>
 
-    <section class="colors flow">
-      <h2>Colors</h2>
+  <div class="full colors | section">
+    <section class="section__inner wrapper flow region">
+      <h2 class="heading-line">Colors</h2>
 
       <p>{{ designTokens.colors.description }}</p>
 
@@ -46,7 +48,7 @@ customGradients:
         {%- endfor %}
       </ul>
 
-      <h3 class="mt-l-xl">Custom created colors</h3>
+      <h3 class="heading-line | mt-l-xl">Custom created colors</h3>
       <p>in <code>variables.css</code>. Some only change for dark theme.</p>
 
       <ul role="list">
@@ -60,7 +62,7 @@ customGradients:
         {%- endfor %}
       </ul>
 
-      <h3 class="mt-l-xl">Gradients</h3>
+      <h3 class="heading-line | mt-l-xl">Gradients</h3>
 
       <ul role="list">
         {%- for gradient in customGradients %}
@@ -76,26 +78,28 @@ customGradients:
         {%- endfor %}
       </ul>
     </section>
+  </div>
 
-    <section class="fonts flow">
-      <h2>Fonts</h2>
+  <section class="fonts | flow region">
+    <h2 class="heading-line">Fonts</h2>
 
-      <ul class="fonts flow">
-        {%- for font in designTokens.fonts.items %}
-        <li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
-          <h3 style="font-family: var(--font-{{ font.name | slugify }})">
-            {{ font.name }}
-          </h3>
-          <p>{{ font.description }}</p>
-          <p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
-          <code>var(--font-{{ font.name | slugify }})</code>
-        </li>
-        {%- endfor %}
-      </ul>
-    </section>
+    <ul class="fonts flow">
+      {%- for font in designTokens.fonts.items %}
+      <li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
+        <h3 style="font-family: var(--font-{{ font.name | slugify }})">
+          {{ font.name }}
+        </h3>
+        <p>{{ font.description }}</p>
+        <p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
+        <code>var(--font-{{ font.name | slugify }})</code>
+      </li>
+      {%- endfor %}
+    </ul>
+  </section>
 
-    <section class="sizes flow">
-      <h2>Sizes</h2>
+  <div class="full sizes | section">
+    <section class="section__inner wrapper flow region">
+      <h2 class="heading-line">Sizes</h2>
 
       <p>
         {{ designTokens.sizes.description }}. Fluid type and space scales were
@@ -121,40 +125,39 @@ customGradients:
         {%- endfor %}
       </table>
     </section>
+  </div>
 
-    <section class="spacing flow">
-      <h2>Spacing</h2>
+  <section class="spacing | flow region">
+    <h2 class="heading-line">Spacing</h2>
 
-      <p>
-        {{ designTokens.spacing.description }}<br />
-        Fluid type and space scales were
-        <a href="{{ designTokens.spacing.meta.scaleGenerator }}">generated with Utopia</a
-        >.
-      </p>
+    <p>
+      {{ designTokens.spacing.description }}<br />
+      Fluid type and space scales were
+      <a href="{{ designTokens.spacing.meta.scaleGenerator }}">generated with Utopia</a>.
+    </p>
 
-      <table class="spacing flow">
-        {%- for space in designTokens.spacing.items %}
-        <tr>
-          <th scope="row">
-            <h3>{{ space.name }}</h3>
-          </th>
-          <td>
-            <span class="flow">
-              <p>{{ space.min }}px to {{ space.max }}px</p>
-              <code>var(--space-{{ space.name | slugify }})</code>
-            </span>
-          </td>
-          <td>
-            <div
-              class="space"
-              style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
-                space.name | slugify
-              }});"
-            ></div>
-          </td>
-        </tr>
-        {%- endfor %}
-      </table>
-    </section>
-  </article>
-</div>
+    <table class="spacing flow">
+      {%- for space in designTokens.spacing.items %}
+      <tr>
+        <th scope="row">
+          <h3>{{ space.name }}</h3>
+        </th>
+        <td>
+          <span class="flow">
+            <p>{{ space.min }}px to {{ space.max }}px</p>
+            <code>var(--space-{{ space.name | slugify }})</code>
+          </span>
+        </td>
+        <td>
+          <div
+            class="space"
+            style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
+              space.name | slugify
+            }});"
+          ></div>
+        </td>
+      </tr>
+      {%- endfor %}
+    </table>
+  </section>
+</article>