diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
new file mode 100644
index 0000000..15ce721
--- /dev/null
+++ b/src/pages/styleguide.njk
@@ -0,0 +1,160 @@
+---
+title: Style Guide
+permalink: /styleguide/index.html
+layout: base
+eleventyExcludeFromCollections: true
+customColors:
+  - property: '--color-text-accent'
+  - property: '--color-bg-accent'
+  - property: '--color-bg-accent-2'
+  - property: '--color-primary'
+  - property: '--color-secondary'
+  - property: '--color-tertiary'
+customGradients:
+  - property: '--gradient-rainbow'
+  - property: '--gradient-conic'
+  - property: '--gradient-stripes'
+---
+
+<!-- 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>
+
+      <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>
+
+    <section class="colors flow">
+      <h2>Colors</h2>
+
+      <p>{{ designTokens.colors.description }}</p>
+
+      <ul role="list">
+        {%- for color in designTokens.colors.items %}
+        <li>
+          <div style="background-color: var(--color-{{ color.name | slugify }}"></div>
+
+          <p>
+            <code>var(--color-{{ color.name | slugify }})</code>
+          </p>
+        </li>
+        {%- endfor %}
+      </ul>
+
+      <h3 class="mt-l-xl">Custom created colors</h3>
+      <p>in <code>variables.css</code>. Some only change for dark theme.</p>
+
+      <ul role="list">
+        {%- for color in customColors %}
+        <li>
+          <div style="background-color: var({{ color.property }})"></div>
+          <p>
+            <code>{{ color.property }}</code>
+          </p>
+        </li>
+        {%- endfor %}
+      </ul>
+
+      <h3 class="mt-l-xl">Gradients</h3>
+
+      <ul role="list">
+        {%- for gradient in customGradients %}
+        <li>
+          <div style="background-image: var({{ gradient.property }})"></div>
+
+          <p>
+            <code>{{ gradient.property }}</code>
+            <br />
+            <!-- <code>{{ color.value }}</code> -->
+          </p>
+        </li>
+        {%- endfor %}
+      </ul>
+    </section>
+
+    <section class="fonts flow">
+      <h2>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>
+
+    <section class="sizes flow">
+      <h2>Sizes</h2>
+
+      <p>
+        {{ designTokens.sizes.description }}. Fluid type and space scales were
+        <a href="{{ designTokens.sizes.meta.scaleGenerator }}">generated with Utopia</a>.
+      </p>
+
+      <table class="sizes flow">
+        {%- for size in designTokens.sizes.items %}
+        <tr>
+          <th scope="row">
+            <h3>{{ size.name }}</h3>
+          </th>
+          <td>
+            <span class="flow">
+              <p>{{ size.min }}px to {{ size.max }}px</p>
+              <code>var(--size-{{ size.name | slugify }})</code>
+            </span>
+          </td>
+          <td class="sizes-example">
+            <p style="font-size:var(--size-{{ size.name | slugify }})">{{ size.name }}</p>
+          </td>
+        </tr>
+        {%- endfor %}
+      </table>
+    </section>
+
+    <section class="spacing flow">
+      <h2>Spacing</h2>
+
+      <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>