From c52195ef06e7638b9365303e18d4d7416bf35879 Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Sun, 22 Mar 2026 06:01:23 -0400
Subject: [PATCH] chore: auto-commit uncommitted changes

---
 design-system/styleguide.html                 | 24 ++++-----
 .../web/design-system/styleguide.html         | 53 +++++++++----------
 2 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/design-system/styleguide.html b/design-system/styleguide.html
index 2183bf1..a1f3696 100644
--- a/design-system/styleguide.html
+++ b/design-system/styleguide.html
@@ -17,9 +17,9 @@
     :root {
       /* Brand */
       --brand-black: #0A0A0A;
-      --brand-accent: #B45309;
-      --brand-accent-light: #D97706;
-      --brand-accent-dark: #92400E;
+      --brand-accent: #E11D48;
+      --brand-accent-light: #F43F5E;
+      --brand-accent-dark: #BE123C;
 
       /* Core Colors — Light Mode */
       --bg-primary: #FFFFFF;
@@ -41,7 +41,7 @@
       --error: #DC2626;
 
       /* Typography */
-      --font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
+      --font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
       
       /* Spacing (4px base) */
       --space-1: 4px;
@@ -80,24 +80,24 @@
     .flex-col { display: flex; flex-direction: column; gap: 12px; }
 
     /* --- Typography --- */
-    h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
-    h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
-    h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.019em; }
-    h4 { font-size: 20px; font-weight: 500; }
-    .text-sm { font-size: 14px; }
-    .text-xs { font-size: 12px; }
+    h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
+    h2 { font-size: 56px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
+    h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.019em; }
+    h4 { font-size: 28px; font-weight: 500; }
+    .text-sm { font-size: 16px; }
+    .text-xs { font-size: 14px; }
     .text-secondary { color: var(--text-secondary); }
     .text-tertiary { color: var(--text-tertiary); }
     
     /* Wordmark — spaced uppercase, infrastructure feel */
     .wordmark { 
-      font-size: 14px; 
+      font-size: 18px; 
       font-weight: 600; 
       letter-spacing: 0.4em; 
       text-transform: uppercase; 
     }
     .wordmark-lg {
-      font-size: 18px;
+      font-size: 32px;
       font-weight: 600;
       letter-spacing: 0.35em;
       text-transform: uppercase;
diff --git a/oss/app/cmd/clavitor/web/design-system/styleguide.html b/oss/app/cmd/clavitor/web/design-system/styleguide.html
index 2183bf1..c8d9393 100644
--- a/oss/app/cmd/clavitor/web/design-system/styleguide.html
+++ b/oss/app/cmd/clavitor/web/design-system/styleguide.html
@@ -88,20 +88,6 @@
     .text-xs { font-size: 12px; }
     .text-secondary { color: var(--text-secondary); }
     .text-tertiary { color: var(--text-tertiary); }
-    
-    /* Wordmark — spaced uppercase, infrastructure feel */
-    .wordmark { 
-      font-size: 14px; 
-      font-weight: 600; 
-      letter-spacing: 0.4em; 
-      text-transform: uppercase; 
-    }
-    .wordmark-lg {
-      font-size: 18px;
-      font-weight: 600;
-      letter-spacing: 0.35em;
-      text-transform: uppercase;
-    }
 
     /* --- Brand Block --- */
     .brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
@@ -216,8 +202,7 @@
           <p class="text-secondary">Design System v0.1</p>
         </div>
       </div>
-      <p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
-      <p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
+      <p class="text-secondary" style="max-width: 600px; margin-top: 24px; font-size: 18px;">
         A black box vault for AI infrastructure. One file. No dependencies. 
         Copy the CSS variables and classes you need.
       </p>
@@ -234,18 +219,28 @@
       </div>
     </div>
 
+    <!-- Core Colors -->
+    <div class="section">
+      <div class="section-title">Core Colors</div>
+      <div class="color-grid">
+        <div class="color-swatch"><div class="color-block" style="background: var(--bg-primary); border: 1px solid var(--border-default);"></div><div class="color-label"><code>--bg-primary</code><br>#FFFFFF</div></div>
+        <div class="color-swatch"><div class="color-block" style="background: var(--bg-secondary);"></div><div class="color-label"><code>--bg-secondary</code><br>#F5F5F5</div></div>
+        <div class="color-swatch"><div class="color-block" style="background: var(--text-primary);"></div><div class="color-label"><code>--text-primary</code><br>#171717</div></div>
+        <div class="color-swatch"><div class="color-block" style="background: var(--text-secondary);"></div><div class="color-label"><code>--text-secondary</code><br>#525252</div></div>
+      </div>
+    </div>
+
     <!-- Typography -->
     <div class="section">
       <div class="section-title">Typography — Plus Jakarta Sans</div>
       <div class="flex-col">
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">wordmark</span><span class="wordmark-lg">CLAVITOR</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">48px</span><span style="font-size:48px;font-weight:700;">Heading 48</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">36px</span><span style="font-size:36px;font-weight:600;">Heading 36</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">24px</span><span style="font-size:24px;font-weight:600;">Heading 24</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">18px</span><span style="font-size:18px;">Body large 18</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">16px</span><span style="font-size:16px;">Body 16 — The quick brown fox jumps</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">14px</span><span style="font-size:14px;">Small 14 — The quick brown fox jumps</span></div>
-        <div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">12px</span><span style="font-size:12px;">Tiny 12 — The quick brown fox</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">48px</span><span style="font-size:48px;font-weight:700;">Heading 48</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">36px</span><span style="font-size:36px;font-weight:600;">Heading 36</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">24px</span><span style="font-size:24px;font-weight:600;">Heading 24</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">18px</span><span style="font-size:18px;">Body large 18</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">16px</span><span style="font-size:16px;">Body 16 — The quick brown fox jumps</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">14px</span><span style="font-size:14px;">Small 14 — The quick brown fox jumps</span></div>
+        <div><span class="text-tertiary text-xs" style="display:inline-block;width:80px;">12px</span><span style="font-size:12px;">Tiny 12 — The quick brown fox</span></div>
       </div>
     </div>
 
@@ -384,11 +379,11 @@
     <div class="section">
       <div class="section-title">Code / Terminal</div>
       <div class="code-block">
-        <span style="color:var(--brand-accent);">$</span> clavitor search github<br>
-        <span style="color:#A3A3A3;">Found 3 credentials:</span><br>
-        <span style="color:#A3A3A3;">  • github-personal (SSH key)</span><br>
-        <span style="color:#A3A3A3;">  • github-work (Token)</span><br>
-        <span style="color:#A3A3A3;">  • github-actions (API key)</span>
+        <span class="prompt">$</span> clavitor search github<br>
+        <span class="output">Found 3 credentials:</span><br>
+        <span class="output">  • github-personal (SSH key)</span><br>
+        <span class="output">  • github-work (Token)</span><br>
+        <span class="output">  • github-actions (API key)</span>
       </div>
       <p style="margin-top:16px;">Inline code looks like <code>--brand-accent</code> or <code>get_credential()</code></p>
     </div>