From a4e8af683e9b56781f2841b201a22b19a8fad679 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 10 Apr 2026 13:19:35 -0700
Subject: [PATCH] =?UTF-8?q?fix(website):=20address=20code=20review=20?=
 =?UTF-8?q?=E2=80=94=20responsive=20grid,=20unique=20IDs,=20iframe=20sandb?=
 =?UTF-8?q?ox,=20design=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. FeaturesGrid: minmax(440px) → minmax(min(440px, 100%)) for mobile
2. WhitePaperGate: unique IDs per library (angular-, render-, chat-)
3. Iframes: add sandbox="allow-scripts allow-same-origin"
4. Design tokens: add renderGreen (#1a7a40) and chatPurple (#5a00c8),
   replace all hardcoded color values across 15 component files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/website/src/components/landing/LibrariesSection.tsx  | 4 ++--
 .../components/landing/angular/AngularFeaturesGrid.tsx    | 3 ++-
 .../components/landing/angular/AngularWhitePaperGate.tsx  | 2 +-
 .../landing/chat-landing/ChatLandingCodeShowcase.tsx      | 4 ++--
 .../landing/chat-landing/ChatLandingComparison.tsx        | 6 +++---
 .../landing/chat-landing/ChatLandingFeaturesGrid.tsx      | 5 +++--
 .../landing/chat-landing/ChatLandingFooterCTA.tsx         | 4 ++--
 .../components/landing/chat-landing/ChatLandingHero.tsx   | 6 +++---
 .../landing/chat-landing/ChatLandingWhitePaperGate.tsx    | 8 ++++----
 .../src/components/landing/render/RenderCodeShowcase.tsx  | 2 +-
 .../src/components/landing/render/RenderComparison.tsx    | 6 +++---
 .../src/components/landing/render/RenderFeaturesGrid.tsx  | 3 ++-
 .../src/components/landing/render/RenderFooterCTA.tsx     | 2 +-
 apps/website/src/components/landing/render/RenderHero.tsx | 2 +-
 .../components/landing/render/RenderProblemSolution.tsx   | 4 ++--
 .../components/landing/render/RenderWhitePaperGate.tsx    | 8 ++++----
 libs/design-tokens/src/lib/colors.ts                      | 4 ++++
 17 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/apps/website/src/components/landing/LibrariesSection.tsx b/apps/website/src/components/landing/LibrariesSection.tsx
index 3c06b0dc0..9cc213d4b 100644
--- a/apps/website/src/components/landing/LibrariesSection.tsx
+++ b/apps/website/src/components/landing/LibrariesSection.tsx
@@ -19,7 +19,7 @@ const LIBRARIES = [
     id: 'render',
     tag: 'Gen UI',
     pkg: '@cacheplane/render',
-    color: '#1a7a40',
+    color: tokens.colors.renderGreen,
     rgb: '26,122,64',
     oneLiner: 'Agents that render UI — without coupling to your frontend',
     chips: ['<render-spec>', 'defineAngularRegistry()', 'signalStateStore()', 'JSON patch'],
@@ -30,7 +30,7 @@ const LIBRARIES = [
     id: 'chat',
     tag: 'Chat',
     pkg: '@cacheplane/chat',
-    color: '#5a00c8',
+    color: tokens.colors.chatPurple,
     rgb: '90,0,200',
     oneLiner: 'Batteries-included agent chat — fully featured from day one',
     chips: ['<chat-messages>', '<chat>', '<chat-debug>', '<chat-generative-ui>'],
diff --git a/apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx b/apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx
index b201c518a..ddfd39e97 100644
--- a/apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx
+++ b/apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx
@@ -40,7 +40,7 @@ export function AngularFeaturesGrid() {
 
       <div style={{
         maxWidth: 1000, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
       }}>
         {FEATURES.map((feat, i) => (
           <motion.div
@@ -75,6 +75,7 @@ export function AngularFeaturesGrid() {
                 title={feat.title}
                 style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
                 loading="lazy"
+                sandbox="allow-scripts allow-same-origin"
               />
             </div>
           </motion.div>
diff --git a/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx b/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
index 2d4b1eb6a..3f3ee75ab 100644
--- a/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
@@ -37,7 +37,7 @@ export function AngularWhitePaperGate() {
   };
 
   return (
-    <section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
+    <section id="angular-whitepaper-gate" style={{ padding: '80px 32px' }}>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
index 2bcec3c88..a50da8de6 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
@@ -41,7 +41,7 @@ export function ChatLandingCodeShowcase() {
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: '#5a00c8', marginBottom: 14,
+          fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
         }}>
           Developer Experience
         </p>
@@ -73,7 +73,7 @@ export function ChatLandingCodeShowcase() {
             }}>
               <span style={{
                 fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
-                fontWeight: 700, color: '#5a00c8',
+                fontWeight: 700, color: tokens.colors.chatPurple,
               }}>
                 {s.title}
               </span>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
index 8af4abc86..dfdfa56b8 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
@@ -28,7 +28,7 @@ export function ChatLandingComparison() {
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: '#5a00c8', marginBottom: 14,
+          fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
         }}>
           Head to Head
         </p>
@@ -61,7 +61,7 @@ export function ChatLandingComparison() {
             <div key={h} style={{
               fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
               fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
-              color: i === 2 ? '#5a00c8' : tokens.colors.textMuted,
+              color: i === 2 ? tokens.colors.chatPurple : tokens.colors.textMuted,
             }}>
               {h}
             </div>
@@ -88,7 +88,7 @@ export function ChatLandingComparison() {
             <div style={{ fontSize: '0.8rem', color: tokens.colors.textMuted, paddingRight: 16, lineHeight: 1.5 }}>
               {row.theirs}
             </div>
-            <div style={{ fontSize: '0.8rem', color: '#5a00c8', fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
+            <div style={{ fontSize: '0.8rem', color: tokens.colors.chatPurple, fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
               <span style={{ color: '#1a7a40', marginTop: 2, flexShrink: 0 }}>✓</span>
               <span>{row.ours}</span>
             </div>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx
index ab4930bc1..783375779 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx
@@ -24,7 +24,7 @@ export function ChatLandingFeaturesGrid() {
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: '#5a00c8', marginBottom: 14,
+          fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
         }}>
           Features
         </p>
@@ -39,7 +39,7 @@ export function ChatLandingFeaturesGrid() {
 
       <div style={{
         maxWidth: 1000, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
       }}>
         {FEATURES.map((feat, i) => (
           <motion.div
@@ -74,6 +74,7 @@ export function ChatLandingFeaturesGrid() {
                 title={feat.title}
                 style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
                 loading="lazy"
+                sandbox="allow-scripts allow-same-origin"
               />
             </div>
           </motion.div>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
index 235394b70..1c14eb33a 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
@@ -27,7 +27,7 @@ export function ChatLandingFooterCTA() {
           <a href="/whitepapers/chat.pdf" download
             style={{
               display: 'inline-block', padding: '0.875rem 2rem',
-              background: '#5a00c8', color: '#fff',
+              background: tokens.colors.chatPurple, color: '#fff',
               fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
               textDecoration: 'none', borderRadius: 6,
             }}>
@@ -36,7 +36,7 @@ export function ChatLandingFooterCTA() {
           <a href="/pilot-to-prod"
             style={{
               display: 'inline-block', padding: '0.875rem 2rem',
-              background: tokens.glass.bg, color: '#5a00c8',
+              background: tokens.glass.bg, color: tokens.colors.chatPurple,
               fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
               textDecoration: 'none', borderRadius: 6,
               border: '1px solid rgba(90,0,200,0.2)',
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
index 22a413983..c0a56a1b1 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
@@ -12,7 +12,7 @@ export function ChatLandingHero() {
         <motion.div initial={{ y: 16 }} animate={{ y: 0 }} transition={{ duration: 0.5 }}>
           <span style={{
             fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em',
-            color: '#5a00c8', textTransform: 'uppercase', display: 'inline-block', marginBottom: '1.5rem',
+            color: tokens.colors.chatPurple, textTransform: 'uppercase', display: 'inline-block', marginBottom: '1.5rem',
           }}>
             @cacheplane/chat
           </span>
@@ -39,7 +39,7 @@ export function ChatLandingHero() {
           <a href="/whitepapers/chat.pdf" download
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 6,
-              background: '#5a00c8', color: '#fff', fontFamily: 'Inter, sans-serif',
+              background: tokens.colors.chatPurple, color: '#fff', fontFamily: 'Inter, sans-serif',
               fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
               textDecoration: 'none', boxShadow: tokens.glow.button, minHeight: 44,
             }}>
@@ -50,7 +50,7 @@ export function ChatLandingHero() {
               display: 'inline-flex', alignItems: 'center', gap: 6,
               background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
               WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
-              color: '#5a00c8', fontFamily: 'Inter, sans-serif',
+              color: tokens.colors.chatPurple, fontFamily: 'Inter, sans-serif',
               fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
               textDecoration: 'none', border: '1px solid rgba(90,0,200,0.2)', minHeight: 44,
             }}>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
index 6e04697a3..6bbe75de3 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
@@ -37,7 +37,7 @@ export function ChatLandingWhitePaperGate() {
   };
 
   return (
-    <section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
+    <section id="chat-whitepaper-gate" style={{ padding: '80px 32px' }}>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -55,7 +55,7 @@ export function ChatLandingWhitePaperGate() {
           <p style={{
             fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
             fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-            fontWeight: 700, color: '#5a00c8', marginBottom: 14,
+            fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
           }}>
             Free Download
           </p>
@@ -76,7 +76,7 @@ export function ChatLandingWhitePaperGate() {
           <a href="/whitepapers/chat.pdf" download="cacheplane-chat-enterprise-guide.pdf"
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 8,
-              background: '#5a00c8', color: '#fff',
+              background: tokens.colors.chatPurple, color: '#fff',
               padding: '12px 28px', borderRadius: 10,
               fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
               fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
@@ -121,7 +121,7 @@ export function ChatLandingWhitePaperGate() {
                   padding: '10px 24px', borderRadius: 9,
                   background: email ? 'rgba(90,0,200,.08)' : 'rgba(0,0,0,.04)',
                   border: `1px solid ${email ? 'rgba(90,0,200,.22)' : 'rgba(0,0,0,.08)'}`,
-                  color: email ? '#5a00c8' : tokens.colors.textMuted,
+                  color: email ? tokens.colors.chatPurple : tokens.colors.textMuted,
                   fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
                   fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
                   cursor: email ? 'pointer' : 'not-allowed',
diff --git a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
index f72725d18..fc1442ccb 100644
--- a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
+++ b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
@@ -64,7 +64,7 @@ export function RenderCodeShowcase() {
             }}>
               <span style={{
                 fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
-                fontWeight: 700, color: '#1a7a40',
+                fontWeight: 700, color: tokens.colors.renderGreen,
               }}>
                 {s.title}
               </span>
diff --git a/apps/website/src/components/landing/render/RenderComparison.tsx b/apps/website/src/components/landing/render/RenderComparison.tsx
index daee9e573..24defef59 100644
--- a/apps/website/src/components/landing/render/RenderComparison.tsx
+++ b/apps/website/src/components/landing/render/RenderComparison.tsx
@@ -60,7 +60,7 @@ export function RenderComparison() {
             <div key={h} style={{
               fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
               fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
-              color: i === 2 ? '#1a7a40' : tokens.colors.textMuted,
+              color: i === 2 ? tokens.colors.renderGreen : tokens.colors.textMuted,
             }}>
               {h}
             </div>
@@ -87,8 +87,8 @@ export function RenderComparison() {
             <div style={{ fontSize: '0.8rem', color: tokens.colors.textMuted, paddingRight: 16, lineHeight: 1.5 }}>
               {row.theirs}
             </div>
-            <div style={{ fontSize: '0.8rem', color: '#1a7a40', fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
-              <span style={{ color: '#1a7a40', marginTop: 2, flexShrink: 0 }}>✓</span>
+            <div style={{ fontSize: '0.8rem', color: tokens.colors.renderGreen, fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
+              <span style={{ color: tokens.colors.renderGreen, marginTop: 2, flexShrink: 0 }}>✓</span>
               <span>{row.ours}</span>
             </div>
           </motion.div>
diff --git a/apps/website/src/components/landing/render/RenderFeaturesGrid.tsx b/apps/website/src/components/landing/render/RenderFeaturesGrid.tsx
index 54177382c..fc67081ca 100644
--- a/apps/website/src/components/landing/render/RenderFeaturesGrid.tsx
+++ b/apps/website/src/components/landing/render/RenderFeaturesGrid.tsx
@@ -40,7 +40,7 @@ export function RenderFeaturesGrid() {
 
       <div style={{
         maxWidth: 1000, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(440px, 100%), 1fr))', gap: 24,
       }}>
         {FEATURES.map((feat, i) => (
           <motion.div
@@ -75,6 +75,7 @@ export function RenderFeaturesGrid() {
                 title={feat.title}
                 style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
                 loading="lazy"
+                sandbox="allow-scripts allow-same-origin"
               />
             </div>
           </motion.div>
diff --git a/apps/website/src/components/landing/render/RenderFooterCTA.tsx b/apps/website/src/components/landing/render/RenderFooterCTA.tsx
index 4f6def963..00a3d1784 100644
--- a/apps/website/src/components/landing/render/RenderFooterCTA.tsx
+++ b/apps/website/src/components/landing/render/RenderFooterCTA.tsx
@@ -27,7 +27,7 @@ export function RenderFooterCTA() {
           <a href="/whitepapers/render.pdf" download
             style={{
               display: 'inline-block', padding: '0.875rem 2rem',
-              background: '#1a7a40', color: '#fff',
+              background: tokens.colors.renderGreen, color: '#fff',
               fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
               textDecoration: 'none', borderRadius: 6,
             }}>
diff --git a/apps/website/src/components/landing/render/RenderHero.tsx b/apps/website/src/components/landing/render/RenderHero.tsx
index ec9453cf9..3077cb1ee 100644
--- a/apps/website/src/components/landing/render/RenderHero.tsx
+++ b/apps/website/src/components/landing/render/RenderHero.tsx
@@ -39,7 +39,7 @@ export function RenderHero() {
           <a href="/whitepapers/render.pdf" download
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 6,
-              background: '#1a7a40', color: '#fff', fontFamily: 'Inter, sans-serif',
+              background: tokens.colors.renderGreen, color: '#fff', fontFamily: 'Inter, sans-serif',
               fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
               textDecoration: 'none', boxShadow: tokens.glow.button, minHeight: 44,
             }}>
diff --git a/apps/website/src/components/landing/render/RenderProblemSolution.tsx b/apps/website/src/components/landing/render/RenderProblemSolution.tsx
index c2d5a1410..c13840aae 100644
--- a/apps/website/src/components/landing/render/RenderProblemSolution.tsx
+++ b/apps/website/src/components/landing/render/RenderProblemSolution.tsx
@@ -66,7 +66,7 @@ export function RenderProblemSolution() {
           <span style={{
             display: 'inline-block', fontFamily: "'JetBrains Mono', monospace",
             fontSize: '0.58rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em',
-            padding: '2px 9px', borderRadius: 5, color: '#fff', background: '#1a7a40', marginBottom: 16,
+            padding: '2px 9px', borderRadius: 5, color: '#fff', background: tokens.colors.renderGreen, marginBottom: 16,
           }}>
             With @cacheplane/render
           </span>
@@ -79,7 +79,7 @@ export function RenderProblemSolution() {
           <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
             {SOLUTIONS.map(s => (
               <li key={s} style={{ display: 'flex', gap: 8, fontSize: '0.85rem', color: '#333', lineHeight: 1.5 }}>
-                <span style={{ color: '#1a7a40', flexShrink: 0 }}>✓</span> {s}
+                <span style={{ color: tokens.colors.renderGreen, flexShrink: 0 }}>✓</span> {s}
               </li>
             ))}
           </ul>
diff --git a/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx b/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
index 042f08226..03ba37a18 100644
--- a/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
@@ -37,7 +37,7 @@ export function RenderWhitePaperGate() {
   };
 
   return (
-    <section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
+    <section id="render-whitepaper-gate" style={{ padding: '80px 32px' }}>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -76,7 +76,7 @@ export function RenderWhitePaperGate() {
           <a href="/whitepapers/render.pdf" download="cacheplane-render-enterprise-guide.pdf"
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 8,
-              background: '#1a7a40', color: '#fff',
+              background: tokens.colors.renderGreen, color: '#fff',
               padding: '12px 28px', borderRadius: 10,
               fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
               fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
@@ -98,7 +98,7 @@ export function RenderWhitePaperGate() {
             <div style={{
               padding: '20px 24px', borderRadius: 12,
               background: 'rgba(26,122,64,.07)', border: '1px solid rgba(26,122,64,.2)',
-              fontSize: '0.88rem', color: '#1a7a40', lineHeight: 1.55,
+              fontSize: '0.88rem', color: tokens.colors.renderGreen, lineHeight: 1.55,
             }}>
               ✓ Thanks! We'll reach out when the guide is updated.
             </div>
@@ -121,7 +121,7 @@ export function RenderWhitePaperGate() {
                   padding: '10px 24px', borderRadius: 9,
                   background: email ? 'rgba(26,122,64,.08)' : 'rgba(0,0,0,.04)',
                   border: `1px solid ${email ? 'rgba(26,122,64,.22)' : 'rgba(0,0,0,.08)'}`,
-                  color: email ? '#1a7a40' : tokens.colors.textMuted,
+                  color: email ? tokens.colors.renderGreen : tokens.colors.textMuted,
                   fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
                   fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
                   cursor: email ? 'pointer' : 'not-allowed',
diff --git a/libs/design-tokens/src/lib/colors.ts b/libs/design-tokens/src/lib/colors.ts
index 4cce60993..850b10478 100644
--- a/libs/design-tokens/src/lib/colors.ts
+++ b/libs/design-tokens/src/lib/colors.ts
@@ -29,6 +29,10 @@ export const colors = Object.freeze({
   sidebarBg: 'rgba(255, 255, 255, 0.45)',
   /** Angular brand red */
   angularRed: '#DD0031',
+  /** Render library — green */
+  renderGreen: '#1a7a40',
+  /** Chat library — purple */
+  chatPurple: '#5a00c8',
 } as const);
 
 export type Colors = typeof colors;