import brand images

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>