diff --git a/DESIGN.md b/DESIGN.md
index d723d0b..de62da9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -38,6 +38,13 @@ typography:
     fontWeight: 400
 rounded:
   md: "8px"
+spacing:
+  2xs: "0.25rem"
+  xs: "0.5rem"
+  sm: "0.75rem"
+  md: "1rem"
+  lg: "1.5rem"
+  xl: "2rem"
 components:
   button-primary:
     backgroundColor: "#5a4a1a"
@@ -122,6 +129,16 @@ A tarnish-and-decay palette: gold that has aged, plum that has bruised, black th
 ### Named Rules
 **The Engraving Rule.** Wide letter-spacing and uppercase belong only to small Cinzel labels. Headings at reading size keep letter-spacing 0. Body text is never tracked, never uppercase.
 
+## 3½. Spacing & Layout
+
+Tokens in `_tokens.scss`: `--wg-space-2xs/xs/sm/md/lg/xl` (0.25 / 0.5 / 0.75 / 1 / 1.5 / 2rem, a 4pt scale). Surface-level rules:
+
+- Card interiors pad `--wg-space-md`; compact control bars (topic-list header) pad `--wg-space-xs`.
+- Gaps between sibling cards/widgets are `--wg-space-sm`; below `lg` card padding also drops to `--wg-space-sm`.
+- The ledger ruling row height is one token everywhere: `--wg-ledger-line` (1.78rem).
+- Page rails (topbar, footer, content) share `--wg-page-width` (1420px).
+- Fine optical values (tag chips, badge padding, etched insets) stay hand-tuned; the scale governs surface-level spacing, not micro-typography.
+
 ## 4. Elevation
 
 Shadows here are candlelight, not physics. They set mood — a soft top highlight like sheen on fabric, an inner plum glow, a wide black falloff — and they do not communicate stacking. Hierarchy between surfaces is carried by panel tone (Velvet Panel Deep → Velvet Panel → Velvet Panel Raised) and by border strength (gold at 8% → 14% → 18–22% alpha).
diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss
index 611c4db..ef512fd 100644
--- a/scss/westgate/_categories.scss
+++ b/scss/westgate/_categories.scss
@@ -7,7 +7,7 @@ ul.categories-list,
 ul.westgate-categories-list {
   position: relative;
   display: grid;
-  gap: 0.75rem;
+  gap: var(--wg-space-sm);
   padding-left: 0;
 }
 
@@ -15,7 +15,7 @@ li[component="categories/category"] {
   position: relative;
   isolation: isolate;
   margin: 0 !important;
-  padding: 1rem !important;
+  padding: var(--wg-space-md) !important;
   overflow: visible;
   transition:
     background 0.18s ease,
@@ -323,6 +323,7 @@ ul.category-children {
 
 li[component="categories/category"] .meta.stats > div {
   min-height: 3.55rem;
+  padding: var(--wg-space-2xs) var(--wg-space-xs);
   background: rgba(255, 255, 255, 0.018) !important;
   border: 1px solid rgba(194, 163, 90, 0.09) !important;
   border-radius: 3px !important;
diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss
index faf7521..da932d4 100644
--- a/scss/westgate/_controls.scss
+++ b/scss/westgate/_controls.scss
@@ -399,7 +399,7 @@ table[component="notification/table"] a[data-type]:focus {
     ),
     linear-gradient(100deg, rgba(32, 19, 30, 0.98), rgba(13, 12, 17, 0.98)) !important;
   background-size:
-    100% 1.82rem,
+    100% var(--wg-ledger-line),
     auto;
   border-color: rgba(194, 163, 90, 0.18) !important;
   color: var(--wg-text-soft) !important;
diff --git a/scss/westgate/_footer.scss b/scss/westgate/_footer.scss
index ec59648..4df50af 100644
--- a/scss/westgate/_footer.scss
+++ b/scss/westgate/_footer.scss
@@ -33,7 +33,7 @@
 	display: grid;
 	grid-template-columns: minmax(0, 1.6fr) minmax(10rem, 1fr) minmax(10rem, 1fr);
 	gap: clamp(2rem, 5vw, 3.125rem);
-	width: min(100%, 1240px);
+	width: min(100%, var(--wg-page-width));
 	margin: 0 auto;
 	padding: clamp(2.75rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 1.875rem;
 }
@@ -120,7 +120,7 @@
 	justify-content: space-between;
 	flex-wrap: wrap;
 	gap: 0.75rem;
-	width: min(100%, 1240px);
+	width: min(100%, var(--wg-page-width));
 	margin: 0 auto;
 	padding: 1.375rem clamp(1rem, 4vw, 2rem);
 	border-top: 1px solid rgba(194, 163, 90, 0.1);
@@ -140,7 +140,7 @@
 	justify-content: center;
 	flex-wrap: wrap;
 	gap: 0.625rem;
-	width: min(100%, 1240px);
+	width: min(100%, var(--wg-page-width));
 	margin: 0 auto;
 	padding: 0 1rem 1.875rem;
 	font-family: var(--wg-font-ui);
diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss
index e0d095e..bdda286 100644
--- a/scss/westgate/_posts.scss
+++ b/scss/westgate/_posts.scss
@@ -46,7 +46,7 @@ li[component="post"] .post-container {
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
 		var(--wg-ledger-panel) !important;
-	background-size: 100% 1.82rem, auto;
+	background-size: 100% var(--wg-ledger-line), auto;
 	border: 1px solid var(--wg-ledger-border) !important;
 	border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
 	border-radius: 6px !important;
@@ -241,7 +241,7 @@ li[component="post"] [component="post/downvote"] {
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)),
 		rgba(18, 15, 22, 0.96) !important;
-	background-size: 100% 1.55rem, auto;
+	background-size: 100% var(--wg-ledger-line), auto;
 	border-color: var(--wg-ledger-border) !important;
 	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32) !important;
 	color: var(--wg-ledger-ink) !important;
@@ -275,7 +275,7 @@ textarea[component="topic/quickreply/text"],
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
 		rgba(18, 15, 22, 0.92) !important;
-	background-size: 100% 1.82rem, auto;
+	background-size: 100% var(--wg-ledger-line), auto;
 	border-color: var(--wg-ledger-border) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 255, 255, 0.026),
@@ -300,7 +300,7 @@ textarea[component="topic/quickreply/text"]:focus,
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
 		var(--wg-ledger-panel) !important;
-	background-size: 100% 1.82rem, auto;
+	background-size: 100% var(--wg-ledger-line), auto;
 	border-color: var(--wg-ledger-border) !important;
 	box-shadow: none !important;
 	color: var(--wg-text-soft) !important;
diff --git a/scss/westgate/_responsive.scss b/scss/westgate/_responsive.scss
index 83d179e..914acca 100644
--- a/scss/westgate/_responsive.scss
+++ b/scss/westgate/_responsive.scss
@@ -11,7 +11,7 @@
 	li[component="categories/category"],
 	li[component="category/topic"],
 	li[component="post"] .post-container {
-		padding: 0.85rem !important;
+		padding: var(--wg-space-sm) !important;
 	}
 
 	li[component="categories/category"] h2.title {
@@ -39,7 +39,7 @@
 
 @include media-breakpoint-down(md) {
 	.category-header {
-		padding: 0.85rem;
+		padding: var(--wg-space-sm);
 	}
 
 	li[component="post"] .content,
diff --git a/scss/westgate/_tokens.scss b/scss/westgate/_tokens.scss
index b98ffb4..520acba 100644
--- a/scss/westgate/_tokens.scss
+++ b/scss/westgate/_tokens.scss
@@ -71,6 +71,14 @@
 }
 
 :root {
+	--wg-space-2xs: 0.25rem;
+	--wg-space-xs: 0.5rem;
+	--wg-space-sm: 0.75rem;
+	--wg-space-md: 1rem;
+	--wg-space-lg: 1.5rem;
+	--wg-space-xl: 2rem;
+	--wg-ledger-line: 1.78rem;
+	--wg-page-width: 1420px;
 	--wg-font-display: "Cinzel", Georgia, "Times New Roman", serif;
 	--wg-font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
 	--wg-font-ui: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss
index 4557171..1d5288d 100644
--- a/scss/westgate/_topbar.scss
+++ b/scss/westgate/_topbar.scss
@@ -28,7 +28,7 @@ $wg-topbar-panel-bg: linear-gradient(
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.9rem;
-  width: min(100%, 1420px);
+  width: min(100%, var(--wg-page-width));
   min-height: 64px;
   margin: 0 auto;
   padding: 0.55rem clamp(0.85rem, 2vw, 1.5rem);
diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss
index 37666fe..e08f017 100644
--- a/scss/westgate/_topics.scss
+++ b/scss/westgate/_topics.scss
@@ -20,7 +20,7 @@ body.template-category .category-header .description {
 }
 
 .topic-list-header > .card {
-	padding: 0.55rem !important;
+	padding: var(--wg-space-xs) !important;
 	background: rgba(18, 15, 22, 0.78) !important;
 	border-color: var(--wg-ledger-border) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@@ -42,7 +42,7 @@ body.template-category .category-header .description {
 
 ul[component="category"] {
 	display: grid;
-	gap: 0.85rem;
+	gap: var(--wg-space-sm);
 	padding: 0 !important;
 	background: transparent !important;
 	border: 0 !important;
@@ -53,13 +53,13 @@ li[component="category/topic"] {
 	position: relative;
 	isolation: isolate;
 	margin: 0 !important;
-	padding: 0.95rem 1rem !important;
+	padding: var(--wg-space-md) !important;
 	overflow: hidden;
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
 		linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem),
 		var(--wg-ledger-panel) !important;
-	background-size: 100% 1.78rem, auto, auto;
+	background-size: 100% var(--wg-ledger-line), auto, auto;
 	border: 1px solid var(--wg-ledger-border) !important;
 	border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
 	border-radius: 6px !important;
@@ -98,7 +98,7 @@ li[component="category/topic"].unread:nth-child(even) {
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
 		linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
 		var(--wg-ledger-panel) !important;
-	background-size: 100% 1.78rem, auto, auto;
+	background-size: 100% var(--wg-ledger-line), auto, auto;
 }
 
 li[component="category/topic"]:hover {
@@ -137,7 +137,7 @@ li[component="category/topic"].pinned:not(.unread) {
 }
 
 li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) {
-	margin-bottom: 0.85rem !important;
+	margin-bottom: var(--wg-space-sm) !important;
 }
 
 li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned))::after {
@@ -366,6 +366,7 @@ li[component="category/topic"] [component="topic/select"]:focus {
 
 li[component="category/topic"] .meta.stats > div {
 	min-height: 3.25rem;
+	padding: var(--wg-space-2xs) var(--wg-space-xs);
 	background: rgba(255, 255, 255, 0.018) !important;
 	border: 1px solid rgba(194, 163, 90, 0.09) !important;
 	border-radius: 3px !important;
diff --git a/scss/westgate/_widgets.scss b/scss/westgate/_widgets.scss
index 7de6ffd..9bfd04d 100644
--- a/scss/westgate/_widgets.scss
+++ b/scss/westgate/_widgets.scss
@@ -5,11 +5,11 @@
 [data-widget-area="header"],
 [data-widget-area="footer"] {
 	display: grid;
-	gap: 0.85rem;
+	gap: var(--wg-space-sm);
 }
 
 [data-widget-area="header"] {
-	margin-bottom: 0.85rem;
+	margin-bottom: var(--wg-space-sm);
 }
 
 [data-widget-area="footer"] {
@@ -20,7 +20,7 @@
 [data-widget-area="sidebar-footer"] {
 	display: grid;
 	align-content: start;
-	gap: 0.85rem;
+	gap: var(--wg-space-sm);
 }
 
 [data-widget-area] > :where(
@@ -51,11 +51,11 @@
 	.westgate-widget-card,
 	.wg-widget-card
 ) {
-	padding: 0.85rem;
+	padding: var(--wg-space-md);
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
 		linear-gradient(100deg, rgba(42, 18, 34, 0.34), rgba(18, 16, 23, 0.96) 62%, rgba(13, 12, 17, 0.98)) !important;
-	background-size: 100% 1.78rem, auto;
+	background-size: 100% var(--wg-ledger-line), auto;
 	border: 1px solid rgba(194, 163, 90, 0.14);
 	border-radius: 8px;
 	box-shadow: var(--wg-velvet-shadow);
@@ -229,7 +229,7 @@
 	--bs-gutter-x: 0.45rem;
 	--bs-gutter-y: 0.45rem;
 	width: 100%;
-	margin: 0 0 0.85rem;
+	margin: 0 0 var(--wg-space-sm);
 	padding: 0.6rem;
 	background:
 		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),