diff --git a/src/main.tsx b/src/main.tsx
index bef5202..17d5695 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,8 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './styles/variables.css'
+import './styles/global.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 0000000..94f575e
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,61 @@
+:root {
+    /* Color palette */
+    --primary-color: #F0EDE7;
+    --secondary-color: #E0DFE4;
+    --accent-color: #C0D2F6;
+    --background-color: #ecf0f1;
+    --background-color-element: #F8F7F3;
+
+    /* Text colors */
+    --text-color: #101844;
+    --text-color-dark: #090F2F;
+    --text-color-light: #EAE0CF;
+
+    /* Font settings */
+    --font-family-title: 'Faustina', serif;
+    --font-family-text: 'Inter';
+    --font-size-page-title: 42px;
+    --font-size-element-title: 19px;
+    --font-size-row-title: 15px;
+
+    /* Box settings */
+    --corner-radius: 100px;
+    --box-color: #F0EDE7;
+    --box-stroke: #888394;
+    --box-shadow: 0 2px 5px rgba(3, 2, 2, 0.1);
+
+    /* D-value */
+    --background-color: #BDE981;
+    --border-color: var(--text-color);
+
+    /* This part was generate with the help of Gemini 2.5 Flash using the prompt: 
+    "Create spacing variables and a dark mode colro pallette based on my previous design" */
+
+    /* Space settings */
+    --space-xs: 0.25rem; /*  4px - micro gaps (title to subtext) */
+    --space-sm: 0.5rem;  /*  8px - small padding (chips, badges) */
+    --space-md: 1rem;    /* 16px - default padding (inputs, row heights) */
+    --space-lg: 1.5rem;  /* 24px - component gaps (between search & filters) */
+    --space-xl: 2.5rem;  /* 40px - page section margins & outer padding */
+
+    /* Dark mode colors */
+    [data-theme="dark"] {
+        /* Main Layout Colors */
+        --background-color: #090F2F;             /* Dark blue background */
+        --header-background: #101844;            /* Slightly lighter blue for nav */
+        --element-background: #18225C;           /* Inputs, dropdowns, table background */
+        --surface-selected: #253788;             /* Row selection tint */
+    
+        /* Text Colors */
+        --text-color-primary: #EAE0CF;           /* Warm light text */
+        --text-color-secondary: #A0AEC0;         /* Muted text for labels */
+        --text-color-on-dark: #090F2F;           /* Inverted text for light buttons */
+    
+        /* UI Components & Borders */
+        --border-color: #3B426B;
+        --border-subtle: #2A3363;
+        --badge-d-value-bg: #82C43C;             /* Slightly deeper green for contrast */
+        --badge-d-value-text: #090F2F;
+
+    }  
+}    
\ No newline at end of file