From 2ca3ed9ebac4405752e35288d9fa624f2ab584df Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 5 Jun 2026 12:43:23 -0600
Subject: [PATCH] Normalize demo page styling

---
 .changeset/quiet-demo-surfaces.md             |   6 +
 .../src/components/demo-AIAssistant.tsx       |  30 +--
 .../components/demo-GuitarRecommendation.tsx  |  14 +-
 .../ai/assets/src/routes/demo/ai-chat.css     |  42 ++--
 .../ai/assets/src/routes/demo/ai-chat.tsx     |  32 ++-
 .../ai/assets/src/routes/demo/ai-image.tsx    |  46 ++--
 .../assets/src/routes/demo/ai-structured.tsx  | 123 +++++------
 .../src/routes/demo/guitars/$guitarId.tsx     |  39 ++--
 .../assets/src/routes/demo/guitars/index.tsx  |  48 ++---
 .../assets/src/routes/demo.apollo-client.tsx  |  73 +++----
 .../assets/src/routes/demo/better-auth.tsx    | 128 +++++------
 .../clerk/assets/src/routes/demo/clerk.tsx    |  42 ++--
 .../convex/assets/src/routes/demo/convex.tsx  |  75 +++----
 .../assets/src/components/demo.chat-area.tsx  |  10 +-
 .../assets/src/components/demo.messages.tsx   |  18 +-
 .../db/assets/src/routes/demo/db-chat.tsx     |   8 +-
 .../assets/src/routes/demo/drizzle.tsx.ejs    | 108 +++-------
 .../components/demo.FormComponents.tsx.ejs    |  24 +--
 .../src/routes/demo/form.address.tsx.ejs      |  21 +-
 .../src/routes/demo/form.simple.tsx.ejs       |  21 +-
 .../mcp/assets/src/routes/demo/mcp-todos.tsx  |  28 +--
 .../neon/assets/src/routes/demo/neon.tsx      |  95 ++++----
 .../oRPC/assets/src/routes/demo/orpc-todo.tsx |  28 +--
 .../assets/src/routes/demo.i18n.tsx.ejs       |  13 +-
 .../assets/src/routes/demo/posthog.tsx        |  41 ++--
 .../assets/src/routes/demo/powersync.tsx      |  37 ++--
 .../assets/src/routes/demo/prisma.tsx.ejs     | 108 +++-------
 .../assets/src/routes/demo/sentry.testing.tsx | 173 ++++++---------
 .../assets/src/lib/demo-store-devtools.tsx    |   6 +-
 .../assets/src/routes/demo/store.tsx.ejs      |  23 +-
 .../src/components/storybook/button.tsx       |  49 ++---
 .../src/components/storybook/dialog.tsx       |  28 ++-
 .../assets/src/components/storybook/input.tsx |  31 ++-
 .../src/components/storybook/radio-group.tsx  |  30 +--
 .../src/components/storybook/slider.tsx       |  34 +--
 .../assets/src/routes/demo/storybook.tsx      |  50 ++---
 .../assets/src/components/blocks/media.tsx    |  18 +-
 .../assets/src/components/blocks/quote.tsx    |  16 +-
 .../src/components/markdown-content.tsx       |  87 +++++---
 .../assets/src/components/pagination.tsx      |  22 +-
 .../strapi/assets/src/components/search.tsx   |  24 +--
 .../assets/src/components/strapi-image.tsx    |  30 +--
 .../src/routes/demo/strapi.$articleId.tsx     | 115 +++++-----
 .../strapi/assets/src/routes/demo/strapi.tsx  | 107 ++++-----
 .../tRPC/assets/src/routes/demo/trpc-todo.tsx |  28 +--
 .../assets/src/routes/demo/table.tsx.ejs      |  45 ++--
 .../src/routes/demo/tanstack-query.tsx.ejs    |  56 ++---
 .../assets/src/components/workos-user.tsx     |   2 +-
 .../workos/assets/src/routes/demo/workos.tsx  |  76 +++----
 .../react/project/base/src/styles.css.ejs     | 203 ++++++++++++++++++
 .../assets/src/routes/demo.better-auth.tsx    | 126 ++++++-----
 .../convex/assets/src/routes/demo/convex.tsx  |  73 +++----
 .../form/assets/src/routes/demo.form.tsx.ejs  |  44 ++--
 .../routes/demo.sentry.bad-event-handler.tsx  |  25 ++-
 .../assets/src/routes/demo.store.tsx.ejs      |  23 +-
 .../strapi/assets/src/routes/demo/strapi.tsx  |  26 +--
 .../src/routes/demo/strapi_.$articleId.tsx    |  29 +--
 .../solid/project/base/src/styles.css.ejs     | 203 ++++++++++++++++++
 58 files changed, 1580 insertions(+), 1480 deletions(-)
 create mode 100644 .changeset/quiet-demo-surfaces.md

diff --git a/.changeset/quiet-demo-surfaces.md b/.changeset/quiet-demo-surfaces.md
new file mode 100644
index 00000000..36c68063
--- /dev/null
+++ b/.changeset/quiet-demo-surfaces.md
@@ -0,0 +1,6 @@
+---
+"@tanstack/create": patch
+"@tanstack/cli": patch
+---
+
+Normalize generated demo pages to use the base template styling instead of bespoke full-page gradients and mismatched color treatments.
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
index b896cbeb..2bf342c6 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
@@ -24,7 +24,7 @@ function Messages({ messages }: { messages: ChatMessages }) {
 
   if (!messages.length) {
     return (
-      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+      <div className="demo-muted flex flex-1 items-center justify-center text-sm">
         Ask me anything! I'm here to help.
       </div>
     )
@@ -36,9 +36,7 @@ function Messages({ messages }: { messages: ChatMessages }) {
         <div
           key={id}
           className={`py-3 ${
-            role === 'assistant'
-              ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
-              : 'bg-transparent'
+            role === 'assistant' ? 'bg-[var(--chip-bg)]' : 'bg-transparent'
           }`}
         >
           {parts.map((part, index) => {
@@ -46,15 +44,15 @@ function Messages({ messages }: { messages: ChatMessages }) {
               return (
                 <div key={index} className="flex items-start gap-2 px-4">
                   {role === 'assistant' ? (
-                    <div className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                    <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--lagoon-deep)] text-xs font-medium text-white">
                       AI
                     </div>
                   ) : (
-                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                    <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--sea-ink-soft)] text-xs font-medium text-white">
                       Y
                     </div>
                   )}
-                  <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
+                  <div className="min-w-0 flex-1 max-w-none text-sm text-[var(--sea-ink)]">
                     <Streamdown>{part.content}</Streamdown>
                   </div>
                 </div>
@@ -87,7 +85,7 @@ export default function AIAssistant() {
     <div className="relative z-50">
       <button
         onClick={() => showAIAssistant.setState((state) => !state)}
-        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-green-700 to-green-900 text-white hover:opacity-90 transition-opacity"
+        className="demo-button w-full justify-between px-4 py-2.5"
       >
         <div className="flex items-center gap-2">
           <BotIcon size={24} />
@@ -97,12 +95,14 @@ export default function AIAssistant() {
       </button>
 
       {isOpen && (
-        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
-          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
-            <h3 className="font-semibold text-white">AI Assistant</h3>
+        <div className="demo-panel absolute bottom-0 left-full ml-2 flex h-[600px] w-[700px] flex-col overflow-hidden p-0">
+          <div className="flex items-center justify-between border-b border-[var(--line)] p-3">
+            <h3 className="font-semibold text-[var(--sea-ink)]">
+              AI Assistant
+            </h3>
             <button
               onClick={() => showAIAssistant.setState((state) => !state)}
-              className="text-gray-400 hover:text-white transition-colors"
+              className="demo-muted transition-colors hover:text-[var(--sea-ink)]"
             >
               <X className="w-4 h-4" />
             </button>
@@ -110,7 +110,7 @@ export default function AIAssistant() {
 
           <Messages messages={messages} />
 
-          <div className="p-3 border-t border-orange-500/20">
+          <div className="border-t border-[var(--line)] p-3">
             <form
               onSubmit={(e) => {
                 e.preventDefault()
@@ -125,7 +125,7 @@ export default function AIAssistant() {
                   value={input}
                   onChange={(e) => setInput(e.target.value)}
                   placeholder="Type your message..."
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
+                  className="demo-textarea pr-10 text-sm"
                   rows={1}
                   style={{ minHeight: '36px', maxHeight: '120px' }}
                   onInput={(e) => {
@@ -145,7 +145,7 @@ export default function AIAssistant() {
                 <button
                   type="submit"
                   disabled={!input.trim()}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-[var(--lagoon-deep)] transition-colors hover:text-[var(--sea-ink)] disabled:text-[var(--sea-ink-soft)]"
                 >
                   <Send className="w-4 h-4" />
                 </button>
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx
index 1d5f2444..0eb62dc9 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx
@@ -11,7 +11,7 @@ export default function GuitarRecommendation({ id }: { id: string }) {
     return null
   }
   return (
-    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+    <div className="demo-card my-4 overflow-hidden p-0">
       <div className="aspect-[4/3] relative overflow-hidden">
         <img
           src={guitar.image}
@@ -20,23 +20,25 @@ export default function GuitarRecommendation({ id }: { id: string }) {
         />
       </div>
       <div className="p-4">
-        <h3 className="text-lg font-semibold text-white mb-2">{guitar.name}</h3>
-        <p className="text-sm text-gray-300 mb-3 line-clamp-2">
+        <h3 className="mb-2 text-lg font-semibold text-[var(--sea-ink)]">
+          {guitar.name}
+        </h3>
+        <p className="demo-muted mb-3 line-clamp-2 text-sm">
           {guitar.shortDescription}
         </p>
         <div className="flex items-center justify-between">
-          <div className="text-lg font-bold text-emerald-400">
+          <div className="text-lg font-bold text-[var(--lagoon-deep)]">
             ${guitar.price}
           </div>
           <button
             onClick={() => {
               navigate({
-                to: '/example/guitars/$guitarId',
+                to: '/demo/guitars/$guitarId',
                 params: { guitarId: guitar.id.toString() },
               })
               showAIAssistant.setState(() => false)
             }}
-            className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+            className="demo-button px-4 py-1.5 text-sm"
           >
             View Details
           </button>
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css
index 549ca5cd..8dc5d990 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css
@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import 'highlight.js/styles/github-dark.css';
+@import 'highlight.js/styles/github.css';
 @source "../../../../node_modules/streamdown/dist/*.js";
 
 /* Custom scrollbar styles */
@@ -28,7 +28,7 @@ html {
 /* Markdown content styles */
 .prose {
   max-width: none;
-  color: #e5e7eb; /* text-gray-200 */
+  color: var(--sea-ink-soft);
 }
 
 /* .prose p {
@@ -37,15 +37,15 @@ html {
 } */
 
 .prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
+  color: var(--sea-ink);
+  background-color: var(--chip-bg);
   padding: 0.2em 0.4em;
   border-radius: 0.375rem;
   font-size: 0.875em;
 }
 
 .prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
+  background-color: var(--chip-bg);
   border-radius: 0.5rem;
   padding: 1rem;
   margin: 1.25em 0;
@@ -63,7 +63,7 @@ html {
 .prose h2,
 .prose h3,
 .prose h4 {
-  color: #f9fafb; /* text-gray-50 */
+  color: var(--sea-ink);
   /* margin-top: 2em; */
   /* margin-bottom: 1em; */
 }
@@ -81,27 +81,27 @@ html {
 }
 
 .prose blockquote {
-  border-left-color: #f97316; /* orange-500 */
-  background-color: rgba(249, 115, 22, 0.1);
+  border-left-color: var(--lagoon-deep);
+  background-color: var(--chip-bg);
   padding: 1em;
   margin: 1.25em 0;
   border-radius: 0.5rem;
 }
 
 .prose hr {
-  border-color: rgba(249, 115, 22, 0.2);
+  border-color: var(--line);
   margin: 2em 0;
 }
 
 .prose a {
-  color: #f97316; /* orange-500 */
+  color: var(--lagoon-deep);
   text-decoration: underline;
   text-decoration-thickness: 0.1em;
   text-underline-offset: 0.2em;
 }
 
 .prose a:hover {
-  color: #fb923c; /* orange-400 */
+  color: var(--sea-ink);
 }
 
 .prose table {
@@ -113,11 +113,11 @@ html {
 .prose th,
 .prose td {
   padding: 0.75em;
-  border: 1px solid rgba(249, 115, 22, 0.2);
+  border: 1px solid var(--line);
 }
 
 .prose th {
-  background-color: rgba(249, 115, 22, 0.1);
+  background-color: var(--chip-bg);
   font-weight: 600;
 }
 
@@ -181,16 +181,16 @@ html {
 
 .prose th,
 .prose td {
-  border: 1px solid rgba(249, 115, 22, 0.2);
+  border: 1px solid var(--line);
   padding: 0.5em;
 }
 
 .prose th {
-  background-color: rgba(249, 115, 22, 0.1);
+  background-color: var(--chip-bg);
 }
 
 .prose strong {
-  color: #f9fafb; /* text-gray-50 */
+  color: var(--sea-ink);
   font-weight: 600;
 }
 
@@ -199,23 +199,23 @@ html {
 }
 
 .prose blockquote {
-  border-left: 4px solid #f97316; /* orange-500 */
+  border-left: 4px solid var(--lagoon-deep);
   padding-left: 1em;
   margin: 1em 0;
-  color: #d1d5db; /* text-gray-300 */
+  color: var(--sea-ink-soft);
 }
 
 /* Ensure code blocks match the AI's formatting */
 .prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
+  color: var(--sea-ink);
+  background-color: var(--chip-bg);
   padding: 0.2em 0.4em;
   border-radius: 0.375rem;
   font-size: 0.875em;
 }
 
 .prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
+  background-color: var(--chip-bg);
   border-radius: 0.5rem;
   padding: 1rem;
   margin: 1em 0;
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx
index 2a7f8d18..cc59b8e5 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx
@@ -24,10 +24,8 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
       <div className="text-center max-w-3xl mx-auto w-full">
-        <h1 className="text-6xl font-bold mb-4 bg-linear-to-r from-orange-500 to-red-600 text-transparent bg-clip-text uppercase">
-          <span className="text-white">TanStack</span> Chat
-        </h1>
-        <p className="text-gray-400 mb-6 w-2/3 mx-auto text-lg">
+        <h1 className="demo-title mb-4">TanStack Chat</h1>
+        <p className="demo-muted mb-6 mx-auto max-w-2xl text-lg">
           You can ask me about anything, I might or might not have a good
           answer, but you can still ask.
         </p>
@@ -39,7 +37,7 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
 
 function ChattingLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
+    <div className="sticky bottom-0 left-0 right-0 z-10 border-t border-[var(--line)] bg-[var(--header-bg)] backdrop-blur-sm">
       <div className="max-w-3xl mx-auto w-full px-4 py-3">{children}</div>
     </div>
   )
@@ -96,17 +94,17 @@ function Messages({
               key={message.id}
               className={`p-4 ${
                 message.role === 'assistant'
-                  ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                  ? 'bg-[var(--chip-bg)]'
                   : 'bg-transparent'
               }`}
             >
               <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
                 {message.role === 'assistant' ? (
-                  <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="mt-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--lagoon-deep)] text-sm font-medium text-white">
                     AI
                   </div>
                 ) : (
-                  <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--sea-ink-soft)] text-sm font-medium text-white">
                     Y
                   </div>
                 )}
@@ -115,7 +113,7 @@ function Messages({
                     if (part.type === 'text' && part.content) {
                       return (
                         <div
-                          className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                          className="prose prose-sm min-w-0 max-w-none flex-1"
                           key={index}
                         >
                           <Streamdown>{part.content}</Streamdown>
@@ -145,7 +143,7 @@ function Messages({
                         ? onStopSpeak()
                         : onSpeak(textContent, message.id)
                     }
-                    className="flex-shrink-0 p-2 text-gray-400 hover:text-orange-400 transition-colors"
+                    className="demo-muted flex-shrink-0 p-2 transition-colors hover:text-[var(--lagoon-deep)]"
                     title={isPlaying ? 'Stop speaking' : 'Read aloud'}
                   >
                     {isPlaying ? (
@@ -190,7 +188,7 @@ function ChatPage() {
   const Layout = messages.length ? ChattingLayout : InitialLayout
 
   return (
-    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
+    <div className="relative flex h-[calc(100vh-12rem)] min-h-[32rem]">
       <div className="flex-1 flex flex-col min-h-0">
         <Messages
           messages={messages}
@@ -205,7 +203,7 @@ function ChatPage() {
               <div className="flex items-center justify-center">
                 <button
                   onClick={stop}
-                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                  className="demo-button demo-button-danger"
                 >
                   <Square className="w-4 h-4 fill-current" />
                   Stop
@@ -226,10 +224,8 @@ function ChatPage() {
                   type="button"
                   onClick={handleMicClick}
                   disabled={isLoading || isTranscribing}
-                  className={`p-3 rounded-lg transition-colors ${
-                    isRecording
-                      ? 'bg-red-600 hover:bg-red-700 text-white'
-                      : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
+                  className={`demo-button p-3 ${
+                    isRecording ? 'demo-button-danger' : 'demo-button-secondary'
                   } disabled:opacity-50`}
                   title={isRecording ? 'Stop recording' : 'Start recording'}
                 >
@@ -247,7 +243,7 @@ function ChatPage() {
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type something clever..."
-                    className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
+                    className="demo-textarea pr-12 text-sm"
                     rows={1}
                     style={{ minHeight: '44px', maxHeight: '200px' }}
                     disabled={isLoading}
@@ -268,7 +264,7 @@ function ChatPage() {
                   <button
                     type="submit"
                     disabled={!input.trim() || isLoading}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-[var(--lagoon-deep)] transition-colors hover:text-[var(--sea-ink)] disabled:text-[var(--sea-ink-soft)]"
                   >
                     <Send className="w-4 h-4" />
                   </button>
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx
index bdf8d933..ad6cac55 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx
@@ -73,26 +73,25 @@ function ImagePage() {
   }
 
   return (
-    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-      <div className="max-w-6xl mx-auto">
+    <main className="demo-page demo-page-wide">
+      <div>
         <div className="flex items-center gap-3 mb-6">
-          <ImageIcon className="w-8 h-8 text-orange-500" />
-          <h1 className="text-2xl font-bold text-white">Image Generation</h1>
+          <ImageIcon className="w-8 h-8 text-[var(--lagoon-deep)]" />
+          <h1 className="demo-title">Image Generation</h1>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Input Panel */}
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Size
                 </label>
                 <select
                   value={size}
                   onChange={(e) => setSize(e.target.value)}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-select text-sm"
                 >
                   {SIZES.map((s) => (
                     <option key={s} value={s}>
@@ -102,7 +101,7 @@ function ImagePage() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Count
                 </label>
                 <input
@@ -116,13 +115,13 @@ function ImagePage() {
                   min={1}
                   max={4}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-input text-sm"
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                 Prompt
               </label>
               <textarea
@@ -130,7 +129,7 @@ function ImagePage() {
                 onChange={(e) => setPrompt(e.target.value)}
                 disabled={isLoading}
                 rows={6}
-                className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 resize-none"
+                className="demo-textarea text-sm"
                 placeholder="Describe the image you want to generate..."
               />
             </div>
@@ -138,7 +137,7 @@ function ImagePage() {
             <button
               onClick={handleGenerate}
               disabled={isLoading || !prompt.trim()}
-              className="w-full px-4 py-3 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              className="demo-button w-full"
             >
               {isLoading ? (
                 <>
@@ -151,16 +150,11 @@ function ImagePage() {
             </button>
           </div>
 
-          {/* Output Panel */}
-          <div className="lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
-            <h2 className="text-lg font-semibold text-white mb-4">
-              Generated Images
-            </h2>
+          <div className="demo-panel lg:col-span-2">
+            <h2 className="demo-section-title mb-4">Generated Images</h2>
 
             {error && (
-              <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
-                {error}
-              </div>
+              <div className="demo-alert demo-alert-danger mb-4">{error}</div>
             )}
 
             {images.length > 0 ? (
@@ -171,17 +165,17 @@ function ImagePage() {
                       <img
                         src={getImageSrc(image)}
                         alt={`Generated image ${index + 1}`}
-                        className="w-full rounded-lg border border-gray-700"
+                        className="w-full rounded-lg border border-[var(--line)]"
                       />
                       <button
                         onClick={() => handleDownload(image, index)}
-                        className="absolute top-2 right-2 p-2 bg-gray-900/80 hover:bg-gray-900 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="demo-button absolute right-2 top-2 p-2 opacity-0 transition-opacity group-hover:opacity-100"
                         title="Download image"
                       >
-                        <Download className="w-4 h-4 text-white" />
+                        <Download className="w-4 h-4" />
                       </button>
                       {image.revisedPrompt && (
-                        <p className="mt-2 text-xs text-gray-400 italic">
+                        <p className="demo-muted mt-2 text-xs italic">
                           Revised: {image.revisedPrompt}
                         </p>
                       )}
@@ -190,7 +184,7 @@ function ImagePage() {
                 </div>
               </div>
             ) : !error && !isLoading ? (
-              <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+              <div className="demo-muted flex h-64 flex-col items-center justify-center">
                 <ImageIcon className="w-16 h-16 mb-4 opacity-50" />
                 <p>
                   Enter a prompt and click "Generate Image" to create an image.
@@ -200,7 +194,7 @@ function ImagePage() {
           </div>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx
index 0ad11ad3..883a61da 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx
@@ -20,35 +20,37 @@ const SAMPLE_RECIPES = [
 
 function RecipeCard({ recipe }: { recipe: Recipe }) {
   const difficultyColors = {
-    easy: 'bg-green-500/20 text-green-400',
-    medium: 'bg-yellow-500/20 text-yellow-400',
-    hard: 'bg-red-500/20 text-red-400',
+    easy: 'demo-pill',
+    medium: 'demo-pill',
+    hard: 'demo-pill',
   }
 
   return (
     <div className="space-y-6">
       {/* Header */}
       <div>
-        <h3 className="text-2xl font-bold text-white mb-2">{recipe.name}</h3>
-        <p className="text-gray-400">{recipe.description}</p>
+        <h3 className="text-2xl font-bold text-[var(--sea-ink)] mb-2">
+          {recipe.name}
+        </h3>
+        <p className="demo-muted">{recipe.description}</p>
       </div>
 
       {/* Meta info */}
       <div className="flex flex-wrap gap-4">
-        <div className="flex items-center gap-2 text-gray-300">
-          <Clock className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Clock className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">Prep: {recipe.prepTime}</span>
         </div>
-        <div className="flex items-center gap-2 text-gray-300">
-          <Clock className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Clock className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">Cook: {recipe.cookTime}</span>
         </div>
-        <div className="flex items-center gap-2 text-gray-300">
-          <Users className="w-4 h-4 text-orange-400" />
+        <div className="demo-muted flex items-center gap-2">
+          <Users className="w-4 h-4 text-[var(--lagoon-deep)]" />
           <span className="text-sm">{recipe.servings} servings</span>
         </div>
         <div
-          className={`flex items-center gap-2 px-2 py-1 rounded-full ${
+          className={`flex items-center gap-2 ${
             difficultyColors[recipe.difficulty]
           }`}
         >
@@ -59,16 +61,16 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
 
       {/* Ingredients */}
       <div>
-        <h4 className="text-lg font-semibold text-white mb-3">Ingredients</h4>
+        <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+          Ingredients
+        </h4>
         <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
           {recipe.ingredients.map((ing, idx) => (
-            <li key={idx} className="flex items-start gap-2 text-gray-300">
-              <span className="text-orange-400">•</span>
+            <li key={idx} className="demo-muted flex items-start gap-2">
+              <span className="text-[var(--lagoon-deep)]">•</span>
               <span>
                 <span className="font-medium">{ing.amount}</span> {ing.item}
-                {ing.notes && (
-                  <span className="text-gray-500 text-sm"> ({ing.notes})</span>
-                )}
+                {ing.notes && <span className="text-sm"> ({ing.notes})</span>}
               </span>
             </li>
           ))}
@@ -77,11 +79,13 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
 
       {/* Instructions */}
       <div>
-        <h4 className="text-lg font-semibold text-white mb-3">Instructions</h4>
+        <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+          Instructions
+        </h4>
         <ol className="space-y-3">
           {recipe.instructions.map((step, idx) => (
-            <li key={idx} className="flex gap-3 text-gray-300">
-              <span className="flex-shrink-0 w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-sm font-medium">
+            <li key={idx} className="demo-muted flex gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full border border-[var(--line)] bg-[var(--chip-bg)] text-[var(--sea-ink)] flex items-center justify-center text-sm font-medium">
                 {idx + 1}
               </span>
               <span>{step}</span>
@@ -93,11 +97,13 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
       {/* Tips */}
       {recipe.tips && recipe.tips.length > 0 && (
         <div>
-          <h4 className="text-lg font-semibold text-white mb-3">Tips</h4>
+          <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
+            Tips
+          </h4>
           <ul className="space-y-2">
             {recipe.tips.map((tip, idx) => (
-              <li key={idx} className="flex items-start gap-2 text-gray-300">
-                <span className="text-yellow-400">*</span>
+              <li key={idx} className="demo-muted flex items-start gap-2">
+                <span className="text-[var(--lagoon-deep)]">*</span>
                 <span>{tip}</span>
               </li>
             ))}
@@ -108,27 +114,27 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
       {/* Nutrition */}
       {recipe.nutritionPerServing && (
         <div>
-          <h4 className="text-lg font-semibold text-white mb-3">
+          <h4 className="text-lg font-semibold text-[var(--sea-ink)] mb-3">
             Nutrition (per serving)
           </h4>
           <div className="flex flex-wrap gap-4 text-sm">
             {recipe.nutritionPerServing.calories && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 {recipe.nutritionPerServing.calories} cal
               </span>
             )}
             {recipe.nutritionPerServing.protein && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Protein: {recipe.nutritionPerServing.protein}
               </span>
             )}
             {recipe.nutritionPerServing.carbs && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Carbs: {recipe.nutritionPerServing.carbs}
               </span>
             )}
             {recipe.nutritionPerServing.fat && (
-              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+              <span className="demo-pill">
                 Fat: {recipe.nutritionPerServing.fat}
               </span>
             )}
@@ -182,26 +188,24 @@ function StructuredPage() {
   const canExecute = !!(!isLoading && recipeName.trim() && !error)
 
   return (
-    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-      <div className="max-w-6xl mx-auto">
+    <main className="demo-page demo-page-wide">
+      <div>
         <div className="flex items-center gap-3 mb-6">
-          <ChefHat className="w-8 h-8 text-orange-500" />
-          <h1 className="text-2xl font-bold text-white">
-            One-Shot & Structured Output
-          </h1>
+          <ChefHat className="w-8 h-8 text-[var(--lagoon-deep)]" />
+          <h1 className="demo-title">One-Shot & Structured Output</h1>
         </div>
 
-        <p className="text-gray-400 mb-6">
+        <p className="demo-muted mb-6">
           Compare two output modes:{' '}
-          <strong className="text-orange-400">One-Shot</strong> returns freeform
-          markdown, while{' '}
-          <strong className="text-orange-400">Structured</strong> returns
+          <strong className="text-[var(--sea-ink)]">One-Shot</strong> returns
+          freeform markdown, while{' '}
+          <strong className="text-[var(--sea-ink)]">Structured</strong> returns
           validated JSON conforming to a Zod schema.
         </p>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
+            <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
               Recipe Name
             </label>
             <input
@@ -210,11 +214,11 @@ function StructuredPage() {
               onChange={(e) => setRecipeName(e.target.value)}
               disabled={isLoading}
               placeholder="e.g., Chocolate Chip Cookies"
-              className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+              className="demo-input text-sm"
             />
 
             <div className="mt-2">
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                 Quick Picks
               </label>
               <div className="flex flex-wrap gap-2">
@@ -223,7 +227,7 @@ function StructuredPage() {
                     key={name}
                     onClick={() => setRecipeName(name)}
                     disabled={isLoading}
-                    className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition-colors"
+                    className="demo-button demo-button-secondary px-2 py-1 text-xs"
                   >
                     {name}
                   </button>
@@ -237,18 +241,14 @@ function StructuredPage() {
               <button
                 onClick={() => handleGenerate('oneshot')}
                 disabled={!canExecute}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors text-white ${
-                  !canExecute ? 'bg-gray-600' : 'bg-orange-500'
-                }`}
+                className="demo-button"
               >
                 One-Shot (Markdown)
               </button>
               <button
                 onClick={() => handleGenerate('structured')}
                 disabled={!canExecute}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors  text-white ${
-                  !canExecute ? 'bg-gray-600' : 'bg-blue-500'
-                }`}
+                className="demo-button"
               >
                 Structured (JSON)
               </button>
@@ -256,29 +256,18 @@ function StructuredPage() {
           </div>
         </div>
 
-        {/* Output Panel */}
-        <div className="mt-5 lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
+        <div className="demo-panel mt-5 lg:col-span-2">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold text-white">
-              Generated Recipe
-            </h2>
+            <h2 className="demo-section-title">Generated Recipe</h2>
             {result && (
-              <span
-                className={`px-2 py-1 rounded text-xs font-medium ${
-                  result.mode === 'structured'
-                    ? 'bg-purple-500/20 text-purple-400'
-                    : 'bg-blue-500/20 text-blue-400'
-                }`}
-              >
+              <span className="demo-pill">
                 {result.mode === 'structured' ? 'Structured JSON' : 'Markdown'}
               </span>
             )}
           </div>
 
           {error && (
-            <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
-              {error}
-            </div>
+            <div className="demo-alert demo-alert-danger mb-4">{error}</div>
           )}
 
           {result ? (
@@ -286,13 +275,13 @@ function StructuredPage() {
               {result.mode === 'structured' && result.recipe ? (
                 <RecipeCard recipe={result.recipe} />
               ) : result.markdown ? (
-                <div className="prose prose-invert max-w-none">
+                <div className="max-w-none">
                   <Streamdown>{result.markdown}</Streamdown>
                 </div>
               ) : null}
             </div>
           ) : !error && !isLoading ? (
-            <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+            <div className="demo-muted flex h-64 flex-col items-center justify-center">
               <ChefHat className="w-16 h-16 mb-4 opacity-50" />
               <p>
                 Enter a recipe name and click "Generate Recipe" to get started.
@@ -301,7 +290,7 @@ function StructuredPage() {
           ) : null}
         </div>
       </div>
-    </div>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx
index 22e445c8..d858c020 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx
@@ -17,35 +17,30 @@ function RouteComponent() {
   const guitar = Route.useLoaderData()
 
   return (
-    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
-      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
-        <Link
-          to="/example/guitars"
-          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
-        >
-          &larr; Back to all guitars
-        </Link>
-        <h1 className="text-3xl font-bold mb-4">{guitar.name}</h1>
-        <p className="text-gray-300 mb-6">{guitar.description}</p>
-        <div className="flex items-center justify-between">
-          <div className="text-2xl font-bold text-emerald-400">
-            ${guitar.price}
+    <main className="demo-page">
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,28rem)] lg:items-center">
+        <section className="demo-panel">
+          <Link to="/demo/guitars/" className="mb-4 inline-block">
+            &larr; Back to all guitars
+          </Link>
+          <h1 className="demo-title mb-4">{guitar.name}</h1>
+          <p className="demo-muted mb-6">{guitar.description}</p>
+          <div className="flex items-center justify-between">
+            <div className="text-2xl font-bold text-[var(--lagoon-deep)]">
+              ${guitar.price}
+            </div>
+            <button className="demo-button">Add to Cart</button>
           </div>
-          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
-            Add to Cart
-          </button>
-        </div>
-      </div>
+        </section>
 
-      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
-        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+        <div className="demo-card overflow-hidden p-0">
           <img
             src={guitar.image}
             alt={guitar.name}
-            className="w-full h-full object-cover guitar-image"
+            className="guitar-image h-full w-full object-cover"
           />
         </div>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx
index 1720d9c6..1013d8f0 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx
@@ -8,48 +8,42 @@ export const Route = createFileRoute('/demo/guitars/')({
 
 function GuitarsIndex() {
   return (
-    <div className="bg-black text-white p-5">
-      <h1 className="text-3xl font-bold mb-8 text-center">Featured Guitars</h1>
-      <div className="flex flex-wrap gap-12 justify-center">
+    <main className="demo-page demo-page-wide">
+      <h1 className="demo-title mb-8 text-center">Featured Guitars</h1>
+      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
         {guitars.map((guitar) => (
-          <div
-            key={guitar.id}
-            className="w-full md:w-[calc(50%-1.5rem)] xl:w-[calc(33.333%-2rem)] relative mb-24"
-          >
+          <div key={guitar.id}>
             <Link
-              to="/example/guitars/$guitarId"
+              to="/demo/guitars/$guitarId"
               params={{
                 guitarId: guitar.id.toString(),
               }}
+              className="block no-underline"
             >
-              <div className="relative z-0 w-full aspect-square mb-8">
-                <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+              <article className="demo-card h-full overflow-hidden p-0 transition hover:-translate-y-0.5">
+                <div className="aspect-square overflow-hidden">
                   <img
                     src={guitar.image}
                     alt={guitar.name}
-                    className="w-full h-full object-cover guitar-image group-hover:scale-105 transition-transform duration-500"
+                    className="guitar-image h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                 </div>
-
-                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
-                  View Details
-                </div>
-              </div>
-
-              <div className="absolute bottom-0 right-0 z-10 w-[80%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-5 border border-gray-800/50 shadow-xl transform translate-y-[40%]">
-                <h2 className="text-xl font-bold mb-2">{guitar.name}</h2>
-                <p className="text-gray-300 mb-3 line-clamp-2">
-                  {guitar.shortDescription}
-                </p>
-                <div className="text-xl font-bold text-emerald-400">
-                  ${guitar.price}
+                <div className="p-5">
+                  <h2 className="mb-2 text-xl font-bold text-[var(--sea-ink)]">
+                    {guitar.name}
+                  </h2>
+                  <p className="demo-muted mb-3 line-clamp-2">
+                    {guitar.shortDescription}
+                  </p>
+                  <div className="text-xl font-bold text-[var(--lagoon-deep)]">
+                    ${guitar.price}
+                  </div>
                 </div>
-              </div>
+              </article>
             </Link>
           </div>
         ))}
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx b/packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx
index c5619dc9..135382e4 100644
--- a/packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx
+++ b/packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx
@@ -33,43 +33,40 @@ function RouteComponent() {
   const { data } = useReadQuery(queryRef)
 
   return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Apollo Client Demo</h2>
-      <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
-        <p className="font-bold">Apollo Client is configured!</p>
-        <p className="text-sm mt-2">
-          This demo uses{' '}
-          <code className="bg-blue-200 px-1 rounded">preloadQuery</code> in the
-          loader and{' '}
-          <code className="bg-blue-200 px-1 rounded">useReadQuery</code> in the
-          component for optimal streaming SSR performance.
-        </p>
-      </div>
-      <div className="bg-gray-100 p-4 rounded">
-        <h3 className="font-bold mb-2">Query Result:</h3>
-        <pre className="text-sm overflow-x-auto">
-          {JSON.stringify(data, null, 2)}
-        </pre>
-      </div>
-      <div className="mt-4 text-sm text-gray-600">
-        <p>📝 Next steps:</p>
-        <ul className="list-disc ml-6 mt-2">
-          <li>
-            Configure your GraphQL endpoint in{' '}
-            <code className="bg-gray-200 px-1 rounded">src/router.tsx</code>
-          </li>
-          <li>Replace the example query with your actual GraphQL schema</li>
-          <li>
-            Learn more:{' '}
-            <a
-              href="https://www.apollographql.com/docs/react"
-              className="text-blue-600 hover:underline"
-            >
-              Apollo Client Docs
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <main className="demo-page">
+      <section className="demo-panel">
+        <p className="island-kicker mb-2">GraphQL</p>
+        <h1 className="demo-title mb-6">Apollo Client Demo</h1>
+        <div className="demo-alert mb-4">
+          <p className="font-bold">Apollo Client is configured!</p>
+          <p className="text-sm mt-2">
+            This demo uses <code>preloadQuery</code> in the loader and{' '}
+            <code>useReadQuery</code> in the component for optimal streaming SSR
+            performance.
+          </p>
+        </div>
+        <div className="demo-code-block">
+          <h3 className="font-bold mb-2">Query Result:</h3>
+          <pre className="text-sm overflow-x-auto">
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </div>
+        <div className="demo-muted mt-4 text-sm">
+          <p className="font-medium text-[var(--sea-ink)]">Next steps:</p>
+          <ul className="list-disc ml-6 mt-2">
+            <li>
+              Configure your GraphQL endpoint in <code>src/router.tsx</code>
+            </li>
+            <li>Replace the example query with your actual GraphQL schema</li>
+            <li>
+              Learn more:{' '}
+              <a href="https://www.apollographql.com/docs/react">
+                Apollo Client Docs
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx b/packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
index 4c95c0ce..ac9e2459 100644
--- a/packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
+++ b/packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
@@ -1,37 +1,36 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-import { authClient } from "#/lib/auth-client";
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '#/lib/auth-client'
 
-export const Route = createFileRoute("/demo/better-auth")({
+export const Route = createFileRoute('/demo/better-auth')({
   component: BetterAuthDemo,
-});
+})
 
 function BetterAuthDemo() {
-  const { data: session, isPending } = authClient.useSession();
-  const [isSignUp, setIsSignUp] = useState(false);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
+  const { data: session, isPending } = authClient.useSession()
+  const [isSignUp, setIsSignUp] = useState(false)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
 
   if (isPending) {
     return (
-      <div className="flex items-center justify-center py-10">
+      <main className="demo-page demo-center">
         <div className="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
-      </div>
-    );
+      </main>
+    )
   }
 
   if (session?.user) {
     return (
-      <div className="flex justify-center py-10 px-4">
-        <div className="w-full max-w-md p-6 space-y-6">
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md space-y-6">
           <div className="space-y-1.5">
-            <h1 className="text-lg font-semibold leading-none tracking-tight">
-              Welcome back
-            </h1>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            <p className="island-kicker mb-2">Better Auth</p>
+            <h1 className="demo-title">Welcome back</h1>
+            <p className="demo-muted text-sm">
               You're signed in as {session.user.email}
             </p>
           </div>
@@ -42,7 +41,7 @@ function BetterAuthDemo() {
             ) : (
               <div className="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
                 <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
-                  {session.user.name?.charAt(0).toUpperCase() || "U"}
+                  {session.user.name?.charAt(0).toUpperCase() || 'U'}
                 </span>
               </div>
             )}
@@ -60,32 +59,32 @@ function BetterAuthDemo() {
             onClick={() => {
               void authClient.signOut()
             }}
-            className="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+            className="demo-button demo-button-secondary w-full"
           >
             Sign out
           </button>
 
-          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
-            Built with{" "}
+          <p className="demo-muted text-center text-xs">
+            Built with{' '}
             <a
               href="https://better-auth.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+              className="font-medium"
             >
               BETTER-AUTH
             </a>
             .
           </p>
-        </div>
-      </div>
-    );
+        </section>
+      </main>
+    )
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
 
     try {
       if (isSignUp) {
@@ -93,36 +92,37 @@ function BetterAuthDemo() {
           email,
           password,
           name,
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign up failed");
+          setError(result.error.message || 'Sign up failed')
         }
       } else {
         const result = await authClient.signIn.email({
           email,
           password,
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign in failed");
+          setError(result.error.message || 'Sign in failed')
         }
       }
     } catch (err) {
-      setError("An unexpected error occurred");
+      setError('An unexpected error occurred')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   return (
-    <div className="flex justify-center py-10 px-4">
-      <div className="w-full max-w-md p-6">
-        <h1 className="text-lg font-semibold leading-none tracking-tight">
-          {isSignUp ? "Create an account" : "Sign in"}
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2">Better Auth</p>
+        <h1 className="demo-title">
+          {isSignUp ? 'Create an account' : 'Sign in'}
         </h1>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+        <p className="demo-muted mt-2 mb-6 text-sm">
           {isSignUp
-            ? "Enter your information to create an account"
-            : "Enter your email below to login to your account"}
+            ? 'Enter your information to create an account'
+            : 'Enter your email below to login to your account'}
         </p>
 
         <form onSubmit={handleSubmit} className="grid gap-4">
@@ -139,7 +139,7 @@ function BetterAuthDemo() {
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                className="demo-input"
                 required
               />
             </div>
@@ -154,7 +154,7 @@ function BetterAuthDemo() {
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              className="demo-input"
               required
             />
           </div>
@@ -171,22 +171,22 @@ function BetterAuthDemo() {
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              className="demo-input"
               required
               minLength={8}
             />
           </div>
 
           {error && (
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            <div className="demo-alert demo-alert-danger">
+              <p className="text-sm text-red-600">{error}</p>
             </div>
           )}
 
           <button
             type="submit"
             disabled={loading}
-            className="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="demo-button w-full"
           >
             {loading ? (
               <span className="flex items-center justify-center gap-2">
@@ -194,9 +194,9 @@ function BetterAuthDemo() {
                 <span>Please wait</span>
               </span>
             ) : isSignUp ? (
-              "Create account"
+              'Create account'
             ) : (
-              "Sign in"
+              'Sign in'
             )}
           </button>
         </form>
@@ -205,30 +205,30 @@ function BetterAuthDemo() {
           <button
             type="button"
             onClick={() => {
-              setIsSignUp(!isSignUp);
-              setError("");
+              setIsSignUp(!isSignUp)
+              setError('')
             }}
-            className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+            className="demo-muted text-sm transition-colors hover:text-[var(--sea-ink)]"
           >
             {isSignUp
-              ? "Already have an account? Sign in"
+              ? 'Already have an account? Sign in'
               : "Don't have an account? Sign up"}
           </button>
         </div>
 
-        <p className="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
-          Built with{" "}
+        <p className="demo-muted mt-6 text-center text-xs">
+          Built with{' '}
           <a
             href="https://better-auth.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+            className="font-medium"
           >
             BETTER-AUTH
           </a>
           .
         </p>
-      </div>
-    </div>
-  );
+      </section>
+    </main>
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx b/packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx
index 5bc51c63..d680f5b6 100644
--- a/packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx
+++ b/packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx
@@ -1,10 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import {
-  SignIn,
-  SignedIn,
-  SignedOut,
-  useUser,
-} from '@clerk/clerk-react'
+import { SignIn, SignedIn, SignedOut, useUser } from '@clerk/clerk-react'
 
 export const Route = createFileRoute('/demo/clerk')({
   component: ClerkDemo,
@@ -12,27 +7,27 @@ export const Route = createFileRoute('/demo/clerk')({
 
 function ClerkDemo() {
   return (
-    <div className="flex justify-center py-10 px-4">
-      <div className="w-full max-w-md p-6 space-y-6">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md space-y-6">
         <SignedOut>
           <div className="space-y-1.5">
-            <h1 className="text-lg font-semibold leading-none tracking-tight">
-              Sign in to continue
-            </h1>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">
-              Clerk renders the sign-in UI, manages sessions, and handles social providers for you.
+            <p className="island-kicker mb-2">Clerk</p>
+            <h1 className="demo-title">Sign in to continue</h1>
+            <p className="demo-muted text-sm">
+              Clerk renders the sign-in UI, manages sessions, and handles social
+              providers for you.
             </p>
           </div>
           <div className="flex justify-center pt-2">
             <SignIn routing="hash" />
           </div>
-          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+          <p className="demo-muted text-center text-xs">
             Built with{' '}
             <a
               href="https://clerk.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+              className="font-medium"
             >
               CLERK
             </a>
@@ -43,8 +38,8 @@ function ClerkDemo() {
         <SignedIn>
           <SignedInGreeting />
         </SignedIn>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -58,12 +53,9 @@ function SignedInGreeting() {
   return (
     <div className="space-y-6">
       <div className="space-y-1.5">
-        <h1 className="text-lg font-semibold leading-none tracking-tight">
-          Welcome back
-        </h1>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          You're signed in as {email}
-        </p>
+        <p className="island-kicker mb-2">Clerk</p>
+        <h1 className="demo-title">Welcome back</h1>
+        <p className="demo-muted text-sm">You're signed in as {email}</p>
       </div>
 
       <div className="flex items-center gap-3">
@@ -86,13 +78,13 @@ function SignedInGreeting() {
         </div>
       </div>
 
-      <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+      <p className="demo-muted text-center text-xs">
         Manage your account from the avatar in the header. Built with{' '}
         <a
           href="https://clerk.com"
           target="_blank"
           rel="noopener noreferrer"
-          className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+          className="font-medium"
         >
           CLERK
         </a>
diff --git a/packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx b/packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx
index 04824b8b..32c4d467 100644
--- a/packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx
+++ b/packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx
@@ -44,36 +44,25 @@ function ConvexTodos() {
   const totalCount = todos?.length || 0
 
   return (
-    <div
-      className="min-h-screen flex items-center justify-center p-4"
-      style={{
-        background:
-          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl">
-        {/* Header Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+    <main className="demo-page">
+      <div className="mx-auto w-full max-w-2xl space-y-6">
+        <section className="demo-panel">
           <div className="text-center">
-            <h1 className="text-4xl font-bold text-green-800 mb-2">
-              Convex Todos
-            </h1>
-            <p className="text-green-600 text-lg">Powered by real-time sync</p>
+            <p className="island-kicker mb-2">Convex</p>
+            <h1 className="demo-title">Todos</h1>
+            <p className="demo-muted mt-2">Powered by real-time sync</p>
             {totalCount > 0 && (
               <div className="mt-4 flex justify-center space-x-6 text-sm">
-                <span className="text-green-700 font-medium">
-                  {completedCount} completed
-                </span>
-                <span className="text-gray-600">
+                <span className="font-medium">{completedCount} completed</span>
+                <span className="demo-muted">
                   {totalCount - completedCount} remaining
                 </span>
               </div>
             )}
           </div>
-        </div>
+        </section>
 
-        {/* Add Todo Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+        <section className="demo-card">
           <div className="flex gap-3">
             <input
               type="text"
@@ -85,42 +74,39 @@ function ConvexTodos() {
                 }
               }}
               placeholder="What needs to be done?"
-              className="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+              className="demo-input min-w-0 flex-1"
             />
             <button
               onClick={handleAddTodo}
               disabled={!newTodo.trim()}
-              className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+              className="demo-button"
             >
               <Plus size={20} />
               Add
             </button>
           </div>
-        </div>
+        </section>
 
-        {/* Todos List */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+        <section className="demo-card overflow-hidden p-0">
           {!todos ? (
             <div className="p-8 text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
-              <p className="text-green-600">Loading todos...</p>
+              <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]"></div>
+              <p className="demo-muted">Loading todos...</p>
             </div>
           ) : todos.length === 0 ? (
             <div className="p-12 text-center">
-              <Circle size={48} className="text-green-300 mx-auto mb-4" />
-              <h3 className="text-xl font-semibold text-green-800 mb-2">
-                No todos yet
-              </h3>
-              <p className="text-green-600">
+              <Circle size={48} className="demo-muted mx-auto mb-4" />
+              <h3 className="demo-section-title mb-2">No todos yet</h3>
+              <p className="demo-muted">
                 Add your first todo above to get started!
               </p>
             </div>
           ) : (
-            <div className="divide-y divide-green-100">
+            <div className="divide-y divide-[var(--line)]">
               {todos.map((todo, index) => (
                 <div
                   key={todo._id}
-                  className={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                  className={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${
                     todo.completed ? 'opacity-75' : ''
                   }`}
                   style={{
@@ -131,8 +117,8 @@ function ConvexTodos() {
                     onClick={() => handleToggleTodo(todo._id)}
                     className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
                       todo.completed
-                        ? 'bg-green-500 border-green-500 text-white'
-                        : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                        ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'
+                        : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'
                     }`}
                   >
                     <Check size={14} />
@@ -141,8 +127,8 @@ function ConvexTodos() {
                   <span
                     className={`flex-1 text-lg transition-all duration-200 ${
                       todo.completed
-                        ? 'line-through text-gray-500'
-                        : 'text-gray-800'
+                        ? 'line-through demo-muted'
+                        : 'text-[var(--sea-ink)]'
                     }`}
                   >
                     {todo.text}
@@ -150,7 +136,7 @@ function ConvexTodos() {
 
                   <button
                     onClick={() => handleRemoveTodo(todo._id)}
-                    className="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    className="demo-button demo-button-danger flex-shrink-0 p-2"
                   >
                     <Trash2 size={18} />
                   </button>
@@ -158,15 +144,14 @@ function ConvexTodos() {
               ))}
             </div>
           )}
-        </div>
+        </section>
 
-        {/* Footer */}
         <div className="text-center mt-6">
-          <p className="text-green-700/80 text-sm">
-            Built with Convex • Real-time updates • Always in sync
+          <p className="demo-muted text-sm">
+            Built with Convex, real-time updates, and synced state.
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx b/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx
index ad553ea1..f0114084 100644
--- a/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx
+++ b/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx
@@ -27,16 +27,16 @@ export default function ChatArea() {
 
   return (
     <>
-      <div className="px-4 py-6 space-y-4">
+      <div className="flex-1 space-y-4 overflow-auto px-4 py-6">
         <Messages messages={messages} user={user} />
       </div>
 
-      <div className="bg-white border-t border-gray-200 px-4 py-4">
+      <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4">
         <div className="flex items-center space-x-3">
           <select
             value={user}
             onChange={(e) => setUser(e.target.value)}
-            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="demo-select demo-input-fit text-sm"
           >
             <option value="Alice">Alice</option>
             <option value="Bob">Bob</option>
@@ -49,14 +49,14 @@ export default function ChatArea() {
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={handleKeyPress}
               placeholder="Type a message..."
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="demo-input"
             />
           </div>
 
           <button
             onClick={postMessage}
             disabled={message.trim() === ''}
-            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="demo-button"
           >
             Send
           </button>
diff --git a/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx b/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx
index 3d6f3c17..a9b85546 100644
--- a/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx
+++ b/packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx
@@ -2,14 +2,10 @@ import type { Message } from '#/db-collections'
 
 export const getAvatarColor = (username: string) => {
   const colors = [
-    'bg-blue-500',
-    'bg-green-500',
-    'bg-purple-500',
-    'bg-pink-500',
-    'bg-indigo-500',
-    'bg-red-500',
-    'bg-yellow-500',
-    'bg-teal-500',
+    'bg-[var(--lagoon-deep)]',
+    'bg-[var(--palm)]',
+    'bg-[var(--sea-ink-soft)]',
+    'bg-[var(--lagoon)]',
   ]
   const index = username
     .split('')
@@ -49,12 +45,12 @@ export default function Messages({
             <div
               className={`px-4 py-2 rounded-2xl ${
                 msg.user === user
-                  ? 'bg-blue-500 text-white rounded-br-md'
-                  : 'bg-white text-gray-800 border border-gray-200 rounded-bl-md'
+                  ? 'bg-[var(--lagoon-deep)] text-white rounded-br-md'
+                  : 'border border-[var(--line)] bg-[var(--chip-bg)] text-[var(--sea-ink)] rounded-bl-md'
               }`}
             >
               {msg.user !== user && (
-                <p className="text-xs text-gray-500 mb-1 font-medium">
+                <p className="demo-muted mb-1 text-xs font-medium">
                   {msg.user}
                 </p>
               )}
diff --git a/packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx b/packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx
index a3c944c5..4ec38de3 100644
--- a/packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx
+++ b/packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx
@@ -8,8 +8,10 @@ export const Route = createFileRoute('/demo/db-chat')({
 
 function App() {
   return (
-    <div className="flex flex-col h-screen bg-gray-50">
-      <ChatArea />
-    </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel flex h-[70vh] w-full max-w-3xl flex-col overflow-hidden p-0">
+        <ChatArea />
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs b/packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs
index 6bb2c8dd..bc2d857f 100644
--- a/packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs
@@ -47,141 +47,91 @@ function DemoDrizzle() {
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen p-4 text-white"
-      style={{
-        background:
-          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
-      }}
-    >
-      <div
-        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
-        style={{
-          background:
-            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
-          backdropFilter: 'blur(10px)',
-        }}
-      >
-        <div
-          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
-            border: '1px solid rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <div className="relative group">
-            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
-            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
-              <img
-                src="/drizzle.svg"
-                alt="Drizzle Logo"
-                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/drizzle.svg" alt="Drizzle Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Drizzle Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
-            Drizzle Database Demo
-          </h1>
-        </div>
+        </header>
 
-        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+        <h2 className="demo-section-title mb-4">Todos</h2>
 
         <ul className="space-y-3 mb-6">
           {todos.map((todo) => (
             <li
               key={todo.id}
-              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
-              style={{
-                background:
-                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
-                borderColor: 'rgba(93, 103, 227, 0.3)',
-              }}
+              className="demo-list-item"
             >
               <div className="flex items-center justify-between">
-                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
-                  {todo.title}
-                </span>
-                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+                <span className="font-medium">{todo.title}</span>
+                <span className="demo-muted text-xs">#{todo.id}</span>
               </div>
             </li>
           ))}
           {todos.length === 0 && (
-            <li className="text-center py-8 text-indigo-300/70">
+            <li className="demo-list-item text-center demo-muted">
               No todos yet. Create one below!
             </li>
           )}
         </ul>
 
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
           <input
             type="text"
             name="title"
             placeholder="Add a new todo..."
-            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
-            style={{
-              background: 'rgba(93, 103, 227, 0.1)',
-              borderColor: 'rgba(93, 103, 227, 0.3)',
-              focusRing: 'rgba(93, 103, 227, 0.5)',
-            }}
+            className="demo-input min-w-0 flex-1"
           />
           <button
             type="submit"
-            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
-            style={{
-              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
-              color: 'white',
-            }}
+            className="demo-button whitespace-nowrap"
           >
             Add Todo
           </button>
         </form>
 
-        <div
-          className="mt-8 p-6 rounded-lg border"
-          style={{
-            background: 'rgba(93, 103, 227, 0.05)',
-            borderColor: 'rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+        <div className="demo-card mt-8">
+          <h3 className="demo-section-title mb-2">
             Powered by Drizzle ORM
           </h3>
-          <p className="text-sm text-indigo-300/80 mb-4">
+          <p className="demo-muted mb-4 text-sm">
             Next-generation ORM for Node.js & TypeScript with PostgreSQL
           </p>
           <div className="space-y-2 text-sm">
-            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
-            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+            <p className="font-medium">Setup Instructions:</p>
+            <ol className="demo-muted list-inside list-decimal space-y-2">
               <li>
                 Configure your{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  DATABASE_URL
-                </code>{' '}
+                <code>DATABASE_URL</code>{' '}
                 in .env.local
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['migrate']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['studio']) %>
                 </code>
               </li>
             </ol>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs b/packages/create/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs
index 086ca484..4f7a1c11 100644
--- a/packages/create/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs
@@ -33,7 +33,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -54,7 +54,7 @@ export function TextField({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <Input
@@ -80,7 +80,7 @@ export function TextArea({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnTextarea
@@ -143,7 +143,7 @@ export function Slider({ label }: { label: string }) {
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnSlider
@@ -186,7 +186,7 @@ export function SubscribeButton({ label }: { label: string }) {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+          className="demo-button"
         >
           {label}
         </button>
@@ -205,7 +205,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -226,14 +226,14 @@ export function TextField({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <input
           value={field.state.value}
           placeholder={placeholder}
           onBlur={field.handleBlur}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-input mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -253,14 +253,14 @@ export function TextArea({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <textarea
           value={field.state.value}
           onBlur={field.handleBlur}
           rows={rows}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-textarea mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -281,7 +281,7 @@ export function Select({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </label>
       <select
@@ -289,7 +289,7 @@ export function Select({
         value={field.state.value}
         onBlur={field.handleBlur}
         onChange={(e) => field.handleChange(e.target.value)}
-        className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        className="demo-select"
       >
         {values.map((value) => (
           <option key={value.value} value={value.value}>
diff --git a/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs b/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs
index 1eec1a31..9023063e 100644
--- a/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs
@@ -45,14 +45,15 @@ function AddressForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Address Form</h1>
+          <p className="demo-muted mt-2">
+            Nested fields, field-level validation, and a select input.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -198,8 +199,8 @@ function AddressForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs b/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs
index 39746eae..00e51ed2 100644
--- a/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs
@@ -33,14 +33,15 @@ function SimpleForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Simple Form</h1>
+          <p className="demo-muted mt-2">
+            A small validated form using the generated field helpers.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -63,8 +64,8 @@ function SimpleForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx b/packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx
index 090824a6..f25a21af 100644
--- a/packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx
+++ b/packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx
@@ -32,22 +32,14 @@ function ORPCTodos() {
   }, [todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-teal-200 to-emerald-900 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(70% 70% at 20% 20%, #07A798 0%, #045C4B 60%, #01251F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">MCP Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">MCP</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {todos?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.title}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.title}</span>
             </li>
           ))}
         </ul>
@@ -62,17 +54,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx b/packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx
index 037931c2..9b9a00bd 100644
--- a/packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx
+++ b/packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx
@@ -49,68 +49,57 @@ function App() {
   }
 
   if (!todos) {
-    return <DBConnectionError />
+    return (
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-2xl">
+          <DBConnectionError />
+        </section>
+      </main>
+    )
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(circle at 5% 40%, #63F655 0%, #00E0D9 40%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <div className="flex items-center justify-center gap-4 mb-8 bg-black/30 p-4 rounded-lg">
-          <div className="relative">
-            <div className="absolute -inset-1 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000"></div>
-            <div className="relative">
-              <img
-                src="/demo-neon.svg"
-                alt="Neon Logo"
-                className="w-12 h-12 transform hover:scale-110 transition-transform duration-200"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/demo-neon.svg" alt="Neon Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Neon Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-200 to-cyan-200 text-transparent bg-clip-text">
-            Neon Database Demo
-          </h1>
-        </div>
+        </header>
         {todos && (
           <>
-            <h1 className="text-2xl font-bold mb-4">Todos</h1>
+            <h2 className="demo-section-title mb-4">Todos</h2>
             <ul className="space-y-3 mb-6">
               {todos.map((todo: { id: number; title: string }) => (
-                <li
-                  key={todo.id}
-                  className="bg-white/10 backdrop-blur-sm rounded-lg p-4 shadow-sm border border-white/20 transition-all hover:bg-white/20 hover:scale-[1.02] cursor-pointer group"
-                >
+                <li key={todo.id} className="demo-list-item">
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-medium group-hover:text-white/90">
-                      {todo.title}
-                    </span>
-                    <span className="text-xs text-white/50">#{todo.id}</span>
+                    <span className="font-medium">{todo.title}</span>
+                    <span className="demo-muted text-xs">#{todo.id}</span>
                   </div>
                 </li>
               ))}
             </ul>
-            <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
+            <form
+              onSubmit={handleSubmit}
+              className="mt-4 flex flex-col gap-2 sm:flex-row"
+            >
               <input
                 type="text"
                 name="title"
-                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] bg-black/20"
+                className="demo-input min-w-0 flex-1"
               />
-              <button
-                type="submit"
-                className="px-6 py-2 bg-[#00E0D9] text-black font-medium rounded-md hover:bg-[#00E0D9]/80 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] focus:ring-offset-2 transition-colors disabled:opacity-50 whitespace-nowrap"
-              >
+              <button type="submit" className="demo-button whitespace-nowrap">
                 Add Todo
               </button>
             </form>
           </>
         )}
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -134,31 +123,23 @@ function DBConnectionError() {
         </svg>
       </div>
       <h2 className="text-2xl font-bold mb-4">Database Connection Issue</h2>
-      <div className="text-lg mb-6">The Neon database is not connected.</div>
-      <div className="bg-black/30 p-6 rounded-lg max-w-xl mx-auto">
+      <div className="demo-muted text-lg mb-6">
+        The Neon database is not connected.
+      </div>
+      <div className="demo-card max-w-xl mx-auto text-left">
         <h3 className="text-lg font-semibold mb-4">Required Steps to Fix:</h3>
         <ul className="space-y-4 text-left list-none">
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              1
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">1</span>
             <div>
-              Use the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">db/init.sql</code>{' '}
-              file to create the database
+              Use the <code>db/init.sql</code> file to create the database
             </div>
           </li>
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              2
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">2</span>
             <div>
-              Set the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">
-                DATABASE_URL
-              </code>{' '}
-              environment variable to the connection string of your Neon
-              database
+              Set the <code>DATABASE_URL</code> environment variable to the
+              connection string of your Neon database
             </div>
           </li>
         </ul>
diff --git a/packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx b/packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx
index 5b4ebec4..224deba0 100644
--- a/packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx
+++ b/packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx
@@ -36,22 +36,14 @@ function ORPCTodos() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 50% 50%, #D2149D 0%, #8E1066 50%, #2D0A1F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">oRPC Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">oRPC</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {data?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.name}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.name}</span>
             </li>
           ))}
         </ul>
@@ -66,17 +58,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs b/packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs
index 888e7b9f..4a2884cb 100644
--- a/packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs
@@ -9,16 +9,15 @@ export const Route = createFileRoute("/demo/i18n")({
 
 function App() {
   return (
-    <div className="text-center">
-      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] gap-4">
+    <main className="demo-page demo-center text-center">
+      <section className="demo-panel flex w-full max-w-2xl flex-col items-center gap-4">
         <img
           src={logo}
-          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          className="pointer-events-none h-28 animate-[spin_20s_linear_infinite]"
           alt="logo"
         />
-        <p>{m.example_message({ username: "TanStack Router" })}</p>
+        <p className="demo-muted text-lg">{m.example_message({ username: "TanStack Router" })}</p>
         <a
-          className="text-[#61dafb] hover:underline"
           href="https://inlang.com/m/gerre34r/library-inlang-paraglideJs"
           target="_blank"
           rel="noopener noreferrer"
@@ -28,7 +27,7 @@ function App() {
         <div className="mt-3">
           <LocaleSwitcher />
         </div>
-      </header>
-    </div>
+      </section>
+    </main>
   );
 }
diff --git a/packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx b/packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx
index 0a43d2e6..f359004c 100644
--- a/packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx
+++ b/packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx
@@ -21,61 +21,60 @@ function PostHogDemo() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-8">
-      <div className="max-w-md mx-auto">
-        <h1 className="text-3xl font-bold mb-6">PostHog Demo</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2">Analytics</p>
+        <h1 className="demo-title mb-6">PostHog Demo</h1>
 
         {!isConfigured && (
-          <div className="mb-4 p-4 bg-yellow-900/50 border border-yellow-600 rounded-lg">
-            <p className="text-yellow-200 text-sm">
+          <div className="demo-alert mb-4">
+            <p className="text-sm">
               <strong>Warning:</strong> VITE_POSTHOG_KEY is not configured.
-              Events won't be sent to PostHog. Add it to your{' '}
-              <code className="bg-yellow-900 px-1 rounded">.env</code> file.
+              Events won't be sent to PostHog. Add it to your <code>.env</code>{' '}
+              file.
             </p>
           </div>
         )}
 
-        <div className="bg-gray-800 rounded-lg p-6">
-          <p className="text-gray-400 mb-4">
+        <div className="demo-card">
+          <p className="demo-muted mb-4">
             Click the button below to send events to PostHog. Check your PostHog
             dashboard to see them appear in real-time.
           </p>
 
           <button
             onClick={() => trackEvent('button_clicked', { button: 'demo' })}
-            className="w-full bg-cyan-600 hover:bg-cyan-700 px-4 py-3 rounded font-medium"
+            className="demo-button w-full"
           >
             Track Click
           </button>
 
           {isConfigured && (
-            <div className="mt-6 p-4 bg-gray-700 rounded">
-              <p className="text-sm text-gray-400">Events sent this session:</p>
-              <p className="text-4xl font-bold text-cyan-400">{eventCount}</p>
+            <div className="demo-list-item mt-6">
+              <p className="demo-muted text-sm">Events sent this session:</p>
+              <p className="text-4xl font-bold">{eventCount}</p>
             </div>
           )}
         </div>
 
-        <p className="mt-4 text-sm text-gray-400">
+        <p className="demo-muted mt-4 text-sm">
           Open your{' '}
           <a
             href="https://app.posthog.com/events"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-cyan-400 hover:text-cyan-300 underline"
           >
             PostHog Events
           </a>{' '}
           page to see these events appear.
         </p>
 
-        <p className="mt-2 text-sm text-gray-400">
+        <p className="demo-muted mt-2 text-sm">
           Learn more in the{' '}
           <a
             href="https://posthog.com/docs/libraries/react"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-cyan-400 hover:text-cyan-300 underline"
           >
             PostHog React docs
           </a>
@@ -83,11 +82,9 @@ function PostHogDemo() {
         </p>
 
         <div className="mt-8">
-          <Link to="/" className="text-cyan-400 hover:text-cyan-300">
-            &larr; Back to Home
-          </Link>
+          <Link to="/">&larr; Back to Home</Link>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx b/packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
index 797f7c46..bb119a18 100644
--- a/packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
+++ b/packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
@@ -54,21 +54,22 @@ function PowerSyncDemo() {
           </p>
           <h1 className="text-3xl font-semibold tracking-tight">PowerSync</h1>
           <p className="text-sm text-[var(--sea-ink-soft)]">
-            This demo writes to the local SQLite database immediately. Replace the sample
-            schema and backend connector with your real PowerSync configuration.
+            This demo writes to the local SQLite database immediately. Replace
+            the sample schema and backend connector with your real PowerSync
+            configuration.
           </p>
         </header>
 
-        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+        <section className="demo-card">
           <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
             Connection State
           </h2>
-          <pre className="mt-3 overflow-auto rounded-2xl bg-[var(--chip-bg)] p-4 text-xs leading-6 text-[var(--sea-ink)]">
+          <pre className="demo-code-block mt-3 overflow-auto text-xs leading-6">
             {JSON.stringify(status, null, 2)}
           </pre>
         </section>
 
-        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+        <section className="demo-card">
           <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
             Local Todos
           </h2>
@@ -77,39 +78,39 @@ function PowerSyncDemo() {
               {error}
             </p>
           ) : null}
-          <form className="mt-4 flex flex-col gap-3 sm:flex-row" onSubmit={addTodo}>
+          <form
+            className="mt-4 flex flex-col gap-3 sm:flex-row"
+            onSubmit={addTodo}
+          >
             <label className="sr-only" htmlFor="powersync-todo-description">
               Todo description
             </label>
             <input
               id="powersync-todo-description"
-              className="min-w-0 flex-1 rounded-2xl border border-[var(--line)] bg-white px-4 py-3 text-sm text-[var(--sea-ink)] outline-none"
+              className="demo-input min-w-0 flex-1"
               onChange={(event) => setDescription(event.target.value)}
               placeholder="Write to the local PowerSync database"
               value={description}
             />
-            <button
-              className="rounded-2xl bg-[var(--sea-ink)] px-4 py-3 text-sm font-semibold text-white"
-              type="submit"
-            >
+            <button className="demo-button" type="submit">
               Insert Local Row
             </button>
           </form>
 
           <ul className="mt-5 space-y-3">
             {todos.length === 0 ? (
-              <li className="rounded-2xl border border-dashed border-[var(--line)] px-4 py-5 text-sm text-[var(--sea-ink-soft)]">
-                No rows yet. Insert one locally, then wire `uploadData()` to send it upstream.
+              <li className="demo-list-item text-sm text-[var(--sea-ink-soft)]">
+                No rows yet. Insert one locally, then wire `uploadData()` to
+                send it upstream.
               </li>
             ) : (
               todos.map((todo) => (
-                <li
-                  className="rounded-2xl border border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4"
-                  key={todo.id}
-                >
+                <li className="demo-list-item" key={todo.id}>
                   <div className="flex items-start justify-between gap-4">
                     <div>
-                      <p className="font-medium text-[var(--sea-ink)]">{todo.description}</p>
+                      <p className="font-medium text-[var(--sea-ink)]">
+                        {todo.description}
+                      </p>
                       <p className="mt-1 text-xs text-[var(--sea-ink-soft)]">
                         {todo.created_at}
                       </p>
diff --git a/packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs b/packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs
index af2dd479..eb7bd938 100644
--- a/packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs
@@ -46,141 +46,91 @@ function DemoPrisma() {
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen p-4 text-white"
-      style={{
-        background:
-          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
-      }}
-    >
-      <div
-        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
-        style={{
-          background:
-            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
-          backdropFilter: 'blur(10px)',
-        }}
-      >
-        <div
-          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
-            border: '1px solid rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <div className="relative group">
-            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
-            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
-              <img
-                src="/prisma.svg"
-                alt="Prisma Logo"
-                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/prisma.svg" alt="Prisma Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Prisma Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
-            Prisma Database Demo
-          </h1>
-        </div>
+        </header>
 
-        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+        <h2 className="demo-section-title mb-4">Todos</h2>
 
         <ul className="space-y-3 mb-6">
           {todos.map((todo) => (
             <li
               key={todo.id}
-              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
-              style={{
-                background:
-                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
-                borderColor: 'rgba(93, 103, 227, 0.3)',
-              }}
+              className="demo-list-item"
             >
               <div className="flex items-center justify-between">
-                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
-                  {todo.title}
-                </span>
-                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+                <span className="font-medium">{todo.title}</span>
+                <span className="demo-muted text-xs">#{todo.id}</span>
               </div>
             </li>
           ))}
           {todos.length === 0 && (
-            <li className="text-center py-8 text-indigo-300/70">
+            <li className="demo-list-item text-center demo-muted">
               No todos yet. Create one below!
             </li>
           )}
         </ul>
 
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
           <input
             type="text"
             name="title"
             placeholder="Add a new todo..."
-            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
-            style={{
-              background: 'rgba(93, 103, 227, 0.1)',
-              borderColor: 'rgba(93, 103, 227, 0.3)',
-              focusRing: 'rgba(93, 103, 227, 0.5)',
-            }}
+            className="demo-input min-w-0 flex-1"
           />
           <button
             type="submit"
-            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
-            style={{
-              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
-              color: 'white',
-            }}
+            className="demo-button whitespace-nowrap"
           >
             Add Todo
           </button>
         </form>
 
-        <div
-          className="mt-8 p-6 rounded-lg border"
-          style={{
-            background: 'rgba(93, 103, 227, 0.05)',
-            borderColor: 'rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+        <div className="demo-card mt-8">
+          <h3 className="demo-section-title mb-2">
             Powered by Prisma ORM
           </h3>
-          <p className="text-sm text-indigo-300/80 mb-4">
+          <p className="demo-muted mb-4 text-sm">
             Next-generation ORM for Node.js & TypeScript with PostgreSQL
           </p>
           <div className="space-y-2 text-sm">
-            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
-            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+            <p className="font-medium">Setup Instructions:</p>
+            <ol className="demo-muted list-inside list-decimal space-y-2">
               <li>
                 Configure your{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  DATABASE_URL
-                </code>{' '}
+                <code>DATABASE_URL</code>{' '}
                 in .env.local
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['db', 'push']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['studio']) %>
                 </code>
               </li>
             </ol>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx b/packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx
index 9fab59eb..043e78f0 100644
--- a/packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx
+++ b/packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx
@@ -19,15 +19,13 @@ export const Route = createFileRoute('/demo/sentry/testing')({
       Sentry.captureException(error)
     }, [error])
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#181423]">
-        <div className="text-center p-8">
+      <main className="demo-page demo-center">
+        <section className="demo-panel text-center">
           <SentryLogo />
-          <h1 className="text-2xl font-bold text-white mt-4 mb-2">
-            Something went wrong
-          </h1>
-          <p className="text-[#A49FB5]">{error.message}</p>
-        </div>
-      </div>
+          <h1 className="mt-4 mb-2 text-2xl font-bold">Something went wrong</h1>
+          <p className="demo-muted">{error.message}</p>
+        </section>
+      </main>
     )
   },
 })
@@ -101,48 +99,36 @@ function SentryButton({
   disabled?: boolean
   loading?: boolean
 }) {
-  const baseColor = variant === 'error' ? '#E50045' : '#553DB8'
-  const topColor = variant === 'error' ? '#FF1A5C' : '#7553FF'
-
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={disabled || loading}
-      className="group w-full rounded-lg text-white cursor-pointer border-none p-0 transition-all disabled:cursor-not-allowed disabled:opacity-60"
-      style={{ backgroundColor: baseColor }}
+      className={`demo-button w-full px-6 py-4 text-base ${variant === 'error' ? 'demo-button-danger' : ''}`}
     >
-      <span
-        className="flex items-center justify-center gap-3 px-6 py-4 rounded-lg text-lg font-semibold transition-transform group-hover:-translate-y-1 group-active:translate-y-0 group-disabled:translate-y-0"
-        style={{
-          backgroundColor: topColor,
-          border: `1px solid ${baseColor}`,
-        }}
-      >
-        {loading && (
-          <svg
-            className="animate-spin h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
-        {children}
-      </span>
+      {loading && (
+        <svg
+          className="animate-spin h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      {children}
     </button>
   )
 }
@@ -158,14 +144,14 @@ function FeatureCard({
   description: string
 }) {
   return (
-    <div className="bg-[#1C1825] rounded-xl p-4 border border-[#2D2640] hover:border-[#7553FF]/50 transition-all group">
+    <div className="demo-card transition-all group">
       <div className="flex items-center gap-3 mb-2">
-        <div className="text-[#7553FF] group-hover:scale-110 transition-transform">
+        <div className="text-[var(--lagoon-deep)] group-hover:scale-110 transition-transform">
           {icon}
         </div>
-        <h3 className="font-semibold text-white">{title}</h3>
+        <h3 className="font-semibold text-[var(--sea-ink)]">{title}</h3>
       </div>
-      <p className="text-sm text-[#A49FB5] pl-9">{description}</p>
+      <p className="demo-muted pl-9 text-sm">{description}</p>
     </div>
   )
 }
@@ -192,9 +178,9 @@ function ResultBadge({
   return (
     <div className="mt-4 space-y-3">
       {type === 'error' && (
-        <div className="flex items-center gap-2 bg-[#E50045]/10 border border-[#E50045]/30 rounded-lg px-4 py-3">
+        <div className="demo-alert demo-alert-danger flex items-center gap-2">
           <svg
-            className="w-5 h-5 text-[#FF1A5C]"
+            className="w-5 h-5 text-[#9f3030]"
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -205,16 +191,16 @@ function ResultBadge({
             <title>Error captured</title>
             <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
-          <span className="text-[#FF1A5C] text-sm font-medium">
+          <span className="text-sm font-medium">
             Error captured and sent to Sentry
           </span>
         </div>
       )}
 
       {type === 'success' && (
-        <div className="flex items-center gap-2 bg-[#00F261]/10 border border-[#00BF4D]/30 rounded-lg px-4 py-3">
+        <div className="demo-alert flex items-center gap-2">
           <svg
-            className="w-5 h-5 text-[#00F261]"
+            className="w-5 h-5 text-[var(--palm)]"
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -225,7 +211,7 @@ function ResultBadge({
             <title>Trace complete</title>
             <path d="M5 13l4 4L19 7" />
           </svg>
-          <span className="text-[#00F261] text-sm font-medium">
+          <span className="text-sm font-medium">
             Trace completed successfully
           </span>
         </div>
@@ -234,12 +220,12 @@ function ResultBadge({
       <button
         type="button"
         onClick={handleCopy}
-        className="relative flex items-center gap-2 bg-[#7553FF]/10 hover:bg-[#7553FF]/20 border border-[#7553FF]/30 rounded-lg px-4 py-2 transition-all cursor-pointer w-full"
+        className="demo-list-item relative flex items-center gap-2 transition-all cursor-pointer w-full"
       >
-        <span className="text-[#B3A1FF] text-sm">span.op:</span>
-        <code className="text-[#7553FF] font-mono text-sm">{spanOp}</code>
+        <span className="demo-muted text-sm">span.op:</span>
+        <code className="font-mono text-sm">{spanOp}</code>
         <svg
-          className="w-4 h-4 text-[#B3A1FF] ml-auto"
+          className="w-4 h-4 demo-muted ml-auto"
           fill="none"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -251,7 +237,7 @@ function ResultBadge({
           <path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
         </svg>
         {copied && (
-          <span className="absolute -top-8 left-1/2 -translate-x-1/2 bg-[#00F261] text-[#181423] text-xs font-medium px-2 py-1 rounded animate-pulse">
+          <span className="demo-pill absolute -top-8 left-1/2 -translate-x-1/2 animate-pulse">
             Copied!
           </span>
         )}
@@ -265,15 +251,15 @@ function ProgressBar({ loading }: { loading: boolean }) {
   return (
     <div className="mt-4 flex items-center gap-3">
       <div
-        className={`w-3 h-3 rounded-full transition-all ${loading ? 'bg-[#7553FF] animate-pulse' : 'bg-[#00F261]'}`}
+        className={`w-3 h-3 rounded-full transition-all ${loading ? 'bg-[var(--lagoon)] animate-pulse' : 'bg-[var(--palm)]'}`}
       />
-      <div className="flex-1 h-2 bg-[#2D2640] rounded-full overflow-hidden">
+      <div className="flex-1 h-2 bg-[var(--line)] rounded-full overflow-hidden">
         <div
-          className="h-full bg-gradient-to-r from-[#7553FF] to-[#B3A1FF] rounded-full transition-all duration-500"
+          className="h-full bg-[var(--lagoon)] rounded-full transition-all duration-500"
           style={{ width: loading ? '60%' : '100%' }}
         />
       </div>
-      <span className="text-xs text-[#A49FB5] w-16 text-right">
+      <span className="demo-muted text-xs w-16 text-right">
         {loading ? 'Running...' : 'Complete'}
       </span>
     </div>
@@ -378,39 +364,27 @@ function RouteComponent() {
   }
 
   return (
-    <div
-      className="min-h-screen text-white"
-      style={{
-        fontFamily:
-          'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-        background:
-          'linear-gradient(180deg, #181423 0%, #1C1825 50%, #181423 100%)',
-      }}
-    >
-      <div className="max-w-5xl mx-auto px-6 py-16">
-        {/* Header */}
+    <main className="demo-page demo-page-wide">
+      <div className="mx-auto max-w-5xl">
         <div className="text-center mb-16">
           <div className="inline-flex items-center gap-4 mb-8">
-            <div className="text-[#7553FF]">
+            <div className="text-[var(--lagoon-deep)]">
               <SentryLogo size={56} />
             </div>
             <div className="text-left">
-              <h1 className="text-3xl font-bold text-white tracking-tight">
-                Sentry Demo
-              </h1>
-              <p className="text-[#A49FB5] text-sm">
+              <h1 className="demo-title">Sentry Demo</h1>
+              <p className="demo-muted text-sm">
                 Error monitoring & performance tracing
               </p>
             </div>
           </div>
-          <p className="text-lg text-[#A49FB5] max-w-xl mx-auto leading-relaxed">
+          <p className="demo-muted mx-auto max-w-xl text-lg leading-relaxed">
             Click the buttons below to trigger errors and traces, then view them
             in your{' '}
             <a
               href="https://sentry.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#7553FF] hover:text-[#B3A1FF] underline transition-colors"
             >
               Sentry dashboard
             </a>
@@ -420,9 +394,9 @@ function RouteComponent() {
 
         {/* Sentry Not Initialized Warning */}
         {showWarning && (
-          <div className="mb-8 flex items-center gap-3 bg-[#E5A000]/10 border border-[#E5A000]/30 rounded-xl px-6 py-4">
+          <div className="demo-alert mb-8 flex items-center gap-3">
             <svg
-              className="w-6 h-6 text-[#E5A000] flex-shrink-0"
+              className="w-6 h-6 text-[var(--sea-ink-soft)] flex-shrink-0"
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -434,11 +408,10 @@ function RouteComponent() {
               <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
             <div>
-              <p className="text-[#E5A000] font-medium">
-                Sentry is not initialized
-              </p>
-              <p className="text-[#A49FB5] text-sm mt-1">
-                Set the <code className="bg-[#1C1825] px-1.5 py-0.5 rounded text-[#B3A1FF]">VITE_SENTRY_DSN</code> environment variable to enable error tracking and performance monitoring.
+              <p className="font-medium">Sentry is not initialized</p>
+              <p className="demo-muted text-sm mt-1">
+                Set the <code>VITE_SENTRY_DSN</code> environment variable to
+                enable error tracking and performance monitoring.
               </p>
             </div>
           </div>
@@ -487,10 +460,10 @@ function RouteComponent() {
         {/* Testing Panels */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Client-Side Panel */}
-          <div className="bg-[#1C1825] rounded-2xl p-8 border border-[#2D2640]">
+          <div className="demo-panel">
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-3 h-3 rounded-full bg-[#00F261]" />
-              <h2 className="text-xl font-semibold">Client-Side Testing</h2>
+              <div className="w-3 h-3 rounded-full bg-[var(--palm)]" />
+              <h2 className="demo-section-title">Client-Side Testing</h2>
             </div>
 
             <div className="space-y-4">
@@ -539,10 +512,10 @@ function RouteComponent() {
           </div>
 
           {/* Server-Side Panel */}
-          <div className="bg-[#1C1825] rounded-2xl p-8 border border-[#2D2640]">
+          <div className="demo-panel">
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-3 h-3 rounded-full bg-[#7553FF]" />
-              <h2 className="text-xl font-semibold">Server-Side Testing</h2>
+              <div className="w-3 h-3 rounded-full bg-[var(--lagoon)]" />
+              <h2 className="demo-section-title">Server-Side Testing</h2>
             </div>
 
             <div className="space-y-4">
@@ -593,24 +566,20 @@ function RouteComponent() {
 
         {/* Footer Note */}
         <div className="mt-12 text-center">
-          <p className="text-sm text-[#6E6C75]">
-            This page uses{' '}
-            <code className="bg-[#1C1825] px-2 py-1 rounded text-[#B3A1FF]">
-              @sentry/tanstackstart-react
-            </code>{' '}
-            for full-stack error monitoring.
+          <p className="demo-muted text-sm">
+            This page uses <code>@sentry/tanstackstart-react</code> for
+            full-stack error monitoring.
             <br />
             <a
               href="https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#7553FF] hover:text-[#B3A1FF] underline transition-colors"
             >
               Read the documentation →
             </a>
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx b/packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx
index 9b66f01e..0286dec8 100644
--- a/packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx
+++ b/packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx
@@ -42,15 +42,15 @@ function DevtoolPanel() {
 
   return (
     <div className="p-4 grid gap-4 grid-cols-[1fr_10fr]">
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         First Name
       </div>
       <div className="text-sm">{state?.firstName}</div>
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         Last Name
       </div>
       <div className="text-sm">{state?.lastName}</div>
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         Full Name
       </div>
       <div className="text-sm">{state?.fullName}</div>
diff --git a/packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs b/packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs
index 9b5b4a81..0accdc19 100644
--- a/packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs
@@ -19,7 +19,7 @@ function FirstName() {
       onChange={(e) =>
         store.setState((state) => ({ ...state, firstName: e.target.value }))
       }
-      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      className="demo-input"
     />
   )
 }
@@ -33,7 +33,7 @@ function LastName() {
       onChange={(e) =>
         store.setState((state) => ({ ...state, lastName: e.target.value }))
       }
-      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      className="demo-input"
     />
   )
 }
@@ -41,7 +41,7 @@ function LastName() {
 function FullName() {
   const fName = useStore(fullName, (state) => state)
   return (
-    <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+    <div className="demo-list-item font-medium">
       {fName}
     </div>
   )
@@ -49,20 +49,15 @@ function FullName() {
 
 function DemoStore() {
   return (
-    <div
-      className="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
-        <h1 className="text-4xl font-bold mb-5">Store Example</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel flex w-full max-w-xl flex-col gap-4">
+        <p className="island-kicker">TanStack Store</p>
+        <h1 className="demo-title mb-2">Store Example</h1>
         <FirstName />
         <LastName />
         <FullName />
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
index 36cb9c5d..2f7c3429 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
@@ -1,41 +1,38 @@
-import React from "react";
+import React from 'react'
 
 export interface ButtonProps {
-  variant?: "primary" | "secondary" | "danger";
-  size?: "small" | "medium" | "large";
-  children: React.ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-  className?: string;
+  variant?: 'primary' | 'secondary' | 'danger'
+  size?: 'small' | 'medium' | 'large'
+  children: React.ReactNode
+  onClick?: () => void
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
 }
 
 export const Button: React.FC<ButtonProps> = ({
-  variant = "primary",
-  size = "medium",
+  variant = 'primary',
+  size = 'medium',
   children,
   onClick,
   disabled = false,
-  type = "button",
-  className = "",
+  type = 'button',
+  className = '',
 }) => {
   const baseStyles =
-    "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    'demo-button disabled:opacity-50 disabled:cursor-not-allowed'
 
   const variantStyles = {
-    primary:
-      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
-    secondary:
-      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-    danger:
-      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
-  };
+    primary: '',
+    secondary: 'demo-button-secondary',
+    danger: 'demo-button-danger',
+  }
 
   const sizeStyles = {
-    small: "px-3 py-1.5 text-sm",
-    medium: "px-4 py-2 text-base",
-    large: "px-6 py-3 text-lg",
-  };
+    small: 'px-3 py-1.5 text-sm',
+    medium: 'px-4 py-2 text-base',
+    large: 'px-6 py-3 text-lg',
+  }
 
   return (
     <button
@@ -46,5 +43,5 @@ export const Button: React.FC<ButtonProps> = ({
     >
       {children}
     </button>
-  );
-};
+  )
+}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
index 7c30108a..99719dd6 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
@@ -1,33 +1,29 @@
-import React from "react";
+import React from 'react'
 
 export interface DialogProps {
-  title: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  className?: string;
+  title: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+  className?: string
 }
 
 export const Dialog: React.FC<DialogProps> = ({
   title,
   children,
   footer,
-  className = "",
+  className = '',
 }) => {
   return (
-    <div
-      className={`bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden ${className}`}
-    >
-      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-          {title}
-        </h2>
+    <div className={`demo-panel overflow-hidden p-0 ${className}`}>
+      <div className="border-b border-[var(--line)] px-6 py-4">
+        <h2 className="demo-section-title">{title}</h2>
       </div>
       <div className="px-6 py-6">{children}</div>
       {footer && (
-        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+        <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-6 py-4">
           {footer}
         </div>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
index 1274b3bd..8faf9a03 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
@@ -1,30 +1,27 @@
-import React from "react";
+import React from 'react'
 
 export interface InputProps {
-  label: string;
-  id: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  required?: boolean;
-  className?: string;
+  label: string
+  id: string
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  required?: boolean
+  className?: string
 }
 
 export const Input: React.FC<InputProps> = ({
   label,
   id,
-  value = "",
+  value = '',
   onChange,
   placeholder,
   required = false,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
-      <label
-        htmlFor={id}
-        className="text-sm font-medium text-gray-700 dark:text-gray-200"
-      >
+      <label htmlFor={id} className="text-sm font-medium text-[var(--sea-ink)]">
         {label}
         {required && <span className="text-red-500 ml-1">*</span>}
       </label>
@@ -35,8 +32,8 @@ export const Input: React.FC<InputProps> = ({
         onChange={(e) => onChange?.(e.target.value)}
         placeholder={placeholder}
         required={required}
-        className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
+        className="demo-input"
       />
     </div>
-  );
-};
+  )
+}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
index e07483cc..dce72280 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
@@ -1,17 +1,17 @@
-import React from "react";
+import React from 'react'
 
 export interface RadioOption {
-  value: string;
-  label: string;
+  value: string
+  label: string
 }
 
 export interface RadioGroupProps {
-  label: string;
-  name: string;
-  options: RadioOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  className?: string;
+  label: string
+  name: string
+  options: RadioOption[]
+  value?: string
+  onChange?: (value: string) => void
+  className?: string
 }
 
 export const RadioGroup: React.FC<RadioGroupProps> = ({
@@ -20,11 +20,11 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
   options,
   value,
   onChange,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-3 ${className}`}>
-      <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+      <label className="text-sm font-medium text-[var(--sea-ink)]">
         {label}
       </label>
       <div className="flex gap-4">
@@ -39,14 +39,14 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
               value={option.value}
               checked={value === option.value}
               onChange={(e) => onChange?.(e.target.value)}
-              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 cursor-pointer"
+              className="h-4 w-4 cursor-pointer accent-[var(--lagoon-deep)]"
             />
-            <span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
+            <span className="demo-muted text-sm transition-colors group-hover:text-[var(--sea-ink)]">
               {option.label}
             </span>
           </label>
         ))}
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
index d9333821..477a222b 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 export interface SliderProps {
-  label: string;
-  id: string;
-  value?: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  showValue?: boolean;
-  className?: string;
+  label: string
+  id: string
+  value?: number
+  onChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  showValue?: boolean
+  className?: string
 }
 
 export const Slider: React.FC<SliderProps> = ({
@@ -21,19 +21,19 @@ export const Slider: React.FC<SliderProps> = ({
   max = 100,
   step = 1,
   showValue = true,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       <div className="flex justify-between items-center">
         <label
           htmlFor={id}
-          className="text-sm font-medium text-gray-700 dark:text-gray-200"
+          className="text-sm font-medium text-[var(--sea-ink)]"
         >
           {label}
         </label>
         {showValue && (
-          <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
+          <span className="min-w-12 text-right text-sm font-semibold text-[var(--lagoon-deep)]">
             {value}
           </span>
         )}
@@ -46,12 +46,12 @@ export const Slider: React.FC<SliderProps> = ({
         min={min}
         max={max}
         step={step}
-        className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
+        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-[var(--chip-bg)] accent-[var(--lagoon-deep)]"
       />
-      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+      <div className="demo-muted flex justify-between text-xs">
         <span>{min}</span>
         <span>{max}</span>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
index fb600a97..831efb7b 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
+++ b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
@@ -1,34 +1,34 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
 
-import { Dialog } from "#/components/storybook/dialog";
-import { Input } from "#/components/storybook/input";
-import { RadioGroup } from "#/components/storybook/radio-group";
-import { Slider } from "#/components/storybook/slider";
-import { Button } from "#/components/storybook/button";
+import { Dialog } from '#/components/storybook/dialog'
+import { Input } from '#/components/storybook/input'
+import { RadioGroup } from '#/components/storybook/radio-group'
+import { Slider } from '#/components/storybook/slider'
+import { Button } from '#/components/storybook/button'
 
-export const Route = createFileRoute("/demo/storybook")({
+export const Route = createFileRoute('/demo/storybook')({
   component: StorybookDemo,
-});
+})
 
 function StorybookDemo() {
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [employmentType, setEmploymentType] = useState("full-time");
-  const [coffeeCups, setCoffeeCups] = useState(3);
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [employmentType, setEmploymentType] = useState('full-time')
+  const [coffeeCups, setCoffeeCups] = useState(3)
 
-  const handleSubmit = () => {};
+  const handleSubmit = () => {}
 
   const handleReset = () => {
-    setFirstName("");
-    setLastName("");
-    setEmploymentType("full-time");
-    setCoffeeCups(3);
-  };
+    setFirstName('')
+    setLastName('')
+    setEmploymentType('full-time')
+    setCoffeeCups(3)
+  }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
-      <div className="max-w-2xl mx-auto">
+    <main className="demo-page demo-center">
+      <div className="w-full max-w-2xl">
         <Dialog
           title="Employee Information Form"
           footer={
@@ -70,8 +70,8 @@ function StorybookDemo() {
               label="Employment Type"
               name="employmentType"
               options={[
-                { value: "full-time", label: "Full Time" },
-                { value: "part-time", label: "Part Time" },
+                { value: 'full-time', label: 'Full Time' },
+                { value: 'part-time', label: 'Part Time' },
               ]}
               value={employmentType}
               onChange={setEmploymentType}
@@ -88,6 +88,6 @@ function StorybookDemo() {
           </form>
         </Dialog>
       </div>
-    </div>
-  );
+    </main>
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx
index e0b0930b..62419798 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx
@@ -1,27 +1,27 @@
-import { StrapiImage } from "@/components/strapi-image";
-import type { TImage } from "@/types/strapi";
+import { StrapiImage } from '@/components/strapi-image'
+import type { TImage } from '@/types/strapi'
 
 export interface IMedia {
-  __component: "shared.media";
-  id: number;
-  file?: TImage;
+  __component: 'shared.media'
+  id: number
+  file?: TImage
 }
 
 export function Media({ file }: Readonly<IMedia>) {
-  if (!file) return null;
+  if (!file) return null
 
   return (
     <figure className="my-8">
       <StrapiImage
         src={file.url}
-        alt={file.alternativeText || ""}
+        alt={file.alternativeText || ''}
         className="rounded-lg w-full"
       />
       {file.alternativeText && (
-        <figcaption className="mt-2 text-center text-sm text-gray-500">
+        <figcaption className="demo-muted mt-2 text-center text-sm">
           {file.alternativeText}
         </figcaption>
       )}
     </figure>
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx
index b73c1df0..aa3189c4 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx
@@ -1,19 +1,19 @@
 export interface IQuote {
-  __component: "shared.quote";
-  id: number;
-  body: string;
-  title?: string;
+  __component: 'shared.quote'
+  id: number
+  body: string
+  title?: string
 }
 
 export function Quote({ body, title }: Readonly<IQuote>) {
   return (
-    <blockquote className="border-l-4 border-cyan-400 pl-6 py-4 my-6 bg-slate-800/30 rounded-r-lg">
-      <p className="text-xl italic text-gray-300 leading-relaxed">{body}</p>
+    <blockquote className="demo-card my-6 border-l-4 border-l-[var(--lagoon-deep)] py-4 pl-6">
+      <p className="demo-muted text-xl italic leading-relaxed">{body}</p>
       {title && (
-        <cite className="block mt-4 text-cyan-400 not-italic font-medium">
+        <cite className="mt-4 block font-medium not-italic text-[var(--sea-ink)]">
           — {title}
         </cite>
       )}
     </blockquote>
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx
index 452d6674..df5b637d 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx
@@ -1,36 +1,40 @@
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 interface MarkdownContentProps {
-  content: string | undefined | null;
-  className?: string;
+  content: string | undefined | null
+  className?: string
 }
 
 const styles = {
-  h1: "text-3xl font-bold mb-6 text-white",
-  h2: "text-2xl font-bold mb-4 text-white",
-  h3: "text-xl font-bold mb-3 text-white",
-  p: "mb-4 leading-relaxed text-gray-300",
-  a: "text-cyan-400 hover:underline",
-  ul: "list-disc pl-6 mb-4 space-y-2 text-gray-300",
-  ol: "list-decimal pl-6 mb-4 space-y-2 text-gray-300",
-  li: "leading-relaxed",
-  blockquote: "border-l-4 border-cyan-400 pl-4 italic text-gray-400 my-4",
-  code: "bg-slate-800 px-2 py-1 rounded text-cyan-400 text-sm font-mono",
-  pre: "bg-slate-800 p-4 rounded-lg overflow-x-auto mb-4",
-  table: "w-full border-collapse mb-4",
-  th: "border border-slate-700 p-2 bg-slate-800 text-left text-white",
-  td: "border border-slate-700 p-2 text-gray-300",
-  img: "max-w-full h-auto rounded-lg my-4",
-  hr: "border-slate-700 my-8",
-  strong: "text-white font-semibold",
-};
+  h1: 'mb-6 text-3xl font-bold text-[var(--sea-ink)]',
+  h2: 'mb-4 text-2xl font-bold text-[var(--sea-ink)]',
+  h3: 'mb-3 text-xl font-bold text-[var(--sea-ink)]',
+  p: 'demo-muted mb-4 leading-relaxed',
+  a: 'hover:underline',
+  ul: 'demo-muted mb-4 list-disc space-y-2 pl-6',
+  ol: 'demo-muted mb-4 list-decimal space-y-2 pl-6',
+  li: 'leading-relaxed',
+  blockquote:
+    'demo-card my-4 border-l-4 border-l-[var(--lagoon-deep)] pl-4 italic',
+  code: 'text-sm font-mono',
+  pre: 'demo-code-block mb-4 overflow-x-auto',
+  table: 'w-full border-collapse mb-4',
+  th: 'border border-[var(--line)] bg-[var(--chip-bg)] p-2 text-left text-[var(--sea-ink)]',
+  td: 'demo-muted border border-[var(--line)] p-2',
+  img: 'max-w-full h-auto rounded-lg my-4',
+  hr: 'my-8 border-[var(--line)]',
+  strong: 'font-semibold text-[var(--sea-ink)]',
+}
 
-export function MarkdownContent({ content, className = "" }: MarkdownContentProps) {
-  if (!content) return null;
+export function MarkdownContent({
+  content,
+  className = '',
+}: MarkdownContentProps) {
+  if (!content) return null
 
   return (
-    <div className={`prose prose-invert max-w-none ${className}`}>
+    <div className={`max-w-none ${className}`}>
       <Markdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -39,36 +43,49 @@ export function MarkdownContent({ content, className = "" }: MarkdownContentProp
           h3: ({ children }) => <h3 className={styles.h3}>{children}</h3>,
           p: ({ children }) => <p className={styles.p}>{children}</p>,
           a: ({ href, children }) => (
-            <a href={href} className={styles.a} target="_blank" rel="noopener noreferrer">
+            <a
+              href={href}
+              className={styles.a}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {children}
             </a>
           ),
           ul: ({ children }) => <ul className={styles.ul}>{children}</ul>,
           ol: ({ children }) => <ol className={styles.ol}>{children}</ol>,
           li: ({ children }) => <li className={styles.li}>{children}</li>,
-          blockquote: ({ children }) => <blockquote className={styles.blockquote}>{children}</blockquote>,
+          blockquote: ({ children }) => (
+            <blockquote className={styles.blockquote}>{children}</blockquote>
+          ),
           code: ({ className, children }) => {
-            const isCodeBlock = className?.includes("language-");
+            const isCodeBlock = className?.includes('language-')
             if (isCodeBlock) {
               return (
                 <pre className={styles.pre}>
-                  <code className="text-sm font-mono text-gray-300">{children}</code>
+                  <code className="text-sm font-mono">{children}</code>
                 </pre>
-              );
+              )
             }
-            return <code className={styles.code}>{children}</code>;
+            return <code className={styles.code}>{children}</code>
           },
           pre: ({ children }) => <>{children}</>,
-          table: ({ children }) => <table className={styles.table}>{children}</table>,
+          table: ({ children }) => (
+            <table className={styles.table}>{children}</table>
+          ),
           th: ({ children }) => <th className={styles.th}>{children}</th>,
           td: ({ children }) => <td className={styles.td}>{children}</td>,
-          img: ({ src, alt }) => <img src={src} alt={alt || ""} className={styles.img} />,
+          img: ({ src, alt }) => (
+            <img src={src} alt={alt || ''} className={styles.img} />
+          ),
           hr: () => <hr className={styles.hr} />,
-          strong: ({ children }) => <strong className={styles.strong}>{children}</strong>,
+          strong: ({ children }) => (
+            <strong className={styles.strong}>{children}</strong>
+          ),
         }}
       >
         {content}
       </Markdown>
     </div>
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx
index ede7e9cd..5bbaa54a 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx
@@ -64,10 +64,8 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
       <button
         onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
         disabled={currentPage <= 1}
-        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-          currentPage <= 1
-            ? 'text-gray-600 cursor-not-allowed'
-            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        className={`demo-button demo-button-secondary ${
+          currentPage <= 1 ? 'cursor-not-allowed opacity-50' : ''
         }`}
       >
         <ChevronLeft className="w-4 h-4" />
@@ -80,7 +78,7 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
           page === 'ellipsis' ? (
             <span
               key={`ellipsis-${index}`}
-              className="px-2 py-2 text-gray-500 hidden md:block"
+              className="demo-muted hidden px-2 py-2 md:block"
             >
               ...
             </span>
@@ -88,15 +86,13 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
             <button
               key={page}
               onClick={() => handlePageChange(page)}
-              className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                currentPage === page
-                  ? 'bg-cyan-500 text-white'
-                  : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+              className={`demo-button min-w-[40px] ${
+                currentPage === page ? '' : 'demo-button-secondary'
               }`}
             >
               {page}
             </button>
-          )
+          ),
         )}
       </div>
 
@@ -106,10 +102,8 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
           currentPage < pageCount && handlePageChange(currentPage + 1)
         }
         disabled={currentPage >= pageCount}
-        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-          currentPage >= pageCount
-            ? 'text-gray-600 cursor-not-allowed'
-            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        className={`demo-button demo-button-secondary ${
+          currentPage >= pageCount ? 'cursor-not-allowed opacity-50' : ''
         }`}
       >
         <span className="hidden sm:inline">Next</span>
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx
index 0f7785a8..c492b4d9 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx
@@ -1,25 +1,25 @@
-import { useRouter, useSearch } from "@tanstack/react-router";
-import { useDebouncedCallback } from "use-debounce";
+import { useRouter, useSearch } from '@tanstack/react-router'
+import { useDebouncedCallback } from 'use-debounce'
 
 interface SearchProps {
-  readonly className?: string;
+  readonly className?: string
 }
 
-export function Search({ className = "" }: SearchProps) {
-  const search = useSearch({ strict: false });
-  const router = useRouter();
+export function Search({ className = '' }: SearchProps) {
+  const search = useSearch({ strict: false })
+  const router = useRouter()
 
   const handleSearch = useDebouncedCallback((term: string) => {
     router.navigate({
-      to: ".",
+      to: '.',
       search: (prev) => ({
         ...prev,
         page: 1,
         query: term || undefined,
       }),
       replace: true,
-    });
-  }, 300);
+    })
+  }, 300)
 
   return (
     <input
@@ -28,8 +28,8 @@ export function Search({ className = "" }: SearchProps) {
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         handleSearch(e.target.value)
       }
-      defaultValue={(search as any)?.query || ""}
-      className={`w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 transition-colors ${className}`}
+      defaultValue={(search as any)?.query || ''}
+      className={`demo-input ${className}`}
     />
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx
index 99ec27a9..941a680f 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx
@@ -1,47 +1,47 @@
-import { useState } from "react";
-import { getStrapiMedia } from "@/lib/strapi-utils";
+import { useState } from 'react'
+import { getStrapiMedia } from '@/lib/strapi-utils'
 
 interface StrapiImageProps {
-  src: string | undefined | null;
-  alt?: string | null;
-  className?: string;
-  width?: number | string;
-  height?: number | string;
+  src: string | undefined | null
+  alt?: string | null
+  className?: string
+  width?: number | string
+  height?: number | string
 }
 
 export function StrapiImage({
   src,
   alt,
-  className = "",
+  className = '',
   width,
   height,
 }: StrapiImageProps) {
-  const [hasError, setHasError] = useState(false);
+  const [hasError, setHasError] = useState(false)
 
-  if (!src) return null;
+  if (!src) return null
 
-  const imageUrl = getStrapiMedia(src);
+  const imageUrl = getStrapiMedia(src)
 
   if (hasError) {
     return (
       <div
-        className={`bg-slate-700 flex items-center justify-center text-slate-400 text-sm ${className}`}
+        className={`flex items-center justify-center bg-[var(--chip-bg)] text-sm text-[var(--sea-ink-soft)] ${className}`}
         style={{ width, height }}
       >
         <span>Image not available</span>
       </div>
-    );
+    )
   }
 
   return (
     <img
       src={imageUrl}
-      alt={alt || ""}
+      alt={alt || ''}
       width={width}
       height={height}
       loading="lazy"
       className={`object-cover ${className}`}
       onError={() => setHasError(true)}
     />
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx
index 81ee23b1..dbc8d4a9 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx
@@ -1,63 +1,58 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { strapiApi } from "@/data/loaders";
-import { StrapiImage } from "@/components/strapi-image";
-import { BlockRenderer } from "@/components/blocks";
-import type { TArticle } from "@/types/strapi";
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { strapiApi } from '@/data/loaders'
+import { StrapiImage } from '@/components/strapi-image'
+import { BlockRenderer } from '@/components/blocks'
+import type { TArticle } from '@/types/strapi'
 
-export const Route = createFileRoute("/demo/strapi/$articleId")({
+export const Route = createFileRoute('/demo/strapi/$articleId')({
   component: RouteComponent,
   errorComponent: ErrorComponent,
   loader: async ({ params }) => {
     try {
       const response = await strapiApi.articles.getArticleByIdData({
         data: params.articleId,
-      });
-      return { success: true, article: response.data };
+      })
+      return { success: true, article: response.data }
     } catch (error) {
       return {
         success: false,
-        error: error instanceof Error ? error.message : "Failed to load article",
+        error:
+          error instanceof Error ? error.message : 'Failed to load article',
         article: null,
-      };
+      }
     }
   },
-});
+})
 
 function ErrorComponent({ error }: { error: Error }) {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main className="demo-page">
+      <div className="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
           ← Back to Articles
         </Link>
-        <div className="bg-red-900/20 border border-red-500/50 rounded-xl p-8 text-center">
-          <h1 className="text-2xl font-bold text-red-400 mb-4">Error Loading Article</h1>
-          <p className="text-gray-300">{error.message}</p>
+        <div className="demo-alert demo-alert-danger text-center">
+          <h1 className="text-2xl font-bold mb-4">Error Loading Article</h1>
+          <p className="demo-muted">{error.message}</p>
         </div>
       </div>
-    </div>
-  );
+    </main>
+  )
 }
 
 function RouteComponent() {
   const { success, article, error } = Route.useLoaderData() as {
-    success: boolean;
-    article: TArticle | null;
-    error?: string;
-  };
+    success: boolean
+    article: TArticle | null
+    error?: string
+  }
 
   // Show error state
   if (!success || !article) {
     return (
-      <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-        <div className="max-w-4xl mx-auto">
-          <Link
-            to="/demo/strapi"
-            className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-          >
+      <main className="demo-page">
+        <div className="mx-auto max-w-4xl">
+          <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-5 w-5 mr-2"
@@ -73,31 +68,27 @@ function RouteComponent() {
             Back to Articles
           </Link>
 
-          <div className="bg-amber-900/20 border border-amber-500/50 rounded-xl p-8">
+          <div className="demo-alert">
             <div className="flex items-start gap-4">
-              <div className="text-amber-400 text-2xl">⚠️</div>
               <div>
-                <h2 className="text-xl font-semibold text-amber-400 mb-2">
-                  {error || "Article Not Found"}
+                <h2 className="text-xl font-semibold mb-2">
+                  {error || 'Article Not Found'}
                 </h2>
-                <p className="text-gray-300">
+                <p className="demo-muted">
                   Make sure the Strapi server is running and the article exists.
                 </p>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    );
+      </main>
+    )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main className="demo-page">
+      <div className="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="h-5 w-5 mr-2"
@@ -113,7 +104,7 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden">
+        <article className="demo-panel overflow-hidden p-0">
           <StrapiImage
             src={article.cover?.url}
             alt={article.cover?.alternativeText || article.title}
@@ -121,23 +112,23 @@ function RouteComponent() {
           />
 
           <div className="p-8">
-            <h1 className="text-4xl font-bold text-white mb-4">
-              {article.title || "Untitled"}
-            </h1>
+            <h1 className="demo-title mb-4">{article.title || 'Untitled'}</h1>
 
             <div className="flex items-center gap-4 mb-6">
               {article.author?.name && (
-                <span className="text-gray-400">
-                  By{" "}
-                  <span className="text-cyan-400">{article.author.name}</span>
+                <span className="demo-muted">
+                  By{' '}
+                  <span className="text-[var(--sea-ink)]">
+                    {article.author.name}
+                  </span>
                 </span>
               )}
               {article.createdAt && (
-                <span className="text-sm text-cyan-400/70">
-                  {new Date(article.createdAt).toLocaleDateString("en-US", {
-                    year: "numeric",
-                    month: "long",
-                    day: "numeric",
+                <span className="demo-muted text-sm">
+                  {new Date(article.createdAt).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
                   })}
                 </span>
               )}
@@ -145,15 +136,13 @@ function RouteComponent() {
 
             {article.category?.name && (
               <div className="mb-6">
-                <span className="text-xs px-3 py-1 bg-slate-700 text-cyan-400 rounded-full">
-                  {article.category.name}
-                </span>
+                <span className="demo-pill">{article.category.name}</span>
               </div>
             )}
 
             {article.description && (
               <div className="mb-8">
-                <p className="text-xl text-gray-300 leading-relaxed">
+                <p className="demo-muted text-xl leading-relaxed">
                   {article.description}
                 </p>
               </div>
@@ -165,6 +154,6 @@ function RouteComponent() {
           </div>
         </article>
       </div>
-    </div>
-  );
+    </main>
+  )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx
index fd6db4ef..718e8895 100644
--- a/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx
+++ b/packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx
@@ -73,28 +73,25 @@ export const Route = createFileRoute('/demo/strapi')({
 
 function StrapiServerInstructions() {
   return (
-    <div className="bg-slate-800/50 rounded-lg p-6 text-left mt-6">
-      <h2 className="text-lg font-semibold text-white mb-4">
-        Start the Strapi Server
-      </h2>
-      <div className="space-y-2 text-sm font-mono text-gray-400">
+    <div className="demo-card mt-6 text-left">
+      <h2 className="demo-section-title mb-4">Start the Strapi Server</h2>
+      <div className="demo-muted space-y-2 font-mono text-sm">
         <p>
-          <span className="text-cyan-400">$</span> cd ../server
+          <span>$</span> cd ../server
         </p>
         <p>
-          <span className="text-cyan-400">$</span> npm install
+          <span>$</span> npm install
         </p>
         <p>
-          <span className="text-cyan-400">$</span> npm run develop
+          <span>$</span> npm run develop
         </p>
       </div>
-      <p className="text-gray-500 text-sm mt-4">
+      <p className="demo-muted text-sm mt-4">
         Then create an admin at{' '}
         <a
           href="http://localhost:1337/admin"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-cyan-400 hover:underline"
         >
           http://localhost:1337/admin
         </a>
@@ -105,22 +102,17 @@ function StrapiServerInstructions() {
 
 function ConnectionError({ error }: { error?: string }) {
   return (
-    <div className="bg-amber-900/20 border border-amber-500/50 rounded-xl p-8">
+    <div className="demo-alert">
       <div className="flex items-start gap-4">
-        <div className="text-amber-400 text-2xl">⚠️</div>
         <div>
-          <h2 className="text-xl font-semibold text-amber-400 mb-2">
+          <h2 className="text-xl font-semibold mb-2">
             Cannot Connect to Strapi
           </h2>
-          <p className="text-gray-300 mb-4">
+          <p className="demo-muted mb-4">
             Make sure your Strapi server is running at{' '}
-            <code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">
-              http://localhost:1337
-            </code>
+            <code>http://localhost:1337</code>
           </p>
-          {error && (
-            <p className="text-gray-500 text-sm mb-4">Error: {error}</p>
-          )}
+          {error && <p className="demo-muted text-sm mb-4">Error: {error}</p>}
           <StrapiServerInstructions />
         </div>
       </div>
@@ -131,13 +123,10 @@ function ConnectionError({ error }: { error?: string }) {
 function NoArticlesFound({ query }: { query?: string }) {
   if (query) {
     return (
-      <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+      <div className="demo-card">
         <div className="text-center">
-          <div className="text-6xl mb-4">🔍</div>
-          <h2 className="text-2xl font-semibold text-white mb-4">
-            No Results Found
-          </h2>
-          <p className="text-gray-400 mb-6 max-w-md mx-auto">
+          <h2 className="text-2xl font-semibold mb-4">No Results Found</h2>
+          <p className="demo-muted mb-6 max-w-md mx-auto">
             No articles match your search for "{query}". Try adjusting your
             search terms.
           </p>
@@ -147,54 +136,54 @@ function NoArticlesFound({ query }: { query?: string }) {
   }
 
   return (
-    <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+    <div className="demo-card">
       <div className="text-center">
-        <div className="text-6xl mb-4">📝</div>
-        <h2 className="text-2xl font-semibold text-white mb-4">
-          No Articles Yet
-        </h2>
-        <p className="text-gray-400 mb-6 max-w-md mx-auto">
+        <h2 className="text-2xl font-semibold mb-4">No Articles Yet</h2>
+        <p className="demo-muted mb-6 max-w-md mx-auto">
           Your Strapi server is running, but there are no published articles.
           Create and publish your first article to see it here.
         </p>
 
-        <div className="bg-slate-900/50 rounded-lg p-6 text-left max-w-md mx-auto">
-          <h3 className="text-lg font-semibold text-white mb-4">
-            How to add articles:
-          </h3>
-          <ol className="space-y-3 text-gray-400">
+        <div className="demo-card max-w-md mx-auto text-left">
+          <h3 className="demo-section-title mb-4">How to add articles:</h3>
+          <ol className="demo-muted space-y-3">
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">1.</span>
+              <span className="font-bold">1.</span>
               <span>
                 Open{' '}
                 <a
                   href="http://localhost:1337/admin"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-cyan-400 hover:underline"
                 >
                   Strapi Admin Panel
                 </a>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">2.</span>
+              <span className="font-bold">2.</span>
               <span>
-                Go to <strong className="text-white">Content Manager</strong> →{' '}
-                <strong className="text-white">Article</strong>
+                Go to{' '}
+                <strong className="text-[var(--sea-ink)]">
+                  Content Manager
+                </strong>{' '}
+                → <strong className="text-[var(--sea-ink)]">Article</strong>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">3.</span>
+              <span className="font-bold">3.</span>
               <span>
-                Click <strong className="text-white">Create new entry</strong>
+                Click{' '}
+                <strong className="text-[var(--sea-ink)]">
+                  Create new entry
+                </strong>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">4.</span>
+              <span className="font-bold">4.</span>
               <span>
                 Fill in the details and click{' '}
-                <strong className="text-white">Publish</strong>
+                <strong className="text-[var(--sea-ink)]">Publish</strong>
               </span>
             </li>
           </ol>
@@ -208,14 +197,10 @@ function RouteComponent() {
   const { status, articles, meta, error, query } = Route.useLoaderData()
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-7xl mx-auto">
-        <h1 className="text-4xl font-bold mb-6 text-white">
-          <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span className="text-gray-300">Articles</span>
-        </h1>
+    <main className="demo-page demo-page-wide">
+      <div>
+        <p className="island-kicker mb-2">CMS</p>
+        <h1 className="demo-title mb-6">Strapi Articles</h1>
 
         <div className="mb-8">
           <Search />
@@ -235,7 +220,7 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   className="block"
                 >
-                  <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full flex flex-col">
+                  <article className="demo-card h-full cursor-pointer overflow-hidden p-0 transition hover:-translate-y-0.5">
                     <StrapiImage
                       src={article.cover?.url}
                       alt={article.cover?.alternativeText || article.title}
@@ -243,24 +228,24 @@ function RouteComponent() {
                     />
 
                     <div className="p-6 flex flex-col flex-1">
-                      <h2 className="text-xl font-semibold text-white mb-3">
+                      <h2 className="text-xl font-semibold mb-3">
                         {article.title || 'Untitled'}
                       </h2>
 
                       {article.description && (
-                        <p className="text-gray-400 mb-4 leading-relaxed line-clamp-2">
+                        <p className="demo-muted mb-4 leading-relaxed line-clamp-2">
                           {article.description}
                         </p>
                       )}
 
                       <div className="mt-auto flex items-center justify-between">
                         {article.author?.name && (
-                          <span className="text-sm text-gray-500">
+                          <span className="demo-muted text-sm">
                             By {article.author.name}
                           </span>
                         )}
                         {article.createdAt && (
-                          <span className="text-sm text-cyan-400/70">
+                          <span className="demo-muted text-sm">
                             {new Date(article.createdAt).toLocaleDateString()}
                           </span>
                         )}
@@ -268,7 +253,7 @@ function RouteComponent() {
 
                       {article.category?.name && (
                         <div className="mt-3">
-                          <span className="text-xs px-2 py-1 bg-slate-700 text-cyan-400 rounded-full">
+                          <span className="demo-pill">
                             {article.category.name}
                           </span>
                         </div>
@@ -287,6 +272,6 @@ function RouteComponent() {
           </>
         )}
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx b/packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx
index dcac24b5..f3128270 100644
--- a/packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx
+++ b/packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx
@@ -30,22 +30,14 @@ function TRPCTodos() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 95% 5%, #4a90c2 0%, #317eb9 50%, #1e4d72 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">tRPC Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">tRPC</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {data?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.name}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.name}</span>
             </li>
           ))}
         </ul>
@@ -60,17 +52,17 @@ function TRPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs b/packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs
index 4770861a..633d6003 100644
--- a/packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs
@@ -144,19 +144,21 @@ function TableDemo() {
   }, [table.getState().columnFilters[0]?.id])
 
   return (
-    <div className="min-h-screen bg-gray-900 p-6">
+    <main className="demo-page demo-page-wide">
       <div>
+        <p className="island-kicker mb-2">TanStack Table</p>
+        <h1 className="demo-title mb-6">Table Demo</h1>
         <DebouncedInput
           value={globalFilter ?? ''}
           onChange={(value) => setGlobalFilter(String(value))}
-          className="w-full p-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          className="demo-input"
           placeholder="Search all columns..."
         />
       </div>
       <div className="h-4" />
-      <div className="overflow-x-auto rounded-lg border border-gray-700">
-        <table className="w-full text-sm text-gray-200">
-          <thead className="bg-gray-800 text-gray-100">
+      <div className="demo-table-shell">
+        <table className="demo-table text-sm">
+          <thead>
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
@@ -171,7 +173,7 @@ function TableDemo() {
                           <div
                             {...{
                               className: header.column.getCanSort()
-                                ? 'cursor-pointer select-none hover:text-blue-400 transition-colors'
+                                ? 'cursor-pointer select-none transition-colors hover:text-[var(--lagoon-deep)]'
                                 : '',
                               onClick: header.column.getToggleSortingHandler(),
                             }}
@@ -198,12 +200,12 @@ function TableDemo() {
               </tr>
             ))}
           </thead>
-          <tbody className="divide-y divide-gray-700">
+          <tbody>
             {table.getRowModel().rows.map((row) => {
               return (
                 <tr
                   key={row.id}
-                  className="hover:bg-gray-800 transition-colors"
+                  className="transition-colors"
                 >
                   {row.getVisibleCells().map((cell) => {
                     return (
@@ -222,30 +224,30 @@ function TableDemo() {
         </table>
       </div>
       <div className="h-4" />
-      <div className="flex flex-wrap items-center gap-2 text-gray-200">
+      <div className="demo-muted flex flex-wrap items-center gap-2">
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
           {'<<'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
           {'<'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
           {'>'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
@@ -267,7 +269,7 @@ function TableDemo() {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
-            className="w-16 px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            className="demo-input demo-input-fit py-1"
           />
         </span>
         <select
@@ -275,7 +277,7 @@ function TableDemo() {
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
-          className="px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          className="demo-select demo-input-fit py-1"
         >
           {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
@@ -284,24 +286,24 @@ function TableDemo() {
           ))}
         </select>
       </div>
-      <div className="mt-4 text-gray-400">
+      <div className="demo-muted mt-4">
         {table.getPrePaginationRowModel().rows.length} Rows
       </div>
       <div className="mt-4 flex gap-2">
         <button
           onClick={() => rerender()}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          className="demo-button"
         >
           Force Rerender
         </button>
         <button
           onClick={() => refreshData()}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          className="demo-button"
         >
           Refresh Data
         </button>
       </div>
-      <pre className="mt-4 p-4 bg-gray-800 rounded-lg text-gray-300 overflow-auto">
+      <pre className="demo-code-block mt-4 overflow-auto">
         {JSON.stringify(
           {
             columnFilters: table.getState().columnFilters,
@@ -311,7 +313,7 @@ function TableDemo() {
           2,
         )}
       </pre>
-    </div>
+    </main>
   )
 }
 
@@ -324,7 +326,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
       value={(columnFilterValue ?? '') as string}
       onChange={(value) => column.setFilterValue(value)}
       placeholder={`Search...`}
-      className="w-full px-2 py-1 bg-gray-700 text-white rounded-md border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+      className="demo-input py-1"
     />
   )
 }
@@ -370,4 +372,3 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-  
\ No newline at end of file
diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/tanstack-query.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/tanstack-query.tsx.ejs
index 3ce168dd..4ae33ac7 100644
--- a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/tanstack-query.tsx.ejs
+++ b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/tanstack-query.tsx.ejs
@@ -37,22 +37,14 @@ function TanStackQueryDemo() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-900 via-red-800 to-black p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 80% 20%, #3B021F 0%, #7B1028 60%, #1A000A 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">TanStack Query Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">TanStack Query</p>
+        <h1 className="demo-title mb-6">TanStack Query Todos</h1>
         <ul className="mb-4 space-y-2">
           {data?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.name}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.name}</span>
             </li>
           ))}
         </ul>
@@ -67,18 +59,18 @@ function TanStackQueryDemo() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 <% } else {
@@ -104,27 +96,21 @@ function TanStackQueryDemo() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 95% 5%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">TanStack Query Simple Promise Handling</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">TanStack Query</p>
+        <h1 className="demo-title mb-6">
+          TanStack Query Simple Promise Handling
+        </h1>
         <ul className="mb-4 space-y-2">
           {data.map((todo) => (
-            <li
-              key={todo.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{todo.name}</span>
+            <li key={todo.id} className="demo-list-item">
+              <span className="text-base font-medium">{todo.name}</span>
             </li>
           ))}
         </ul>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -135,4 +121,4 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-<% } %>
\ No newline at end of file
+<% } %>
diff --git a/packages/create/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx b/packages/create/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx
index 178234cb..1db20387 100644
--- a/packages/create/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx
+++ b/packages/create/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx
@@ -5,7 +5,7 @@ export default function SignInButton({ large }: { large?: boolean }) {
 
   const buttonClasses = `${
     large ? 'px-6 py-3 text-base' : 'px-4 py-2 text-sm'
-  } bg-blue-600 hover:bg-blue-700 text-white font-medium rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed`
+  } demo-button disabled:opacity-50 disabled:cursor-not-allowed`
 
   if (user) {
     return (
diff --git a/packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/workos.tsx b/packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/workos.tsx
index 5c84d140..ceb0b6b7 100644
--- a/packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/workos.tsx
+++ b/packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/workos.tsx
@@ -11,99 +11,89 @@ function App() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-          <p className="text-gray-400 text-center">Loading...</p>
-        </div>
-      </div>
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md">
+          <p className="demo-muted text-center">Loading...</p>
+        </section>
+      </main>
     )
   }
 
   if (user) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-          <h1 className="text-2xl font-bold text-white mb-6 text-center">
-            User Profile
-          </h1>
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md">
+          <p className="island-kicker mb-2 text-center">WorkOS</p>
+          <h1 className="demo-title mb-6 text-center">User Profile</h1>
 
           <div className="space-y-6">
-            {/* Profile Picture */}
             {user.profilePictureUrl && (
               <div className="flex justify-center">
                 <img
                   src={user.profilePictureUrl}
                   alt={`Avatar of ${user.firstName} ${user.lastName}`}
-                  className="w-24 h-24 rounded-full border-4 border-gray-700 shadow-lg"
+                  className="h-24 w-24 rounded-full border border-[var(--line)] shadow-lg"
                 />
               </div>
             )}
 
-            {/* User Information */}
             <div className="space-y-4">
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   First Name
                 </label>
-                <p className="text-white text-lg">{user.firstName || 'N/A'}</p>
+                <p className="text-lg">{user.firstName || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   Last Name
                 </label>
-                <p className="text-white text-lg">{user.lastName || 'N/A'}</p>
+                <p className="text-lg">{user.lastName || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   Email
                 </label>
-                <p className="text-white text-lg break-all">
-                  {user.email || 'N/A'}
-                </p>
+                <p className="break-all text-lg">{user.email || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   User ID
                 </label>
-                <p className="text-gray-300 text-sm font-mono break-all">
+                <p className="demo-muted break-all font-mono text-sm">
                   {user.id || 'N/A'}
                 </p>
               </div>
             </div>
 
-            {/* Sign Out Button */}
-            <button
-              onClick={() => signOut()}
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg hover:shadow-xl"
-            >
+            <button onClick={() => signOut()} className="demo-button w-full">
               Sign Out
             </button>
           </div>
-        </div>
-      </div>
+        </section>
+      </main>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-        <h1 className="text-2xl font-bold text-white mb-6 text-center">
-          WorkOS Authentication
-        </h1>
-        <p className="text-gray-400 text-center mb-6">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2 text-center">WorkOS</p>
+        <h1 className="demo-title mb-6 text-center">WorkOS Authentication</h1>
+        <p className="demo-muted text-center mb-6">
           Sign in to view your profile information
         </p>
         <button
           onClick={() => signIn()}
           disabled={isLoading}
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button w-full"
         >
           Sign In with AuthKit
         </button>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/react/project/base/src/styles.css.ejs b/packages/create/src/frameworks/react/project/base/src/styles.css.ejs
index 559f0e80..ceb9069c 100644
--- a/packages/create/src/frameworks/react/project/base/src/styles.css.ejs
+++ b/packages/create/src/frameworks/react/project/base/src/styles.css.ejs
@@ -203,6 +203,209 @@ pre code {
   border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
 }
 
+.demo-page {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+  padding-block: clamp(2.25rem, 6vw, 4.5rem);
+  color: var(--sea-ink);
+}
+
+.demo-page-wide {
+  width: min(1280px, calc(100% - 2rem));
+}
+
+.demo-center {
+  min-height: calc(100vh - 13rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-panel,
+.demo-card {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+  backdrop-filter: blur(4px);
+}
+
+.demo-panel {
+  border-radius: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+}
+
+.demo-card {
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+.demo-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.demo-muted {
+  color: var(--sea-ink-soft);
+}
+
+.demo-input,
+.demo-select,
+.demo-textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);
+  color: var(--sea-ink);
+  outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+.demo-input,
+.demo-select {
+  padding: 0.7rem 0.9rem;
+}
+
+.demo-input-fit {
+  width: auto;
+}
+
+.demo-textarea {
+  min-height: 7rem;
+  padding: 0.8rem 0.9rem;
+  resize: vertical;
+}
+
+.demo-input:focus,
+.demo-select:focus,
+.demo-textarea:focus {
+  border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);
+}
+
+.demo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));
+  border-radius: 0.85rem;
+  background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));
+  color: var(--sea-ink);
+  padding: 0.72rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));
+}
+
+.demo-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.demo-button-secondary {
+  border-color: var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 74%, transparent);
+  color: var(--sea-ink-soft);
+}
+
+.demo-button-danger {
+  border-color: rgba(196, 71, 71, 0.28);
+  background: rgba(196, 71, 71, 0.1);
+  color: #9f3030;
+}
+
+.demo-list-item {
+  border: 1px solid var(--line);
+  border-radius: 0.9rem;
+  background: color-mix(in oklab, var(--chip-bg) 82%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+.demo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--sea-ink-soft);
+  padding: 0.35rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.demo-alert {
+  border: 1px solid rgba(193, 126, 42, 0.3);
+  border-radius: 1rem;
+  background: rgba(193, 126, 42, 0.1);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-alert-danger {
+  border-color: rgba(196, 71, 71, 0.3);
+  background: rgba(196, 71, 71, 0.1);
+}
+
+.demo-code-block {
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--surface-strong) 78%, transparent);
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--sea-ink);
+}
+
+.demo-table th,
+.demo-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.demo-table th {
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  font-weight: 700;
+}
+
+.demo-table tr:hover td {
+  background: color-mix(in oklab, var(--lagoon) 8%, transparent);
+}
+
 button,
 .island-shell,
 a {
diff --git a/packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx b/packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
index e34c82d0..2290c302 100644
--- a/packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
+++ b/packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
@@ -1,24 +1,24 @@
-import { createFileRoute } from "@tanstack/solid-router";
-import { createSignal, Show } from "solid-js";
-import { authClient } from "../lib/auth-client";
+import { createFileRoute } from '@tanstack/solid-router'
+import { createSignal, Show } from 'solid-js'
+import { authClient } from '../lib/auth-client'
 
-export const Route = createFileRoute("/demo/better-auth")({
+export const Route = createFileRoute('/demo/better-auth')({
   component: BetterAuthDemo,
-});
+})
 
 function BetterAuthDemo() {
-  const session = authClient.useSession();
-  const [isSignUp, setIsSignUp] = createSignal(false);
-  const [email, setEmail] = createSignal("");
-  const [password, setPassword] = createSignal("");
-  const [name, setName] = createSignal("");
-  const [error, setError] = createSignal("");
-  const [loading, setLoading] = createSignal(false);
+  const session = authClient.useSession()
+  const [isSignUp, setIsSignUp] = createSignal(false)
+  const [email, setEmail] = createSignal('')
+  const [password, setPassword] = createSignal('')
+  const [name, setName] = createSignal('')
+  const [error, setError] = createSignal('')
+  const [loading, setLoading] = createSignal(false)
 
   const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
 
     try {
       if (isSignUp()) {
@@ -26,47 +26,48 @@ function BetterAuthDemo() {
           email: email(),
           password: password(),
           name: name(),
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign up failed");
+          setError(result.error.message || 'Sign up failed')
         }
       } else {
         const result = await authClient.signIn.email({
           email: email(),
           password: password(),
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign in failed");
+          setError(result.error.message || 'Sign in failed')
         }
       }
     } catch (err) {
-      setError("An unexpected error occurred");
+      setError('An unexpected error occurred')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   return (
     <Show
       when={!session().isPending}
       fallback={
-        <div class="flex items-center justify-center py-10">
+        <main class="demo-page demo-center">
           <div class="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
-        </div>
+        </main>
       }
     >
       <Show
         when={session().data?.user}
         fallback={
-          <div class="flex justify-center py-10 px-4">
-            <div class="w-full max-w-md p-6">
-              <h1 class="text-lg font-semibold leading-none tracking-tight">
-                {isSignUp() ? "Create an account" : "Sign in"}
+          <main class="demo-page demo-center">
+            <section class="demo-panel w-full max-w-md">
+              <p class="island-kicker mb-2">Better Auth</p>
+              <h1 class="demo-title">
+                {isSignUp() ? 'Create an account' : 'Sign in'}
               </h1>
-              <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+              <p class="demo-muted mt-2 mb-6 text-sm">
                 {isSignUp()
-                  ? "Enter your information to create an account"
-                  : "Enter your email below to login to your account"}
+                  ? 'Enter your information to create an account'
+                  : 'Enter your email below to login to your account'}
               </p>
 
               <form onSubmit={handleSubmit} class="grid gap-4">
@@ -80,7 +81,7 @@ function BetterAuthDemo() {
                       type="text"
                       value={name()}
                       onInput={(e) => setName(e.currentTarget.value)}
-                      class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                      class="demo-input"
                       required
                     />
                   </div>
@@ -95,7 +96,7 @@ function BetterAuthDemo() {
                     type="email"
                     value={email()}
                     onInput={(e) => setEmail(e.currentTarget.value)}
-                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="demo-input"
                     required
                   />
                 </div>
@@ -112,24 +113,22 @@ function BetterAuthDemo() {
                     type="password"
                     value={password()}
                     onInput={(e) => setPassword(e.currentTarget.value)}
-                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="demo-input"
                     required
                     minLength={8}
                   />
                 </div>
 
                 <Show when={error()}>
-                  <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
-                    <p class="text-sm text-red-600 dark:text-red-400">
-                      {error()}
-                    </p>
+                  <div class="demo-alert demo-alert-danger">
+                    <p class="text-sm text-red-600">{error()}</p>
                   </div>
                 </Show>
 
                 <button
                   type="submit"
                   disabled={loading()}
-                  class="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  class="demo-button w-full"
                 >
                   <Show
                     when={!loading()}
@@ -140,7 +139,7 @@ function BetterAuthDemo() {
                       </span>
                     }
                   >
-                    {isSignUp() ? "Create account" : "Sign in"}
+                    {isSignUp() ? 'Create account' : 'Sign in'}
                   </Show>
                 </button>
               </form>
@@ -149,41 +148,40 @@ function BetterAuthDemo() {
                 <button
                   type="button"
                   onClick={() => {
-                    setIsSignUp(!isSignUp());
-                    setError("");
+                    setIsSignUp(!isSignUp())
+                    setError('')
                   }}
-                  class="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+                  class="demo-muted text-sm transition-colors hover:text-[var(--sea-ink)]"
                 >
                   {isSignUp()
-                    ? "Already have an account? Sign in"
+                    ? 'Already have an account? Sign in'
                     : "Don't have an account? Sign up"}
                 </button>
               </div>
 
-              <p class="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
-                Built with{" "}
+              <p class="demo-muted mt-6 text-center text-xs">
+                Built with{' '}
                 <a
                   href="https://better-auth.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                  class="font-medium"
                 >
                   BETTER-AUTH
                 </a>
                 .
               </p>
-            </div>
-          </div>
+            </section>
+          </main>
         }
       >
         {(user) => (
-          <div class="flex justify-center py-10 px-4">
-            <div class="w-full max-w-md p-6 space-y-6">
+          <main class="demo-page demo-center">
+            <section class="demo-panel w-full max-w-md space-y-6">
               <div class="space-y-1.5">
-                <h1 class="text-lg font-semibold leading-none tracking-tight">
-                  Welcome back
-                </h1>
-                <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                <p class="island-kicker mb-2">Better Auth</p>
+                <h1 class="demo-title">Welcome back</h1>
+                <p class="demo-muted text-sm">
                   You're signed in as {user().email}
                 </p>
               </div>
@@ -194,7 +192,7 @@ function BetterAuthDemo() {
                   fallback={
                     <div class="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
                       <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
-                        {user().name?.charAt(0).toUpperCase() || "U"}
+                        {user().name?.charAt(0).toUpperCase() || 'U'}
                       </span>
                     </div>
                   }
@@ -211,29 +209,29 @@ function BetterAuthDemo() {
 
               <button
                 onClick={() => {
-                  void authClient.signOut();
+                  void authClient.signOut()
                 }}
-                class="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                class="demo-button demo-button-secondary w-full"
               >
                 Sign out
               </button>
 
-              <p class="text-xs text-center text-neutral-400 dark:text-neutral-500">
-                Built with{" "}
+              <p class="demo-muted text-center text-xs">
+                Built with{' '}
                 <a
                   href="https://better-auth.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                  class="font-medium"
                 >
                   BETTER-AUTH
                 </a>
                 .
               </p>
-            </div>
-          </div>
+            </section>
+          </main>
         )}
       </Show>
     </Show>
-  );
+  )
 }
diff --git a/packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx b/packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx
index 42c464df..01821fd3 100644
--- a/packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx
+++ b/packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx
@@ -38,34 +38,25 @@ function ConvexTodos() {
   const totalCount = () => todos?.data()?.length || 0
 
   return (
-    <div
-      class="min-h-screen flex items-center justify-center p-4"
-      style={{
-        background:
-          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
-      }}
-    >
-      <div class="w-full max-w-2xl">
-        {/* Header Card */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+    <main class="demo-page">
+      <div class="mx-auto w-full max-w-2xl space-y-6">
+        <section class="demo-panel">
           <div class="text-center">
-            <h1 class="text-4xl font-bold text-green-800 mb-2">Convex Todos</h1>
-            <p class="text-green-600 text-lg">Powered by real-time sync</p>
+            <p class="island-kicker mb-2">Convex</p>
+            <h1 class="demo-title">Todos</h1>
+            <p class="demo-muted mt-2">Powered by real-time sync</p>
             <Show when={totalCount() > 0}>
               <div class="mt-4 flex justify-center space-x-6 text-sm">
-                <span class="text-green-700 font-medium">
-                  {completedCount()} completed
-                </span>
-                <span class="text-gray-600">
+                <span class="font-medium">{completedCount()} completed</span>
+                <span class="demo-muted">
                   {totalCount() - completedCount()} remaining
                 </span>
               </div>
             </Show>
           </div>
-        </div>
+        </section>
 
-        {/* Add Todo Card */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+        <section class="demo-card">
           <div class="flex gap-3">
             <input
               type="text"
@@ -77,46 +68,43 @@ function ConvexTodos() {
                 }
               }}
               placeholder="What needs to be done?"
-              class="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+              class="demo-input min-w-0 flex-1"
             />
             <button
               onClick={handleAddTodo}
               disabled={!newTodo().trim()}
-              class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+              class="demo-button"
             >
               <Plus size={20} />
               Add
             </button>
           </div>
-        </div>
+        </section>
 
-        {/* Todos List */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+        <section class="demo-card overflow-hidden p-0">
           <Show when={todos.isLoading()}>
             <div class="p-8 text-center">
-              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
-              <p class="text-green-600">Loading todos...</p>
+              <div class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]"></div>
+              <p class="demo-muted">Loading todos...</p>
             </div>
           </Show>
           <Show
             when={todos.data()?.length !== 0}
             fallback={
               <div class="p-12 text-center">
-                <Circle size={48} class="text-green-300 mx-auto mb-4" />
-                <h3 class="text-xl font-semibold text-green-800 mb-2">
-                  No todos yet
-                </h3>
-                <p class="text-green-600">
+                <Circle size={48} class="demo-muted mx-auto mb-4" />
+                <h3 class="demo-section-title mb-2">No todos yet</h3>
+                <p class="demo-muted">
                   Add your first todo above to get started!
                 </p>
               </div>
             }
           >
-            <div class="divide-y divide-green-100">
+            <div class="divide-y divide-[var(--line)]">
               <For each={todos.data()}>
                 {(todo, index) => (
                   <div
-                    class={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                    class={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${
                       todo.completed ? 'opacity-75' : ''
                     }`}
                     style={{
@@ -127,8 +115,8 @@ function ConvexTodos() {
                       onClick={() => handleToggleTodo(todo._id)}
                       class={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
                         todo.completed
-                          ? 'bg-green-500 border-green-500 text-white'
-                          : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                          ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'
+                          : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'
                       }`}
                     >
                       <Check size={14} />
@@ -137,8 +125,8 @@ function ConvexTodos() {
                     <span
                       class={`flex-1 text-lg transition-all duration-200 ${
                         todo.completed
-                          ? 'line-through text-gray-500'
-                          : 'text-gray-800'
+                          ? 'line-through demo-muted'
+                          : 'text-[var(--sea-ink)]'
                       }`}
                     >
                       {todo.text}
@@ -146,7 +134,7 @@ function ConvexTodos() {
 
                     <button
                       onClick={() => handleRemoveTodo(todo._id)}
-                      class="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      class="demo-button demo-button-danger flex-shrink-0 p-2"
                     >
                       <Trash2 size={18} />
                     </button>
@@ -155,15 +143,14 @@ function ConvexTodos() {
               </For>
             </div>
           </Show>
-        </div>
+        </section>
 
-        {/* Footer */}
         <div class="text-center mt-6">
-          <p class="text-green-700/80 text-sm">
-            Built with Convex • Real-time updates • Always in sync
+          <p class="demo-muted text-sm">
+            Built with Convex, real-time updates, and synced state.
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs b/packages/create/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs
index f3976838..cd438bd4 100644
--- a/packages/create/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs
+++ b/packages/create/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs
@@ -18,12 +18,12 @@ function FieldWrapper(props: {
 }) {
   return (
     <div>
-      <label for={props.label} class="block font-bold mb-1 text-xl">
+      <label for={props.label} class="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {props.label}
       </label>
       {props.children}
       {props.errors.length ? (
-        <div class="text-red-500 mt-1 font-bold">{props.errors.join(', ')}</div>
+        <div class="mt-1 text-sm font-semibold text-red-600">{props.errors.join(', ')}</div>
       ) : null}
     </div>
   )
@@ -51,14 +51,15 @@ function FormExample() {
   }))
 
   return (
-    <div
-      class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        'background-image':
-          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div class="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main class="demo-page demo-center">
+      <section class="demo-panel w-full max-w-2xl">
+        <div class="mb-6">
+          <p class="island-kicker mb-2">TanStack Form</p>
+          <h1 class="demo-title">Address Form</h1>
+          <p class="demo-muted mt-2">
+            Nested fields, field-level validation, and a select input.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -93,7 +94,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -127,7 +128,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -157,7 +158,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -185,7 +186,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -210,7 +211,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -241,7 +242,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -271,7 +272,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-select"
                   >
                     <option value="">Select a country</option>
                     <option value="US">United States</option>
@@ -318,7 +319,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                     placeholder="(123) 456-7890"
                   />
                 </FieldWrapper>
@@ -331,14 +332,14 @@ function FormExample() {
             <button
               type="submit"
               disabled={form.state.isSubmitting}
-              class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+              class="demo-button"
             >
               {form.state.isSubmitting ? 'Submitting...' : 'Submit'}
             </button>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -349,4 +350,3 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-    
\ No newline at end of file
diff --git a/packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx b/packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx
index dd148999..44edbacf 100644
--- a/packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx
+++ b/packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx
@@ -6,15 +6,20 @@ export const Route = createFileRoute('/demo/sentry/bad-event-handler')({
 
 function RouteComponent() {
   return (
-    <div className="p-4">
-      <button
-        type="button"
-        onClick={() => {
-          throw new Error('Sentry Frontend Error')
-        }}
-      >
-        Throw error
-      </button>
-    </div>
+    <main class="demo-page demo-center">
+      <section class="demo-panel w-full max-w-md text-center">
+        <p class="island-kicker mb-2">Sentry</p>
+        <h1 class="demo-title mb-6">Error Handler Demo</h1>
+        <button
+          type="button"
+          onClick={() => {
+            throw new Error('Sentry Frontend Error')
+          }}
+          class="demo-button"
+        >
+          Throw error
+        </button>
+      </section>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs b/packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs
index a30eab00..b3db2ec2 100644
--- a/packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs
+++ b/packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs
@@ -20,7 +20,7 @@ function FirstName() {
       onInput={(e) =>
         store.setState((state) => ({ ...state, firstName: e.target.value }))
       }
-      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      class="demo-input"
     />
   )
 }
@@ -34,7 +34,7 @@ function LastName() {
       onInput={(e) =>
         store.setState((state) => ({ ...state, lastName: e.target.value }))
       }
-      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      class="demo-input"
     />
   )
 }
@@ -42,7 +42,7 @@ function LastName() {
 function FullName() {
   const fName = useStore(fullName)
   return (
-    <div class="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+    <div class="demo-list-item font-medium">
       {fName()}
     </div>
   )
@@ -50,20 +50,15 @@ function FullName() {
 
 function DemoStore() {
   return (
-    <div
-      class="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
-      style={{
-        'background-image':
-          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div class="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
-        <h1 class="text-4xl font-bold mb-5">Store Example</h1>
+    <main class="demo-page demo-center">
+      <section class="demo-panel flex w-full max-w-xl flex-col gap-4">
+        <p class="island-kicker">TanStack Store</p>
+        <h1 class="demo-title mb-2">Store Example</h1>
         <FirstName />
         <LastName />
         <FullName />
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
diff --git a/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx b/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx
index d979d22f..1b2bef6d 100644
--- a/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx
+++ b/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx
@@ -14,18 +14,14 @@ function RouteComponent() {
   const strapiArticles = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-7xl mx-auto">
-        <h1 class="text-4xl font-bold mb-8 text-white">
-          <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span class="text-gray-300">Articles</span>
-        </h1>
+    <main class="demo-page demo-page-wide">
+      <div>
+        <p class="island-kicker mb-2">CMS</p>
+        <h1 class="demo-title mb-8">Strapi Articles</h1>
 
         <Show
           when={strapiArticles() && strapiArticles().length > 0}
-          fallback={<p class="text-gray-400">No articles found.</p>}
+          fallback={<p class="demo-muted">No articles found.</p>}
         >
           <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
             <For each={strapiArticles()}>
@@ -35,25 +31,25 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   class="block"
                 >
-                  <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
-                    <h2 class="text-xl font-semibold text-white mb-3">
+                  <article class="demo-card h-full cursor-pointer transition hover:-translate-y-0.5">
+                    <h2 class="mb-3 text-xl font-semibold">
                       {article.title || 'Untitled'}
                     </h2>
 
                     {article.description && (
-                      <p class="text-gray-400 mb-4 leading-relaxed">
+                      <p class="demo-muted mb-4 leading-relaxed">
                         {article.description}
                       </p>
                     )}
 
                     {article.content && (
-                      <p class="text-gray-400 line-clamp-3 leading-relaxed">
+                      <p class="demo-muted line-clamp-3 leading-relaxed">
                         {article.content}
                       </p>
                     )}
 
                     {article.createdAt && (
-                      <p class="text-sm text-cyan-400/70 mt-4">
+                      <p class="demo-muted mt-4 text-sm">
                         {new Date(article.createdAt).toLocaleDateString()}
                       </p>
                     )}
@@ -64,6 +60,6 @@ function RouteComponent() {
           </div>
         </Show>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx b/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx
index 81ef1e24..c93bc105 100644
--- a/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx
+++ b/packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx
@@ -13,12 +13,9 @@ function RouteComponent() {
   const article = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          class="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main class="demo-page">
+      <div class="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" class="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5 mr-2"
@@ -34,13 +31,11 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
-          <h1 class="text-4xl font-bold text-white mb-4">
-            {article()?.title || 'Untitled'}
-          </h1>
+        <article class="demo-panel">
+          <h1 class="demo-title mb-4">{article()?.title || 'Untitled'}</h1>
 
           {article()?.createdAt && (
-            <p class="text-sm text-cyan-400/70 mb-6">
+            <p class="demo-muted mb-6 text-sm">
               Published on{' '}
               {new Date(
                 article()?.createdAt || article()?.attributes?.createdAt,
@@ -54,10 +49,8 @@ function RouteComponent() {
 
           {article()?.description && (
             <div class="mb-6">
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">
-                Description
-              </h2>
-              <p class="text-gray-400 leading-relaxed">
+              <h2 class="demo-section-title mb-3">Description</h2>
+              <p class="demo-muted leading-relaxed">
                 {article()?.description || article()?.attributes?.description}
               </p>
             </div>
@@ -65,14 +58,14 @@ function RouteComponent() {
 
           {article()?.content && (
             <div>
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">Content</h2>
-              <div class="text-gray-400 leading-relaxed whitespace-pre-wrap">
+              <h2 class="demo-section-title mb-3">Content</h2>
+              <div class="demo-muted whitespace-pre-wrap leading-relaxed">
                 {article()?.content}
               </div>
             </div>
           )}
         </article>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs b/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs
index 34fd84bb..9bbdd0f4 100644
--- a/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs
+++ b/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs
@@ -120,6 +120,209 @@ code {
     0 4px 14px rgba(23, 58, 64, 0.06);
 }
 
+.demo-page {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+  padding-block: clamp(2.25rem, 6vw, 4.5rem);
+  color: var(--sea-ink);
+}
+
+.demo-page-wide {
+  width: min(1280px, calc(100% - 2rem));
+}
+
+.demo-center {
+  min-height: calc(100vh - 13rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-panel,
+.demo-card {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+  backdrop-filter: blur(4px);
+}
+
+.demo-panel {
+  border-radius: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+}
+
+.demo-card {
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+.demo-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.demo-muted {
+  color: var(--sea-ink-soft);
+}
+
+.demo-input,
+.demo-select,
+.demo-textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);
+  color: var(--sea-ink);
+  outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+.demo-input,
+.demo-select {
+  padding: 0.7rem 0.9rem;
+}
+
+.demo-input-fit {
+  width: auto;
+}
+
+.demo-textarea {
+  min-height: 7rem;
+  padding: 0.8rem 0.9rem;
+  resize: vertical;
+}
+
+.demo-input:focus,
+.demo-select:focus,
+.demo-textarea:focus {
+  border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);
+}
+
+.demo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));
+  border-radius: 0.85rem;
+  background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));
+  color: var(--sea-ink);
+  padding: 0.72rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));
+}
+
+.demo-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.demo-button-secondary {
+  border-color: var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 74%, transparent);
+  color: var(--sea-ink-soft);
+}
+
+.demo-button-danger {
+  border-color: rgba(196, 71, 71, 0.28);
+  background: rgba(196, 71, 71, 0.1);
+  color: #9f3030;
+}
+
+.demo-list-item {
+  border: 1px solid var(--line);
+  border-radius: 0.9rem;
+  background: color-mix(in oklab, var(--chip-bg) 82%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+.demo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--sea-ink-soft);
+  padding: 0.35rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.demo-alert {
+  border: 1px solid rgba(193, 126, 42, 0.3);
+  border-radius: 1rem;
+  background: rgba(193, 126, 42, 0.1);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-alert-danger {
+  border-color: rgba(196, 71, 71, 0.3);
+  background: rgba(196, 71, 71, 0.1);
+}
+
+.demo-code-block {
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--surface-strong) 78%, transparent);
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--sea-ink);
+}
+
+.demo-table th,
+.demo-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.demo-table th {
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  font-weight: 700;
+}
+
+.demo-table tr:hover td {
+  background: color-mix(in oklab, var(--lagoon) 8%, transparent);
+}
+
 .site-header {
   position: sticky;
   top: 0;