diff --git a/design-system/server-temp.go b/design-system/server-temp.go
new file mode 100644
index 0000000..8f4bfbd
--- /dev/null
+++ b/design-system/server-temp.go
@@ -0,0 +1,51 @@
+package main
+
+import (
+	"context"
+	"log"
+	"net/http"
+	"time"
+)
+
+func main() {
+	fs := http.FileServer(http.Dir("."))
+	
+	// Wrap to add no-cache headers
+	handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+		w.Header().Set("Pragma", "no-cache")
+		w.Header().Set("Expires", "0")
+		fs.ServeHTTP(w, r)
+	})
+	
+	// Auto-shutdown after 60 minutes
+	ctx, cancel := context.WithTimeout(context.Background(), 60*time.Minute)
+	defer cancel()
+	
+	server := &http.Server{
+		Addr:    "0.0.0.0:8888",
+		Handler: handler,
+	}
+	
+	log.Println("Serving on http://192.168.1.16:8888")
+	log.Println("Auto-shutdown in 60 minutes")
+	
+	// Run server in goroutine
+	go func() {
+		if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
+			log.Fatalf("Server error: %v", err)
+		}
+	}()
+	
+	// Wait for shutdown signal
+	<-ctx.Done()
+	log.Println("Shutting down...")
+	
+	shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer shutdownCancel()
+	
+	if err := server.Shutdown(shutdownCtx); err != nil {
+		log.Printf("Shutdown error: %v", err)
+	}
+	log.Println("Server stopped")
+}
\ No newline at end of file
diff --git a/design-system/styleguide.html b/design-system/styleguide.html
index 5b210e8..566c997 100644
--- a/design-system/styleguide.html
+++ b/design-system/styleguide.html
@@ -43,6 +43,11 @@
       /* Typography */
       --font-family: "Figtree", system-ui, sans-serif;
       
+      /* Wordmark — FINAL: Figtree 700, 0.25em */
+      --wordmark-font: "Figtree", system-ui, sans-serif;
+      --wordmark-weight: 700;
+      --wordmark-spacing: 0.25em;
+      
       /* Spacing */
       --space-1: 4px;
       --space-2: 8px;
@@ -87,13 +92,20 @@
     .text-secondary { color: var(--text-secondary); }
     .text-tertiary { color: var(--text-tertiary); }
     
-    .wordmark { font-size: 18px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
-    .wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
+    .wordmark { font-size: 18px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
+    .wordmark-lg { font-size: 32px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }
 
     /* Brand Block */
     .brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
     .black-square { width: 64px; height: 64px; background: var(--brand-black); }
 
+    /* Logo Lockup — The Trinity */
+    .logo-lockup { display: flex; gap: 20px; align-items: center; }
+    .logo-lockup-square { width: 72px; height: 72px; background: var(--brand-black); flex-shrink: 0; }
+    .logo-lockup-text { display: flex; flex-direction: column; gap: 4px; }
+    .logo-lockup-wordmark { font-family: var(--font-family); font-size: 28px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
+    .logo-lockup-tagline { font-size: 14px; color: var(--text-secondary); letter-spacing: 0.02em; }
+
     /* Colors */
     .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
     .color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
@@ -126,6 +138,9 @@
     .stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
     .stat-label { font-size: 14px; color: var(--text-secondary); }
 
+    /* Section Title */
+    .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
+
     /* Buttons */
     .btn {
       display: inline-flex; align-items: center; justify-content: center; gap: 8px;
@@ -193,10 +208,6 @@
 
     /* Code */
     .code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
-    code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
-
-    /* Section Title */
-    .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
   </style>
 </head>
 <body>
@@ -207,17 +218,32 @@
       <div class="brand-block">
         <div class="black-square"></div>
         <div>
-          <h1>Clavitor</h1>
+          <h1 style="font-size:40px;">Clavitor</h1>
           <p class="text-secondary">Design System v0.1 — Violet + Figtree + JetBrains Mono</p>
         </div>
       </div>
-      <p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
+      <p class="wordmark-lg" style="margin-top: 24px;">CLAVITOR</p>
       <p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
         A black box vault for AI infrastructure. Tokens, components, layouts.
         Based on vault1984.com patterns.
       </p>
     </div>
 
+    <!-- Logo Lockup — The Trinity -->
+    <div class="section">
+      <div class="section-title">Logo Lockup (Black Square + Wordmark + Tagline)</div>
+      <div class="logo-lockup">
+        <div class="logo-lockup-square"></div>
+        <div class="logo-lockup-text">
+          <div class="logo-lockup-wordmark">CLAVITOR</div>
+          <div class="logo-lockup-tagline">Black-box credential issuance for AI infrastructure</div>
+        </div>
+      </div>
+      <p class="text-tertiary text-xs" style="margin-top: 16px;">
+        <strong>Spec:</strong> 72px black square, Figtree 700, 0.25em spacing, aligned left edge to left edge
+      </p>
+    </div>
+
     <!-- Brand Colors -->
     <div class="section">
       <div class="section-title">Brand Colors</div>
@@ -339,4 +365,4 @@
 
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/design-system/wordmark-test.html b/design-system/wordmark-test.html
new file mode 100644
index 0000000..55fa416
--- /dev/null
+++ b/design-system/wordmark-test.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CLAVITOR Wordmark — Interactive Tester</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..800&family=Plus+Jakarta+Sans:wght@300..800&family=Inter:wght@300..800&family=Sora:wght@300..800&family=Syne:wght@400..800&family=Cormorant+Garamond:wght@300..700&family=Unbounded:wght@300..900&family=DM+Sans:wght@300..800&family=Outfit:wght@300..800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --brand-black: #0A0A0A;
+      --brand-accent: #7C3AED;
+      --bg-primary: #FFFFFF;
+      --bg-secondary: #F5F5F5;
+      --text-primary: #171717;
+      --text-secondary: #525252;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html { font-family: system-ui, sans-serif; background: var(--bg-primary); color: var(--text-primary); padding: 40px; }
+    h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
+    .subtitle { color: var(--text-secondary); margin-bottom: 24px; }
+    .controls { background: var(--bg-secondary); padding: 20px; border-radius: 12px; margin-bottom: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
+    .control-group { display: flex; flex-direction: column; gap: 6px; }
+    label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); }
+    select, input[type="text"] { padding: 10px 14px; font-size: 16px; border-radius: 8px; border: 2px solid #E5E5E5; background: white; min-width: 200px; }
+    select:focus, input:focus { outline: none; border-color: var(--brand-accent); }
+    .weight-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin: 40px 0 20px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-accent); }
+    .spacing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
+    .wordmark-box { text-align: center; padding: 28px 16px; background: var(--bg-secondary); border-radius: 12px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
+    .wordmark { font-size: 72px; white-space: nowrap; margin-bottom: 12px; line-height: 1.1; }
+    .spacing-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
+    .preview-size { display: flex; gap: 12px; align-items: center; margin-left: auto; }
+    .size-value { font-weight: 600; color: var(--brand-accent); min-width: 50px; }
+    input[type="range"] { width: 140px; }
+    
+    @media (max-width: 1000px) {
+      .spacing-grid { grid-template-columns: repeat(3, 1fr); }
+      .wordmark { font-size: 48px; }
+    }
+    @media (max-width: 600px) {
+      .spacing-grid { grid-template-columns: repeat(2, 1fr); }
+      .wordmark { font-size: 36px; }
+      .preview-size { width: 100%; margin-left: 0; margin-top: 10px; }
+    }
+  </style>
+</head>
+<body>
+  <h1>CLAVITOR Wordmark Tester</h1>
+  <p class="subtitle">Pick a font. See all weight + spacing combinations.</p>
+
+  <div class="controls">
+    <div class="control-group">
+      <label>Font Family</label>
+      <select id="fontSelect">
+        <option value="Figtree">Figtree (Sans)</option>
+        <option value="Inter">Inter (Sans)</option>
+        <option value="Plus Jakarta Sans">Plus Jakarta Sans (Sans)</option>
+        <option value="Sora">Sora — Geometric</option>
+        <option value="Syne">Syne — Wide Geometric</option>
+        <option value="Unbounded">Unbounded — Wide Display</option>
+        <option value="DM Sans">DM Sans — Clean Wide</option>
+        <option value="Outfit">Outfit — Geometric Modern</option>
+        <option value="Cormorant Garamond">Cormorant Garamond — Serif</option>
+        <option value="Satoshi">Satoshi (fallback)</option>
+      </select>
+    </div>
+    
+    <div class="control-group">
+      <label>Preview Text</label>
+      <input type="text" id="previewText" value="Clavitor" maxlength="20">
+    </div>
+    
+    <div class="control-group preview-size">
+      <label>Size</label>
+      <input type="range" id="sizeSlider" min="24" max="120" value="72">
+      <span class="size-value" id="sizeValue">72px</span>
+    </div>
+  </div>
+
+  <div id="results"></div>
+
+  <script>
+    const fonts = {
+      'Figtree': { family: "'Figtree', sans-serif", weights: [100, 200, 300, 400, 500, 600, 700, 800] },
+      'Inter': { family: "'Inter', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
+      'Plus Jakarta Sans': { family: "'Plus Jakarta Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
+      'Sora': { family: "'Sora', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
+      'Syne': { family: "'Syne', sans-serif", weights: [400, 500, 600, 700, 800] },
+      'Unbounded': { family: "'Unbounded', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800, 900] },
+      'DM Sans': { family: "'DM Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
+      'Outfit': { family: "'Outfit', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
+      'Cormorant Garamond': { family: "'Cormorant Garamond', serif", weights: [300, 400, 500, 600, 700] },
+      'Satoshi': { family: "'Satoshi', 'Plus Jakarta Sans', sans-serif", weights: [300, 400, 500, 600, 700, 800] }
+    };
+    
+    const spacings = [
+      { val: 0, label: '0em (tight)' },
+      { val: 0.125, label: '0.125em' },
+      { val: 0.25, label: '0.25em' },
+      { val: 0.375, label: '0.375em' },
+      { val: 0.5, label: '0.5em (wide)' }
+    ];
+
+    function render() {
+      const fontName = document.getElementById('fontSelect').value;
+      const text = document.getElementById('previewText').value || 'Clavitor';
+      const size = document.getElementById('sizeSlider').value;
+      const font = fonts[fontName];
+      
+      let html = '';
+      
+      font.weights.forEach(weight => {
+        html += `<div class="weight-label">Weight ${weight}</div>`;
+        html += `<div class="spacing-grid">`;
+        
+        spacings.forEach(sp => {
+          html += `
+            <div class="wordmark-box">
+              <div class="wordmark" style="font-family: ${font.family}; font-weight: ${weight}; letter-spacing: ${sp.val}em; font-size: ${size}px;">
+                ${text}
+              </div>
+              <div class="spacing-label">${sp.label}</div>
+            </div>
+          `;
+        });
+        
+        html += `</div>`;
+      });
+      
+      document.getElementById('results').innerHTML = html;
+      document.getElementById('sizeValue').textContent = size + 'px';
+    }
+
+    document.getElementById('fontSelect').addEventListener('change', render);
+    document.getElementById('previewText').addEventListener('input', render);
+    document.getElementById('sizeSlider').addEventListener('input', render);
+    
+    render();
+  </script>
+</body>
+</html>