diff --git a/markdoc.config.mjs b/markdoc.config.mjs
index faa11db..d4b2233 100644
--- a/markdoc.config.mjs
+++ b/markdoc.config.mjs
@@ -1,6 +1,12 @@
-import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
+import { defineMarkdocConfig, component, nodes } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
+  nodes: {
+    table: {
+      ...nodes.table,
+      render: component('./src/components/markdoc/Table.astro'),
+    },
+  },
   tags: {
     ElementSymbol: {
       render: component('./src/components/content/ElementSymbol.astro'),
diff --git a/src/components/content/ElementSymbol.astro b/src/components/content/ElementSymbol.astro
index 160a42c..feae746 100644
--- a/src/components/content/ElementSymbol.astro
+++ b/src/components/content/ElementSymbol.astro
@@ -58,6 +58,8 @@ const symbol = entry?.data.symbol as Symbol | undefined;
     display: inline-block;
     line-height: 1;
     vertical-align: middle;
+    text-align: center;
+    width: 100%;
   }
   .svg {
     display: inline-flex;
diff --git a/src/components/layout/CMDPalette/CMDPalette.module.css b/src/components/layout/CMDPalette/CMDPalette.module.css
index 994fce2..082d430 100644
--- a/src/components/layout/CMDPalette/CMDPalette.module.css
+++ b/src/components/layout/CMDPalette/CMDPalette.module.css
@@ -1,89 +1,86 @@
 .trigger {
   @mixin ml auto;
+  @mixin typo_body;
 
   cursor: pointer;
 
   display: flex;
-  gap:var(--ui-spacing-comfortable);
+  gap: var(--size-4);
   align-items: center;
 
-  padding: var(--ui-spacing-snug) var(--ui-spacing-spacious);
+  padding: var(--size-1) var(--size-3);
   border: var(--size-px) solid var(--color-border-normal);
 
   font-family: var(--font-mono);
-  font-size: var(--ui-typo-size-md);
-  color: var(--text-color-disabled);
+  color: var(--color-text-disabled);
 
-  background: var(--color-palette-charcoal-gray);
+  background: var(--color-surface-elevated-2);
 
   transition: border-color 0.15s, color 0.15s;
 
   &:hover {
-    border-color: var(--color-text-inverse);
-    color: var(--color-text-inverse);
+    border-color: var(--color-border-strong);
+    color: var(--color-text-primary);
   }
 
   & .kbd {
-    padding: var(--ui-spacing-hairline) var( --ui-spacing-cozy);
-    border: var(--size-px) solid var(--color-border-normal);
-    border-radius: var(--size-05);
+    @mixin typo_code;
 
-    font-family: var(--font-mono);
-    font-size: var(--ui-typo-size-xs);
-
-    background: var(--color-surface-inverse);
+    padding: var(--size-px) var(--size-1);
+    border: var(--size-px) solid var(--color-border-strong);
+    border-radius: var(--size-1);
   }
 }
 
 .backdrop {
   position: fixed;
-  z-index: 99;
+  z-index: var(--z-modal);
   inset: 0;
   background: var(--color-overlay-heavy);
 }
 
 .palette {
   position: fixed;
-  z-index: 100;
+  z-index: calc(var(--z-modal) + 1);
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
 
-  width: min(var(--size-128), 90vw);
-  padding: var(--ui-spacing-tight);
-  border: var(--size-05) solid var(--color-primary);
+  width: min(36rem, 90vw);
+  padding: var(--size-1);
+  border: var(--size-1) solid var(--color-primary);
 
-  background: var(--color-surface-inverse);
+  background: var(--color-surface-base);
   box-shadow:
-    0 0 0 var(--size-px) var(--color-border-strong),
-    var(--size-1) var(--size-1) 0 var(--color-surface-inverse);
+    0 0 0 var(--size-px) var(--color-surface-base),
+    var(--size-4) var(--size-4) 0 var(--color-surface-base);
 }
 
 .header {
-  @mixin px var(--ui-spacing-generous);
-  @mixin border-b var(--size-px), solid, var(--color-border-strong);
+  @mixin px var(--size-7);
 
   display: flex;
-  gap: var(--ui-spacing-comfortable);
+  gap: var(--size-4);
   align-items: center;
+  border-bottom: var(--size-px) solid var(--color-border-strong);
 
   & .icon {
     font-family: var(--font-mono);
-    font-size: var(--ui-typo-size-lg);
+    font-size: var(--type-1);
     font-weight: 900;
-    color: var(--color-text-disabled);
+    color: var(--color-primary);
   }
 
   & .input {
-    @mixin py var(--ui-spacing-generous);
+    @mixin py var(--size-5);
 
     flex: 1;
 
     border: none;
 
     font-family: var(--font-mono);
-    font-size: var(--ui-typo-size-lg);
-    color: var(--color-text-inverse);
+    font-size: var(--type-1);
+    color: var(--color-text-primary);
 
     background: transparent;
     outline: none;
@@ -94,51 +91,54 @@
   }
 
   & .esc {
+    @mixin px var(--size-2);
+
     font-family: var(--font-mono);
-    font-size: var(--typo-size-xs);
+    font-size: var(--type--2);
     color: var(--color-text-disabled);
   }
 }
 
 .results {
   overflow-y: auto;
-  max-height: var(--size-96);
+  max-height: 22.5rem;
 
   & .groupLabel {
-    padding: var(--ui-spacing-relaxed) var(--ui-spacing-generous) var(--ui-spacing-snug);
+    padding: var(--size-5) var(--size-7) var(--size-2);
 
-    font-size: var(--ui-typo-size-2xs);
+    font-family: var(--font-mono);
+    font-size: var(--type--3);
     font-weight: 700;
     color: var(--color-text-disabled);
     text-transform: uppercase;
-    letter-spacing: var(--spacing-loosest);
+    letter-spacing: 0.2em;
   }
 
   & .result {
     cursor: pointer;
 
     display: flex;
-    gap: var(--ui-spacing-relaxed);
+    gap: var(--size-5);
     align-items: center;
 
-    padding: var(--ui-spacing-comfortable) var(--ui-spacing-generous);
+    padding: var(--size-4) var(--size-7);
 
     font-family: var(--font-mono);
-    font-size: var(--ui-typo-size-md);
-    color: var(--color-text-inverse);
+    font-size: var(--type-0);
+    color: var(--color-text-primary);
     text-decoration: none;
     text-transform: uppercase;
-    letter-spacing: var(--typo-spacing-relaxed);
+    letter-spacing: 0.025em;
 
-    transition: background 0.8s;
+    transition: background 0.08s;
 
     & .type {
-      min-width: var(--size-16);
+      min-width: 4rem;
 
-      font-size: var(--ui-typo-size-2xs);
+      font-size: var(--type--3);
       color: var(--color-text-disabled);
       text-align: right;
-      letter-spacing: var(--typo-spacing-looser);
+      letter-spacing: 0.125em;
     }
 
     & .label {
@@ -146,14 +146,14 @@
     }
 
     & .path {
-      font-size: var(--ui-typo-size-2xs);
+      font-size: var(--type--3);
       color: var(--color-text-disabled);
       text-transform: none;
       letter-spacing: 0;
     }
 
     & .arrow {
-      font-size: var(--ui-typo-size-xs);
+      font-size: var(--type--2);
       color: var(--color-text-disabled);
       opacity: 0;
       transition: opacity 0.1s;
@@ -161,7 +161,7 @@
 
     &:hover,
     &.selected {
-      background: var(--color-border-strong);
+      background: var(--color-surface-elevated-3);
 
       & .arrow {
         opacity: 1;
@@ -171,41 +171,41 @@
 }
 
 .empty {
-  padding: var(--ui-spacing-luxurious) var(--ui-spacing-generous);
+  padding: var(--size-8) var(--size-7);
 
-  font-size: var(--ui-typo-size-sm);
+  font-family: var(--font-mono);
+  font-size: var(--type--2);
   color: var(--color-text-disabled);
   text-align: center;
   text-transform: uppercase;
-  letter-spacing: var(--typo-spacing-comfortable);
+  letter-spacing: 0.125em;
 }
 
 .footer {
-  @mixin border-t var(--size-px), solid, var(--color-border-strong);
-
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  padding: var(--ui-spacing-comfortable) var(--ui-spacing-generous);
+  padding: var(--size-4) var(--size-7);
+  border-top: var(--size-px) solid var(--color-border-strong);
 
-  font-size: var(--ui-typo-size-xs);
+  font-family: var(--font-mono);
+  font-size: var(--type--3);
   color: var(--color-text-disabled);
 
   & .group {
     display: flex;
-    gap: var(--ui-spacing-relaxed);
+    gap: var(--size-5);
     align-items: center;
   }
 
   & kbd {
-    @mixin mx var(--ui-spacing-tight);
-
-    padding: var(--ui-spacing-tight) var(--ui-spacing-snug);
+    margin: 0 var(--size-1);
+    padding: var(--size-1) var(--size-2);
     border: var(--size-px) solid var(--color-border-normal);
-    border-radius: var(--size-05);
+    border-radius: var(--size-1);
 
     font-family: var(--font-mono);
-    font-size: var(--ui-typo-size-2xs);
+    font-size: var(--type--3);
   }
 }
diff --git a/src/components/layout/MastHead.astro b/src/components/layout/MastHead.astro
index 2b85266..5d683dc 100644
--- a/src/components/layout/MastHead.astro
+++ b/src/components/layout/MastHead.astro
@@ -2,7 +2,7 @@
 import CommandPalette from "./CMDPalette"
 ---
 
-<header class="site-header">
+<header class="site-header ui dark">
   <div class="inner">
     <a href="/" class="link">
       <span class="site-logo">◬</span>
@@ -19,7 +19,7 @@ import CommandPalette from "./CMDPalette"
 
 <style>
   .site-header {
-    @mixin py var(--ui-masthead-paddingY);
+    @mixin py var(--size-5);
 
     position: sticky;
     z-index: 9;
@@ -27,9 +27,9 @@ import CommandPalette from "./CMDPalette"
 
     width: 100%;
 
-    color: var(--color-text-inverse);
+    color: var(--color-text-primary);
 
-    background-color: var(--color-surface-inverse);
+    background-color: var(--color-surface-base);
   }
 
   .inner {
@@ -37,15 +37,17 @@ import CommandPalette from "./CMDPalette"
 
     display: flex;
     flex-direction: row;
-    gap: var(--ui-spacing-cozy);
+    gap: var(--layout-gutter);
     align-items: center;
     justify-content: flex-start;
 
-    font-size: var(--ui-masthead-font-size);
-    line-height: var(--ui-masthead-line-height);
+    font-size: var(--type-1);
+    line-height: var(--leading-1);
   }
 
   .site-logo {
+    @mixin typo_body-alt;
+
     display: inline-block;
     font-family: var(--font-mono);
     animation:
diff --git a/src/components/layout/PostHeader/Meta.astro b/src/components/layout/PostHeader/Meta.astro
index 2ec58a2..3f3eb0b 100644
--- a/src/components/layout/PostHeader/Meta.astro
+++ b/src/components/layout/PostHeader/Meta.astro
@@ -7,7 +7,7 @@ interface Props {
 const { tags, updateDate } = Astro.props;
 ---
 
-<div class="meta">
+<div class="meta ui">
   <div class="section">
     <span class="label"> Author </span>
     <span class="author item">Dave Damage</span>
@@ -36,43 +36,47 @@ const { tags, updateDate } = Astro.props;
 <style>
   .meta {
     @mixin layout-wrapper;
-    flex-wrap: wrap;
+
     display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-8);
     align-items: baseline;
-    gap: var(--spacing-relaxed);
   }
+
   .section {
-    min-width: 12ch;
-    @mixin py var(--spacing-snug);
+    @mixin py var(--size-4);
+
     flex: 1 0 auto;
+    min-width: 12ch;
   }
+
   .label {
-    @mixin mb var(--spacing-tight);
-    @mixin pb var(--spacing-tight);
+    @mixin mb var(--size-2);
+    @mixin pb var(--size-2);
     @mixin border-b 2px, solid, var(--color-border-strong);
+    @mixin typo_meta-label;
+
     display: block;
-    font-size: var(--typo-size-xs);
-    text-transform: uppercase;
-    letter-spacing: var(--typo-spacing-comfortable);
   }
+
   .item {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    font-weight: 700;
-    color: var(--color-text-secondary);
+    @mixin typo_meta-data;
+
     text-transform: uppercase;
   }
+
   .taglist {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-tight);
+    gap: var(--size-2);
   }
+
   .tag {
-    @mixin py var(--spacing-tight);
-    @mixin px var(--spacing-snug);
-    border: 4px solid var(--color-palette-charcoal-gray);
-    letter-spacing: var(--typo-spacing-relaxed);
-    background: var(--color-palette-charcoal-gray);
-    color: var(--color-palette-off-white);
+    @mixin py var(--size-1);
+    @mixin px var(--size-3);
+
+    border: 4px solid var(--color-surface-inverse);
+    color: var(--color-text-inverse);
+    background: var(--color-surface-inverse);
   }
 </style>
diff --git a/src/components/layout/PostHeader/Overline.astro b/src/components/layout/PostHeader/Overline.astro
index 2b22d05..685b3f9 100644
--- a/src/components/layout/PostHeader/Overline.astro
+++ b/src/components/layout/PostHeader/Overline.astro
@@ -9,7 +9,7 @@ interface Props {
 const { breadcrumbs, publicationDate } = Astro.props;
 ---
 
-<div class="overline">
+<div class="overline ui dark">
   <div class="wrapper">
     <nav aria-label="breadcrumb">
       <ol class="breadcrumbs">
@@ -36,33 +36,34 @@ const { breadcrumbs, publicationDate } = Astro.props;
 
 <style>
   .overline {
-    background-color: var(--color-surface-inverse);
+    @mixin typo_code;
+
+    color: var(--color-text-secondary);
+    background-color: var(--color-surface-elevated-2);
   }
+
   .wrapper {
     @mixin layout-wrapper;
-    padding-block: var(--spacing-snug);
+    @mixin py var(--size-4);
+
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: var(--typo-size-responsive);
   }
+
   .breadcrumbs {
     display: flex;
-    font-family: var(--font-mono);
-    font-size: var(--typo-size-sm);
-    color: var(--color-text-inverse);
   }
+
   .link {
-    color: var(--color-text-inverse);
     transition: color 0.5s ease-in-out;
+
     &:hover {
-      color: var(--color-tertiary);
+      color: var(--color-primary);
     }
   }
+
   .publicationdate {
-    font-family: var(--font-mono);
-    font-size: var(--typo-size-xs);
-    font-weight: var(--typo-weight-bold);
-    color: var(--color-text-inverse);
+    font-weight: 700;
   }
 </style>
diff --git a/src/components/layout/PostHeader/Title.astro b/src/components/layout/PostHeader/Title.astro
index 2102639..6d2de90 100644
--- a/src/components/layout/PostHeader/Title.astro
+++ b/src/components/layout/PostHeader/Title.astro
@@ -9,7 +9,7 @@ const { title, subtitle } = Astro.props;
 console.log(subtitle);
 ---
 
-<div class="wrapper">
+<div class="wrapper content">
   <h1 class="title">{title}</h1>
   {subtitle && <p class="subtitle">{subtitle}</p>}
 </div>
@@ -17,21 +17,19 @@ console.log(subtitle);
 <style>
   .wrapper {
     @mixin layout-wrapper;
-    @mixin py var(--spacing-relaxed);
+    @mixin py var(--space-7);
   }
 
   .title {
-    @mixin heading-1;
+    @mixin typo_display-1;
+    @mixin my var(--space-2);
   }
 
 
   .subtitle {
-    @mixin mt var(--spacing-snug);
+    @mixin mt var(--size-4);
+    @mixin typo_subtitle;
 
-    font-family: var(--font-header);
-    font-size: var(--typo-size-lg);
-    font-weight: 300;
-    text-transform: uppercase;
-    letter-spacing: 0.075em;
+    color: var(--color-text-tertiary);
   }
 </style>
diff --git a/src/components/markdoc/Table.astro b/src/components/markdoc/Table.astro
new file mode 100644
index 0000000..8f858bd
--- /dev/null
+++ b/src/components/markdoc/Table.astro
@@ -0,0 +1,16 @@
+---
+---
+
+<div class="table-wrap">
+  <table>
+    <slot />
+  </table>
+</div>
+
+<style>
+.table-wrap {
+  scrollbar-color: var(--color-border-normal) transparent;
+  scrollbar-width: thin;
+  overflow-x: auto;
+}
+</style>
diff --git a/src/content/articles/alchemical-materialism/index.mdoc b/src/content/articles/alchemical-materialism/index.mdoc
index 055a291..e19d7ac 100644
--- a/src/content/articles/alchemical-materialism/index.mdoc
+++ b/src/content/articles/alchemical-materialism/index.mdoc
@@ -50,10 +50,7 @@ seo:
 - Failure
 ---
 - [Body](/the-crucible/references/elements/body)
-- {% ElementSymbol
-     element="body"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="body" size="var(--type-3)" color="inherit" /%}
 - Salt
 - Structure; the form
 - »It endures«
@@ -61,10 +58,7 @@ seo:
 - Calcifies everything
 ---
 - [Soul](/the-crucible/references/elements/soul)
-- {% ElementSymbol
-     element="soul"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="soul" size="var(--type-3)" color="inherit" /%}
 - Sulfur
 - Agency; the Spark
 - »I burn«
@@ -72,10 +66,7 @@ seo:
 - Consumes everything
 ---
 - [Spirit](/the-crucible/references/elements/spirit)
-- {% ElementSymbol
-     element="spirit"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="spirit" size="var(--type-3)" color="inherit" /%}
 - Mercury
 - Transformation; the flux
 - »Nothing stays«
@@ -100,43 +91,31 @@ seo:
 - Image
 ---
 - [Aether](/the-crucible/references/elements/aether)
-- {% ElementSymbol
-     element="aether"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="aether" size="var(--type-3)" color="inherit" /%}
 - Quintessence
 - Transcendent, ordered, numinous
 - The Stars
 ---
 - [Air](/the-crucible/references/elements/air)
-- {% ElementSymbol element="air" size="var(--typo-size-2xl)" color="inherit" /%}
+- {% ElementSymbol element="air" size="var(--type-3)" color="inherit" /%}
 - Hot & Wet
 - Invisible, expansive, permeating
 - The Storm
 ---
 - [Earth](/the-crucible/references/elements/earth)
-- {% ElementSymbol
-     element="earth"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="earth" size="var(--type-3)" color="inherit" /%}
 - Cold & Dry
 - Heavy, material, foundational
 - The Mountain
 ---
 - [Fire](/the-crucible/references/elements/fire)
-- {% ElementSymbol
-     element="fire"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="fire" size="var(--type-3)" color="inherit" /%}
 - Hot & Dry
 - Bright, consuming, refining
 - The Volcano
 ---
 - [Water](/the-crucible/references/elements/water)
-- {% ElementSymbol
-     element="water"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="water" size="var(--type-3)" color="inherit" /%}
 - Cold & Wet
 - Flowing, deep, dissolving
 - The River
@@ -231,6 +210,8 @@ seo:
 - No – the product is neither ingredient
 {% /table %}
 
+---
+
 ## The Seven Aspects
 
 - Provide additional specificity
@@ -245,61 +226,43 @@ seo:
 - Association
 ---
 - *Entities*
-- {% ElementSymbol
-     element="entities"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="entities" size="var(--type-3)" color="inherit" /%}
 - Silver
 - Moon
 - Living beings; flesh, beasts, plants, spirits
 ---
 - *Matter*
-- {% ElementSymbol
-     element="matter"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="matter" size="var(--type-3)" color="inherit" /%}
 - Lead
 - Saturn
 - Physical substances; materials, terrain, stone, foundations
 ---
 - *Mind*
-- {% ElementSymbol
-     element="mind"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="mind" size="var(--type-3)" color="inherit" /%}
 - Quicksilver
 - Mercury
 - Thought, consciousness; intellect, emotion, skills
 ---
 - *Society*
-- {% ElementSymbol
-     element="society"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="society" size="var(--type-3)" color="inherit" /%}
 - Tin
 - Jupiter
 - Collective organisation; governance, law, institutions
 ---
 - *Art*
-- {% ElementSymbol element="art" size="var(--typo-size-2xl)" color="inherit" /%}
+- {% ElementSymbol element="art" size="var(--type-3)" color="inherit" /%}
 - Copper
 - Venus
 - Creation, expression; artistry, rituals, craft
 ---
 - *Mysteries*
-- {% ElementSymbol
-     element="mysteries"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="mysteries" size="var(--type-3)" color="inherit" /%}
 - Gold
 - Sun
 - Hidden, occult; magic, destiny, secrets, *residua*
 ---
 - *Forces*
-- {% ElementSymbol
-     element="forces"
-     size="var(--typo-size-2xl)"
-     color="inherit" /%}
+- {% ElementSymbol element="forces" size="var(--type-3)" color="inherit" /%}
 - Iron
 - Mars
 - Energies, natural laws; power, conflict, dynamics
diff --git a/src/keystatic/components/element.ts b/src/keystatic/components/element.ts
index 6692d6e..99d61c8 100644
--- a/src/keystatic/components/element.ts
+++ b/src/keystatic/components/element.ts
@@ -13,21 +13,20 @@ const elementCompontent = {
       }),
       size: fields.select({
         label: 'Size',
-        defaultValue: 'var(--typo-size-md)',
+        defaultValue: 'var(--type-0)',
         options: [
-          { label: '2XS', value: 'var(--typo-size-2xs)' },
-          { label: 'XS', value: 'var(--typo-size-xs)' },
-          { label: 'SM', value: 'var(--typo-size-sm)' },
-          { label: 'MD', value: 'var(--typo-size-md)' },
-          { label: 'LG', value: 'var(--typo-size-lg)' },
-          { label: 'XL', value: 'var(--typo-size-xl)' },
-          { label: '2XL', value: 'var(--typo-size-2xl)' },
-          { label: '3XL', value: 'var(--typo-size-3xl)' },
-          { label: '4XL', value: 'var(--typo-size-4xl)' },
-          { label: '5XL', value: 'var(--typo-size-5xl)' },
-          { label: '6XL', value: 'var(--typo-size-6xl)' },
-          { label: '7XL', value: 'var(--typo-size-7xl)' },
-          { label: '8XL', value: 'var(--typo-size-8xl)' },
+          { label: '2XS', value: 'var(--type--3)' },
+          { label: 'XS', value: 'var(--type--2)' },
+          { label: 'SM', value: 'var(--type--1)' },
+          { label: 'MD', value: 'var(--type-0)' },
+          { label: 'LG', value: 'var(--type-1)' },
+          { label: 'XL', value: 'var(--type-2)' },
+          { label: '2XL', value: 'var(--type-3)' },
+          { label: '3XL', value: 'var(--type-4)' },
+          { label: '4XL', value: 'var(--type-5)' },
+          { label: '5XL', value: 'var(--type-6)' },
+          { label: '6XL', value: 'var(--type-7)' },
+          { label: '7XL', value: 'var(--type-8)' },
         ],
       }),
       color: fields.select({
diff --git a/src/layouts/ContentLayout.astro b/src/layouts/ContentLayout.astro
index 6b5643c..7b77dc5 100644
--- a/src/layouts/ContentLayout.astro
+++ b/src/layouts/ContentLayout.astro
@@ -50,7 +50,7 @@ const headerCover =
         subtitle={subtitle}
       />
       <div class="frame">
-        <div class="body content">
+        <div class="body content prose">
           <slot name="before-content" />
           <Content />
           <slot name="after-content" />
@@ -69,12 +69,11 @@ const headerCover =
   .frame {
     @mixin layout-wrapper;
 
-    font-size: var(--typo-size-responsive);
-
     @media (--bp-desktop) {
       position: relative;
       display: grid;
-      grid-template-columns: var(--ui-content-width) var(--ui-margin-width);
+      grid-template-columns: var(--layout-content-width) var(--layout-margin-width);
+      gap: var(--layout-gutter);
     }
   }
 
diff --git a/src/styles/base/colors.css b/src/styles/base/colors.css
index b639be8..b962b1d 100644
--- a/src/styles/base/colors.css
+++ b/src/styles/base/colors.css
@@ -1,6 +1,4 @@
 :root {
-  /* === Palette === */
-
   /* == Neutrals == */
   --color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
   --color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
@@ -25,27 +23,12 @@
   --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
   --color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);
 
-  /* == System Accents (reserve) == */
-  --color-palette-warhammer: oklch(
-    43.2% 0.169 7.14deg
-  ); /* Crimson — Empire blood red */
-  --color-palette-mordheim: oklch(
-    82.7% 0.047 76.752deg
-  ); /* Tan — ruined city stone */
-  --color-palette-unknown-armies: oklch(
-    49.6% 0.181 351.176deg
-  ); /* Fuchsia — occult magick */
-  --color-palette-sla-industries: oklch(
-    90.8% 0.128 188.419deg
-  ); /* Electric blue — corporate neon */
-
   /* === Semantic Colors === */
 
   /* == Primary / Secondary / Tertiary == */
   --color-primary: var(--color-palette-lava);
   --color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
   --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
-
   --color-secondary: var(--color-palette-lime-green);
   --color-secondary-surface: oklch(
     from var(--color-secondary) calc(l + 0.1) c h
@@ -53,7 +36,6 @@
   --color-secondary-emphasis: oklch(
     from var(--color-secondary) calc(l - 0.15) c h
   );
-
   --color-tertiary: var(--color-palette-bright-canary);
   --color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
   --color-tertiary-emphasis: oklch(
@@ -110,3 +92,21 @@
   --color-skeleton-base: var(--color-surface-elevated-2);
   --color-skeleton-shimmer: var(--color-surface-elevated-1);
 }
+
+.dark {
+  --color-text-primary: var(--color-palette-ice-blue);
+  --color-text-secondary: var(--color-palette-pale-gray);
+  --color-text-tertiary: var(--color-palette-light-silver);
+  --color-text-quarternary: var(--color-palette-silver);
+  --color-text-inverse: var(--color-palette-black-ink);
+  --color-text-disabled: var(--color-palette-cloud-gray);
+  --color-surface-base: var(--color-palette-black-ink);
+  --color-surface-elevated-1: var(--color-palette-charcoal);
+  --color-surface-elevated-2: var(--color-palette-charcoal-gray);
+  --color-surface-elevated-3: var(--color-palette-carbon);
+  --color-surface-elevated-4: var(--color-palette-cloud-gray);
+  --color-surface-inverse: var(--color-palette-ice-blue);
+  --color-border-subtle: var(--color-palette-charcoal-gray);
+  --color-border-normal: var(--color-palette-carbon);
+  --color-border-strong: var(--color-palette-silver);
+}
diff --git a/src/styles/base/content copy.css b/src/styles/base/content copy.css
deleted file mode 100644
index 231cfce..0000000
--- a/src/styles/base/content copy.css	
+++ /dev/null
@@ -1,651 +0,0 @@
-.content {
-  @mixin responsive-wrapper;
-  font-family: var(--font-body);
-  /* === Headings === */
-  & h1 {
-    margin-block: var(--el-h1-vspace-top) var(--el-h1-vspace-bottom);
-    padding-bottom: var(--spacing-snug);
-    border-bottom: var(--size-4) solid var(--el-h1-color);
-
-    font-family: var(--el-h1-font-family), serif;
-    font-size: var(--el-h1-font-size);
-    font-weight: 400;
-    line-height: var(--typo-leading-tight);
-    color: var(--el-h1-color);
-    text-transform: uppercase;
-    letter-spacing: -0.0137em;
-
-    & + p,
-    & + ul,
-    & + ol,
-    & + blockquote {
-      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
-        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
-    }
-
-    & + h2 {
-      margin-block: calc(1em * 1.125 * var(--vspace-snug))
-        calc(1em * 1.125 * var(--vspace-normal));
-    }
-  }
-
-  & h2 {
-    margin-block: var(--el-h2-vspace-top) var(--el-h2-vspace-bottom);
-    padding-left: var(--spacing-snug);
-    border-left: var(--size-4) solid var(--el-h2-color);
-
-    font-family: var(--el-h2-font-family), serif;
-    font-size: var(--el-h2-font-size);
-    font-weight: 900;
-    line-height: 1.1765;
-    color: var(--el-h2-color);
-    text-transform: uppercase;
-    letter-spacing: -0.0096em;
-
-    & + p,
-    & + ul,
-    & + ol,
-    & + blockquote {
-      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
-        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
-    }
-
-    & + h3 {
-      margin-block: calc(1em * 1.125 * var(--vspace-compressed))
-        calc(1em * 1.125 * var(--vspace-snug));
-    }
-  }
-
-  & h3 {
-    margin-block: var(--el-h3-vspace-top) var(--el-h3-vspace-bottom);
-    padding: var(--spacing-tight) var(--spacing-snug);
-
-    font-family: var(--el-h3-font-family), serif;
-    font-size: var(--el-h3-font-size);
-    font-weight: 800;
-    line-height: 1.2;
-    color: var(--color-surface-base);
-    text-transform: uppercase;
-    letter-spacing: -0.004em;
-
-    background: var(--el-h3-color);
-  }
-
-  & h4 {
-    margin-block: var(--el-h4-vspace-top) var(--el-h4-vspace-bottom);
-    padding: var(--spacing-tight) var(--spacing-snug);
-    border-top: var(--size-3) solid var(--el-h4-color);
-    border-bottom: var(--size-3) solid var(--el-h4-color);
-
-    font-family: var(--el-h4-font-family), serif;
-    font-size: var(--el-h4-font-size);
-    font-weight: 800;
-    line-height: 1.125;
-    text-transform: uppercase;
-    letter-spacing: 0.0025em;
-  }
-
-  & h5 {
-    margin-block: var(--el-h5-vspace-top) var(--el-h5-vspace-bottom);
-    padding: var(--spacing-tight) var(--spacing-snug);
-
-    font-family: var(--el-h5-font-family), serif;
-    font-size: var(--el-h5-font-size);
-    font-weight: 800;
-    line-height: 1.28;
-    color: var(--el-h5-color);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    &::before,
-    &::after {
-      content: '';
-      padding-right: var(--spacing-tight);
-      line-height: 1;
-    }
-
-    &::before {
-      content: '⭑';
-    }
-
-    &::after {
-      content: '';
-    }
-  }
-
-  & h6 {
-    margin-block: var(--el-h6-vspace-top) var(--el-h6-vspace-bottom);
-
-    font-family: var(--el-h6-font-family), serif;
-    font-size: var(--el-h6-font-size);
-    font-weight: 900;
-    line-height: 1.4;
-    color: var(--el-h6-color);
-    text-transform: uppercase;
-    letter-spacing: 0.035em;
-  }
-
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    & + p,
-    & + ul,
-    & + ol,
-    & + blockquote {
-      margin-block: calc(
-          1em * var(--typo-leading-normal) * var(--vspace-compressed)
-        )
-        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
-    }
-  }
-
-  /* === Body Text === */
-
-  & p {
-    margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
-
-    font-family: var(--el-p-font-family), sans-serif;
-    font-size: var(--el-p-font-size);
-    font-weight: 400;
-    line-height: var(--typo-leading-normal);
-    color: var(--el-p-color);
-    text-align: justify;
-  }
-
-  & blockquote {
-    margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
-    padding: var(--spacing-snug) 0 var(--spacing-snug)
-      var(--spacing-comfortable);
-    border-left: var(--size-4) solid var(--color-text-tertiary);
-
-    font-family: var(--el-blockquote-font-family), serif;
-    font-size: var(--el-blockquote-font-size);
-    font-weight: 500;
-    font-style: normal;
-    line-height: var(--typo-leading-comfortable);
-    color: var(--el-blockquote-color);
-  }
-
-  /* === Code === */
-
-  pre {
-    margin-block: var(--el-pre-vspace-top) var(--el-pre-vspace-bottom);
-    padding: var(--spacing-comfortable);
-
-    font-family: var(--el-pre-font-family), monospace;
-    font-size: var(--el-pre-font-size);
-    line-height: 1.5385;
-    color: var(--el-pre-color);
-
-    background: var(--el-pre-background);
-  }
-
-  code {
-    padding: 0.1em 0.3em;
-
-    font-family: var(--font-mono), monospace;
-    font-size: var(--typo-size-sm);
-    color: var(--color-text-inverse);
-
-    background: var(--color-surface-inverse);
-  }
-
-  kbd {
-    padding: 0.1em 0.3em;
-    border: 1px solid var(--color-text-primary);
-    border-radius: 2px;
-
-    font-family: var(--font-mono), monospace;
-    font-size: var(--typo-size-xs);
-    color: var(--color-text-inverse);
-    text-transform: uppercase;
-
-    background: var(--color-surface-inverse);
-  }
-
-  samp {
-    padding: 0.1em 0.3em;
-    border-left: var(--size-1) solid var(--color-text-tertiary);
-
-    font-family: var(--font-mono), monospace;
-    font-size: var(--typo-size-sm);
-    color: var(--color-text-primary);
-
-    background: var(--color-surface-elevated-2);
-  }
-
-  var {
-    font-family: var(--font-mono), monospace;
-    font-weight: 600;
-    font-style: normal;
-    color: var(--color-text-secondary);
-  }
-
-  /* === Lists === */
-
-  ul,
-  ol {
-    margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
-    font-size: var(--el-list-font-size);
-    line-height: var(--typo-leading-normal);
-    color: var(--el-list-color);
-  }
-
-  ul ul,
-  ul ol,
-  ol ul,
-  ol ol {
-    margin-block: var(--el-list-nested-vspace-top)
-      var(--el-list-nested-vspace-bottom);
-  }
-
-  li {
-    margin-block: var(--el-li-vspace-top) var(--el-li-vspace-bottom);
-
-    li {
-      margin-block: var(--el-li-nested-vspace-top)
-        var(--el-li-nested-vspace-bottom);
-    }
-  }
-
-  ul {
-    padding-left: var(--spacing-cozy);
-    list-style: none;
-
-    li {
-      padding-left: var(--spacing-cozy);
-
-      &::marker {
-        content: '⎊';
-        color: var(--color-text-primary);
-      }
-    }
-
-    ul,
-    ol {
-      padding-left: var(--spacing-cozy);
-    }
-
-    ul li::marker {
-      content: '⋊';
-      color: var(--color-text-primary);
-    }
-
-    ul ul,
-    ul ol,
-    ol ul,
-    ol ol {
-      padding-left: var(--spacing-cozy);
-    }
-
-    ul ul li::marker,
-    ol ul li::marker {
-      content: '◆';
-      color: var(--color-text-primary);
-    }
-
-    ul ul ul,
-    ul ul ol,
-    ul ol ul,
-    ul ol ol,
-    ol ul ul,
-    ol ul ol,
-    ol ol ul,
-    ol ol ol {
-      padding-left: var(--spacing-cozy);
-    }
-
-    ul ul ul li::marker,
-    ul ol ul li::marker,
-    ol ul ul li::marker,
-    ol ol ul li::marker {
-      content: '⯀';
-      color: var(--color-text-primary);
-    }
-  }
-
-  ol {
-    counter-reset: ol-l1;
-    contain: style;
-    padding-left: var(--spacing-cozy);
-    list-style: none;
-
-    & > li {
-      counter-increment: ol-l1;
-      margin-left: 1.5em;
-      padding-left: var(--spacing-cozy);
-
-      &::marker {
-        content: counter(ol-l1, decimal-leading-zero) '.)';
-        color: var(--color-text-primary);
-      }
-    }
-  }
-
-  ol > li > ol {
-    counter-reset: ol-l2;
-    padding-left: var(--spacing-cozy);
-
-    & > li {
-      counter-increment: ol-l2;
-      margin-left: 0.825em;
-
-      &::marker {
-        content: counter(ol-l2, lower-alpha) '.)';
-        color: var(--color-text-primary);
-      }
-    }
-  }
-
-  ol > li > ul {
-    padding-left: var(--spacing-cozy);
-  }
-
-  ol > li > ol > li > ol,
-  ol > li > ul > li > ol {
-    counter-reset: ol-l3;
-    margin-left: 0;
-    padding-left: var(--spacing-cozy);
-
-    & > li {
-      counter-increment: ol-l3;
-
-      &::marker {
-        content: counter(ol-l3, upper-roman) '.)';
-        color: var(--color-text-primary);
-      }
-    }
-  }
-
-  ol > li > ol > li > ul,
-  ol > li > ul > li > ul {
-    padding-left: var(--spacing-cozy);
-  }
-
-  ol > li > ol > li > ol > li > ol,
-  ol > li > ol > li > ul > li > ol,
-  ol > li > ul > li > ol > li > ol,
-  ol > li > ul > li > ul > li > ol {
-    counter-reset: ol-l4;
-    margin-left: 0;
-    padding-left: var(--spacing-cozy);
-
-    & > li {
-      counter-increment: ol-l4;
-
-      &::marker {
-        content: counter(ol-l4, lower-greek) '.)';
-        color: var(--color-text-primary);
-      }
-    }
-  }
-
-  ol > li > ol > li > ol > li > ul,
-  ol > li > ol > li > ul > li > ul,
-  ol > li > ul > li > ol > li > ul,
-  ol > li > ul > li > ul > li > ul {
-    padding-left: var(--spacing-cozy);
-  }
-
-  ol li,
-  ul li {
-    list-style-position: outside;
-  }
-
-  .list-inside ol li,
-  .list-inside ul li {
-    list-style-position: inside;
-  }
-
-  /* === Tables === */
-
-  table {
-    border-collapse: collapse;
-
-    width: 100%;
-    margin-block: var(--spacing-tight) var(--spacing-tight);
-    border: var(--size-2) solid var(--color-text-primary);
-
-    font-size: var(--typo-size-md);
-    line-height: 1.2;
-
-    & thead th,
-    & th {
-      padding: 0 var(--spacing-snug) var(--spacing-snug);
-
-      font-family: var(--el-th-font-family), serif;
-      font-size: var(--typo-size-sm);
-      font-weight: 900;
-      line-height: 1.2;
-      color: var(--el-th-color);
-      text-transform: uppercase;
-
-      background: var(--el-th-background);
-    }
-
-    & tbody td,
-    & td {
-      padding: var(--spacing-snug);
-      border: var(--size-1) solid var(--color-text-secondary);
-
-      font-family: var(--el-td-font-family), monospace;
-      font-size: var(--typo-size-sm);
-      line-height: 1.2;
-      color: var(--el-td-color);
-      text-align: center;
-    }
-  }
-
-  /* === DL / DT / DD === */
-
-  dl {
-    margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-snug))
-      calc(1em * var(--typo-leading-normal) * var(--vspace-compressed));
-    font-size: var(--typo-size-md);
-    line-height: var(--typo-leading-normal);
-  }
-
-  dt {
-    margin-block: calc(1em * 1.4 * var(--vspace-snug))
-      calc(1em * 1.4 * var(--vspace-compressed));
-    padding: var(--spacing-snug);
-
-    font-family: var(--el-dt-font-family), serif;
-    font-size: var(--typo-size-lg);
-    font-weight: 700;
-    line-height: 1.4;
-    color: var(--el-dt-color);
-    text-transform: uppercase;
-    letter-spacing: 0.035em;
-
-    background: var(--el-dt-background);
-  }
-
-  dd {
-    margin-block: calc(
-        1em * var(--typo-leading-normal) * var(--vspace-compressed)
-      )
-      calc(1em * var(--typo-leading-normal) * var(--vspace-tight));
-    padding: 0 var(--spacing-comfortable);
-
-    font-family: var(--el-dd-font-family), sans-serif;
-    font-size: var(--typo-size-md);
-    line-height: var(--typo-leading-normal);
-    color: var(--el-dd-color);
-  }
-
-  /* === HR === */
-
-  hr {
-    position: relative;
-
-    overflow: visible;
-
-    height: var(--size-3);
-    margin-block: var(--spacing-relaxed) 0;
-    border: none;
-
-    background: var(--hr-color);
-
-    &::after {
-      content: '▼';
-
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      padding: 0 0.25em;
-
-      font-size: var(--typo-size-4xl);
-      line-height: var(--typo-leading-compressed);
-      color: var(--hr-symbol-color);
-
-      background: var(--hr-symbol-background);
-    }
-  }
-
-  /* === Inline Elements === */
-
-  em,
-  i {
-    font-style: italic;
-    letter-spacing: 0.025em;
-  }
-
-  strong,
-  b {
-    font-weight: 900;
-    letter-spacing: 0.025em;
-  }
-
-  a {
-    position: relative;
-
-    padding: 0.1em 0.2em;
-
-    font-weight: 600;
-    color: var(--color-text-primary);
-    text-decoration: underline;
-    text-decoration-thickness: var(--size-1);
-    text-underline-offset: 2px;
-
-    transition:
-      color 0.5s ease-in-out,
-      background 0.5s ease-in-out;
-
-    &:hover {
-      cursor: pointer;
-      color: var(--color-surface-base);
-      text-decoration: none;
-      background: var(--color-text-primary);
-    }
-
-    &:visited,
-    &:active {
-      color: var(--color-primary-emphasis);
-    }
-  }
-
-  small {
-    font-size: var(--typo-size-xs);
-    color: var(--color-text-tertiary);
-  }
-
-  sub,
-  sup {
-    font-size: 0.5625em;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-  }
-
-  del,
-  s {
-    color: var(--color-text-tertiary);
-    text-decoration: line-through;
-    text-decoration-thickness: var(--size-1);
-  }
-
-  ins {
-    font-weight: 600;
-    color: var(--color-text-primary);
-    text-decoration: underline;
-    text-decoration-color: var(--color-primary);
-    text-decoration-thickness: var(--size-1);
-
-    background: transparent;
-  }
-
-  abbr {
-    cursor: help;
-    text-decoration: underline dotted;
-    text-underline-offset: var(--size-1);
-  }
-
-  dfn {
-    font-weight: 700;
-    font-style: normal;
-    color: var(--color-text-primary);
-  }
-
-  cite {
-    font-weight: 600;
-    font-style: normal;
-    color: var(--color-text-secondary);
-  }
-
-  q {
-    font-style: normal;
-
-    &::before {
-      content: '»';
-    }
-
-    &::after {
-      content: '«';
-    }
-  }
-
-  time {
-    font-family: var(--font-mono), monospace;
-    font-size: var(--typo-size-sm);
-    color: var(--color-text-secondary);
-  }
-
-  /* === Article Lead Paragraph === */
-
-  & article {
-    & > p:first-of-type {
-      font-size: var(--typo-size-xl);
-      font-weight: 700;
-      line-height: 1.4;
-      letter-spacing: 0.022em;
-
-      &::first-letter {
-        float: left;
-
-        margin: 0.1em 0.1em 0 0;
-        padding: 0;
-
-        font-family: var(--font-display), serif;
-        font-size: 4em;
-        font-weight: bold;
-        line-height: 1;
-        color: var(--color-primary);
-
-        @supports (initial-letter: 4) {
-          float: none;
-
-          margin: 0;
-          padding-right: var(--spacing-snug);
-
-          font-size: inherit;
-          line-height: inherit;
-
-          initial-letter: 3;
-        }
-      }
-    }
-  }
-}
diff --git a/src/styles/base/content.css b/src/styles/base/content.css
index b402005..d73a6c8 100644
--- a/src/styles/base/content.css
+++ b/src/styles/base/content.css
@@ -1,68 +1,577 @@
 .content {
-  font-family: var(--font-body);
-  font-size: var(--typo-size-responsive);
+   font-family: var(--font-body);
+   font-size: clamp(1rem, 2.5vw, 1.25rem);
+}
 
+.prose {
+  @mixin py var(--space-8);
+  @mixin typo_body;
+
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+
+  & ::selection {
+    color: var(--color-palette-ice-blue);
+    background: var(--color-primary)
+  }
+
+  & > :first-child,
+  & > article > :first-child {
+    @mixin mt var(--size-0);
+  }
+
+  & > :last-child,
+  & > article > :last-child {
+    @mixin mb var(--size-0);
+  }
+
+  /* === HEADINGS === */
   & h2 {
-    @mixin heading-2;
-    @mixin pl var(--spacing-snug);
-    @mixin border-l var(--size-4), solid, var(--el-h2-color);
-
-    & + p,
-    & + ul,
-    & + ol,
-    & + blockquote {
-      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
-        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
-    }
-
-    & + h3 {
-      margin-block: calc(1em * 1.125 * var(--vspace-compressed))
-        calc(1em * 1.125 * var(--vspace-snug));
-    }
+    @mixin typo_heading-1;
+    @mixin mt var(--space-11);
+    @mixin mb var(--space-6);
+    @mixin pl var(--space-4);
+    @mixin border-l var(--size-8), solid, var(--color-text-primary);
   }
 
   & h3 {
-    @mixin heading-3;
-    @mixin py var(--spacing-tight);
-    @mixin px var(--spacing-snug);
+    @mixin typo_heading-3;
+    @mixin mt var(--space-10);
+    @mixin mb var(--space-6);
+    @mixin py var(--space-2);
+    @mixin px var(--space-4);
 
     color: var(--color-text-inverse);
     background: var(--color-surface-inverse);
   }
 
   & h4 {
-    @mixin heading-4;
-    @mixin py var(--spacing-tight);
-    @mixin px var(--spacing-snug);
-    @mixin border-t var(--size-3), solid, var(--el-h4-color);
-    @mixin border-b var(--size-3), solid, var(--el-h4-color);
+    @mixin typo_heading-4;
+    @mixin mt var(--space-9);
+    @mixin mb var(--space-4);
+    @mixin py var(--space-2);
+    @mixin px var(--space-4);
+    @mixin border-y var(--size-6), solid, var(--color-text-secondary);
 
-    color: var(--el-h4-color);
+    color: var(--color-text-secondary);
   }
 
   & h5 {
-    @mixin heading-5;
-    @mixin py var(--spacing-tight);
-    @mixin px var(--spacing-snug);
+    @mixin typo_heading-5;
+    @mixin mt var(--space-9);
+    @mixin mb var(--space-4);
 
-    color: var(--el-h5-color);
-
-    &::before,
-    &::after {
-      @mixin pr var(--spacing-tight);
-
-      content: "";
-      line-height: var(--typo-leading-compressed);
-    }
+    color: var(--color-text-secondary);
 
     &::before {
-      content: '▼';
+      @mixin pr var(--space-2);
+
+      content: "▼";
     }
   }
 
   & h6 {
-    @mixin heading-6;
+    @mixin typo_heading-6;
+    @mixin mt var(--space-8);
+    @mixin mb var(--space-2);
 
-    color: var(--el-h6-color);
+    color: var(--color-text-tertiary);
+  }
+
+  /* === BODY TEXT === */
+
+  & p {
+    @mixin my var(--space-6);
+
+    hyphens: auto;
+    text-align: justify;
+  }
+
+  & blockquote {
+    @mixin my var(--space-8);
+    @mixin py var(--space-4);
+    @mixin pl var(--space-6);
+    @mixin border-l var(--size-8), solid, var(--color-text-tertiary);
+
+    font-style: italic;
+    color: var(--color-text-tertiary);
+
+    & p {
+      @mixin ma var(--size-0);
+
+      hyphens: none;
+      text-align: left;
+    }
+
+    & p + p {
+      @mixin mt var(--space-4);
+    }
+  }
+
+  /* === CODE === */
+
+  & pre {
+    @mixin typo_code;
+    @mixin my var(--space-8);
+    @mixin pa var(--space-6);
+
+    scrollbar-color: var(--color-border-normal) transparent;
+    scrollbar-width: thin;
+
+    overflow-x: auto;
+
+    color: var(--color-tertiary);
+
+    background: var(--color-surface-inverse);
+
+    & code {
+      padding: 0;
+      font-size: inherit;
+      color: inherit;
+      background: transparent;
+    }
+  }
+
+  & :not(pre) > code {
+    @mixin py var(--size-1);
+    @mixin px var(--space-2);
+
+    font-family: var(--font-mono);
+    font-size: var(--type--1);
+    color: var(--color-tertiary);
+    background: var(--color-surface-inverse);
+  }
+
+  & kbd {
+    @mixin py var(--size-1);
+    @mixin px var(--space-2);
+
+    border: var(--size-1) solid var(--color-border-normal);
+    border-bottom-width: var(--size-2);
+
+    font-family: var(--font-mono);
+    font-size: var(--type--3);
+    color: var(--color-text-inverse);
+    text-transform: uppercase;
+
+    background: var(--color-surface-inverse);
+  }
+
+  & samp {
+    @mixin py var(--size-1);
+    @mixin px var(--space-2);
+    @mixin border-l var(--size-2), solid, var(--color-text-tertiary);
+
+    font-family: var(--font-mono);
+    font-size: var(--type--1);
+    color: var(--color-text-primary);
+    background: var(--color-surface-elevated-2);
+  }
+
+  & var {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-style: normal;
+    color: var(--color-text-secondary);
+  }
+
+  /* === LISTS === */
+
+  & ul,
+  & ol {
+    @mixin my var(--space-6);
+  }
+
+  & ul ul,
+  & ul ol,
+  & ol ol,
+  & ol ul {
+    @mixin my var(--space-2);
+    @mixin pl var(--space-4);
+  }
+
+  & li {
+    @mixin my var(--space-2);
+
+    list-style-position: outside;
+  }
+
+  /* == UNORDERED == */
+
+  & ul {
+    @mixin pl var(--space-5);
+
+    list-style: none;
+
+    & > li {
+      @mixin pl var(--space-4);
+      @mixin ml var(--space-2);
+    }
+  }
+
+  & ul > li::marker {
+    content: "⎊";
+  }
+
+  & ul ul > li::marker {
+    content: '⋊';
+  }
+
+  & ul ul ul > li::marker {
+    content: "⸪";
+  }
+
+  & ul ul ul ul > li::marker {
+    content: "⸭";
+  }
+
+  /* == ORDERED == */
+
+  & ol {
+    @mixin pl var(--space-8);
+
+    counter-reset: ol-l1;
+    contain: style;
+    list-style: none;
+
+    & li {
+      @mixin ml var(--space-6);
+      @mixin pl var(--space-4);
+
+      counter-increment: ol-l1;
+
+     &::marker {
+       content: counter(ol-l1, decimal-leading-zero) '.)';
+     }
+    }
+  }
+
+  & ol ol {
+    counter-reset: ol-l2;
+
+    & > li {
+      @mixin ml var(--space-7);
+
+      counter-increment: ol-l2;
+
+      &::marker {
+        content: counter(ol-l2, lower-alpha) '.)';
+      }
+    }
+  }
+
+  & ol ol ol {
+    counter-reset: ol-l3;
+
+    & > li {
+      @mixin ml var(--space-7);
+
+      counter-increment: ol-l3;
+
+      &::marker {
+        content: counter(ol-l3, upper-roman) '.)';
+      }
+    }
+  }
+
+  & ol ol ol ol {
+    counter-reset: ol-l4;
+
+    & > li {
+      @mixin ml var(--size-9);
+
+      counter-increment: ol-l4;
+
+      &::marker {
+        content: counter(ol-l4, lower-greek) '.)';
+      }
+    }
+  }
+
+  /* === TABLES === */
+  & table {
+    @mixin my var(--space-9);
+
+    border-collapse: collapse;
+    width: 100%;
+    border: var(--size-4) solid var(--color-text-primary);
+
+    & th {
+      @mixin typo_table-header;
+      @mixin py var(--space-2);
+      @mixin px var(--space-4);
+
+      border: var(--size-1) solid var(--color-border-strong);
+      color: var(--color-text-inverse);
+      text-align: left;
+      background: var(--color-surface-inverse);
+    }
+
+    & td {
+      @mixin typo_table-data;
+      @mixin pa var(--space-4);
+
+      border: var(--size-1) solid var(--color-border-subtle);
+    }
+  }
+
+  /* === DEFINTION LISTS === */
+  & dl {
+    @mixin my var(--space-3);
+  }
+
+  & dt {
+    @mixin typo_definition-header;
+    @mixin mt var(--space-6);
+    @mixin pa var(--space-4);
+
+    color: var(--color-text-inverse);
+    background: var(--color-surface-inverse);
+  }
+
+  & dd {
+    @mixin typo_definition-data;
+    @mixin mt var(--space-2);
+    @mixin mb var(--space-4);
+    @mixin px var(--space-4);
+  }
+
+  /* === DETAILS / SUMMARY === */
+  & details {
+    @mixin mr var(--space-8);
+    @mixin border-l var(--size-4), solod, var(--color-border-normal);
+
+    &[open] {
+      @mixin pb var(--space-4);
+
+      & > summary {
+        @mixin mb var(--space-4);
+        @mixin border-b var(--size-1), solid, var(--color-border-subtle);
+      }
+    }
+  }
+
+  & summary {
+    @mixin typo_label;
+    @mixin py var(--space-2);
+    @mixin px var(--space-4);
+
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    list-style: none;
+
+    &::before {
+      @mixin pr var(--space-2);
+
+      content: "▶";
+    }
+
+    details[open] > &::before {
+      content: "▼";
+    }
+
+    &:hover {
+      color: var(--color-text-primary);
+    }
+  }
+
+  & details > *:not(summary) {
+    @mixin px var(--space-6);
+  }
+
+  & hr {
+    @mixin my var(--space-10);
+
+    position: relative;
+
+    overflow: visible;
+
+    height: var(--size-6);
+    border: none;
+
+    background: var(--color-text-tertiary);
+
+    &::after {
+
+      @mixin px var(--space-4);
+
+      content: '▼';
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      font-size: var(--type-3);
+      line-height: 1;
+      color: var(--color-text-tertiary);
+
+      background: var(--color-surface-base);
+    }
+  }
+
+  /* === FIGURES === */
+  & figure {
+    @mixin my var(--space-10);
+
+    & img {
+      width: 100%;
+    }
+
+    & figcaption {
+      @mixin typo_fine;
+      @mixin mt var(--space-2);
+      @mixin py var(--space-2);
+      @mixin border-b var(--size-1), solid, var(--color-border-subtle);
+
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  /* === INLINE ELEMENTS === */
+
+  & em,
+  & i {
+    font-style: italic;
+  }
+
+  & b,
+  & strong {
+    font-weight: 900;
+  }
+
+  & a {
+    position: relative;
+
+    font-weight: 700;
+    color: var(--text-color-tertiary);
+    text-decoration: underline;
+    text-decoration-thickness: var(--space-2);
+    text-decoration-skip-ink: auto;
+    text-underline-offset: var(--space-2);
+
+    transition:
+      color var(--motion-normal) var(--ease-out),
+      background var(--motion-normal) var(--ease-out);
+
+    &:hover {
+      color: var(--color-text-inverse);
+      text-decoration: none;
+      background: var(--color-primary);
+    }
+  }
+
+  &:visited {
+    color: var(--color-text-disabled);
+  }
+
+  &:focus-visible {
+    @mixin focus-ring;
+  }
+
+  & mark {
+    @mixin px var(--size-1);
+
+    color: var(--color-text-primary);
+    background: var(--color-tertiary);
+  }
+
+  & small {
+    @mixin typo_fine;
+
+    color: var(--color-text-teriary);
+  }
+
+  & sub,
+  & sup {
+    font-size: var(--type--3);
+    font-weight: 700;
+    color: var(--color-text-secondary);
+  }
+
+  & del,
+  & s {
+    color: var(--color-text-tertiary);
+    text-decoration: line-through;
+    text-decoration-thickness: var(--space-2);
+  }
+
+  & ins {
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--color-primary);
+    text-decoration-thickness: var(--space-2);
+
+    background: transparent;
+  }
+
+  & abbr[title] {
+    cursor: help;
+    text-decoration: underline dotted;
+    text-decoration-thickness: var(--size-1);
+    text-underline-offset: var(--size-2);
+  }
+
+  & dfn {
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  & cite {
+    font-weight: 600;
+    font-style: normal;
+    color: var(--color-text-secondary);
+  }
+
+  & q {
+    font-style: normal;
+
+    &::before {
+      content: '»';
+    }
+
+    &::after {
+      content: '«';
+    }
+  }
+
+  & time {
+    @mixin typo_label;
+
+    color: var(--color-text-tertiary);
+  }
+
+  /** LEAD PARAGRAPH */
+
+  & > article {
+    & > p:first-of-type {
+      font-size: var(--type-1);
+      font-weight: 700;
+      line-height: var(--leading-1);
+      letter-spacing: var(--tracking-1);
+
+      &::first-letter {
+        @mixin mr var(--space-2);
+
+        float:left;
+
+        font-family: var(--font-display);
+        font-size: var(--type-9);
+        line-height: 0.8;
+        color: var(--color-primary);
+
+        @supports (initial-letter: 3) {
+          @mixin pr var(--space-2);
+
+          float: none;
+
+          margin: 0;
+
+          font-size: inherit;
+          line-height: inherit;
+          initial-letter: 3;
+        }
+      }
+    }
   }
 }
diff --git a/src/styles/base/dimensions.css b/src/styles/base/dimensions.css
deleted file mode 100644
index 3c73bb5..0000000
--- a/src/styles/base/dimensions.css
+++ /dev/null
@@ -1,95 +0,0 @@
-@layer tokens {
-  :root {
-    /* === DIMENSIONS === */
-
-    /* == Base Size Units == */
-    --size-0: 0;
-    --size-px: 1px;
-    --size-05: 0.125rem;
-    --size-1: 0.25rem;
-    --size-2: 0.5rem;
-    --size-3: 0.75rem;
-    --size-4: 1rem;
-    --size-5: 1.25rem;
-    --size-6: 1.5rem;
-    --size-8: 2rem;
-    --size-10: 2.5rem;
-    --size-12: 3rem;
-    --size-16: 4rem;
-    --size-20: 5rem;
-    --size-24: 6rem;
-    --size-32: 8rem;
-    --size-40: 10rem;
-    --size-48: 12rem;
-    --size-64: 16rem;
-    --size-80: 20rem;
-    --size-96: 24rem;
-    --size-128: 32rem;
-    --size-160: 40rem;
-    --size-192: 48rem;
-    --size-256: 64rem;
-    --size-320: 80rem;
-    --size-360: 90rem;
-    --size-384: 96rem;
-    --size-400: 100rem;
-    --size-480: 120rem;
-
-    /* == Flexible Dimensions == */
-    --dim-full: 100%;
-    --dim-1-2: 50%;
-    --dim-1-3: 33.3333%;
-    --dim-2-3: 66.6667%;
-    --dim-1-4: 25%;
-    --dim-2-4: var(--dim-1-2);
-    --dim-3-4: 75%;
-    --dim-1-5: 20%;
-    --dim-2-5: 40%;
-    --dim-3-5: 60%;
-    --dim-4-5: 80%;
-    --dim-1-6: 16.6667%;
-    --dim-2-6: var(--dim-1-3);
-    --dim-3-6: var(--dim-1-2);
-    --dim-4-6: var(--dim-2-3);
-    --dim-5-6: 83.3333%;
-    --dim-1-8: 12.5%;
-    --dim-2-8: var(--dim-1-4);
-    --dim-3-8: 37.5%;
-    --dim-4-8: var(--dim-1-2);
-    --dim-5-8: 62.5%;
-    --dim-6-8: var(--dim-3-4);
-    --dim-7-8: 87.5%;
-    --dim-1-10: 10%;
-    --dim-2-10: var(--dim-1-5);
-    --dim-3-10: 30%;
-    --dim-4-10: var(--dim-2-5);
-    --dim-5-10: var(--dim-1-2);
-    --dim-6-10: var(--dim-3-5);
-    --dim-7-10: 70%;
-    --dim-8-10: var(--dim-4-5);
-    --dim-9-10: 90%;
-    --dim-1-12: 8.3333%;
-    --dim-2-12: var(--dim-1-6);
-    --dim-3-12: var(--dim-1-4);
-    --dim-4-12: var(--dim-1-3);
-    --dim-5-12: 41.6667%;
-    --dim-6-12: var(--dim-1-2);
-    --dim-7-12: 58.3333%;
-    --dim-8-12: var(--dim-2-3);
-    --dim-9-12: var(--dim-3-4);
-    --dim-10-12: 83.3333%;
-    --dim-11-12: 91.6667%;
-
-    /* == Semantic Spacing == */
-    --spacing-none: var(--size-0);
-    --spacing-hairline: var(--size-px);
-    --spacing-tight: var(--size-1);
-    --spacing-snug: var(--size-2);
-    --spacing-cozy: var(--size-4);
-    --spacing-comfortable: var(--size-6);
-    --spacing-relaxed: var(--size-8);
-    --spacing-spacious: var(--size-12);
-    --spacing-generous: var(--size-16);
-    --spacing-luxurious: var(--size-24);
-    --spacing-expansive: var(--size-32);
-  }
-}
diff --git a/src/styles/base/elements.css b/src/styles/base/elements.css
deleted file mode 100644
index 05dbc4f..0000000
--- a/src/styles/base/elements.css
+++ /dev/null
@@ -1,127 +0,0 @@
-:root {
-  /* === Heading Colors & Font Sizes === */
-
-  --el-h1-color: var(--color-text-primary);
-  --el-h1-font-family: var(--font-display);
-  --el-h1-font-size: var(--typo-size-7xl);
-  --el-h1-leading: 1.125;
-  --el-h2-color: var(--color-text-primary);
-  --el-h2-font-family: var(--font-header);
-  --el-h2-font-size: var(--typo-size-5xl);
-  --el-h2-leading: 1.1765;
-  --el-h3-color: var(--color-text-secondary);
-  --el-h3-font-family: var(--font-header);
-  --el-h3-font-size: var(--typo-size-4xl);
-  --el-h3-leading: 1.2;
-  --el-h4-color: var(--color-text-secondary);
-  --el-h4-font-family: var(--font-header);
-  --el-h4-font-size: var(--typo-size-3xl);
-  --el-h4-leading: 1.125;
-  --el-h5-color: var(--color-text-secondary);
-  --el-h5-font-family: var(--font-header);
-  --el-h5-font-size: var(--typo-size-2xl);
-  --el-h5-leading: 1.28;
-  --el-h6-color: var(--color-text-secondary);
-  --el-h6-font-family: var(--font-header);
-  --el-h6-font-size: var(--typo-size-xl);
-  --el-h6-leading: 1.4;
-
-  /* === Heading Vertical Spacing === */
-  --el-h1-vspace-base: calc(1em * var(--el-h1-leading));
-  --el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-snug));
-  --el-h1-vspace-bottom: calc(
-    var(--el-h1-vspace-base) * var(--vspace-compressed)
-  );
-  --el-h2-vspace-base: calc(1em * var(--el-h2-leading));
-  --el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
-  --el-h2-vspace-bottom: calc(
-    var(--el-h2-vspace-base) * var(--vspace-compressed)
-  );
-  --el-h3-vspace-base: calc(1em * var(--el-h3-leading));
-  --el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-cozy));
-  --el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));
-  --el-h4-vspace-base: calc(1em * var(--el-h4-leading));
-  --el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
-  --el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));
-  --el-h5-vspace-base: calc(1em * var(--el-h5-leading));
-  --el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
-  --el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));
-  --el-h6-vspace-base: calc(1em * var(--el-h6-leading));
-  --el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
-  --el-h6-vspace-bottom: calc(
-    var(--el-h6-vspace-base) * var(--vspace-compressed)
-  );
-
-  /* === Body Text === */
-  --el-p-color: var(--color-text-primary);
-  --el-p-font-family: var(--font-body);
-  --el-p-font-size: var(--typo-size-md);
-  --el-p-vspace-base: calc(1em * var(--typo-leading-normal));
-  --el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
-  --el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));
-
-  /* === Blockquote === */
-  --el-blockquote-color: var(--color-text-tertiary);
-  --el-blockquote-font-family: var(--font-body);
-  --el-blockquote-font-size: var(--typo-size-md);
-  --el-blockquote-vspace-base: calc(1em * var(--typo-leading-comfortable));
-  --el-blockquote-vspace-top: calc(
-    var(--el-blockquote-vspace-base) * var(--vspace-snug)
-  );
-  --el-blockquote-vspace-bottom: calc(
-    var(--el-blockquote-vspace-base) * var(--vspace-snug)
-  );
-
-  /* === Pre / Code === */
-  --el-pre-color: var(--color-text-inverse);
-  --el-pre-background: var(--color-surface-inverse);
-  --el-pre-font-family: var(--font-mono);
-  --el-pre-font-size: var(--typo-size-sm);
-  --el-pre-vspace-base: calc(1em * 1.5385);
-  --el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
-  --el-pre-vspace-bottom: calc(
-    var(--el-pre-vspace-base) * var(--vspace-normal)
-  );
-
-  /* === Lists === */
-  --el-list-color: var(--color-text-primary);
-  --el-list-font-size: var(--typo-size-md);
-  --el-list-vspace-base: calc(1em * var(--typo-leading-normal));
-  --el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
-  --el-list-vspace-bottom: calc(
-    var(--el-list-vspace-base) * var(--vspace-snug)
-  );
-  --el-list-nested-vspace-top: calc(
-    var(--el-list-vspace-base) * var(--vspace-snug)
-  );
-  --el-list-nested-vspace-bottom: calc(
-    var(--el-list-vspace-base) * var(--vspace-snug)
-  );
-  --el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
-  --el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
-  --el-li-nested-vspace-top: calc(
-    var(--el-list-vspace-base) * var(--vspace-tight)
-  );
-  --el-li-nested-vspace-bottom: calc(
-    var(--el-list-vspace-base) * var(--vspace-tight)
-  );
-
-  /* === Table === */
-  --el-th-color: var(--color-text-inverse);
-  --el-th-background: var(--color-surface-inverse);
-  --el-th-font-family: var(--font-header);
-  --el-td-color: var(--color-text-primary);
-  --el-td-font-family: var(--font-mono);
-
-  /* === DL/DT/DD === */
-  --el-dt-color: var(--color-text-inverse);
-  --el-dt-background: var(--color-surface-inverse);
-  --el-dt-font-family: var(--font-header);
-  --el-dd-color: var(--color-text-primary);
-  --el-dd-font-family: var(--font-body);
-
-  /* === HR === */
-  --hr-color: var(--color-text-tertiary);
-  --hr-symbol-color: var(--color-text-tertiary);
-  --hr-symbol-background: var(--color-surface-base);
-}
diff --git a/src/styles/base/fonts.css b/src/styles/base/fonts.css
index 0cd9a25..36f919e 100644
--- a/src/styles/base/fonts.css
+++ b/src/styles/base/fonts.css
@@ -1,19 +1,31 @@
-@import '@fontsource/blaka';
-@import '@fontsource-variable/geist-mono';
-@import '@fontsource-variable/geist';
+@import url('@fontsource/blaka');
+@import url('@fontsource-variable/geist-mono');
+@import url('@fontsource-variable/geist');
 
 @font-face {
   font-family: 'Unigrim Dee';
-  font-style: normal;
   font-weight: 400;
+  font-style: normal;
+
   font-display: swap;
   src: url('/src/fonts/UnigrimDee-Regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Iosevka Slab';
+  font-weight: 300;
   font-style: normal;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Light.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Slab';
   font-weight: 400;
+  font-style: normal;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Regular.woff2')
     format('woff2');
@@ -21,25 +33,37 @@
 
 @font-face {
   font-family: 'Iosevka Slab';
-  font-style: normal;
   font-weight: 700;
+  font-style: normal;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Iosevka Slab';
-  font-style: normal;
   font-weight: 900;
+  font-style: normal;
+
   font-display: swap;
-  font-variant-ligatures: normal;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Heavy.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Iosevka Slab';
+  font-weight: 300;
   font-style: italic;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-LightItalic.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Slab';
   font-weight: 400;
+  font-style: italic;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-Italic.woff2')
     format('woff2');
@@ -47,8 +71,9 @@
 
 @font-face {
   font-family: 'Iosevka Slab';
+  font-weight: 700;
   font-style: italic;
-  srcfont-weight: 700;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-BoldItalic.woff2')
     format('woff2');
@@ -56,8 +81,9 @@
 
 @font-face {
   font-family: 'Iosevka Slab';
+  font-weight: 900;
   font-style: italic;
-  srcfont-weight: 900;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSlabQp/IosevkaSlabQp-HeavyItalic.woff2')
     format('woff2');
@@ -65,9 +91,60 @@
 
 @font-face {
   font-family: 'Iosevka Mono';
+  font-weight: 400;
   font-style: normal;
-  srcfont-weight: 400;
+
   font-display: swap;
   src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Regular.woff2')
     format('woff2');
 }
+
+@font-face {
+  font-family: 'Iosevka Mono';
+  font-weight: 700;
+  font-style: normal;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Bold.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Mono';
+  font-weight: 900;
+  font-style: normal;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-ExtraBold.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Mono';
+  font-weight: 400;
+  font-style: italic;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-Italic.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Mono';
+  font-weight: 700;
+  font-style: italic;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-BoldItalic.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Iosevka Mono';
+  font-weight: 900;
+  font-style: italic;
+
+  font-display: swap;
+  src: url('/src/fonts/IosevkaSansMono/IosevkaSansMono-ExtraBoldItalic.woff2')
+    format('woff2');
+}
diff --git a/src/styles/base/primitives.css b/src/styles/base/primitives.css
new file mode 100644
index 0000000..cce17ea
--- /dev/null
+++ b/src/styles/base/primitives.css
@@ -0,0 +1,213 @@
+.ui {
+  /* === TYPE SCALE === */
+
+  /*
+  * Major Second (1.12), 14px base, 20px line height
+    * Step   Size (rem)    Leading    Tracking
+    * ------------------------------------------------------------------
+    *  10    2.75          1.1818     -0.0205em
+    *   9    2.5           1.2        -0.0195em
+    *   8    2.1875        1.1429     -0.018em
+    *   7    1.9375        1.1613     -0.0165em
+    *   6    1.75          1.2857     -0.015em
+    *   5    1.5625        1.28       -0.0132em
+    *   4    1.375         1.2727     -0.0109em
+    *   3    1.25          1.4        -0.009em
+    *   2    1.125         1.3333     -0.0067em
+    *   1    1             1.5        -0.0037em
+    *   0    0.875         1.4286      0em ← base
+    *  -1    0.75          1.6667      0.005em
+    *  -2    0.6875        1.4545      0.0082em
+    *  -3    0.625         1.6         0.012em
+  */
+
+  /* == Font Sizes == */
+   --type--3: 0.625rem;
+   --type--2: 0.6875rem;
+   --type--1: 0.75rem;
+   --type-0: 0.875rem;
+   --type-1: 1rem;
+   --type-2: 1.125rem;
+   --type-3: 1.25rem;
+   --type-4: 1.375rem;
+   --type-5: 1.5625rem;
+   --type-6: 1.75rem;
+   --type-7: 1.9375rem;
+   --type-8: 2.1875rem;
+   --type-9: 2.5rem;
+   --type-10: 2.75rem;
+
+   /* == Line Heights == */
+   --leading--3: 1.6;
+   --leading--2: 1.4545;
+   --leading--1: 1.6667;
+   --leading-0: 1.4286;
+   --leading-1: 1.5;
+   --leading-2: 1.3333;
+   --leading-3: 1.4;
+   --leading-4: 1.2727;
+   --leading-5: 1.28;
+   --leading-6: 1.2857;
+   --leading-7: 1.1613;
+   --leading-8: 1.1429;
+   --leading-9: 1.2;
+   --leading-10: 1.1818;
+
+   /* == Letter Spacing == */
+   --tracking--3: 0.012em;
+   --tracking--2: 0.0082em;
+   --tracking--1: 0.005em;
+   --tracking-0: 0em;
+   --tracking-1: -0.0037em;
+   --tracking-2: -0.0067em;
+   --tracking-3: -0.009em;
+   --tracking-4: -0.0109em;
+   --tracking-5: -0.0132em;
+   --tracking-6: -0.015em;
+   --tracking-7: -0.0165em;
+   --tracking-8: -0.018em;
+   --tracking-9: -0.0195em;
+   --tracking-10: -0.0205em;
+}
+
+.content {
+  /* === TYPE SCALE === */
+
+  /*
+  * Minor Third (1.19), 16px base, 24px line height
+  * Step   Size (em)     Leading    Tracking
+   * ------------------------------------------------------------------
+   *  10    5.6875        1.0989     -0.0247em
+   *   9    4.75          1.1053     -0.0237em
+   *   8    4             1.125      -0.0225em
+   *   7    3.375         1.1852     -0.0211em
+   *   6    2.8125        1.1556     -0.0193em
+   *   5    2.375         1.2632     -0.0174em
+   *   4    2             1.25       -0.015em
+   *   3    1.6875        1.3333     -0.0122em
+   *   2    1.4375        1.3913     -0.0091em
+   *   1    1.1875        1.4737     -0.0047em
+   *   0    1             1.5         0em ← base
+   *  -1    0.8125        1.5385      0.0069em
+   *  -2    0.6875        1.8182      0.0136em
+   *  -3    0.625         2           0.018em
+  */
+
+ /* == Font Sizes == */
+  --type--3: 0.625em;
+  --type--2: 0.6875em;
+  --type--1: 0.8125em;
+  --type-0: 1em;
+  --type-1: 1.1875em;
+  --type-2: 1.4375em;
+  --type-3: 1.6875em;
+  --type-4: 2em;
+  --type-5: 2.375em;
+  --type-6: 2.8125em;
+  --type-7: 3.375em;
+  --type-8: 4em;
+  --type-9: 4.75em;
+  --type-10: 5.6875em;
+
+  /* == Line Heights == */
+  --leading--3: 2;
+  --leading--2: 1.8182;
+  --leading--1: 1.5385;
+  --leading-0: 1.5;
+  --leading-1: 1.4737;
+  --leading-2: 1.3912;
+  --leading-3: 1.3333;
+  --leading-4: 1.25;
+  --leading-5: 1.2632;
+  --leading-6: 1.1556;
+  --leading-7: 1.1852;
+  --leading-8: 1.125;
+  --leading-9: 1.1053;
+  --leading-10: 1.0989;
+
+  /* == Letter Spacing == */
+  --tracking--3: 0.018em;
+  --tracking--2: 0.0136em;
+  --tracking--1: 0.0069em;
+  --tracking-0: 0em;
+  --tracking-1: -0.0047em;
+  --tracking-2: -0.0091em;
+  --tracking-3: -0.0122em;
+  --tracking-4: -0.015em;
+  --tracking-5: -0.0174em;
+  --tracking-6: -0.0193em;
+  --tracking-7: -0.0211em;
+  --tracking-8: -0.0225em;
+  --tracking-9: -0.0237em;
+  --tracking-10: -0.0247em;
+}
+
+:root {
+  /* === FONT FAMILIES === */
+  --font-header: 'Geist Variable', sans;
+  --font-display: 'Blaka',serif;
+  --font-body: 'Iosevka Slab', sans;
+  --font-mono: 'Iosevka Mono', monospace;
+  --font-symbols: 'Unigrim Dee', fantasy;
+
+  /* === SIZE (REM-based) === */
+  --size-0: 0;
+  --size-px: 0.0625rem;
+  --size-1: 0.125rem;
+  --size-2: 0.25rem;
+  --size-3: 0.375rem;
+  --size-4: 0.5rem;
+  --size-5: 0.625rem;
+  --size-6: 0.75rem;
+  --size-7: 0.875rem;
+  --size-8: 1rem;
+  --size-9: 1.25rem;
+  --size-10: 1.5rem;
+  --size-11: 2rem;
+  --size-12: 2.5rem;
+  --size-13: 3rem;
+  --size-14: 4rem;
+  --size-15: 5rem;
+  --size-16: 6rem;
+
+  /* === SPACING (EM-based) === */
+  --space-0: 0;
+  --space-px: 0.0625em;
+  --space-1: 0.125em;
+  --space-2: 0.25em;
+  --space-3: 0.375rem;
+  --space-4: 0.5em;
+  --space-5: 0.625em;
+  --space-6: 0.75em;
+  --space-7: 0.875em;
+  --space-8: 1em;
+  --space-9: 1.25em;
+  --space-10: 1.5em;
+  --space-11: 2em;
+  --space-12: 2.5em;
+  --space-13: 3em;
+  --space-14: 4em;
+  --space-15: 5em;
+  --space-16: 6em;
+
+  /* === Z-INDEX === */
+  --z-base: 1;
+  --z-sticky: 10;
+  --z-overlay: 20;
+  --z-modal: 30;
+  --z-toast: 40;
+
+  /* === MOTION === */
+  --motion-fast: 150ms;
+  --motion-normal: 300ms;
+  --motion-slow: 500ms;
+  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* === LAYOUT === */
+  --layout-content-width: minmax(0, 72ch);
+  --layout-margin-width: minmax(18ch, 1fr);
+  --layout-gutter: var(--space-6);
+  --layout-page-margin: var(--space-8);
+  --layout-max-width: 90rem;
+}
diff --git a/src/styles/base/typography.css b/src/styles/base/typography.css
deleted file mode 100644
index e49c004..0000000
--- a/src/styles/base/typography.css
+++ /dev/null
@@ -1,58 +0,0 @@
-:root {
-  /* === Font Families === */
-  --font-header: 'Geist Variable', sans;
-  --font-display: 'Blaka',serif;
-  --font-body: 'Iosevka Slab', sans;
-  --font-mono: 'Iosevka Mono', monospace;
-  --font-symbols: 'Unigrim Dee', fantasy;
-
-  /* === Type Scale === */
-  --typo-size-responsive: clamp(1rem, 2.5vw, 1.25rem);
-  --typo-size-base: 16px;
-  --typo-size-8xl: 8em;
-  --typo-size-7xl: 6.375em;
-  --typo-size-6xl: 5.0625em;
-  --typo-size-5xl: 4em;
-  --typo-size-4xl: 3.1875em;
-  --typo-size-3xl: 2.5em;
-  --typo-size-2xl: 2em;
-  --typo-size-xl: 1.5625em;
-  --typo-size-lg: 1.25em;
-  --typo-size-md: 1em;
-  --typo-size-sm: 0.8125em;
-  --typo-size-xs: 0.625em;
-  --typo-size-2xs: 0.5em;
-
-  /* == Letter Spacing == */
-  --typo-spacing-tightest: -0.05em;
-  --typo-spacing-tighter: -0.025em;
-  --typo-spacing-tight: -0.0125em;
-  --typo-spacing-normal: 0em;
-  --typo-spacing-relaxed: 0.025em;
-  --typo-spacing-comfortable: 0.05em;
-  --typo-spacing-loose: 0.1em;
-  --typo-spacing-looser: 0.15em;
-  --typo-spacing-loosest: 0.2em;
-
-  /* === Line Height === */
-  --typo-leading-compressed: 1;
-  --typo-leading-tight: 1.125;
-  --typo-leading-snug: 1.25;
-  --typo-leading-cozy: 1.375;
-  --typo-leading-normal: 1.5;
-  --typo-leading-relaxed: 1.625;
-  --typo-leading-comfortable: 1.75;
-  --typo-leading-loose: 1.875;
-  --typo-leading-spacious: 2;
-
-  /* === Vertical Spacing Multipliers === */
-  --vspace-compressed: 0.25;
-  --vspace-tight: 0.5;
-  --vspace-snug: 0.75;
-  --vspace-cozy: 1;
-  --vspace-normal: 1.25;
-  --vspace-relaxed: 1.5;
-  --vspace-comfortable: 1.75;
-  --vspace-loose: 2;
-  --vspace-spacious: 2.5;
-}
diff --git a/src/styles/base/ui.css b/src/styles/base/ui.css
deleted file mode 100644
index 00ca7fe..0000000
--- a/src/styles/base/ui.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* UI Specific Variables */
-:root {
-  /* Spacing */
-  --ui-spacing-hairline: 0.0625rem;
-  --ui-spacing-tight: 0.125rem;
-  --ui-spacing-snug: 0.25rem;
-  --ui-spacing-cozy: 0.375rem;
-  --ui-spacing-comfortable:0.5rem;
-  --ui-spacing-relaxed: 0.625rem;
-  --ui-spacing-spacious: 0.75rem;
-  --ui-spacing-generous: 0.875rem;
-  --ui-spacing-luxurious: 1rem;
-  --ui-spacing-expansive: 1.25rem;
-
-  /* Font Size */
-  --ui-typo-size-2xs: 0.5625rem;
-  --ui-typo-size-xs: 0.625rem;
-  --ui-typo-size-sm: 0.6875rem;
-  --ui-typo-size-md: 0.8125rem;
-  --ui-typo-size-lg: 0.875rem;
-  --ui-typo-size-xl: 1rem;
-  --ui-typo-size-2xl: 1.25rem;
-  --ui-typo-size-3xl: 1.5rem;
-  --ui-typo-size-4xl: 1.75rem;
-  --ui-typo-size-5xl: 2rem;
-
-  /* === MastHead === */
-  --ui-masthead-font-size: var(--ui-font-size-xl);
-  --ui-masthead-line-height: var(--typo-leading-snug);
-  --ui-masthead-paddingY: var(--ui-spacing-relaxed);
-  --ui-masthead-height: calc(
-    (var(--ui-masthead-font-size) * var(--ui-masthead-line-height)) +
-    (var(--ui-masthead-paddingY) * 2)
-  );
-
-  /* === Content/Marginalia === */
-  --ui-content-width: minmax(0, 72ch);
-  --ui-margin-width: minmax(18ch, 1fr);
-  --ui-layout-width: 90rem;
-}
diff --git a/src/styles/global.css b/src/styles/global.css
index 726d946..a5a1b4f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,12 +1,9 @@
-@import url('./base/fonts.css');
-@import url('./base/foundation.css');
-@import url('./base/colors.css');
-@import url('./base/dimensions.css');
-@import url('./base/typography.css');
-@import url('./base/elements.css');
-@import url('./base/custom-media.css');
-@import url('./base/content.css');
-@import url('./base/ui.css');
+@import url("base/custom-media.css");
+@import url("base/fonts.css");
+@import url("base/foundation.css");
+@import url("base/colors.css");
+@import url("base/primitives.css");
+@import url("base/content.css");
 
 body {
   font-variant-ligatures: discretionary-ligatures;
diff --git a/src/styles/mixins/borders.css b/src/styles/mixins/borders.css
index ed98a45..52a4d20 100644
--- a/src/styles/mixins/borders.css
+++ b/src/styles/mixins/borders.css
@@ -53,3 +53,8 @@
 @define-mixin circle {
   border-radius: 50%;
 }
+
+@define-mixin focus-ring $width: 2px, $color: var(--color-focus-ring), $offset: 2px {
+  outline: $width solid $color;
+  outline-offset: $offset;
+}
diff --git a/src/styles/mixins/colors.css b/src/styles/mixins/colors.css
new file mode 100644
index 0000000..b962b1d
--- /dev/null
+++ b/src/styles/mixins/colors.css
@@ -0,0 +1,112 @@
+:root {
+  /* == Neutrals == */
+  --color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
+  --color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
+  --color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg);
+  --color-palette-carbon: oklch(39.8% 0 89.876deg);
+  --color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg);
+  --color-palette-stone: oklch(64.3% 0.005 91.471deg);
+  --color-palette-silver: oklch(72.9% 0.001 17.185deg);
+  --color-palette-light-silver: oklch(82.6% 0.002 247.844deg);
+  --color-palette-pale-gray: oklch(91.3% 0.004 91.449deg);
+  --color-palette-very-pale-gray: oklch(94.3% 0 89.876deg);
+  --color-palette-off-white: oklch(98.1% 0.003 247.858deg);
+  --color-palette-ice-blue: oklch(99.9% 0.001 197.139deg);
+
+  /* == Accents == */
+  --color-palette-lava: oklch(63.6% 0.193 17.075deg);
+  --color-palette-cerise: oklch(60.7% 0.23 18.554deg);
+  --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
+  --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
+  --color-palette-bright-canary: oklch(89% 0.157 97.726deg);
+  --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
+  --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
+  --color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);
+
+  /* === Semantic Colors === */
+
+  /* == Primary / Secondary / Tertiary == */
+  --color-primary: var(--color-palette-lava);
+  --color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
+  --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
+  --color-secondary: var(--color-palette-lime-green);
+  --color-secondary-surface: oklch(
+    from var(--color-secondary) calc(l + 0.1) c h
+  );
+  --color-secondary-emphasis: oklch(
+    from var(--color-secondary) calc(l - 0.15) c h
+  );
+  --color-tertiary: var(--color-palette-bright-canary);
+  --color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
+  --color-tertiary-emphasis: oklch(
+    from var(--color-tertiary) calc(l - 0.15) c h
+  );
+
+  /* == Text == */
+  --color-text-primary: var(--color-palette-black-ink);
+  --color-text-secondary: var(--color-palette-charcoal);
+  --color-text-tertiary: var(--color-palette-charcoal-gray);
+  --color-text-quarternary: var(--color-palette-carbon);
+  --color-text-inverse: var(--color-palette-ice-blue);
+  --color-text-disabled: var(--color-palette-cloud-gray);
+
+  /* == Surfaces == */
+  --color-surface-base: var(--color-palette-ice-blue);
+  --color-surface-elevated-1: var(--color-palette-off-white);
+  --color-surface-elevated-2: var(--color-palette-very-pale-gray);
+  --color-surface-elevated-3: var(--color-palette-pale-gray);
+  --color-surface-elevated-4: var(--color-palette-light-silver);
+  --color-surface-inverse: var(--color-palette-black-ink);
+
+  /* == Borders == */
+  --color-border-subtle: var(--color-palette-silver);
+  --color-border-normal: var(--color-palette-stone);
+  --color-border-strong: var(--color-palette-charcoal-gray);
+
+  /* == States == */
+  --color-state-error: var(--color-palette-cerise);
+  --color-state-warning: var(--color-palette-persimmon);
+  --color-state-success: var(--color-palette-lime-green);
+  --color-state-info: var(--color-palette-royal-blue);
+
+  /* == Links == */
+  --color-text-link: var(--color-text-tertiary);
+  --color-text-link-hover: var(--color-secondary);
+  --color-text-link-visited: var(--color-palette-fuchsia);
+
+  /* == Focus == */
+  --color-focus-ring: var(--color-primary);
+
+  /* == Overlays == */
+  --color-overlay-light: oklch(0% 0 0deg / 10%);
+  --color-overlay-medium: oklch(0% 0 0deg / 30%);
+  --color-overlay-heavy: oklch(0% 0 0deg / 60%);
+
+  /* == Shadows == */
+  --color-shadow: oklch(0% 0 0deg / 10%);
+  --color-shadow-strong: oklch(0% 0 0deg / 25%);
+
+  /* == Utility == */
+  --color-highlight: var(--color-tertiary-surface);
+  --color-highlight-strong: var(--color-tertiary);
+  --color-skeleton-base: var(--color-surface-elevated-2);
+  --color-skeleton-shimmer: var(--color-surface-elevated-1);
+}
+
+.dark {
+  --color-text-primary: var(--color-palette-ice-blue);
+  --color-text-secondary: var(--color-palette-pale-gray);
+  --color-text-tertiary: var(--color-palette-light-silver);
+  --color-text-quarternary: var(--color-palette-silver);
+  --color-text-inverse: var(--color-palette-black-ink);
+  --color-text-disabled: var(--color-palette-cloud-gray);
+  --color-surface-base: var(--color-palette-black-ink);
+  --color-surface-elevated-1: var(--color-palette-charcoal);
+  --color-surface-elevated-2: var(--color-palette-charcoal-gray);
+  --color-surface-elevated-3: var(--color-palette-carbon);
+  --color-surface-elevated-4: var(--color-palette-cloud-gray);
+  --color-surface-inverse: var(--color-palette-ice-blue);
+  --color-border-subtle: var(--color-palette-charcoal-gray);
+  --color-border-normal: var(--color-palette-carbon);
+  --color-border-strong: var(--color-palette-silver);
+}
diff --git a/src/styles/mixins/containers.css b/src/styles/mixins/containers.css
deleted file mode 100644
index d529d52..0000000
--- a/src/styles/mixins/containers.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy),
-  $fontSize: var(--typo-size-responsive) {
-  @mixin mx auto;
-
-  max-width: clamp(60ch, 90vw, 90ch);
-  padding: $vspacing $hspacing;
-  font-family: var(--font-body);
-  font-size: $fontSize;
-}
-
-@define-mixin layout-wrapper {
-  @mixin mx auto;
-  @mixin px var(--spacing-comfortable);
-
-  width: 100%;
-  max-width: var(--ui-layout-width);
-
-  @media screen and (--max-layout) {
-    @mixin px var(--spacing-comfortable);
-  }
-}
-
-@define-mixin position $position: absolute, $inset-values {
-  position: $position;
-  inset: $inset-values;
-}
diff --git a/src/styles/mixins/helpers.css b/src/styles/mixins/helpers.css
new file mode 100644
index 0000000..dd325e4
--- /dev/null
+++ b/src/styles/mixins/helpers.css
@@ -0,0 +1,16 @@
+@define-mixin layout-wrapper {
+  @mixin mx auto;
+  @mixin px var(--layout-page-margin);
+
+  width: 100%;
+  max-width: var(--layout-max-width);
+
+  @media screen and (--bp-desktop) {
+    @mixin px var(--scape-0);
+  }
+}
+
+@define-mixin position $position: absolute, $inset-values {
+  position: $position;
+  inset: $inset-values;
+}
diff --git a/src/styles/mixins/typography.css b/src/styles/mixins/typography.css
index 72fc5be..06c7e87 100644
--- a/src/styles/mixins/typography.css
+++ b/src/styles/mixins/typography.css
@@ -1,73 +1,198 @@
-@define-mixin heading-1 {
-  @mixin mt var(--el-h1-vspace-top);
-  @mixin mb var(--el-h1-vspace-bottom);
-  @mixin pb var(--spacing-snug);
-
-  font-family: var(--el-h1-font-family);
-  font-size: var(--el-h1-font-size);
+@define-mixin typo_display-1 {
+  font-family: var(--font-display);
+  font-size: var(--type-10);
   font-weight: 400;
-  line-height: var(--el-h1-leading);
-  color: var(--el-h1-color);
-  text-transform: uppercase;
-  letter-spacing: -0.0137em;
+  line-height: var(--leading-10);
+  text-transform: none;
+  letter-spacing: var(--tracking-10);
 }
 
-@define-mixin heading-2 {
-  @mixin mt var(--el-h2-vspace-top);
-  @mixin mb var(--el-h2-vspace-bottom);
+@define-mixin typo_display-2 {
+  font-family: var(--font-display);
+  font-size: var(--type-9);
+  font-weight: 400;
+  line-height: var(--leading-9);
+  text-transform: none;
+  letter-spacing: var(--tracking-9);
+}
 
-  font-family: var(--el-h2-font-family);
-  font-size: var(--el-h2-font-size);
+@define-mixin typo_heading-1 {
+  font-family: var(--font-header);
+  font-size: var(--type-8);
   font-weight: 900;
-  line-height: var(--el-h2-leading);
+  line-height: var(--leading-8);
   text-transform: uppercase;
-  letter-spacing: -0.0096em;
+  letter-spacing: var(--tracking-8);
 }
 
-@define-mixin heading-3 {
-  @mixin mt var(--el-h3-vspace-top);
-  @mixin mb var(--el-h3-vspace-bottom);
-
-  font-family: var(--el-h3-font-family);
-  font-size: var(--el-h3-font-size);
+@define-mixin typo_heading-2 {
+  font-family: var(--font-header);
+  font-size: var(--type-7);
   font-weight: 800;
-  line-height: var(--el-h3-leading);
+  line-height: var(--leading-7);
   text-transform: uppercase;
-  letter-spacing: -0.004em;
+  letter-spacing: var(--tracking-7);
 }
 
-@define-mixin heading-4 {
-  @mixin mt var(--el-h4-vspace-top);
-  @mixin mb var(--el-h4-vspace-bottom);
-
-  font-family: var(--el-h4-font-family);
-  font-size: var(--el-h4-font-size);
+@define-mixin typo_heading-3 {
+  font-family: var(--font-header);
+  font-size: var(--type-6);
   font-weight: 800;
-  line-height: var(--el-h4-leading);
+  line-height: var(--leading-6);
   text-transform: uppercase;
-  letter-spacing: 0.0025em;
+  letter-spacing: var(--tracking-6);
 }
 
-@define-mixin heading-5 {
-  @mixin mt var(--el-h5-vspace-top);
-  @mixin mb var(--el-h5-vspace-bottom);
-
-  font-family: var(--el-h5-font-family);
-  font-size: var(--el-h5-font-size);
+@define-mixin typo_heading-4 {
+  font-family: var(--font-header);
+  font-size: var(--type-5);
   font-weight: 800;
-  line-height: var(--el-h5-leading);
+  line-height: var(--leading-5);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--tracking-5);
 }
 
-@define-mixin heading-6 {
-  @mixin mt var(--el-h6-vspace-top);
-  @mixin mb var(--el-h6-vspace-bottom);
-
-  font-family: var(--el-h6-font-family);
-  font-size: var(--el-h6-font-size);
-  font-weight: 900;
-  line-height: var(--el-h6-leading);
+@define-mixin typo_heading-5 {
+  font-family: var(--font-header);
+  font-size: var(--type-4);
+  font-weight: 700;
+  line-height: var(--leading-4);
   text-transform: uppercase;
-  letter-spacing: 0.035em;
+  letter-spacing: var(--tracking-4);
+}
+
+@define-mixin typo_heading-6 {
+  font-family: var(--font-header);
+  font-size: var(--type-3);
+  font-weight: 700;
+  line-height: var(--leading-3);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-3);
+}
+
+@define-mixin typo_body-large {
+  font-family: var(--font-body);
+  font-size: var(--type-2);
+  font-weight: 400;
+  line-height: var(--leading-2);
+  text-transform: none;
+  letter-spacing: var(--tracking-2);
+}
+
+@define-mixin typo_body-alt {
+  font-family: var(--font-body);
+  font-size: var(--type-1);
+  font-weight: 400;
+  line-height: var(--leading-1);
+  text-transform: none;
+  letter-spacing: var(--tracking-1);
+}
+
+@define-mixin typo_body {
+  font-family: var(--font-body);
+  font-size: var(--type-0);
+  font-weight: 400;
+  line-height: var(--leading-0);
+  text-transform: none;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_body-small {
+  font-family: var(--font-body);
+  font-size: var(--type--1);
+  font-weight: 400;
+  line-height: var(--leading--1);
+  text-transform: none;
+  letter-spacing: var(--tracking--1);
+}
+
+@define-mixin typo_label {
+  font-family: var(--font-header);
+  font-size: var(--type--2);
+  font-weight: 700;
+  line-height: var(--leading--2);
+  text-transform: none;
+  letter-spacing: var(--tracking--2);
+}
+
+@define-mixin typo_fine {
+  font-family: var(--font-body);
+  font-size: var(--type--3);
+  font-weight: 400;
+  line-height: var(--leading--3);
+  text-transform: none;
+  letter-spacing: var(--tracking--3);
+}
+
+@define-mixin typo_code {
+  font-family: var(--font-mono);
+  font-size: var(--type--1);
+  font-weight: 400;
+  line-height: var(--leading--1);
+  text-transform: none;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_table-header {
+  font-family: var(--font-header);
+  font-size: var(--type--1);
+  font-weight: 700;
+  line-height: var(--leading-0);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_table-data {
+  font-family: var(--font-mono);
+  font-size: var(--type--1);
+  font-weight: 400;
+  line-height: var(--leading--1);
+  text-transform: none;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_definition-header {
+  font-family: var(--font-header);
+  font-size: var(--type--0);
+  font-weight: 700;
+  line-height: var(--leading-0);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_definition-data {
+  font-family: var(--font-mono);
+  font-size: var(--type--1);
+  font-weight: 400;
+  line-height: var(--leading--1);
+  text-transform: none;
+  letter-spacing: var(--tracking-0);
+}
+
+@define-mixin typo_subtitle {
+  font-family: var(--font-header);
+  font-size: var(--type-0);
+  font-weight: 300;
+  line-height: var(--leading-0);
+  text-transform: uppercase;
+  letter-spacing: 0.0875em;
+}
+
+@define-mixin typo_meta-label {
+  font-family: var(--font-header);
+  font-size: var(--type--2);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--size-1);
+
+  leading: var(--leading--3);
+}
+
+@define-mixin typo_meta-data {
+  font-family: var(--font-mono);
+  font-size: var(--type-0);
+  text-transform: uppercase;
+  letter-spacing: var(--size--3);
+
+  leading: var(--leading-0);
 }