From 26173b7396f6bf5fc592c4507f85ff90b57d9b57 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@local>
Date: Sun, 19 Apr 2026 20:27:20 +0200
Subject: [PATCH] docs: add ProjectLockup to style guide

---
 src/pages/style-guide.astro | 55 +++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/pages/style-guide.astro b/src/pages/style-guide.astro
index feeb3cc..9a010dc 100644
--- a/src/pages/style-guide.astro
+++ b/src/pages/style-guide.astro
@@ -2,6 +2,7 @@
 // Internal design system review page.
 // Remove or gate behind auth before production launch.
 import BaseLayout from '../layouts/BaseLayout.astro';
+import ProjectLockup from '../components/ProjectLockup.astro';
 
 const surfaces = [
   { token: '--surface-container-lowest', hex: '#fffcf7', label: 'surface-container-lowest', note: 'Floating / most elevated' },
@@ -116,6 +117,35 @@ const lucideIcons = [
           Clear space equal to the spear-head height on all sides.
           Never distort, recolour, or place on a competing textured background.
         </p>
+
+        <h2 class="sg-sub">ProjectLockup component</h2>
+        <p class="body-sm sg-note">
+          Definitive Emphasis pattern applied to the project name.
+          "Project " in Newsreader regular, "Bifrost" in bold italic, terminal period.
+          Fenja wordmark below at reduced opacity. Three sizes × two alignments.
+        </p>
+        <div class="lockup-demo-grid">
+          <div class="lockup-demo-cell">
+            <span class="label-sm sg-demo-label">hero · left</span>
+            <ProjectLockup size="hero" alignment="left" />
+          </div>
+          <div class="lockup-demo-cell">
+            <span class="label-sm sg-demo-label">lg · left</span>
+            <ProjectLockup size="lg" alignment="left" />
+          </div>
+          <div class="lockup-demo-cell">
+            <span class="label-sm sg-demo-label">md · left</span>
+            <ProjectLockup size="md" alignment="left" />
+          </div>
+          <div class="lockup-demo-cell lockup-demo-cell--centered">
+            <span class="label-sm sg-demo-label">hero · center</span>
+            <ProjectLockup size="hero" alignment="center" />
+          </div>
+          <div class="lockup-demo-cell">
+            <span class="label-sm sg-demo-label">md · left · no wordmark</span>
+            <ProjectLockup size="md" alignment="left" showWordmark={false} />
+          </div>
+        </div>
       </div>
     </section>
 
@@ -730,6 +760,31 @@ const lucideIcons = [
     display: block;
   }
 
+  /* ── ProjectLockup demo ─────────────────────────────────────── */
+  .lockup-demo-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    margin-top: var(--space-6);
+  }
+  .lockup-demo-cell {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-8);
+    background: var(--background);
+    border-radius: var(--radius-md);
+  }
+  .lockup-demo-cell--centered {
+    background: var(--surface-container-low);
+    align-items: center;
+  }
+  .sg-demo-label {
+    color: var(--on-surface-muted);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+  }
+
   /* ── 02 Colour ───────────────────────────────────────────────── */
   .swatch-row {
     display: grid;