feat: complete light theme redesign for Observatory

Full visual redesign from dark developer theme to light financial theme.
Instrument Serif headings for institutional authority, DM Sans body,
Geist for data tables. Warm neutral palette (#FAFAF8 bg) with deepened
gold accent (#B08D3E). Tight 4/6/8px border radius. 6-item sidebar.
DESIGN.md created as source of truth.

22 files updated: Layout, all pages, all shared components, CSS, constants.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: dreynow

CLAUDE.md

@@ -96,3 +96,9 @@ python tests/interop/test_cross_sdk.py
 | kanoniv-agent-auth | crates.io | Check Cargo.toml |
 | kanoniv-auth | PyPI | Check sdks/kanoniv-auth/pyproject.toml |
 | @kanoniv/agent-auth | npm | Check js/package.json |
+
+## Design System
+Always read DESIGN.md before making any visual or UI decisions.
+All font choices, colors, spacing, and aesthetic direction are defined there.
+Do not deviate without explicit user approval.
+In QA mode, flag any code that doesn't match DESIGN.md.

DESIGN.md

@@ -0,0 +1,128 @@
+# Design System - Kanoniv Observatory
+
+## Product Context
+- **What this is:** AP authorization dashboard for AI agents - the proof and control layer between AI agents and QuickBooks
+- **Who it's for:** Accounting firms managing AI agents that process invoices, create bills, and handle payments
+- **Space/industry:** Fintech / AP automation / Agent authorization. Peers: Melio, Bill.com, Ramp, QuickBooks
+- **Project type:** Data-heavy web app / dashboard
+
+## Aesthetic Direction
+- **Direction:** Luxury/Refined
+- **Decoration level:** Intentional - subtle card elevation, thin borders, gold accent lines. Not cold-minimal, not noisy-expressive.
+- **Mood:** Institutional authority with warmth. The dashboard a CFO trusts with financial controls. Feels like wealth management, not a SaaS app.
+- **Reference sites:** Melio (meliopayments.com) for onboarding flow and layout patterns. Stripe Dashboard for data density.
+- **Key insight:** Every finance dashboard uses cool blue-grays and sans-serif because they copy each other. Observatory is an AUTHORIZATION layer - it should feel institutional and weighty, like a legal document. Warm neutrals + serif headings differentiate from the entire category.
+
+## Typography
+- **Display/Hero:** Instrument Serif - Modern serif with institutional authority. No finance dashboard uses serif headings. This communicates "this is the law, not a suggestion."
+- **Body/UI:** DM Sans - Clean geometric sans-serif. Professional, readable, neutral. Excellent weight range.
+- **Data/Tables:** Geist - Purpose-built for data display. Perfect tabular-nums. Clean at small sizes.
+- **Code:** Geist Mono - Monospace companion to Geist. For DIDs, tokens, scopes.
+- **Loading:** Google Fonts for Instrument Serif + DM Sans. Self-host Geist/Geist Mono via npm (geist package).
+- **Scale:**
+  - H1: 32px / Instrument Serif / line-height 1.2
+  - H2: 24px / Instrument Serif / line-height 1.2
+  - H3: 18px / Instrument Serif / line-height 1.3
+  - Body: 14px / DM Sans / line-height 1.6
+  - Small: 13px / DM Sans / line-height 1.5
+  - Caption: 12px / DM Sans / line-height 1.5
+  - Label: 10px / DM Sans / font-weight 700 / uppercase / letter-spacing 0.1em
+  - Data: 14px / Geist / tabular-nums
+  - Mono: 13px / Geist Mono
+
+## Color
+
+### Light Theme (Primary)
+- **Approach:** Restrained - one warm accent (gold) + warm neutrals. Color is rare and meaningful.
+- **Background:** #FAFAF8 - warm off-white (NOT pure white)
+- **Surface (cards):** #FFFFFF - pure white cards float on warm background
+- **Surface hover:** #F7F6F3 - subtle warm hover state
+- **Border:** #E8E5DE - warm border (NOT cool gray)
+- **Border subtle:** #F0EDE6 - lighter border for inner dividers
+- **Text primary:** #1A1814 - warm near-black (NOT pure black)
+- **Text secondary:** #6B6760 - warm medium gray
+- **Text hint:** #9C978E - warm light gray for labels and hints
+- **Gold accent:** #B08D3E - deepened from original #C5A572 for better contrast on white
+- **Gold hover:** #C5A572 - original gold, brighter on interaction
+- **Gold tint:** #FAF6ED - very light gold for selected states and backgrounds
+- **Gold border:** #E8DCC4 - light gold for accent borders
+- **Gold text (small):** #8B7130 - darker gold for small text (better contrast)
+- **Success:** #1A7A42 - muted deep green
+- **Success bg:** #EDFAF2 / **Success border:** #C6F0D6
+- **Warning:** #B8860B - dark goldenrod (harmonizes with gold accent)
+- **Warning bg:** #FFF8E8 / **Warning border:** #F0DDB0
+- **Error:** #C23A3A - muted red
+- **Error bg:** #FDF0F0 / **Error border:** #F0C6C6
+- **Info:** #2E6DA4 - muted blue
+- **Info bg:** #EDF4FB / **Info border:** #B8D4F0
+
+### Dark Theme (Secondary)
+- Strategy: Warm dark surfaces, NOT pure black. Reduce accent brightness slightly.
+- **Background:** #0F0E0C
+- **Surface:** #1A1814
+- **Surface hover:** #242118
+- **Border:** #2E2A22
+- **Border subtle:** #1E1B16
+- **Text primary:** #E8E5DE
+- **Text secondary:** #9C978E
+- **Text hint:** #6B6760
+- **Gold accent:** #C5A572
+- **Gold hover:** #D4BC94
+- **Gold tint:** #1E1A12
+
+### Shadows
+- **Small:** 0 1px 2px rgba(26, 24, 20, 0.04)
+- **Medium:** 0 2px 8px rgba(26, 24, 20, 0.06)
+- **Large:** 0 4px 16px rgba(26, 24, 20, 0.08)
+
+## Spacing
+- **Base unit:** 4px
+- **Density:** Comfortable - finance users need clarity, not cramming
+- **Scale:** 2xs(2px) xs(4px) sm(8px) md(12px) lg(16px) xl(24px) 2xl(32px) 3xl(48px) 4xl(64px)
+
+## Layout
+- **Approach:** Grid-disciplined - strict alignment for data-heavy dashboard
+- **Grid:** 12-column at desktop, 6-column at tablet, stack on mobile
+- **Max content width:** 1200px
+- **Sidebar:** 220px fixed, collapsible. White surface, border-right separator.
+- **Border radius:** sm: 4px (inputs, small elements), md: 6px (cards, buttons), lg: 8px (modals, large containers), full: 9999px (pills, badges)
+- **Card pattern:** White surface, 1px warm border, small shadow. No rounded-xl bubbly SaaS look.
+
+## Motion
+- **Approach:** Intentional - subtle entrance animations, meaningful state transitions. NOT expressive/playful.
+- **Framework:** Framer Motion (already in use)
+- **Easing:** enter: ease-out / exit: ease-in / move: cubic-bezier(0.25, 0.1, 0.25, 1)
+- **Duration:** micro: 100ms / short: 150ms / medium: 250ms / long: 400ms
+- **Patterns:**
+  - Page enter: opacity 0->1, y 8->0, duration 200ms
+  - Stagger children: 60ms between items (lighter than current 80ms)
+  - No spring pops on data elements (springs are playful - wrong for finance)
+  - Skeleton loaders for async data (pulse animation)
+  - Height collapse for dismiss/remove
+
+## Sidebar Navigation
+Six items maximum (from Melio research):
+1. Home (dashboard)
+2. Clients (firm/QB connections)
+3. Agents (registry + delegation)
+4. Escalations (pending approvals)
+5. Audit (provenance + export)
+6. Settings
+
+Icons: Lucide React, 18px, stroke-width 1.5. Active state: gold tint background + gold text.
+
+## Accessibility Notes
+- Gold accent (#B08D3E) on white: 3.5:1 contrast - passes AA for large text (18px+) and UI components
+- For small gold text, use darker variant (#8B7130) at 5.2:1 contrast
+- Primary buttons: gold bg (#B08D3E) with white text (#FFFFFF) - 4.5:1 passes AA
+- All semantic colors chosen for WCAG AA compliance on their respective backgrounds
+- Focus rings: 2px gold outline with gold-tint offset
+
+## Decisions Log
+| Date | Decision | Rationale |
+|------|----------|-----------|
+| 2026-03-24 | Initial design system created | /design-consultation based on Melio competitive research. Light theme mandatory for finance product. |
+| 2026-03-24 | Instrument Serif for headings | Institutional authority differentiator. No finance dashboard uses serif - communicates "this is the law." |
+| 2026-03-24 | Warm neutrals over cool grays | Every competitor uses cool blue-gray. Warm palette (#FAFAF8 bg) with gold feels like wealth management. |
+| 2026-03-24 | Gold accent retained + deepened | Brand continuity. Deepened from #C5A572 to #B08D3E for white-bg contrast. No competitor uses gold. |
+| 2026-03-24 | Tight border radius (4/6/8px) | Financial precision. No bubbly SaaS rounding. Tight corners communicate exactness. |

apps/observatory/index.html

@@ -3,7 +3,10 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Agent Trust Observatory</title>
+  <title>Kanoniv Observatory</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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 </head>
 <body>
   <div id="root"></div>

apps/observatory/src/components/ActivityFeed.tsx

@@ -19,34 +19,34 @@ export const ActivityFeed: React.FC<ActivityFeedProps> = ({ entries, limit = 10
     <div className="space-y-1.5">
       {items.map((entry, i) => {
         const isExp = expanded === entry.id;
-        const colors = actionColor[entry.action] || 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20';
+        const colors = actionColor[entry.action] || 'bg-[#F7F6F3] text-[#6B6760] border-[#E8E5DE]';
         return (
           <motion.div
             key={entry.id}
             initial={{ opacity: 0, y: 8 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: i * 0.06 }}
             className={cn(
-              'rounded-lg bg-[#12121a] border cursor-pointer transition-colors',
-              isExp ? 'border-[#C5A572]/30' : 'border-white/[.07] hover:border-white/[.12]',
+              'rounded-md bg-white border cursor-pointer transition-colors',
+              isExp ? 'border-[#E8DCC4] shadow-[0_1px_2px_rgba(26,24,20,0.04)]' : 'border-[#E8E5DE] hover:border-[#E8DCC4]',
             )}
             onClick={() => setExpanded(isExp ? null : entry.id)}
           >
             <div className="flex items-center gap-3 px-3 py-2.5">
-              <span className="text-xs font-medium text-[#E8E8ED] min-w-[80px]">{entry.agent_name}</span>
+              <span className="text-xs font-medium text-[#1A1814] min-w-[80px]">{entry.agent_name}</span>
               <span className={cn('text-[10px] px-1.5 py-0.5 rounded border', colors)}>
                 {entry.action}
               </span>
               {entry.entity_ids.length > 0 && (
-                <span className="text-[10px] font-mono text-zinc-600 truncate flex-1">
+                <span className="text-[10px] font-mono text-[#9C978E] truncate flex-1">
                   {entry.entity_ids.map(id => shortId(id)).join(', ')}
                 </span>
               )}
-              <span className="text-[10px] text-zinc-600 shrink-0">{timeAgo(entry.created_at)}</span>
+              <span className="text-[10px] text-[#9C978E] shrink-0">{timeAgo(entry.created_at)}</span>
             </div>
             {isExp && Object.keys(entry.metadata).length > 0 && (
-              <div className="px-3 pb-2.5 border-t border-white/5">
-                <pre className="text-[9px] text-zinc-500 mt-2 overflow-x-auto">
+              <div className="px-3 pb-2.5 border-t border-[#F0EDE6]">
+                <pre className="text-[9px] text-[#6B6760] mt-2 overflow-x-auto font-mono">
                   {JSON.stringify(entry.metadata, null, 2)}
                 </pre>
               </div>

apps/observatory/src/components/AgentCard.tsx

@@ -16,33 +16,33 @@ export const AgentCard: React.FC<AgentCardProps> = ({ agent, selected, onClick }
     <div
       onClick={onClick}
       className={cn(
-        'relative flex items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-colors border',
+        'relative flex items-center gap-3 px-3 py-3 rounded-md cursor-pointer transition-colors border',
         selected
-          ? 'bg-[#C5A572]/5 border-[#C5A572]/30'
-          : 'border-transparent hover:bg-white/[.03]',
+          ? 'bg-[#FAF6ED] border-[#E8DCC4]'
+          : 'border-transparent hover:bg-[#F7F6F3]',
       )}
     >
       {selected && (
-        <div className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#C5A572] rounded-r" />
+        <div className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#B08D3E] rounded-r" />
       )}
       <ReputationBadge score={score} size="sm" />
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-medium text-[#E8E8ED]">{agent.name}</span>
+          <span className="text-xs font-medium text-[#1A1814]">{agent.name}</span>
           <span className={cn('w-1.5 h-1.5 rounded-full', statusDot(agent.status))} />
         </div>
         {agent.description && (
-          <div className="text-[10px] text-zinc-600 mt-0.5 truncate">{agent.description}</div>
+          <div className="text-[10px] text-[#9C978E] mt-0.5 truncate">{agent.description}</div>
         )}
         {agent.capabilities.length > 0 && (
           <div className="flex flex-wrap gap-1 mt-1.5">
             {agent.capabilities.slice(0, 4).map(cap => (
-              <span key={cap} className="text-[9px] px-1.5 py-0.5 rounded bg-white/[.04] text-zinc-500 border border-white/[.06]">
+              <span key={cap} className="text-[9px] px-1.5 py-0.5 rounded bg-[#FAFAF8] text-[#6B6760] border border-[#F0EDE6]">
                 {cap}
               </span>
             ))}
             {agent.capabilities.length > 4 && (
-              <span className="text-[9px] text-zinc-600">+{agent.capabilities.length - 4}</span>
+              <span className="text-[9px] text-[#9C978E]">+{agent.capabilities.length - 4}</span>
             )}
           </div>
         )}

apps/observatory/src/components/DelegationCard.tsx

@@ -14,15 +14,15 @@ export const DelegationCard: React.FC<DelegationCardProps> = ({ delegation, onRe
 
   return (
     <div className={cn(
-      'rounded-lg bg-[#12121a] border border-white/[.07] px-3 py-2.5',
+      'rounded-lg bg-white border border-[#E8E5DE] px-3 py-2.5',
       expired && 'opacity-50',
     )}>
       <div className="flex items-center gap-2 mb-2">
-        <span className="text-xs font-medium text-[#E8E8ED]">{delegation.grantor_name}</span>
-        <ArrowRight className="w-3 h-3 text-[#C5A572]" />
-        <span className="text-xs font-medium text-[#E8E8ED]">{delegation.agent_name}</span>
+        <span className="text-xs font-medium text-[#1A1814]">{delegation.grantor_name}</span>
+        <ArrowRight className="w-3 h-3 text-[#B08D3E]" />
+        <span className="text-xs font-medium text-[#1A1814]">{delegation.agent_name}</span>
         {delegation.expires_at && (
-          <span className="flex items-center gap-1 text-[9px] text-zinc-600 ml-auto">
+          <span className="flex items-center gap-1 text-[9px] text-[#9C978E] ml-auto">
             <Clock className="w-3 h-3" />
             {expired ? 'expired' : timeAgo(delegation.expires_at).replace(' ago', '')}
           </span>
@@ -34,7 +34,7 @@ export const DelegationCard: React.FC<DelegationCardProps> = ({ delegation, onRe
             key={scope}
             aria-label={`Remove scope: ${scope}`}
             onClick={e => { e.stopPropagation(); onRemoveScope?.(delegation.id, delegation.scopes, scope); }}
-            className="text-[9px] px-1.5 py-0.5 rounded bg-[#C5A572]/10 text-[#C5A572] border border-[#C5A572]/20 hover:bg-red-500/10 hover:text-red-400 hover:border-red-500/20 transition-colors"
+            className="text-[9px] px-1.5 py-0.5 rounded bg-[#FAF6ED] text-[#B08D3E] border border-[#E8DCC4] hover:bg-red-500/10 hover:text-[#C23A3A] hover:border-red-500/20 transition-colors"
           >
             {scope}
           </button>
@@ -43,7 +43,7 @@ export const DelegationCard: React.FC<DelegationCardProps> = ({ delegation, onRe
           <button
             aria-label={`Revoke delegation from ${delegation.grantor_name} to ${delegation.agent_name}`}
             onClick={e => { e.stopPropagation(); onRevoke(delegation.id); }}
-            className="ml-auto p-1 rounded hover:bg-red-500/10 text-zinc-600 hover:text-red-400 transition-colors"
+            className="ml-auto p-1 rounded hover:bg-red-500/10 text-[#9C978E] hover:text-[#C23A3A] transition-colors"
           >
             <Trash2 className="w-3 h-3" />
           </button>

apps/observatory/src/components/ErrorBoundary.tsx

@@ -25,18 +25,18 @@ export class ErrorBoundary extends React.Component<
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center h-screen bg-[#0a0a0f]">
+        <div className="flex items-center justify-center h-screen bg-[#FAFAF8]">
           <div className="max-w-md text-center p-8">
             <div className="w-12 h-12 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center justify-center mx-auto mb-4">
-              <span className="text-red-400 text-xl">!</span>
+              <span className="text-[#C23A3A] text-xl">!</span>
             </div>
-            <h1 className="text-lg font-bold text-[#E8E8ED] mb-2">Something went wrong</h1>
-            <p className="text-sm text-zinc-500 mb-4">
+            <h1 className="text-lg font-bold text-[#1A1814] mb-2">Something went wrong</h1>
+            <p className="text-sm text-[#9C978E] mb-4">
               {this.state.error?.message || 'An unexpected error occurred.'}
             </p>
             <button
               onClick={this.handleReload}
-              className="px-4 py-2 rounded-lg bg-[#C5A572] text-[#0a0a0f] text-sm font-bold hover:bg-[#D4BC94] transition-colors"
+              className="px-4 py-2 rounded-lg bg-[#B08D3E] text-white text-sm font-bold hover:bg-[#C5A572] transition-colors"
             >
               Reload
             </button>