feat: first approach from tanel

components/design-system/color-swatches.tsx

@@ -0,0 +1,102 @@
+export function ColorSwatches() {
+  const primaryColors = [
+    { name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card" },
+    { name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true },
+    { name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true },
+  ]
+
+  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 },
+  ]
+
+  const semanticTokens = [
+    { name: "Background", cssVar: "bg-background", className: "bg-background" },
+    { name: "Foreground", cssVar: "bg-foreground", className: "bg-foreground", dark: true },
+    { name: "Card", cssVar: "bg-card", className: "bg-card" },
+    { name: "Muted", cssVar: "bg-muted", className: "bg-muted" },
+    { name: "Secondary", cssVar: "bg-secondary", className: "bg-secondary" },
+    { name: "Primary", cssVar: "bg-primary", className: "bg-primary", dark: true },
+    { name: "Accent", cssVar: "bg-accent", className: "bg-accent" },
+    { name: "Border", cssVar: "bg-border", className: "bg-border" },
+  ]
+
+  return (
+    <div className="space-y-10">
+      {/* Primary Scheme */}
+      <div>
+        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+          Primary Scheme
+        </h4>
+        <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">
+              <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>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Grey Scale */}
+      <div>
+        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+          Grey Scale
+        </h4>
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
+          {greyScale.map((color) => (
+            <div key={color.name} className="border border-border rounded-md overflow-hidden">
+              <div
+                className="h-16 flex items-end p-2"
+                style={{ backgroundColor: color.hex }}
+              >
+                <span className={`font-mono text-xs ${color.dark ? "text-white" : "text-foreground"}`}>
+                  {color.hex}
+                </span>
+              </div>
+              <div className="p-2 bg-card">
+                <p className="font-sans text-xs font-medium truncate">{color.name}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Semantic Tokens */}
+      <div>
+        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+          Semantic Tokens
+        </h4>
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
+          {semanticTokens.map((token) => (
+            <div key={token.name} className="border border-border rounded-md overflow-hidden">
+              <div className={`h-16 flex items-end p-2 ${token.className}`}>
+                <span className={`font-sans text-xs ${token.dark ? "text-white" : "text-foreground"}`}>
+                  {token.name}
+                </span>
+              </div>
+              <div className="p-2 bg-card">
+                <p className="font-mono text-xs text-muted-foreground truncate">{token.cssVar}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

components/design-system/component-matrix.tsx

@@ -0,0 +1,488 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Label } from "@/components/ui/label"
+import { 
+  Plus, 
+  Trash2, 
+  Settings, 
+  Mail, 
+  Send, 
+  Download,
+  Search,
+  X,
+  Check,
+  ChevronRight,
+  Edit,
+  Copy
+} from "lucide-react"
+
+export function ComponentMatrix() {
+  return (
+    <TooltipProvider>
+      <div className="space-y-10">
+        {/* 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="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>
+                <Button>Primary</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Secondary</p>
+                <Button variant="secondary">Secondary</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Outline</p>
+                <Button variant="outline">Outline</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Ghost</p>
+                <Button variant="ghost">Ghost</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Link</p>
+                <Button variant="link">Link</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Destructive</p>
+                <Button variant="destructive">Destructive</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons - Sizes */}
+        <div>
+          <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="flex flex-wrap items-end gap-4">
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Small</p>
+                <Button size="sm">Small</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Default</p>
+                <Button size="default">Default</Button>
+              </div>
+              <div className="space-y-2">
+                <p className="font-sans text-xs text-muted-foreground">Large</p>
+                <Button size="lg">Large</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons - States */}
+        <div>
+          <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="space-y-6">
+              {/* Primary States */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Primary</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button>Default</Button>
+                  <Button className="bg-primary/90">Hover</Button>
+                  <Button className="bg-primary/80">Active</Button>
+                  <Button className="ring-2 ring-ring ring-offset-2">Focus</Button>
+                  <Button disabled>Disabled</Button>
+                </div>
+              </div>
+              {/* Outline States */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Outline</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button variant="outline">Default</Button>
+                  <Button variant="outline" className="bg-accent/10">Hover</Button>
+                  <Button variant="outline" className="ring-2 ring-ring ring-offset-2 bg-transparent">Focus</Button>
+                  <Button variant="outline" disabled>Disabled</Button>
+                </div>
+              </div>
+              {/* Destructive States */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Destructive</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button variant="destructive">Default</Button>
+                  <Button variant="destructive" className="bg-destructive/90">Hover</Button>
+                  <Button variant="destructive" className="ring-2 ring-destructive/50 ring-offset-2">Focus</Button>
+                  <Button variant="destructive" disabled>Disabled</Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Icon Buttons */}
+        <div>
+          <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="space-y-6">
+              {/* By Variant */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Variants</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button size="icon"><Plus className="h-4 w-4" /></Button>
+                  <Button variant="secondary" size="icon"><Settings className="h-4 w-4" /></Button>
+                  <Button variant="outline" size="icon"><Search className="h-4 w-4" /></Button>
+                  <Button variant="ghost" size="icon"><X className="h-4 w-4" /></Button>
+                  <Button variant="destructive" size="icon"><Trash2 className="h-4 w-4" /></Button>
+                </div>
+              </div>
+              {/* By Size */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Sizes</p>
+                <div className="flex flex-wrap items-center gap-3">
+                  <Button size="icon-sm" variant="outline"><Plus className="h-4 w-4" /></Button>
+                  <Button size="icon" variant="outline"><Plus className="h-4 w-4" /></Button>
+                  <Button size="icon-lg" variant="outline"><Plus className="h-4 w-4" /></Button>
+                </div>
+              </div>
+              {/* Disabled */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Disabled</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button size="icon" disabled><Plus className="h-4 w-4" /></Button>
+                  <Button variant="outline" size="icon" disabled><Settings className="h-4 w-4" /></Button>
+                  <Button variant="ghost" size="icon" disabled><X className="h-4 w-4" /></Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons with Icons */}
+        <div>
+          <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="space-y-6">
+              {/* Leading Icons */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Leading Icon</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button><Plus className="h-4 w-4" /> Create New</Button>
+                  <Button variant="secondary"><Download className="h-4 w-4" /> Download</Button>
+                  <Button variant="outline"><Mail className="h-4 w-4" /> Send Email</Button>
+                  <Button variant="destructive"><Trash2 className="h-4 w-4" /> Delete</Button>
+                </div>
+              </div>
+              {/* Trailing Icons */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Trailing Icon</p>
+                <div className="flex flex-wrap gap-3">
+                  <Button>Continue <ChevronRight className="h-4 w-4" /></Button>
+                  <Button variant="outline">Next Step <ChevronRight className="h-4 w-4" /></Button>
+                  <Button variant="secondary">Submit <Send className="h-4 w-4" /></Button>
+                </div>
+              </div>
+              {/* Size Variations */}
+              <div>
+                <p className="font-sans text-xs text-muted-foreground mb-3">Sizes with Icons</p>
+                <div className="flex flex-wrap items-center gap-3">
+                  <Button size="sm"><Plus className="h-3.5 w-3.5" /> Small</Button>
+                  <Button size="default"><Plus className="h-4 w-4" /> Default</Button>
+                  <Button size="lg"><Plus className="h-5 w-5" /> Large</Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Badges - Core Variants */}
+        <div>
+          <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="flex flex-wrap gap-3">
+              <Badge>Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="muted">Muted</Badge>
+              <Badge variant="outline">Outline</Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Badges - Tag & Value */}
+        <div>
+          <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="flex flex-wrap gap-3">
+              <Badge variant="tag">Tag</Badge>
+              <Badge variant="tag">Category</Badge>
+              <Badge variant="value">42</Badge>
+              <Badge variant="value">$1,234</Badge>
+              <Badge variant="value">100%</Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Badges - Semantic */}
+        <div>
+          <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="flex flex-wrap gap-3">
+              <Badge variant="success">Success</Badge>
+              <Badge variant="warning">Warning</Badge>
+              <Badge variant="destructive">Danger</Badge>
+              <Badge variant="info">Info</Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Badges - Channel Pills */}
+        <div>
+          <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="flex flex-wrap gap-3">
+              <Badge variant="whatsapp">WhatsApp</Badge>
+              <Badge variant="email">Email</Badge>
+              <Badge variant="telegram">Telegram</Badge>
+              <Badge variant="zulip">Zulip</Badge>
+              <Badge variant="platform">Platform</Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Badges on Muted Surface */}
+        <div>
+          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+            Badges — On Muted Surface
+          </h4>
+          <div className="border border-border rounded-md p-6 bg-muted">
+            <div className="flex flex-wrap gap-3">
+              <Badge>Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="outline">Outline</Badge>
+              <Badge variant="tag">Tag</Badge>
+              <Badge variant="success">Success</Badge>
+              <Badge variant="info">Info</Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Inputs */}
+        <div>
+          <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="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>
+                <Input placeholder="Enter your email" />
+              </div>
+              <div className="space-y-3">
+                <p className="font-sans text-xs text-muted-foreground">With Value</p>
+                <Input defaultValue="user@greyhaven.ai" />
+              </div>
+              <div className="space-y-3">
+                <p className="font-sans text-xs text-muted-foreground">Disabled</p>
+                <Input placeholder="Disabled input" disabled />
+              </div>
+            </div>
+            
+            <div className="mt-6 pt-6 border-t border-border">
+              <p className="font-sans text-xs text-muted-foreground mb-3">Textarea</p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Textarea placeholder="Describe your project requirements..." />
+                <Textarea placeholder="Disabled textarea" disabled />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Select */}
+        <div>
+          <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="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>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select an option" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="option1">Option 1</SelectItem>
+                    <SelectItem value="option2">Option 2</SelectItem>
+                    <SelectItem value="option3">Option 3</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-3">
+                <p className="font-sans text-xs text-muted-foreground">With Value</p>
+                <Select defaultValue="option2">
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="option1">Option 1</SelectItem>
+                    <SelectItem value="option2">Option 2</SelectItem>
+                    <SelectItem value="option3">Option 3</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-3">
+                <p className="font-sans text-xs text-muted-foreground">Disabled</p>
+                <Select disabled>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Disabled" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="option1">Option 1</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Checkboxes & Switches */}
+        <div>
+          <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="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>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Checkbox id="check1" />
+                    <Label htmlFor="check1" className="font-sans text-sm">Unchecked</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox id="check2" defaultChecked />
+                    <Label htmlFor="check2" className="font-sans text-sm">Checked</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox id="check3" disabled />
+                    <Label htmlFor="check3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="space-y-4">
+                <p className="font-sans text-xs text-muted-foreground">Switches</p>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Switch id="switch1" />
+                    <Label htmlFor="switch1" className="font-sans text-sm">Off</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Switch id="switch2" defaultChecked />
+                    <Label htmlFor="switch2" className="font-sans text-sm">On</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Switch id="switch3" disabled />
+                    <Label htmlFor="switch3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div>
+          <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">
+            <Tabs defaultValue="overview" className="w-full">
+              <TabsList>
+                <TabsTrigger value="overview">Overview</TabsTrigger>
+                <TabsTrigger value="analytics">Analytics</TabsTrigger>
+                <TabsTrigger value="settings">Settings</TabsTrigger>
+                <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
+              </TabsList>
+              <TabsContent value="overview" className="mt-4">
+                <p className="font-serif text-muted-foreground">
+                  Overview content. This tab demonstrates the default active state.
+                </p>
+              </TabsContent>
+              <TabsContent value="analytics" className="mt-4">
+                <p className="font-serif text-muted-foreground">
+                  Analytics content. System metrics and performance data.
+                </p>
+              </TabsContent>
+              <TabsContent value="settings" className="mt-4">
+                <p className="font-serif text-muted-foreground">
+                  Settings content. Configuration options for your deployment.
+                </p>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+
+        {/* Tooltips */}
+        <div>
+          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+            Tooltips
+          </h4>
+          <div className="border border-border rounded-md p-6 bg-card">
+            <div className="flex gap-4">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="outline">Hover me</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-sans text-sm">This is a tooltip</p>
+                </TooltipContent>
+              </Tooltip>
+              
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="secondary">More info</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-sans text-sm">Additional information appears here</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}

components/design-system/sample-form.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export function SampleForm() {
+  const [agreed, setAgreed] = useState(false)
+
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle className="font-serif text-xl">Request a Consultation</CardTitle>
+        <CardDescription className="font-sans">
+          Tell us about your operational requirements. We&apos;ll assess whether a contained 
+          AI system can help.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
+          {/* Name */}
+          <div className="space-y-2">
+            <Label htmlFor="name" className="font-sans text-sm font-medium">
+              Full Name
+            </Label>
+            <Input id="name" placeholder="Enter your name" />
+          </div>
+
+          {/* Email */}
+          <div className="space-y-2">
+            <Label htmlFor="email" className="font-sans text-sm font-medium">
+              Work Email
+            </Label>
+            <Input id="email" type="email" placeholder="you@company.com" />
+            <p className="font-sans text-xs text-muted-foreground">
+              We&apos;ll use this to schedule a call.
+            </p>
+          </div>
+
+          {/* Organization */}
+          <div className="space-y-2">
+            <Label htmlFor="organization" className="font-sans text-sm font-medium">
+              Organization
+            </Label>
+            <Input id="organization" placeholder="Company or team name" />
+          </div>
+
+          {/* Industry */}
+          <div className="space-y-2">
+            <Label htmlFor="industry" className="font-sans text-sm font-medium">
+              Industry
+            </Label>
+            <Select>
+              <SelectTrigger id="industry">
+                <SelectValue placeholder="Select your industry" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="finance">Finance & Banking</SelectItem>
+                <SelectItem value="healthcare">Healthcare</SelectItem>
+                <SelectItem value="manufacturing">Manufacturing</SelectItem>
+                <SelectItem value="logistics">Logistics & Supply Chain</SelectItem>
+                <SelectItem value="government">Government</SelectItem>
+                <SelectItem value="other">Other</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Project Description */}
+          <div className="space-y-2">
+            <Label htmlFor="description" className="font-sans text-sm font-medium">
+              Project Description
+            </Label>
+            <Textarea 
+              id="description" 
+              placeholder="Describe the process or workflow you want to improve. What are the current pain points?"
+              className="min-h-[120px]"
+            />
+            <p className="font-sans text-xs text-muted-foreground">
+              Be specific about constraints: data sensitivity, existing systems, compliance requirements.
+            </p>
+          </div>
+
+          {/* Agreement */}
+          <div className="flex items-start gap-3">
+            <Checkbox 
+              id="agreement" 
+              checked={agreed}
+              onCheckedChange={(checked) => setAgreed(checked as boolean)}
+            />
+            <div className="space-y-1">
+              <Label htmlFor="agreement" className="font-sans text-sm leading-relaxed">
+                I understand that Greyhaven builds custom systems. Initial consultations 
+                focus on technical feasibility.
+              </Label>
+            </div>
+          </div>
+
+          {/* Submit */}
+          <div className="flex gap-3">
+            <Button type="submit" disabled={!agreed}>
+              Submit Request
+            </Button>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

components/design-system/settings-card.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Bell, Shield, Eye, Database } from "lucide-react"
+
+export function SettingsCard() {
+  const [notifications, setNotifications] = useState(true)
+  const [auditLogs, setAuditLogs] = useState(true)
+  const [dataRetention, setDataRetention] = useState(false)
+
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle className="font-serif text-xl">System Configuration</CardTitle>
+        <CardDescription className="font-sans">
+          Configure your contained AI deployment. All settings remain within your environment.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Notifications */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Bell className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="notifications" className="font-sans text-sm font-medium">
+                System Notifications
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Receive alerts for system events and anomalies
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="notifications" 
+            checked={notifications}
+            onCheckedChange={setNotifications}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Audit Logs */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Eye className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="audit-logs" className="font-sans text-sm font-medium">
+                Audit Logging
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Record all system actions for compliance
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="audit-logs" 
+            checked={auditLogs}
+            onCheckedChange={setAuditLogs}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Data Retention */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Database className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="data-retention" className="font-sans text-sm font-medium">
+                Extended Retention
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Keep processed data beyond 30 days
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="data-retention" 
+            checked={dataRetention}
+            onCheckedChange={setDataRetention}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Security Level */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Shield className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="security-level" className="font-sans text-sm font-medium">
+                Security Profile
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Isolation and access control level
+              </p>
+            </div>
+          </div>
+          <Select defaultValue="strict">
+            <SelectTrigger id="security-level" className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="standard">Standard</SelectItem>
+              <SelectItem value="strict">Strict</SelectItem>
+              <SelectItem value="airgapped">Air-gapped</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Separator />
+
+        {/* Actions */}
+        <div className="flex gap-3 pt-2">
+          <Button>Save Changes</Button>
+          <Button variant="outline">Reset to Defaults</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

components/design-system/typography-samples.tsx

@@ -0,0 +1,124 @@
+export function TypographySamples() {
+  return (
+    <div className="space-y-10">
+      {/* Serif - Source Serif Pro */}
+      <div className="border border-border rounded-md p-6 bg-card">
+        <div className="flex items-center gap-3 mb-6">
+          <span className="font-sans text-xs font-semibold uppercase tracking-wide text-primary bg-primary/10 px-2 py-1 rounded">
+            Primary
+          </span>
+          <h4 className="font-sans text-sm font-semibold text-muted-foreground">
+            Source Serif Pro — Reading & Explanation
+          </h4>
+        </div>
+        
+        <div className="space-y-6">
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Display / H1</p>
+            <p className="font-serif text-4xl font-semibold tracking-tight">
+              Local-first AI systems shaped by real work
+            </p>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H2</p>
+            <p className="font-serif text-2xl font-semibold tracking-tight">
+              Built where work happens. Contained end to end.
+            </p>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H3</p>
+            <p className="font-serif text-xl font-medium">
+              Systems run inside the perimeter. Nothing leaks.
+            </p>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Body</p>
+            <p className="font-serif text-base leading-relaxed text-muted-foreground max-w-2xl">
+              Real work is messy, distributed, and embedded in internal systems. Cloud AI often 
+              cannot operate there. Useful AI runs inside the environment and supports human 
+              decision-making — not abstract it away. We sit with the operators, map the steps, 
+              and build a system that mirrors what actually happens.
+            </p>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Small / Caption</p>
+            <p className="font-serif text-sm text-muted-foreground">
+              Powered by Monadical&apos;s internal, open-source stack hardened over eight years.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Sans - Aspekta */}
+      <div className="border border-border rounded-md p-6 bg-card">
+        <div className="flex items-center gap-3 mb-6">
+          <span className="font-sans text-xs font-semibold uppercase tracking-wide text-muted-foreground bg-muted px-2 py-1 rounded">
+            Secondary
+          </span>
+          <h4 className="font-sans text-sm font-semibold text-muted-foreground">
+            Aspekta — UI, Navigation & Labels
+          </h4>
+        </div>
+        
+        <div className="space-y-6">
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Navigation</p>
+            <div className="flex gap-6">
+              <span className="font-sans text-sm font-medium">Overview</span>
+              <span className="font-sans text-sm font-medium text-primary">Documentation</span>
+              <span className="font-sans text-sm font-medium">Support</span>
+              <span className="font-sans text-sm font-medium">Contact</span>
+            </div>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Button Text</p>
+            <div className="flex gap-4">
+              <span className="font-sans text-sm font-semibold">Get Started</span>
+              <span className="font-sans text-sm font-medium">Learn More</span>
+              <span className="font-sans text-xs font-semibold uppercase tracking-wide">View All</span>
+            </div>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Labels & Form Elements</p>
+            <div className="flex flex-wrap gap-4">
+              <span className="font-sans text-sm font-medium">Email Address</span>
+              <span className="font-sans text-xs text-muted-foreground">Optional</span>
+              <span className="font-sans text-xs font-medium text-destructive">Required field</span>
+            </div>
+          </div>
+          
+          <div>
+            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Status & Metadata</p>
+            <div className="flex flex-wrap gap-4">
+              <span className="font-sans text-xs font-medium bg-primary/10 text-primary px-2 py-0.5 rounded">Active</span>
+              <span className="font-sans text-xs font-medium bg-muted text-muted-foreground px-2 py-0.5 rounded">Pending</span>
+              <span className="font-sans text-xs text-muted-foreground">Last updated: 2 hours ago</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Font Stack Reference */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="border border-border rounded-md p-4 bg-card">
+          <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Serif Stack</p>
+          <p className="font-mono text-xs text-muted-foreground">
+            &apos;Source Serif Pro&apos;, &apos;Source Serif 4&apos;, Georgia, serif
+          </p>
+        </div>
+        <div className="border border-border rounded-md p-4 bg-card">
+          <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Sans Stack</p>
+          <p className="font-mono text-xs text-muted-foreground">
+            &apos;Aspekta&apos;, ui-sans-serif, system-ui, sans-serif
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}