diff --git a/src/assets/style/design-system.css b/src/assets/style/design-system.css
new file mode 100644
index 0000000..8ba02ea
--- /dev/null
+++ b/src/assets/style/design-system.css
@@ -0,0 +1,246 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    /* Premium aerospace light theme - $2M experience */
+    --background: 220 25% 97%;
+    --foreground: 222 47% 11%;
+
+    /* Glassmorphism card - slightly blue-gray white */
+    --card: 220 20% 99%;
+    --card-foreground: 222 47% 11%;
+    --glass: 220 25% 98%;
+    --glass-border: 220 30% 90%;
+
+    --popover: 220 20% 99%;
+    --popover-foreground: 222 47% 11%;
+    
+    /* Soft blue-gray white for components */
+    --white-soft: 220 25% 99%;
+
+    /* Aerospace blue primary */
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --primary-glow: 217 91% 75%;
+    --primary-light: 217 91% 95%;
+
+    /* Tech purple secondary */
+    --secondary: 262 83% 58%;
+    --secondary-foreground: 0 0% 100%;
+
+    /* Muted backgrounds */
+    --muted: 217 25% 96%;
+    --muted-foreground: 222 47% 45%;
+
+    /* Accent cyan */
+    --accent: 189 94% 43%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 217 20% 90%;
+    --input: 220 20% 96%;
+    --ring: 217 91% 60%;
+
+    --radius: 1rem;
+
+    /* Department colors with glow variants */
+    --dept-structure: 217 91% 60%;
+    --dept-structure-light: 217 91% 95%;
+    --dept-structure-glow: 217 91% 75%;
+    
+    --dept-thermal: 30 90% 55%;
+    --dept-thermal-light: 30 90% 95%;
+    --dept-thermal-glow: 30 90% 70%;
+    
+    --dept-control: 270 75% 60%;
+    --dept-control-light: 270 75% 95%;
+    --dept-control-glow: 270 75% 75%;
+
+    /* Premium gradients */
+    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(189 94% 50%) 100%);
+    --gradient-glow: linear-gradient(180deg, hsl(217 91% 96%) 0%, hsl(220 30% 99%) 100%);
+    --gradient-card: linear-gradient(135deg, hsl(217 91% 65%) 0%, hsl(189 94% 50%) 100%);
+    --gradient-success: linear-gradient(135deg, hsl(142 76% 45%) 0%, hsl(142 76% 60%) 100%);
+    --gradient-thermal: linear-gradient(135deg, hsl(30 90% 60%) 0%, hsl(35 90% 65%) 100%);
+    --gradient-control: linear-gradient(135deg, hsl(270 75% 65%) 0%, hsl(260 75% 70%) 100%);
+    --gradient-structure: linear-gradient(135deg, hsl(217 91% 65%) 0%, hsl(205 91% 70%) 100%);
+    --gradient-sidebar: linear-gradient(180deg, hsl(220 30% 99%) 0%, hsl(217 30% 97%) 100%);
+    --gradient-glass: linear-gradient(135deg, hsla(220 30% 100% / 0.8) 0%, hsla(220 30% 100% / 0.5) 100%);
+    
+    /* Premium shadows with glow - Neumorphism style - lighter */
+    --shadow-sm: 0 2px 8px hsla(217 20% 20% / 0.02);
+    --shadow-md: 0 4px 16px hsla(217 20% 20% / 0.03);
+    --shadow-lg: 0 8px 32px hsla(217 20% 20% / 0.04);
+    --shadow-xl: 0 16px 48px hsla(217 20% 20% / 0.05);
+    --shadow-glow: 0 0 40px hsla(217 91% 75% / 0.2);
+    --shadow-glow-structure: 0 0 30px hsla(217 91% 75% / 0.15);
+    --shadow-glow-thermal: 0 0 30px hsla(30 90% 70% / 0.15);
+    --shadow-glow-control: 0 0 30px hsla(270 75% 75% / 0.15);
+    --shadow-card: 0 4px 24px hsla(217 20% 20% / 0.03);
+    --shadow-elevated: 0 8px 40px hsla(217 20% 20% / 0.05);
+    --shadow-glass: 0 8px 32px hsla(217 20% 20% / 0.02), inset 0 1px 0 hsla(0 0% 100% / 0.7);
+    
+    /* Neumorphism shadows - lighter and softer */
+    --shadow-neumorphic: 
+      12px 12px 24px hsla(217 20% 20% / 0.03),
+      -12px -12px 24px hsla(0 0% 100% / 0.9),
+      inset 2px 2px 4px hsla(0 0% 100% / 0.5);
+    --shadow-neumorphic-hover:
+      16px 16px 32px hsla(217 20% 20% / 0.04),
+      -16px -16px 32px hsla(0 0% 100% / 1),
+      inset 2px 2px 6px hsla(0 0% 100% / 0.6);
+    --shadow-neumorphic-inset:
+      inset 6px 6px 12px hsla(217 20% 20% / 0.02),
+      inset -6px -6px 12px hsla(0 0% 100% / 0.8);
+    
+    /* Lighter neumorphic shadows for subtle effects */
+    --shadow-neumorphic-light:
+      8px 8px 16px hsla(217 20% 20% / 0.02),
+      -8px -8px 16px hsla(0 0% 100% / 0.8),
+      inset 1px 1px 2px hsla(0 0% 100% / 0.4);
+    --shadow-neumorphic-raised:
+      20px 20px 40px hsla(217 20% 20% / 0.05),
+      -20px -20px 40px hsla(0 0% 100% / 1),
+      inset 3px 3px 8px hsla(0 0% 100% / 0.7);
+    
+    /* Enhanced glass effects */
+    --backdrop-blur-sm: blur(8px);
+    --backdrop-blur-md: blur(12px);
+    --backdrop-blur-lg: blur(16px);
+    --backdrop-blur-xl: blur(24px);
+    
+    /* Glass border highlights */
+    --glass-border-highlight: 0 1px 2px hsla(0 0% 100% / 0.8);
+    --glass-internal-reflection: linear-gradient(180deg, hsla(0 0% 100% / 0.4) 0%, transparent 50%);
+    
+    /* Liquid glass shadows - lighter */
+    --shadow-liquid: 
+      0 8px 32px hsla(217 91% 60% / 0.06),
+      0 2px 8px hsla(217 91% 60% / 0.04),
+      inset 0 1px 2px hsla(0 0% 100% / 0.8);
+    --shadow-liquid-hover:
+      0 12px 48px hsla(217 91% 60% / 0.09),
+      0 4px 12px hsla(217 91% 60% / 0.06),
+      inset 0 1px 3px hsla(0 0% 100% / 0.9);
+    
+    /* Animations - premium easing */
+    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    --transition-drawer: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
+    --transition-liquid: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    
+    /* Borders */
+    --border-glass: hsla(220 30% 90% / 0.5);
+    
+    /* Sidebar */
+    --sidebar-width: 280px;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+}
+
+/* Blob floating animation with subtle movement and transform */
+@keyframes blob-float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+  25% {
+    transform: translate(20px, -30px) scale(1.05) rotate(2deg);
+  }
+  50% {
+    transform: translate(-15px, 25px) scale(0.95) rotate(-1deg);
+  }
+  75% {
+    transform: translate(30px, 15px) scale(1.02) rotate(1deg);
+  }
+}
+
+@keyframes blob-float-2 {
+  0%, 100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+  33% {
+    transform: translate(-25px, 20px) scale(0.98) rotate(-2deg);
+  }
+  66% {
+    transform: translate(15px, -20px) scale(1.03) rotate(1deg);
+  }
+}
+
+@keyframes blob-float-3 {
+  0%, 100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+  20% {
+    transform: translate(25px, 30px) scale(1.04) rotate(1.5deg);
+  }
+  40% {
+    transform: translate(-20px, -15px) scale(0.96) rotate(-1.5deg);
+  }
+  60% {
+    transform: translate(-10px, 25px) scale(1.01) rotate(0.5deg);
+  }
+  80% {
+    transform: translate(20px, -10px) scale(0.99) rotate(-0.5deg);
+  }
+}
+
+@layer utilities {
+  .animate-blob-float {
+    animation: blob-float 20s ease-in-out infinite;
+  }
+  
+  .animate-blob-float-2 {
+    animation: blob-float-2 25s ease-in-out infinite;
+  }
+  
+  .animate-blob-float-3 {
+    animation: blob-float-3 30s ease-in-out infinite;
+  }
+  
+  /* Custom scrollbar - elegant and minimal */
+  .scrollbar-custom::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .scrollbar-custom::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+  }
+  
+  .scrollbar-custom::-webkit-scrollbar-thumb {
+    background: hsla(217, 20%, 60%, 0.3);
+    border-radius: 10px;
+    transition: background 0.2s ease;
+  }
+  
+  .scrollbar-custom::-webkit-scrollbar-thumb:hover {
+    background: hsla(217, 20%, 50%, 0.5);
+  }
+  
+  /* Firefox scrollbar */
+  .scrollbar-custom {
+    scrollbar-width: thin;
+    scrollbar-color: hsla(217, 20%, 60%, 0.3) transparent;
+  }
+}
+
+