diff --git a/src/App.tsx b/src/App.tsx
index a87a304..c07964a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,3 @@
-function App() {
-  return <div>Cameleer3</div>
+export default function App() {
+  return <div>Cameleer3 Design System</div>
 }
-
-export default App
diff --git a/src/design-system/reset.css b/src/design-system/reset.css
new file mode 100644
index 0000000..a2e11b0
--- /dev/null
+++ b/src/design-system/reset.css
@@ -0,0 +1,39 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { font-size: 14px; }
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg-body);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
+
+/* Shared animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
+  50%      { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
diff --git a/src/design-system/tokens.css b/src/design-system/tokens.css
new file mode 100644
index 0000000..7ec2f40
--- /dev/null
+++ b/src/design-system/tokens.css
@@ -0,0 +1,125 @@
+:root {
+  /* Surface palette (warm parchment) */
+  --bg-body:     #F5F2ED;
+  --bg-surface:  #FFFFFF;
+  --bg-raised:   #FAF8F5;
+  --bg-inset:    #F0EDE8;
+  --bg-hover:    #F5F0EA;
+
+  /* Sidebar (warm charcoal) */
+  --sidebar-bg:     #2C2520;
+  --sidebar-hover:  #3A322C;
+  --sidebar-active: #4A3F38;
+  --sidebar-text:   #BFB5A8;
+  --sidebar-muted:  #7A6F63;
+
+  /* Text */
+  --text-primary:   #1A1612;
+  --text-secondary: #5C5347;
+  --text-muted:     #9C9184;
+  --text-faint:     #C4BAB0;
+
+  /* Borders */
+  --border:        #E4DFD8;
+  --border-subtle: #EDE9E3;
+
+  /* Brand accent (amber-gold) */
+  --amber:       #C6820E;
+  --amber-light: #F0D9A8;
+  --amber-bg:    #FDF6E9;
+  --amber-deep:  #8B5A06;
+
+  /* Status colors (warm) */
+  --success:        #3D7C47;
+  --success-bg:     #EFF7F0;
+  --success-border: #C2DFC6;
+  --warning:        #C27516;
+  --warning-bg:     #FEF5E7;
+  --warning-border: #F0D9A8;
+  --error:          #C0392B;
+  --error-bg:       #FDF0EE;
+  --error-border:   #F0C4BE;
+  --running:        #1A7F8E;
+  --running-bg:     #E8F5F7;
+  --running-border: #B0DDE4;
+
+  /* Typography */
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing & Radii */
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm:   0 1px 2px rgba(44, 37, 32, 0.06);
+  --shadow-md:   0 2px 8px rgba(44, 37, 32, 0.08);
+  --shadow-lg:   0 4px 16px rgba(44, 37, 32, 0.10);
+  --shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
+
+  /* Chart palette */
+  --chart-1: #C6820E;
+  --chart-2: #3D7C47;
+  --chart-3: #1A7F8E;
+  --chart-4: #C27516;
+  --chart-5: #8B5A06;
+  --chart-6: #6B8E4E;
+  --chart-7: #C0392B;
+  --chart-8: #9C7A3C;
+}
+
+/* Dark theme — muted redesign, same token names */
+[data-theme="dark"] {
+  --bg-body:     #1A1714;
+  --bg-surface:  #242019;
+  --bg-raised:   #2A2620;
+  --bg-inset:    #151310;
+  --bg-hover:    #302B24;
+
+  --sidebar-bg:     #141210;
+  --sidebar-hover:  #1E1B17;
+  --sidebar-active: #28241E;
+  --sidebar-text:   #A89E92;
+  --sidebar-muted:  #6A6058;
+
+  --text-primary:   #E8E0D6;
+  --text-secondary: #B0A698;
+  --text-muted:     #7A7068;
+  --text-faint:     #4A4238;
+
+  --border:        #3A3530;
+  --border-subtle: #2E2A25;
+
+  --amber:       #D4941E;
+  --amber-light: #4A3A1E;
+  --amber-bg:    #2A2418;
+  --amber-deep:  #E8B04A;
+
+  --success:        #5DB866;
+  --success-bg:     #1A2A1C;
+  --success-border: #2A3E2C;
+  --warning:        #D4901E;
+  --warning-bg:     #2A2418;
+  --warning-border: #3E3420;
+  --error:          #E05A4C;
+  --error-bg:       #2A1A18;
+  --error-border:   #4A2A24;
+  --running:        #2AA0B0;
+  --running-bg:     #1A2628;
+  --running-border: #243A3E;
+
+  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.04);
+
+  --chart-1: #D4941E;
+  --chart-2: #5DB866;
+  --chart-3: #2AA0B0;
+  --chart-4: #D4901E;
+  --chart-5: #E8B04A;
+  --chart-6: #7AAE5E;
+  --chart-7: #E05A4C;
+  --chart-8: #B89A4C;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..2a3f6e8
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,2 @@
+@import './design-system/tokens.css';
+@import './design-system/reset.css';
diff --git a/src/main.tsx b/src/main.tsx
index feac8ee..8e0deb1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
+import './index.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )