import brand images

app/globals.css

@@ -145,10 +145,31 @@
 
 @theme inline {
   /* Typography - Using CSS variables from Next.js font loading */
-  --font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
-  --font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
+  --font-sans: 'Inter', 'Outfit', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Tiempos Text", var(--font-source-serif), 'Source Serif 4', serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   
+  /* Institutional Type Scale - Hard-Calibrated to Slide 22 (150px target) */
+  --type-display: clamp(4.5rem, 12vw, 9.375rem); /* 150px Display */
+  --type-h1:      clamp(3rem, 10vw, 6.25rem);      /* 100px Institutional Header */
+  --type-h2:      clamp(2.25rem, 6vw, 4.6875rem);  /* 75px Section Header */
+  --type-h3:      clamp(1.5rem, 4vw, 3.75rem);     /* 60px Subheader */
+  --type-h4:      clamp(1.25rem, 2vw, 2.25rem);    /* 36px Label */
+  --type-body-lg: 1.25rem;                         /* 20px - Secondary Body */
+  --type-body:    1.0625rem;                       /* 17px - Primary Body */
+  --type-caption: 0.8125rem;                       /* 13px - Meta */
+
+  /* Specified Tracking - Slide 22 (-2%) */
+  --type-tracking-heading: -0.02em; 
+  --type-tracking-display: -0.04em;
+  --type-tracking-body:    0.01em;
+
+  /* Institutional Spacing & Construction */
+  --border-institutional: 0.5px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
   /* Color mappings */
   --color-background: rgb(var(--background));
   --color-foreground: rgb(var(--foreground));
@@ -169,59 +190,13 @@
   --color-border: rgb(var(--border));
   --color-input: rgb(var(--input));
   --color-ring: rgb(var(--ring));
-  --color-chart-1: rgb(var(--chart-1));
-  --color-chart-2: rgb(var(--chart-2));
-  --color-chart-3: rgb(var(--chart-3));
-  --color-chart-4: rgb(var(--chart-4));
-  --color-chart-5: rgb(var(--chart-5));
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: rgb(var(--sidebar));
-  --color-sidebar-foreground: rgb(var(--sidebar-foreground));
-  --color-sidebar-primary: rgb(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: rgb(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
-  --color-sidebar-border: rgb(var(--sidebar-border));
-  --color-sidebar-ring: rgb(var(--sidebar-ring));
   
   /* Greyhaven-specific colors for direct use */
-  /* Orange: PANTONE 1595 C */
   --color-greyhaven-orange: #D95E2A;
   --color-greyhaven-offblack: #161614;
   --color-greyhaven-offwhite: #F9F9F7;
-  --color-greyhaven-grey1: #F0F0EC;
-  --color-greyhaven-grey2: #DDDDD7;
   --color-greyhaven-grey3: #C4C4BD;
-  --color-greyhaven-grey4: #A6A69F;
-  --color-greyhaven-grey5: #7F7F79;
   --color-greyhaven-grey7: #575753;
-  --color-greyhaven-grey8: #2F2F2C;
-
-  /* ==========================================================================
-     TYPE SCALE — Greyhaven Brand Guidelines v1.1
-     Source: brand guidelines deck, slide 22
-
-     Print pt values converted to px at 1pt = 1.333px.
-     Web scale is proportionally reduced from print scale.
-     Primary typeface: Source Serif Pro (Source Serif 4)
-     Secondary typeface: Aspekta (commercial) — Inter used as substitute
-     Logo typeface: Circular Medium (logo use only, not loaded here)
-     ========================================================================== */
-  --type-display:    clamp(3rem, 6vw, 7.5rem);   /* 136pt print reference */
-  --type-h1:         clamp(2.25rem, 4vw, 4.25rem); /* 68pt print reference */
-  --type-h2:         clamp(1.75rem, 3vw, 3rem);   /* 51pt print reference */
-  --type-h3:         clamp(1.375rem, 2vw, 2.25rem); /* 40pt print reference */
-  --type-h4:         clamp(1.125rem, 1.5vw, 2rem); /* 36pt print reference */
-  --type-body-lg:    1.125rem;                     /* 18px */
-  --type-body:       1rem;                         /* 16px */
-  --type-body-sm:    0.9375rem;                    /* 15px */
-  --type-caption:    0.75rem;                      /* 10pt / 12px */
-
-  --type-tracking-tight: -0.01em;  /* 1% — headings */
-  --type-tracking-body:   0.02em;  /* 2% — body text */
 }
 
 @layer base {
@@ -229,6 +204,19 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
+  }
+  
+  h1, h2, h3, h4 {
+    letter-spacing: var(--type-tracking-heading);
+    font-weight: 500; /* Tiempos Medium fallback */
+  }
+}
+
+@layer utilities {
+  .institutional-grid {
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-rule='evenodd' stroke='%23C4C4BD' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
+    background-size: 30px 52px;
   }
 }

components/design-system/color-swatches.tsx

@@ -1,18 +1,23 @@
 export function ColorSwatches() {
   const primaryColors = [
-    { name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
+    { name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215", token: "--secondary", pantone: null },
+    { name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", token: "--card (dark)", dark: true, pantone: null },
     { name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true, pantone: "PANTONE Black 6 C" },
+  ]
+
+  const accentColors = [
     { name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true, pantone: "PANTONE 1595 C" },
+    { name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
   ]
 
   const greyScale = [
-    { name: "Grey 1 (5%)", hex: "#F0F0EC", rgb: "240 240 236" },
-    { name: "Grey 2 (10%)", hex: "#DDDDD7", rgb: "221 221 215" },
-    { name: "Grey 3 (20%)", hex: "#C4C4BD", rgb: "196 196 189" },
-    { name: "Grey 4 (50%)", hex: "#A6A69F", rgb: "166 166 159" },
-    { name: "Grey 5 (60%)", hex: "#7F7F79", rgb: "127 127 121", dark: true },
-    { name: "Grey 7 (70%)", hex: "#575753", rgb: "87 87 83", dark: true },
-    { name: "Grey 8 (80%)", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
+    { name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215" },
+    { name: "Grey 2", hex: "#C4C4BD", rgb: "196 196 189" },
+    { name: "Grey 3", hex: "#A6A69F", rgb: "166 166 159" },
+    { name: "Grey 4", hex: "#7F7F79", rgb: "127 127 121", dark: true },
+    { name: "Grey 5", hex: "#575753", rgb: "87 87 83", dark: true },
+    { name: "Grey 6", hex: "#F0F0EC", rgb: "240 240 236" },
+    { name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
   ]
 
   const semanticTokens = [
@@ -30,9 +35,12 @@ export function ColorSwatches() {
     <div className="space-y-10">
       {/* Primary Scheme */}
       <div>
-        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
           Primary Scheme
         </h4>
+        <p className="font-sans text-xs text-muted-foreground mb-4">
+          Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color.
+        </p>
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           {primaryColors.map((color) => (
             <div key={color.name} className="border border-border rounded-md overflow-hidden">
@@ -56,6 +64,37 @@ export function ColorSwatches() {
         </div>
       </div>
 
+      {/* Accent */}
+      <div>
+        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
+          Accent
+        </h4>
+        <p className="font-sans text-xs text-muted-foreground mb-4">
+          Orange is the single accent — used sparingly to mark what&apos;s active or important.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {accentColors.map((color) => (
+            <div key={color.name} className="border border-border rounded-md overflow-hidden">
+              <div
+                className="h-24 flex items-end p-3"
+                style={{ backgroundColor: color.hex }}
+              >
+                <span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
+                  {color.hex}
+                </span>
+              </div>
+              <div className="p-3 bg-card">
+                <p className="font-sans text-sm font-medium">{color.name}</p>
+                <p className="font-mono text-xs text-muted-foreground">{color.token}</p>
+                {color.pantone && (
+                  <p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
       {/* Grey Scale */}
       <div>
         <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">

components/design-system/component-matrix.tsx

@@ -39,13 +39,125 @@ import {
 export function ComponentMatrix() {
   return (
     <TooltipProvider>
-      <div className="space-y-10">
+      <div className="space-y-16">
+        {/* Typography Audit - Slide 22 */}
+        <div>
+          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+            Typography Audit — Slide 22
+          </h4>
+          <div className="border-institutional border-border rounded-sm p-12 bg-brand-offwhite institutional-grid space-y-8">
+            <div className="space-y-1">
+              <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">Display Title (150px)</span>
+              <h1 className="text-display leading-none">Modular Systems</h1>
+            </div>
+            
+            <div className="space-y-1">
+              <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H1 Headline (100px)</span>
+              <h1 className="text-h1 leading-none">Sovereign AI Systems</h1>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8 border-t border-border">
+              <div className="space-y-2">
+                <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H2 Section (75px)</span>
+                <h2 className="text-h2 leading-tight">Institutional Architecture</h2>
+              </div>
+              <div className="space-y-2">
+                <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H3 Label (60px)</span>
+                <h3 className="text-h3 leading-tight">Functional Design</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Key Visual - Slide 26 */}
+        <div>
+          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+            Key Visual Composition — Slide 26
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-0 border-institutional border-border rounded-sm overflow-hidden min-h-[500px]">
+            <div className="p-12 bg-brand-offwhite flex flex-col justify-center space-y-6">
+              <h2 className="text-h1 leading-[0.9] max-w-md">Key visual: structures built from base geometry</h2>
+              <div className="space-y-4 text-muted-foreground max-w-sm">
+                <p className="text-body-lg font-serif">Greyhaven's key visual is constructed from a modular system derived from the same underlying geometry as the logo.</p>
+                <div className="pt-4 space-y-2">
+                  <div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
+                    <span className="w-1.5 h-1.5 bg-brand-orange"></span> Modular Stacking
+                  </div>
+                  <div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
+                    <span className="w-1.5 h-1.5 bg-brand-orange"></span> Hexagonal Logic
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-brand-black relative flex items-center justify-center p-12">
+              <div className="absolute inset-0 institutional-grid opacity-20"></div>
+              <img 
+                src="/brand/modular-geometry.png" 
+                alt="Modular Geometry" 
+                className="relative z-10 object-contain w-full h-full scale-110"
+              />
+              <div className="absolute left-6 top-6 bottom-6 w-[2px] bg-brand-orange/50"></div>
+            </div>
+          </div>
+        </div>
+
+        {/* Brand Identity Integration */}
+        <div>
+          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+            Institutional Brand Integration
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Modular Geometry Showcase */}
+            <div className="border-institutional border-border rounded-sm p-8 bg-card institutional-accent overflow-hidden relative min-h-[300px] flex flex-col justify-end">
+              <div className="absolute top-0 right-0 w-1/2 h-full opacity-40">
+                <img 
+                  src="/brand/modular-geometry.png" 
+                  alt="Modular Geometry" 
+                  className="object-contain object-right h-full w-full"
+                />
+              </div>
+              <div className="relative z-10 space-y-2">
+                <Badge className="bg-brand-orange text-white border-0">Modular System</Badge>
+                <h3 className="text-display text-4xl leading-none">Modular<br />Core</h3>
+                <p className="text-sm text-muted-foreground max-w-[200px]">
+                  Leveraging architectural logic through 3D modular geometry.
+                </p>
+              </div>
+            </div>
+
+            {/* Prompt A & B Treatments */}
+            <div className="space-y-6">
+              <div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-offwhite text-brand-offblack flex flex-col">
+                <div className="aspect-[4/3] flex items-center justify-center overflow-hidden grayscale hover:grayscale-0 transition-all duration-500">
+                  <img src="/brand/briefcase-lineart.png" alt="Lineart" className="w-full h-full object-cover" />
+                </div>
+                <div className="p-6">
+                  <h5 className="font-sans text-xs font-bold uppercase tracking-widest text-brand-orange mb-1">Prompt A</h5>
+                  <h4 className="text-body-lg font-serif mb-1">Institutional Lineart</h4>
+                  <p className="text-xs text-brand-grey7">High-contrast structural lineart defined for documentation visuals.</p>
+                </div>
+              </div>
+              
+              <div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-black text-brand-offwhite flex flex-col">
+                <div className="aspect-[4/3] flex items-center justify-center overflow-hidden">
+                  <img src="/brand/briefcase-silhouette.png" alt="Silhouette" className="w-full h-full object-cover" />
+                </div>
+                <div className="p-6">
+                  <h5 className="font-sans text-xs font-bold uppercase tracking-widest text-[#D95E2A] mb-1">Prompt B</h5>
+                  <h4 className="text-body-lg font-serif mb-1 italic">High-Contrast Silhouette</h4>
+                  <p className="text-xs text-zinc-400">Bold graphic silhouettes used for high-impact social and poster assets.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Buttons - All Variants */}
         <div>
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Buttons — Variants
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
               <div className="space-y-2">
                 <p className="font-sans text-xs text-muted-foreground">Primary</p>
@@ -80,7 +192,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Buttons — Sizes
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="flex flex-wrap items-end gap-4">
               <div className="space-y-2">
                 <p className="font-sans text-xs text-muted-foreground">Small</p>
@@ -103,7 +215,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Buttons — States
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="space-y-6">
               {/* Primary States */}
               <div>
@@ -145,7 +257,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Icon Buttons
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="space-y-6">
               {/* By Variant */}
               <div>
@@ -185,7 +297,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Buttons with Icons
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="space-y-6">
               {/* Leading Icons */}
               <div>
@@ -224,7 +336,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Badges — Core Variants
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="flex flex-wrap gap-3">
               <Badge>Default</Badge>
               <Badge variant="secondary">Secondary</Badge>
@@ -239,7 +351,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Badges — Tag & Value
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="flex flex-wrap gap-3">
               <Badge variant="tag">Tag</Badge>
               <Badge variant="tag">Category</Badge>
@@ -255,7 +367,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Badges — Semantic
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="flex flex-wrap gap-3">
               <Badge variant="success">Success</Badge>
               <Badge variant="warning">Warning</Badge>
@@ -270,7 +382,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Badges — Channel Pills
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="flex flex-wrap gap-3">
               <Badge variant="whatsapp">WhatsApp</Badge>
               <Badge variant="email">Email</Badge>
@@ -303,7 +415,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Inputs
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className="space-y-3">
                 <p className="font-sans text-xs text-muted-foreground">Default</p>
@@ -334,7 +446,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Select
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className="space-y-3">
                 <p className="font-sans text-xs text-muted-foreground">Default</p>
@@ -382,7 +494,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Checkboxes & Switches
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               <div className="space-y-4">
                 <p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
@@ -428,7 +540,7 @@ export function ComponentMatrix() {
           <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
             Tabs
           </h4>
-          <div className="border border-border rounded-md p-6 bg-card">
+          <div className="border-institutional border-border rounded-sm p-6 bg-card">
             <Tabs defaultValue="overview" className="w-full">
               <TabsList>
                 <TabsTrigger value="overview">Overview</TabsTrigger>