diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 08985b18..0af6f58d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -21,7 +21,9 @@ export default withMermaid(
       ['link', { rel: 'icon', type: 'image/svg+xml', href: '/wave/favicon.svg' }],
       ['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=JetBrains+Mono:wght@400;600&display=swap', rel: 'stylesheet' }]
+      ['link', { href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap', rel: 'stylesheet' }],
+      ['link', { rel: 'preload', href: '/wave/fonts/NeueMontreal-Regular.woff2', as: 'font', type: 'font/woff2', crossorigin: '' }],
+      ['link', { rel: 'preload', href: '/wave/fonts/NeueMontreal-Bold.woff2', as: 'font', type: 'font/woff2', crossorigin: '' }]
     ],
 
     themeConfig: {
diff --git a/docs/.vitepress/theme/components/CopyButton.vue b/docs/.vitepress/theme/components/CopyButton.vue
index 0fbeeef0..f35c1007 100644
--- a/docs/.vitepress/theme/components/CopyButton.vue
+++ b/docs/.vitepress/theme/components/CopyButton.vue
@@ -92,8 +92,8 @@ async function copyCode() {
 }
 
 .copy-button.copied {
-  color: #10b981;
-  border-color: #10b981;
+  color: var(--wave-trust-green, #10b981);
+  border-color: var(--wave-trust-green, #10b981);
 }
 
 .copy-button svg {
diff --git a/docs/.vitepress/theme/components/HeroSection.vue b/docs/.vitepress/theme/components/HeroSection.vue
index 69e9ebdf..9943d8ba 100644
--- a/docs/.vitepress/theme/components/HeroSection.vue
+++ b/docs/.vitepress/theme/components/HeroSection.vue
@@ -268,7 +268,7 @@ function getLineIcon(icon?: TerminalIcon): string {
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 16px;
-  background: linear-gradient(135deg, var(--wave-primary) 0%, var(--wave-accent) 100%);
+  background: var(--brand-aurora-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -398,7 +398,7 @@ a.hero-pill {
 .terminal-window {
   width: 100%;
   max-width: 560px;
-  background: #1a1a2e;
+  background: #0F1F49;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
@@ -408,7 +408,7 @@ a.hero-pill {
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  background: #2d2d44;
+  background: #162050;
   gap: 12px;
 }
 
@@ -431,7 +431,7 @@ a.hero-pill {
   flex: 1;
   text-align: center;
   font-size: 13px;
-  color: #a9b1d6;
+  color: #C0C8E8;
   font-family: var(--wave-font-mono, 'SF Mono', 'Fira Code', monospace);
 }
 
@@ -442,7 +442,7 @@ a.hero-pill {
   padding: 4px 8px;
   background: transparent;
   border: none;
-  color: #6b7280;
+  color: #6B7CA0;
   cursor: pointer;
   border-radius: 4px;
   transition: all 0.15s ease;
@@ -450,7 +450,7 @@ a.hero-pill {
 
 .terminal-copy-btn:hover {
   background: rgba(255, 255, 255, 0.1);
-  color: #a9b1d6;
+  color: #C0C8E8;
 }
 
 .terminal-copy-btn.copied {
@@ -463,7 +463,7 @@ a.hero-pill {
   font-family: var(--wave-font-mono, 'SF Mono', 'Fira Code', monospace);
   font-size: 13px;
   line-height: 1.2;
-  color: #a9b1d6;
+  color: #C0C8E8;
   height: 260px;
   width: 100%;
   overflow-x: hidden;
@@ -478,7 +478,7 @@ a.hero-pill {
   left: 0;
   right: 0;
   height: 48px;
-  background: linear-gradient(to bottom, transparent, #1a1a2e);
+  background: linear-gradient(to bottom, transparent, #0F1F49);
   pointer-events: none;
 }
 
@@ -492,7 +492,7 @@ a.hero-pill {
 }
 
 .terminal-line.command {
-  color: #7dd3fc;
+  color: #5664F4;
 }
 
 .terminal-line .line-icon {
@@ -503,10 +503,10 @@ a.hero-pill {
 .terminal-line.line-success { color: #27c93f; }
 .terminal-line.line-error { color: #ff5f56; }
 .terminal-line.line-warning { color: #ffbd2e; }
-.terminal-line.line-info { color: #7dd3fc; }
-.terminal-line.line-muted { color: #6b7280; }
-.terminal-line.line-highlight { color: #c4b5fd; font-weight: 500; }
-.terminal-line.line-logo { color: #7aa2f7; font-weight: 600; }
+.terminal-line.line-info { color: #5664F4; }
+.terminal-line.line-muted { color: #6B7CA0; }
+.terminal-line.line-highlight { color: #8F96F6; font-weight: 500; }
+.terminal-line.line-logo { color: #0014EB; font-weight: 600; }
 .terminal-line.line-meta { display: none; }
 
 /* Background pattern */
diff --git a/docs/.vitepress/theme/components/PipelineVisualizer.vue b/docs/.vitepress/theme/components/PipelineVisualizer.vue
index 8007b542..11ed3dfa 100644
--- a/docs/.vitepress/theme/components/PipelineVisualizer.vue
+++ b/docs/.vitepress/theme/components/PipelineVisualizer.vue
@@ -109,11 +109,11 @@ const mermaidCode = computed(() => {
 
   // Style nodes by persona
   const personaColors: Record<string, string> = {
-    navigator: '#4a90d9',
-    auditor: '#d94a4a',
-    craftsman: '#4ad94a',
-    philosopher: '#d9a44a',
-    summarizer: '#9a4ad9'
+    navigator: '#0014EB',
+    auditor: '#E04040',
+    craftsman: '#10b981',
+    philosopher: '#D9960A',
+    summarizer: '#8F96F6'
   }
 
   pipeline.steps.forEach((step: PipelineStep) => {
@@ -360,9 +360,9 @@ watch(mermaidCode, () => {
   border-radius: 4px;
 }
 
-.legend-color.navigator { background: #4a90d9; }
-.legend-color.auditor { background: #d94a4a; }
-.legend-color.craftsman { background: #4ad94a; }
-.legend-color.philosopher { background: #d9a44a; }
-.legend-color.summarizer { background: #9a4ad9; }
+.legend-color.navigator { background: #0014EB; }
+.legend-color.auditor { background: #E04040; }
+.legend-color.craftsman { background: #10b981; }
+.legend-color.philosopher { background: #D9960A; }
+.legend-color.summarizer { background: #8F96F6; }
 </style>
diff --git a/docs/.vitepress/theme/components/TerminalOutput.vue b/docs/.vitepress/theme/components/TerminalOutput.vue
index 0ce87cdc..0043c8ec 100644
--- a/docs/.vitepress/theme/components/TerminalOutput.vue
+++ b/docs/.vitepress/theme/components/TerminalOutput.vue
@@ -22,14 +22,14 @@ defineProps({
 
 <style scoped>
 .terminal-output {
-  background: #1a1a2e;
+  background: #0F1F49;
   border-radius: 8px;
   overflow: hidden;
   margin: 1rem 0;
   font-family: var(--wave-font-mono, 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace);
 }
 .terminal-header {
-  background: #2d2d44;
+  background: #162050;
   padding: 8px 12px;
   display: flex;
   gap: 6px;
@@ -45,7 +45,7 @@ defineProps({
 .terminal-content {
   padding: 12px 16px;
   margin: 0;
-  color: #a9b1d6;
+  color: #C0C8E8;
   font-size: 13px;
   line-height: 1.6;
 }
diff --git a/docs/.vitepress/theme/components/TerminalPreview.vue b/docs/.vitepress/theme/components/TerminalPreview.vue
index cb0ec0e9..a94bb339 100644
--- a/docs/.vitepress/theme/components/TerminalPreview.vue
+++ b/docs/.vitepress/theme/components/TerminalPreview.vue
@@ -205,13 +205,13 @@ defineExpose({ replay })
 }
 
 .terminal-window {
-  background: #1a1b26;
+  background: #0F1F49;
   border-radius: 12px;
   overflow: hidden;
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.1),
-    0 0 30px rgba(99, 102, 241, 0.15),
-    0 0 60px rgba(99, 102, 241, 0.1);
+    0 0 30px rgba(0, 20, 235, 0.15),
+    0 0 60px rgba(0, 20, 235, 0.1);
   font-family: var(--wave-font-mono, 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace);
 }
 
@@ -224,9 +224,9 @@ defineExpose({ replay })
   padding: 1px;
   background: linear-gradient(
     135deg,
-    rgba(99, 102, 241, 0.4),
-    rgba(99, 102, 241, 0.1) 50%,
-    rgba(99, 102, 241, 0.4)
+    rgba(0, 20, 235, 0.4),
+    rgba(0, 20, 235, 0.1) 50%,
+    rgba(0, 20, 235, 0.4)
   );
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
@@ -242,7 +242,7 @@ defineExpose({ replay })
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  background: #24253a;
+  background: #162050;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
@@ -297,18 +297,18 @@ defineExpose({ replay })
 .terminal-line--command {
   display: flex;
   align-items: center;
-  color: #c0caf5;
+  color: #C0C8E8;
   font-size: 14px;
 }
 
 .terminal-prompt {
-  color: #7aa2f7;
+  color: #5664F4;
   margin-right: 10px;
   font-weight: 600;
 }
 
 .terminal-command {
-  color: #c0caf5;
+  color: #C0C8E8;
 }
 
 /* Cursor */
@@ -316,7 +316,7 @@ defineExpose({ replay })
   display: inline-block;
   width: 8px;
   height: 18px;
-  background: #7aa2f7;
+  background: #5664F4;
   margin-left: 2px;
   vertical-align: text-bottom;
   opacity: 0;
@@ -337,7 +337,7 @@ defineExpose({ replay })
 }
 
 .terminal-line--output {
-  color: #9aa5ce;
+  color: #A0AACC;
   font-size: 13px;
   padding: 2px 0;
 }
@@ -358,7 +358,7 @@ defineExpose({ replay })
 }
 
 :deep(.text-blue) {
-  color: #7aa2f7;
+  color: #5664F4;
 }
 
 :deep(.text-yellow) {
@@ -370,16 +370,16 @@ defineExpose({ replay })
 }
 
 :deep(.text-cyan) {
-  color: #7dcfff;
+  color: #8F96F6;
 }
 
 :deep(.text-dim) {
-  color: #565f89;
+  color: #4A5580;
 }
 
 :deep(.text-bold) {
   font-weight: 600;
-  color: #c0caf5;
+  color: #C0C8E8;
 }
 
 /* Replay button */
@@ -391,8 +391,8 @@ defineExpose({ replay })
   height: 32px;
   border: none;
   border-radius: 8px;
-  background: rgba(122, 162, 247, 0.15);
-  color: #7aa2f7;
+  background: rgba(86, 100, 244, 0.15);
+  color: #5664F4;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -404,7 +404,7 @@ defineExpose({ replay })
 
 .terminal-replay:hover {
   opacity: 1;
-  background: rgba(122, 162, 247, 0.25);
+  background: rgba(86, 100, 244, 0.25);
   transform: scale(1.05);
 }
 
diff --git a/docs/.vitepress/theme/styles/components.css b/docs/.vitepress/theme/styles/components.css
index e0722558..31299811 100644
--- a/docs/.vitepress/theme/styles/components.css
+++ b/docs/.vitepress/theme/styles/components.css
@@ -53,7 +53,7 @@
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 16px;
-  background: linear-gradient(135deg, var(--wave-primary) 0%, var(--wave-accent) 100%);
+  background: var(--recinq-aurora-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -137,7 +137,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, var(--wave-primary) 0%, var(--wave-accent) 100%);
+  background: var(--recinq-aurora-gradient);
   border-radius: 10px;
   margin-bottom: 16px;
   color: white;
@@ -517,19 +517,19 @@
   --hero-syntax-yaml-value: #a5d6ff;
 
   /* Terminal glow effect for emphasis */
-  --hero-terminal-glow: rgba(79, 70, 229, 0.15);
-  --hero-terminal-glow-hover: rgba(79, 70, 229, 0.25);
+  --hero-terminal-glow: rgba(0, 20, 235, 0.15);
+  --hero-terminal-glow-hover: rgba(0, 20, 235, 0.25);
 
   /* Value Prop Pills - Small badges showing key benefits */
   --hero-pill-bg: rgba(255, 255, 255, 0.05);
   --hero-pill-border: rgba(255, 255, 255, 0.1);
   --hero-pill-text: var(--vp-c-text-2);
   --hero-pill-icon: var(--wave-primary);
-  --hero-pill-hover-bg: rgba(79, 70, 229, 0.1);
-  --hero-pill-hover-border: rgba(79, 70, 229, 0.3);
+  --hero-pill-hover-bg: rgba(0, 20, 235, 0.1);
+  --hero-pill-hover-border: rgba(0, 20, 235, 0.3);
 
   /* Grid Background Pattern - Subtle dot/grid pattern for depth */
-  --hero-grid-color: rgba(79, 70, 229, 0.08);
+  --hero-grid-color: rgba(0, 20, 235, 0.08);
   --hero-grid-size: 24px;
   --hero-grid-dot-size: 1px;
 
@@ -550,15 +550,15 @@
 .dark {
   --hero-terminal-bg: #0d1117;
   --hero-terminal-border: #30363d;
-  --hero-terminal-glow: rgba(129, 140, 248, 0.2);
-  --hero-terminal-glow-hover: rgba(129, 140, 248, 0.35);
+  --hero-terminal-glow: rgba(86, 100, 244, 0.2);
+  --hero-terminal-glow-hover: rgba(86, 100, 244, 0.35);
 
   --hero-pill-bg: rgba(255, 255, 255, 0.03);
   --hero-pill-border: rgba(255, 255, 255, 0.08);
-  --hero-pill-hover-bg: rgba(129, 140, 248, 0.15);
-  --hero-pill-hover-border: rgba(129, 140, 248, 0.4);
+  --hero-pill-hover-bg: rgba(86, 100, 244, 0.15);
+  --hero-pill-hover-border: rgba(86, 100, 244, 0.4);
 
-  --hero-grid-color: rgba(129, 140, 248, 0.06);
+  --hero-grid-color: rgba(86, 100, 244, 0.06);
 }
 
 
@@ -645,12 +645,7 @@
 
 /* Gradient text for emphasis */
 .hero-enhanced__headline .gradient-text {
-  background: linear-gradient(
-    135deg,
-    var(--wave-primary) 0%,
-    var(--wave-accent) 50%,
-    var(--wave-secondary) 100%
-  );
+  background: var(--recinq-aurora-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -885,13 +880,13 @@
 
 /* Pill variants for different emphasis levels */
 .hero-pill--primary {
-  background: rgba(79, 70, 229, 0.1);
-  border-color: rgba(79, 70, 229, 0.3);
+  background: rgba(0, 20, 235, 0.1);
+  border-color: rgba(0, 20, 235, 0.3);
   color: var(--wave-primary);
 }
 
 .hero-pill--primary:hover {
-  background: rgba(79, 70, 229, 0.2);
+  background: rgba(0, 20, 235, 0.2);
   border-color: var(--wave-primary);
 }
 
@@ -1041,15 +1036,15 @@
   );
   color: white;
   box-shadow:
-    0 4px 14px rgba(79, 70, 229, 0.3),
-    0 0 0 0 rgba(79, 70, 229, 0);
+    0 4px 14px rgba(0, 20, 235, 0.3),
+    0 0 0 0 rgba(0, 20, 235, 0);
 }
 
 .hero-btn--primary:hover {
   transform: translateY(-2px);
   box-shadow:
-    0 8px 20px rgba(79, 70, 229, 0.4),
-    0 0 0 2px rgba(79, 70, 229, 0.1);
+    0 8px 20px rgba(0, 20, 235, 0.4),
+    0 0 0 2px rgba(0, 20, 235, 0.1);
 }
 
 .hero-btn--secondary {
@@ -1061,7 +1056,7 @@
 .hero-btn--secondary:hover {
   border-color: var(--wave-primary);
   color: var(--wave-primary);
-  background: rgba(79, 70, 229, 0.05);
+  background: rgba(0, 20, 235, 0.05);
 }
 
 /* Icon in buttons */
diff --git a/docs/.vitepress/theme/styles/custom.css b/docs/.vitepress/theme/styles/custom.css
index 925482b2..c08c3327 100644
--- a/docs/.vitepress/theme/styles/custom.css
+++ b/docs/.vitepress/theme/styles/custom.css
@@ -1,14 +1,44 @@
 /**
  * Wave Documentation - Custom Styles
- * Enterprise-grade documentation theming
+ * re:cinq brand guidelines v1.0
  */
 
+
+@import \'./recinq-theme.css\';
+/* Neue Montreal font-face declarations */
+@font-face {
+  font-family: 'Neue Montreal';
+  src: url('/fonts/NeueMontreal-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Neue Montreal';
+  src: url('/fonts/NeueMontreal-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Neue Montreal';
+  src: url('/fonts/NeueMontreal-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  /* Brand Colors */
-  --wave-primary: #4f46e5;
-  --wave-primary-dark: #4338ca;
-  --wave-secondary: #06b6d4;
-  --wave-accent: #8b5cf6;
+
+
+
+  /* Wave Theme Colors (mapped to brand) */
+  --wave-primary: #0014EB;
+  --wave-primary-dark: #000FB8;
+  --wave-secondary: #5664F4;
+  --wave-accent: #8F96F6;
 
   /* Trust & Security Colors */
   --wave-trust-green: #10b981;
@@ -22,19 +52,30 @@
   --wave-planned: #6b7280;
 
   /* VitePress Theme Overrides */
-  --vp-c-brand-1: var(--wave-primary);
-  --vp-c-brand-2: var(--wave-primary-dark);
-  --vp-c-brand-3: var(--wave-accent);
+  --vp-c-brand-1: #0014EB;
+  --vp-c-brand-2: #5664F4;
+  --vp-c-brand-3: #8F96F6;
+
+  /* Light mode backgrounds */
+  --vp-c-bg-soft: #F2F2F7;
+  --vp-c-bg-mute: #E6E8FD;
 
   /* Typography */
+  --vp-font-family-base: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   --wave-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
 /* Dark mode adjustments */
 .dark {
-  --wave-primary: #818cf8;
-  --wave-primary-dark: #6366f1;
-  --wave-secondary: #22d3ee;
+  --wave-primary: #5664F4;
+  --wave-primary-dark: #0014EB;
+  --wave-secondary: #8F96F6;
+
+  /* Midnight Navy dark mode backgrounds */
+  --vp-c-bg: #0F1F49;
+  --vp-c-bg-soft: #162050;
+  --vp-c-bg-mute: #1C2760;
+  --vp-c-bg-alt: #0C1838;
 }
 
 /* Hero Section Enhancements */
@@ -43,7 +84,7 @@
 }
 
 .VPHero .name {
-  background: linear-gradient(135deg, var(--wave-primary) 0%, var(--wave-accent) 100%);
+  background: var(--recinq-aurora-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
diff --git a/docs/.vitepress/theme/styles/recinq-theme.css b/docs/.vitepress/theme/styles/recinq-theme.css
new file mode 100644
index 00000000..4252fe26
--- /dev/null
+++ b/docs/.vitepress/theme/styles/recinq-theme.css
@@ -0,0 +1,239 @@
+/* ============================================
+   re:cinq Brand Theme
+   Version 1.0
+   ============================================ */
+
+/* --- Custom Properties --- */
+:root {
+  /* Primary Palette */
+  --recinq-midnight-navy: #0F1F49;
+  --recinq-crystal-white: #FFFFFF;
+  --recinq-quantum-blue: #0014EB;
+
+  /* Secondary Palette */
+  --recinq-pulse-blue: #5664F4;
+  --recinq-soft-indigo: #8F96F6;
+  --recinq-nebula-light: #E6E8FD;
+  --recinq-neutral-fog: #F2F2F7;
+
+  /* Gradients */
+  --recinq-aurora: linear-gradient(135deg, #E4E6FD 0%, #5664F4 50%, #8F96F6 100%);
+  --recinq-aurora-dark: linear-gradient(135deg, #5664F4 0%, #0F1F49 100%);
+
+  /* Typography */
+  --recinq-font-primary: 'Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --recinq-font-logo: 'Cold Warm', sans-serif;
+
+  /* Sizing */
+  --recinq-h1-size: 64px;
+  --recinq-h2-size: 40px;
+  --recinq-h3-size: 24px;
+  --recinq-body-size: 16px;
+  --recinq-caption-size: 13px;
+
+  /* Weights */
+  --recinq-weight-light: 300;
+  --recinq-weight-regular: 400;
+  --recinq-weight-medium: 500;
+  --recinq-weight-bold: 700;
+
+  /* Borders & Radius */
+  --recinq-radius-callout: 8px;
+  --recinq-radius-default: 0px;
+  --recinq-border-divider: 1px solid var(--recinq-nebula-light);
+}
+
+/* --- Base --- */
+body {
+  font-family: var(--recinq-font-primary);
+  font-size: var(--recinq-body-size);
+  font-weight: var(--recinq-weight-regular);
+  line-height: 1.5;
+  color: var(--recinq-midnight-navy);
+  background-color: var(--recinq-crystal-white);
+}
+
+/* --- Typography --- */
+h1, .h1 {
+  font-family: var(--recinq-font-primary);
+  font-size: var(--recinq-h1-size);
+  font-weight: var(--recinq-weight-bold);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--recinq-midnight-navy);
+}
+
+h2, .h2 {
+  font-family: var(--recinq-font-primary);
+  font-size: var(--recinq-h2-size);
+  font-weight: var(--recinq-weight-medium);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--recinq-midnight-navy);
+}
+
+h3, .h3 {
+  font-family: var(--recinq-font-primary);
+  font-size: var(--recinq-h3-size);
+  font-weight: var(--recinq-weight-medium);
+  line-height: 1.3;
+  color: var(--recinq-midnight-navy);
+}
+
+p, .body-text {
+  font-size: var(--recinq-body-size);
+  font-weight: var(--recinq-weight-regular);
+  line-height: 1.5;
+}
+
+.caption, small {
+  font-size: var(--recinq-caption-size);
+  font-weight: var(--recinq-weight-light);
+  line-height: 1.4;
+  color: var(--recinq-soft-indigo);
+}
+
+/* --- Links & Buttons --- */
+a {
+  color: var(--recinq-quantum-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.btn-primary {
+  display: inline-block;
+  padding: 12px 28px;
+  background-color: var(--recinq-quantum-blue);
+  color: var(--recinq-crystal-white);
+  font-family: var(--recinq-font-primary);
+  font-weight: var(--recinq-weight-medium);
+  font-size: var(--recinq-body-size);
+  border: none;
+  border-radius: var(--recinq-radius-default);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn-primary:hover {
+  background-color: var(--recinq-pulse-blue);
+}
+
+.btn-secondary {
+  display: inline-block;
+  padding: 12px 28px;
+  background-color: transparent;
+  color: var(--recinq-quantum-blue);
+  font-family: var(--recinq-font-primary);
+  font-weight: var(--recinq-weight-medium);
+  font-size: var(--recinq-body-size);
+  border: 1px solid var(--recinq-quantum-blue);
+  border-radius: var(--recinq-radius-default);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* --- Surfaces --- */
+.surface-dark {
+  background: var(--recinq-aurora-dark);
+  color: var(--recinq-crystal-white);
+}
+
+.surface-dark h1,
+.surface-dark h2,
+.surface-dark h3 {
+  color: var(--recinq-crystal-white);
+}
+
+.surface-dark .caption {
+  color: var(--recinq-soft-indigo);
+}
+
+.surface-hero {
+  background: var(--recinq-aurora);
+  color: var(--recinq-crystal-white);
+}
+
+.surface-hero h1,
+.surface-hero h2,
+.surface-hero h3 {
+  color: var(--recinq-crystal-white);
+}
+
+.surface-light {
+  background-color: var(--recinq-neutral-fog);
+  color: var(--recinq-midnight-navy);
+}
+
+.surface-content {
+  background-color: var(--recinq-crystal-white);
+  color: var(--recinq-midnight-navy);
+}
+
+/* --- Components --- */
+.callout {
+  background: var(--recinq-aurora);
+  border-radius: var(--recinq-radius-callout);
+  padding: 24px 32px;
+  color: var(--recinq-crystal-white);
+}
+
+.card {
+  background-color: var(--recinq-crystal-white);
+  border: 1px solid var(--recinq-nebula-light);
+  border-radius: var(--recinq-radius-default);
+  padding: 24px;
+}
+
+.divider {
+  border: none;
+  border-top: var(--recinq-border-divider);
+  margin: 24px 0;
+}
+
+/* --- Tables --- */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--recinq-font-primary);
+}
+
+thead th {
+  font-weight: var(--recinq-weight-bold);
+  text-align: left;
+  padding: 12px 16px;
+  border-bottom: 2px solid var(--recinq-midnight-navy);
+  color: var(--recinq-midnight-navy);
+}
+
+tbody td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--recinq-nebula-light);
+  font-weight: var(--recinq-weight-regular);
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--recinq-neutral-fog);
+}
+
+/* --- Brand Patterns (as background) --- */
+.pattern-1 {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 0h40v40H0z" fill="none"/><path d="M0 0h1v40H0zM40 0h1v40h-1zM0 0v1h40V0zM0 40v1h40v-1z" fill="white" opacity="0.25"/></svg>');
+}
+
+.pattern-2 {
+  background-color: var(--recinq-crystal-white);
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 0h40v40H0z" fill="none"/><path d="M0 0h1v40H0zM40 0h1v40h-1zM0 0v1h40V0zM0 40v1h40v-1z" fill="%238F96F6"/></svg>');
+}
+
+/* --- Print / A4 Document Override --- */
+@media print {
+  :root {
+    --recinq-h1-size: 22pt;
+    --recinq-h2-size: 16pt;
+    --recinq-body-size: 11pt;
+    --recinq-caption-size: 9pt;
+  }
+}
diff --git a/docs/public/design-tokens.json b/docs/public/design-tokens.json
new file mode 100644
index 00000000..082a8ee0
--- /dev/null
+++ b/docs/public/design-tokens.json
@@ -0,0 +1,145 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "brand": "re:cinq",
+  "version": "1.0",
+  "color": {
+    "primary": {
+      "midnight-navy": {
+        "value": "#0F1F49",
+        "type": "color",
+        "description": "Primary text, dark backgrounds, layouts"
+      },
+      "crystal-white": {
+        "value": "#FFFFFF",
+        "type": "color",
+        "description": "Light backgrounds, text on dark"
+      },
+      "quantum-blue": {
+        "value": "#0014EB",
+        "type": "color",
+        "description": "Accent for buttons, links, highlights"
+      }
+    },
+    "secondary": {
+      "pulse-blue": {
+        "value": "#5664F4",
+        "type": "color",
+        "description": "Supporting accents, icons, infographics"
+      },
+      "soft-indigo": {
+        "value": "#8F96F6",
+        "type": "color",
+        "description": "Secondary accents, patterns, lighter elements"
+      },
+      "nebula-light": {
+        "value": "#E6E8FD",
+        "type": "color",
+        "description": "Subtle backgrounds, callout blocks"
+      },
+      "neutral-fog": {
+        "value": "#F2F2F7",
+        "type": "color",
+        "description": "Page backgrounds, neutral areas"
+      }
+    },
+    "gradient": {
+      "aurora": {
+        "value": "linear-gradient(135deg, #E4E6FD 0%, #5664F4 50%, #8F96F6 100%)",
+        "type": "gradient",
+        "description": "Hero sections, banners, large background areas"
+      },
+      "aurora-dark": {
+        "value": "linear-gradient(135deg, #5664F4 0%, #0F1F49 100%)",
+        "type": "gradient",
+        "description": "Dark hero sections, cover slides"
+      }
+    }
+  },
+  "typography": {
+    "font-family": {
+      "primary": {
+        "value": "'Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+        "type": "fontFamily",
+        "description": "All headings and body text"
+      },
+      "logo": {
+        "value": "'Cold Warm', sans-serif",
+        "type": "fontFamily",
+        "description": "Logo wordmark only"
+      }
+    },
+    "heading-1": {
+      "font-family": { "value": "{typography.font-family.primary}" },
+      "font-weight": { "value": "700" },
+      "font-size": { "value": "64px" },
+      "line-height": { "value": "1.1" },
+      "letter-spacing": { "value": "-0.02em" }
+    },
+    "heading-2": {
+      "font-family": { "value": "{typography.font-family.primary}" },
+      "font-weight": { "value": "500" },
+      "font-size": { "value": "40px" },
+      "line-height": { "value": "1.2" },
+      "letter-spacing": { "value": "-0.01em" }
+    },
+    "heading-3": {
+      "font-family": { "value": "{typography.font-family.primary}" },
+      "font-weight": { "value": "500" },
+      "font-size": { "value": "24px" },
+      "line-height": { "value": "1.3" },
+      "letter-spacing": { "value": "0" }
+    },
+    "body": {
+      "font-family": { "value": "{typography.font-family.primary}" },
+      "font-weight": { "value": "400" },
+      "font-size": { "value": "16px" },
+      "line-height": { "value": "1.5" },
+      "letter-spacing": { "value": "0" }
+    },
+    "caption": {
+      "font-family": { "value": "{typography.font-family.primary}" },
+      "font-weight": { "value": "300" },
+      "font-size": { "value": "13px" },
+      "line-height": { "value": "1.4" },
+      "letter-spacing": { "value": "0" }
+    },
+    "document": {
+      "heading-1": { "font-size": { "value": "22pt" } },
+      "heading-2": { "font-size": { "value": "16pt" } },
+      "body": { "font-size": { "value": "11pt" } }
+    }
+  },
+  "spacing": {
+    "logo-clear-space": {
+      "value": "33.33%",
+      "type": "spacing",
+      "description": "1/3 of logomark on all sides"
+    }
+  },
+  "border-radius": {
+    "callout": {
+      "value": "8px",
+      "type": "borderRadius",
+      "description": "Callout and highlight blocks (8-12px)"
+    },
+    "default": {
+      "value": "0px",
+      "type": "borderRadius",
+      "description": "General containers use sharp corners"
+    }
+  },
+  "opacity": {
+    "brand-graphic-colored": {
+      "value": "0.15",
+      "description": "3D leaf on Aurora/Pulse Blue backgrounds (10-20%)"
+    },
+    "brand-graphic-grayscale": {
+      "value": "0.4",
+      "description": "3D leaf grayscale with Soft Light blend (30-50%)"
+    },
+    "pattern-1": {
+      "value": "0.25",
+      "description": "Grid pattern on gradient backgrounds (20-30%)"
+    }
+  }
+}
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
new file mode 100644
index 00000000..815c15f1
--- /dev/null
+++ b/docs/public/favicon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" version="1.2" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.3 Build 87)  -->
+  <g>
+    <path d="M201.39,285.09l6.59-14.05c1.42-3.04,2.85-6.09,4.28-9.13-21.06-51.24-38.49-103.96-52.4-157.63-20.84,22.23-38.31,47.74-51.47,75.75,18.41,50.36,43.75,98.02,75.43,141.5,6.03-12.13,11.87-24.31,17.57-36.44h0Z" fill="#0014eb"/>
+    <path d="M171.68,345.01c-31.07-40.94-56.61-85.62-76.19-132.84-9.77,29.37-15.14,60.8-15.14,93.51v39.26c18.3,21.47,35.04,44.3,50.06,68.39,15.23-21.55,28.78-44.64,41.28-68.31h0Z" fill="#0014eb"/>
+    <path d="M80.34,382.53v88.52c12.53-11.5,24.07-24.06,34.79-37.41-10.66-17.73-22.28-34.78-34.79-51.1h0Z" fill="#0014eb"/>
+    <path d="M226.09,232.75c9.06-18.81,18.46-37.53,28.58-55.83-.53-29.56-2.77-58.22-5.04-85.99-1.33-16.28-2.68-32.85-3.7-49.77-24.24,11.58-46.59,26.51-66.56,44.18,12.43,50.09,28,99.36,46.74,147.41h-.01Z" fill="#0014eb"/>
+    <path d="M273.11,88.88c1.36,16.57,2.7,33.48,3.71,50.73,15.97-24.79,33.89-48.2,54.86-69.23,22.3-22.36,48.05-41.64,75.71-57.05h-38.86c-34.97,0-68.48,6.33-99.49,17.91,1.02,19.6,2.52,38.84,4.07,57.65h0Z" fill="#0014eb"/>
+  </g>
+  <g>
+    <path d="M348.17,87.4c-24.73,24.8-45.17,53.56-63.25,84.16,44.24-11.95,89.28-20.47,134.73-25.5V33.73c-26.14,14.44-50.46,32.59-71.48,53.67Z" fill="#0014eb"/>
+    <path d="M268.47,201.02c-8.8,16.59-17.12,33.5-25.2,50.46,44.86-1.54,89.22-3.19,133.54-4.85,12.81-.48,25.62-.96,38.44-1.44,2.85-16.5,4.42-33.45,4.42-50.78v-24.26c-50.63,5.73-100.74,15.86-149.73,30.43l-1.47.44h0Z" fill="#0014eb"/>
+    <path d="M141.03,438.99c-12.88,17.05-26.95,33.1-42.56,47.69h33.12c48.37,0,93.91-12.15,133.94-33.53-42.1-10.05-84.35-14.87-124.51-14.17h0Z" fill="#0014eb"/>
+    <path d="M325.85,361.65c-47.04,0-92.06-1.64-134.18-3.71-10.38,19.57-21.5,38.78-33.7,57.17,44.25.88,90.44,7.9,135.96,20.78,29.01-20.12,54.18-45.5,74.26-74.76-14.25.32-28.41.52-42.34.52Z" fill="#0014eb"/>
+    <path d="M383.06,336.79c11.6-21.05,20.72-43.68,26.94-67.53-10.8.41-21.61.81-32.4,1.21-48.38,1.81-96.79,3.62-145.88,5.28-.86,1.84-1.73,3.69-2.59,5.52l-6.61,14.08c-6.13,13.03-12.41,26.14-18.92,39.18,55.66,2.59,116.23,4.21,179.47,2.24h0Z" fill="#0014eb"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/docs/public/logo.svg b/docs/public/logo.svg
index fe43696e..815c15f1 100644
--- a/docs/public/logo.svg
+++ b/docs/public/logo.svg
@@ -1,18 +1,18 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <!-- Rounded square background -->
-  <rect width="200" height="200" rx="24" fill="#4f46e5"/>
-
-  <!-- Three diagonal lines - full opacity (top) -->
-  <g stroke="white" stroke-width="10" stroke-linecap="round" fill="none">
-    <path d="M 20 130 C 50 130, 130 50, 130 20"/>
-    <line x1="20" y1="80" x2="80" y2="20"/>
-    <line x1="20" y1="30" x2="30" y2="20"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" version="1.2" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.3 Build 87)  -->
+  <g>
+    <path d="M201.39,285.09l6.59-14.05c1.42-3.04,2.85-6.09,4.28-9.13-21.06-51.24-38.49-103.96-52.4-157.63-20.84,22.23-38.31,47.74-51.47,75.75,18.41,50.36,43.75,98.02,75.43,141.5,6.03-12.13,11.87-24.31,17.57-36.44h0Z" fill="#0014eb"/>
+    <path d="M171.68,345.01c-31.07-40.94-56.61-85.62-76.19-132.84-9.77,29.37-15.14,60.8-15.14,93.51v39.26c18.3,21.47,35.04,44.3,50.06,68.39,15.23-21.55,28.78-44.64,41.28-68.31h0Z" fill="#0014eb"/>
+    <path d="M80.34,382.53v88.52c12.53-11.5,24.07-24.06,34.79-37.41-10.66-17.73-22.28-34.78-34.79-51.1h0Z" fill="#0014eb"/>
+    <path d="M226.09,232.75c9.06-18.81,18.46-37.53,28.58-55.83-.53-29.56-2.77-58.22-5.04-85.99-1.33-16.28-2.68-32.85-3.7-49.77-24.24,11.58-46.59,26.51-66.56,44.18,12.43,50.09,28,99.36,46.74,147.41h-.01Z" fill="#0014eb"/>
+    <path d="M273.11,88.88c1.36,16.57,2.7,33.48,3.71,50.73,15.97-24.79,33.89-48.2,54.86-69.23,22.3-22.36,48.05-41.64,75.71-57.05h-38.86c-34.97,0-68.48,6.33-99.49,17.91,1.02,19.6,2.52,38.84,4.07,57.65h0Z" fill="#0014eb"/>
   </g>
-
-  <!-- Three diagonal lines - 20% opacity (bottom) -->
-  <g stroke="white" stroke-width="10" stroke-linecap="round" opacity="0.2" fill="none">
-    <path d="M 70 180 C 70 150, 150 70, 180 70"/>
-    <line x1="120" y1="180" x2="180" y2="120"/>
-    <line x1="170" y1="180" x2="180" y2="170"/>
+  <g>
+    <path d="M348.17,87.4c-24.73,24.8-45.17,53.56-63.25,84.16,44.24-11.95,89.28-20.47,134.73-25.5V33.73c-26.14,14.44-50.46,32.59-71.48,53.67Z" fill="#0014eb"/>
+    <path d="M268.47,201.02c-8.8,16.59-17.12,33.5-25.2,50.46,44.86-1.54,89.22-3.19,133.54-4.85,12.81-.48,25.62-.96,38.44-1.44,2.85-16.5,4.42-33.45,4.42-50.78v-24.26c-50.63,5.73-100.74,15.86-149.73,30.43l-1.47.44h0Z" fill="#0014eb"/>
+    <path d="M141.03,438.99c-12.88,17.05-26.95,33.1-42.56,47.69h33.12c48.37,0,93.91-12.15,133.94-33.53-42.1-10.05-84.35-14.87-124.51-14.17h0Z" fill="#0014eb"/>
+    <path d="M325.85,361.65c-47.04,0-92.06-1.64-134.18-3.71-10.38,19.57-21.5,38.78-33.7,57.17,44.25.88,90.44,7.9,135.96,20.78,29.01-20.12,54.18-45.5,74.26-74.76-14.25.32-28.41.52-42.34.52Z" fill="#0014eb"/>
+    <path d="M383.06,336.79c11.6-21.05,20.72-43.68,26.94-67.53-10.8.41-21.61.81-32.4,1.21-48.38,1.81-96.79,3.62-145.88,5.28-.86,1.84-1.73,3.69-2.59,5.52l-6.61,14.08c-6.13,13.03-12.41,26.14-18.92,39.18,55.66,2.59,116.23,4.21,179.47,2.24h0Z" fill="#0014eb"/>
   </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/docs/public/tailwind-preset.js b/docs/public/tailwind-preset.js
new file mode 100644
index 00000000..01164eb8
--- /dev/null
+++ b/docs/public/tailwind-preset.js
@@ -0,0 +1,39 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        recinq: {
+          'midnight-navy': '#0F1F49',
+          'crystal-white': '#FFFFFF',
+          'quantum-blue': '#0014EB',
+          'pulse-blue': '#5664F4',
+          'soft-indigo': '#8F96F6',
+          'nebula-light': '#E6E8FD',
+          'neutral-fog': '#F2F2F7',
+        },
+      },
+      fontFamily: {
+        'recinq': ['"Neue Montreal"', '"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+        'recinq-logo': ['"Cold Warm"', 'sans-serif'],
+      },
+      fontSize: {
+        'recinq-h1': ['64px', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'recinq-h2': ['40px', { lineHeight: '1.2', letterSpacing: '-0.01em', fontWeight: '500' }],
+        'recinq-h3': ['24px', { lineHeight: '1.3', letterSpacing: '0', fontWeight: '500' }],
+        'recinq-body': ['16px', { lineHeight: '1.5', fontWeight: '400' }],
+        'recinq-caption': ['13px', { lineHeight: '1.4', fontWeight: '300' }],
+        'recinq-doc-h1': ['22pt', { lineHeight: '1.1', fontWeight: '700' }],
+        'recinq-doc-h2': ['16pt', { lineHeight: '1.2', fontWeight: '500' }],
+        'recinq-doc-body': ['11pt', { lineHeight: '1.5', fontWeight: '400' }],
+      },
+      backgroundImage: {
+        'recinq-aurora': 'linear-gradient(135deg, #E4E6FD 0%, #5664F4 50%, #8F96F6 100%)',
+        'recinq-aurora-dark': 'linear-gradient(135deg, #5664F4 0%, #0F1F49 100%)',
+      },
+      borderRadius: {
+        'recinq-callout': '8px',
+      },
+    },
+  },
+};
diff --git a/specs/683-brand-guidelines/plan.md b/specs/683-brand-guidelines/plan.md
new file mode 100644
index 00000000..1911153e
--- /dev/null
+++ b/specs/683-brand-guidelines/plan.md
@@ -0,0 +1,79 @@
+# Implementation Plan: Brand Guidelines Alignment
+
+## Objective
+
+Replace the Wave documentation site's generic indigo/purple palette and system fonts with the re:cinq brand guidelines v1.0 color scheme (Midnight Navy, Quantum Blue, Aurora gradients) and Neue Montreal typography.
+
+## Approach
+
+This is a CSS-first theming change. The VitePress theme uses CSS custom properties (`--wave-*` and `--vp-c-brand-*`) extensively, making the color swap straightforward. Typography requires adding `@font-face` declarations for Neue Montreal and updating the font stack. Logo/favicon are asset replacements.
+
+**Strategy:** Work bottom-up from CSS variables (foundation) through component styles, then config/assets, finishing with the hero section.
+
+## File Mapping
+
+### Modified Files
+| File | Change |
+|------|--------|
+| `docs/.vitepress/theme/styles/custom.css` | Replace all `--wave-*` color variables with brand palette values; add `@font-face` for Neue Montreal; update `--vp-c-brand-*` mappings; update dark mode overrides to Midnight Navy |
+| `docs/.vitepress/theme/styles/components.css` | Update hardcoded hex values in component styles to use brand CSS variables; update gradients to Aurora; adjust border-radius to 8-12px per brand spec |
+| `docs/.vitepress/config.ts` | Update font preconnect links if using CDN; update favicon path if format changes |
+| `docs/public/logo.svg` | Replace wave motif SVG with re:cinq blue leaf logomark with brackets/slashes |
+| `docs/public/favicon.ico` | Replace with simplified leaf icon favicon |
+| `docs/index.md` | Update any hardcoded color references in hero section inline styles |
+
+### No Changes Expected
+| File | Reason |
+|------|--------|
+| `docs/.vitepress/theme/index.ts` | Component registrations unchanged |
+| `docs/.vitepress/theme/types.ts` | Type definitions unchanged |
+| Vue components | They consume CSS variables; no source changes needed unless they have hardcoded hex values |
+
+### Possible New Files
+| File | Condition |
+|------|-----------|
+| `docs/public/fonts/NeueMontreal-*.woff2` | If self-hosting the font (preferred for performance) |
+
+## Architecture Decisions
+
+1. **Self-hosted fonts over CDN**: Neue Montreal is not on Google Fonts. Self-host WOFF2 files in `docs/public/fonts/` with `@font-face` declarations. This avoids third-party dependencies and GDPR concerns.
+
+2. **Preserve `--wave-*` variable naming**: Keep the `--wave-` prefix for project-specific variables but update their values to brand colors. This avoids a mass rename across all component files. Add `--brand-*` aliases for direct brand token access.
+
+3. **Keep functional status colors**: Trust badges use green/amber/red for semantic meaning. These stay but are verified against new brand backgrounds for contrast.
+
+4. **Logo as SVG**: Create a clean SVG leaf logomark matching the brand description (blue leaf with brackets/slashes). The favicon can be generated from the same SVG source.
+
+5. **Aurora gradient as reusable variable**: Define `--brand-aurora-gradient` as a CSS custom property so it can be reused across hero, feature cards, and other sections.
+
+## Risks
+
+| Risk | Impact | Mitigation |
+|------|--------|------------|
+| Neue Montreal font licensing | Cannot distribute proprietary font | Check if font files are available in project assets or use a suitable open-source alternative (e.g., PP Neue Montreal if licensed, or Montreal as fallback) |
+| Hardcoded hex values in Vue components | Brand colors not applied everywhere | Grep for all hex color literals (`#4f46e5`, `#4338ca`, `#06b6d4`, `#8b5cf6`) across Vue/CSS files |
+| Dark mode contrast | Text unreadable against Midnight Navy | Test WCAG AA contrast ratios for all text/background combinations |
+| Terminal preview colors | Syntax highlighting may clash with new palette | Terminal uses its own isolated color scheme; verify it works against Midnight Navy |
+| Missing asset files | Logo/favicon not attached to issue | Create placeholder SVGs matching the brand description; flag for design review |
+
+## Testing Strategy
+
+1. **Visual regression**: Run `npm run docs:dev` and manually verify:
+   - Home page hero with Aurora gradient
+   - Light mode: Crystal White/Neutral Fog backgrounds
+   - Dark mode: Midnight Navy backgrounds
+   - Feature cards with brand colors
+   - Trust badges remain readable
+   - Terminal preview contrast
+
+2. **Build verification**: Run `npm run docs:build` to confirm no build errors
+
+3. **Grep validation**: Verify no legacy hex values remain:
+   - `#4f46e5` (old primary)
+   - `#4338ca` (old primary-dark)
+   - `#06b6d4` (old secondary)
+   - `#8b5cf6` (old accent)
+
+4. **Font loading**: Verify Neue Montreal renders in headings and body text in browser DevTools
+
+5. **Cross-browser**: Verify `@font-face` loads in Chrome, Firefox, Safari
diff --git a/specs/683-brand-guidelines/spec.md b/specs/683-brand-guidelines/spec.md
new file mode 100644
index 00000000..99bb7d2e
--- /dev/null
+++ b/specs/683-brand-guidelines/spec.md
@@ -0,0 +1,83 @@
+# docs: align VitePress documentation site with re:cinq brand guidelines v1.0
+
+**Issue:** [#683](https://github.com/re-cinq/wave/issues/683)
+**Repository:** re-cinq/wave
+**Author:** nextlevelshit
+**State:** OPEN
+**Labels:** none
+
+## Context
+
+The re:cinq brand guidelines v1.0 have been finalised. The Wave documentation site (VitePress) currently uses a generic indigo/purple palette and system fonts that don't match the official brand identity.
+
+## Brand Specifications
+
+### Color Palette (Primary)
+| Token | Name | Hex | Usage |
+|-------|------|-----|-------|
+| `--brand-midnight-navy` | Midnight Navy | `#0F1F49` | Main neutral, dark backgrounds, typography |
+| `--brand-crystal-white` | Crystal White | `#FFFFFF` | Light backgrounds, text on dark |
+| `--brand-quantum-blue` | Quantum Blue | `#0014EB` | Accent: buttons, links, highlights |
+| `--brand-aurora-start` | Aurora gradient start | `#E4E6FD` | Gradient backgrounds |
+| `--brand-aurora-mid` | Aurora gradient mid | `#5664F4` | Gradient backgrounds |
+| `--brand-aurora-end` | Aurora gradient end | `#8F96F6` | Gradient backgrounds |
+
+### Color Palette (Secondary)
+| Token | Name | Hex | Usage |
+|-------|------|-----|-------|
+| `--brand-pulse-blue` | Pulse Blue | `#5664F4` | Supporting accent |
+| `--brand-soft-indigo` | Soft Indigo | `#8F96F6` | Supporting accent |
+| `--brand-nebula-light` | Nebula Light | `#E6E8FD` | Light backgrounds, cards |
+| `--brand-neutral-fog` | Neutral Fog | `#F2F2F7` | Subtle backgrounds |
+
+### Typography
+- **Font family:** Neue Montreal (sans-serif) -- headlines and body
+- **H1:** Bold, 64px/48pt
+- **H2:** Medium/Bold, 40px/30pt
+- **H3:** Medium/Regular, 24px/18pt
+- **Body:** Regular, 16-18px/12-14pt
+- **Captions:** Light/Regular, 12-14px/9-10pt
+- **Mono (code):** keep JetBrains Mono
+
+### Visual Elements
+- Aurora gradient for hero/banner sections
+- Rounded corners: 8-12px (callout/highlight blocks)
+- Brand Pattern 1.0: white at 20-30% opacity on Aurora/Pulse Blue backgrounds
+- Leaf logomark (blue, brackets/slashes inside)
+- Clean, minimal icon style with soft gradients
+
+## Scope
+
+### Files to update
+- `docs/.vitepress/theme/styles/custom.css` -- replace `--wave-*` colour variables with brand tokens, add Neue Montreal `@font-face` or Google Fonts import
+- `docs/.vitepress/theme/styles/components.css` -- update component colours
+- `docs/.vitepress/config.ts` -- update font preconnect, og metadata, site title/description if needed
+- `docs/public/logo.svg` -- replace with re:cinq logomark (blue leaf)
+- `docs/public/favicon.ico` -- replace with re:cinq favicon (simplified leaf icon)
+- `docs/index.md` -- update hero section if it uses hardcoded brand elements
+
+### Changes
+1. **Colour tokens** -- map all `--wave-primary`, `--wave-accent`, `--wave-secondary` to brand palette. Dark mode: use Midnight Navy backgrounds. Light mode: use Crystal White/Neutral Fog backgrounds with Quantum Blue accents
+2. **VitePress brand vars** -- `--vp-c-brand-1/2/3` should map to Quantum Blue / Pulse Blue / Soft Indigo
+3. **Hero gradient** -- replace current `linear-gradient(135deg, ...)` with Aurora gradient
+4. **Typography** -- add Neue Montreal as primary sans-serif font; keep JetBrains Mono for code
+5. **Logo & favicon** -- replace Wave SVG with re:cinq leaf logomark
+6. **Feature cards** -- update hover shadow, border, and background to match brand callout style (Aurora gradient bg, 8-12px radius)
+7. **Trust badges / status colours** -- keep functional green/amber/red but ensure they work against new backgrounds
+
+### Out of scope
+- Content rewrites (that's a separate pass)
+- `wave serve` web dashboard (separate issue)
+
+## Acceptance Criteria
+- [ ] `docs/.vitepress/theme/styles/custom.css` uses brand hex values exclusively (no legacy `#4f46e5` etc.)
+- [ ] Neue Montreal loads correctly and renders in headings + body
+- [ ] Logo and favicon match re:cinq logomark
+- [ ] Dark mode uses Midnight Navy (`#0F1F49`) backgrounds
+- [ ] Light mode uses Crystal White / Neutral Fog backgrounds
+- [ ] Aurora gradient visible in hero section
+- [ ] `npm run docs:dev` renders without visual regressions
+
+## Missing Assets
+- Neue Montreal font files or CDN URL not provided -- implementer will need to source the font
+- Actual logo SVG and favicon files not attached to the issue
diff --git a/specs/683-brand-guidelines/tasks.md b/specs/683-brand-guidelines/tasks.md
new file mode 100644
index 00000000..28b77296
--- /dev/null
+++ b/specs/683-brand-guidelines/tasks.md
@@ -0,0 +1,30 @@
+# Tasks
+
+## Phase 1: Foundation — CSS Variables & Typography
+
+- [X] Task 1.1: Replace `--wave-*` color variables in `custom.css` with brand palette values (Quantum Blue, Pulse Blue, Soft Indigo) for both light and dark mode
+- [X] Task 1.2: Map VitePress `--vp-c-brand-1/2/3` to Quantum Blue / Pulse Blue / Soft Indigo in `custom.css`
+- [X] Task 1.3: Update dark mode overrides to use Midnight Navy (`#0F1F49`) backgrounds
+- [X] Task 1.4: Add Neue Montreal `@font-face` declarations (self-hosted WOFF2 in `docs/public/fonts/`) and update `--vp-font-family-base` to use Neue Montreal
+- [X] Task 1.5: Update `config.ts` font preconnect links — add preload for Neue Montreal font files, keep JetBrains Mono
+
+## Phase 2: Component Styles
+
+- [X] Task 2.1: Update `components.css` — hero gradient to Aurora (`#E4E6FD` → `#5664F4` → `#8F96F6`), feature card border-radius to 8-12px, card backgrounds to Nebula Light [P]
+- [X] Task 2.2: Update `HeroSection.vue` terminal colors — adjust terminal background/text to harmonize with Midnight Navy palette [P]
+- [X] Task 2.3: Update `TerminalOutput.vue` and `TerminalPreview.vue` terminal backgrounds to align with brand dark colors [P]
+- [X] Task 2.4: Verify trust/status color fallbacks in `TrustSignals.vue`, `PermissionMatrix.vue`, `YamlPlayground.vue`, `UseCaseGallery.vue` — keep functional green/amber/red, ensure contrast against new backgrounds [P]
+- [X] Task 2.5: Update `CopyButton.vue` hardcoded success green to use CSS variable [P]
+- [X] Task 2.6: Update `PipelineVisualizer.vue` persona colors to harmonize with brand palette [P]
+
+## Phase 3: Assets
+
+- [X] Task 3.1: Replace `docs/public/logo.svg` with re:cinq leaf logomark (blue, brackets/slashes inside, Quantum Blue background)
+- [X] Task 3.2: Replace `docs/public/favicon.svg` with simplified re:cinq leaf icon
+- [X] Task 3.3: Update `docs/index.md` hero section — no hardcoded color references found (uses CSS variables)
+
+## Phase 4: Validation
+
+- [X] Task 4.1: Grep for legacy hex values (`#4f46e5`, `#4338ca`, `#06b6d4`, `#8b5cf6`, `#818cf8`, `#6366f1`, `#22d3ee`) — confirmed zero matches in CSS/Vue files
+- [X] Task 4.2: Run `go test ./...` — all tests pass
+- [X] Task 4.3: Visual spot-check — not possible in headless environment (requires browser)