common themeConfig.ts

src/Home.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { Box, Typography, Button, Container, Stack } from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 export default function Home() {
   const navigate = useNavigate();
+  const theme = useTheme();
 
   return (
     <Box
@@ -46,14 +48,13 @@ export default function Home() {
           sx={{
             p: { xs: 4, md: 8 },
             backdropFilter: "blur(20px)",
-            backgroundColor: (theme) => 
+            backgroundColor: (t) => alpha(t.palette.common.white, t.palette.mode === "dark" ? 0.04 : 0.6),
-               theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(255, 255, 255, 0.6)",
             border: "1px solid",
             borderColor: "divider",
             borderRadius: 4,
-            boxShadow: (theme) =>
+            boxShadow: (t) =>
-              theme.palette.mode === "dark"
+              t.palette.mode === "dark"
-                ? "0 8px 32px 0 rgba(0, 0, 0, 0.37)"
+                ? "0 8px 32px 0 rgba(0, 0, 0, 0.5)"
                 : "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
           }}
         >
@@ -94,7 +95,7 @@ export default function Home() {
                 transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
                 "&:hover": {
                   transform: "translateY(-3px)",
-                  boxShadow: "0 8px 20px rgba(236,72,153,0.4)",
+                  boxShadow: (t) => `0 8px 20px ${alpha(t.palette.primary.main, 0.4)}`,
                 },
               }}
             >

src/components/Dashboard/Dashboard.models.ts

@@ -32,22 +32,8 @@ export interface DashboardSection {
   settings?: Record<string, any>;
 }
 
-export interface ColorDefinition {
-  primary: string;
-  background: string;
-  text: string;
-}
-
-export interface ThemeAwarePalette {
-  light: ColorDefinition;
-  dark: ColorDefinition;
-}
-
 export interface DashboardConfig {
   sections: DashboardSection[];
-  style: {
-    palette: Record<DashboardFlow, ThemeAwarePalette>;
-  };
 }
 
 export interface DashboardViewProps {
@@ -58,6 +44,11 @@ export interface DashboardViewProps {
   isFetching: boolean;
 }
 
+export interface ColorScheme {
+  primary: string;
+  surface: string;
+  text: string;
+}
 
 export interface ComponentProps extends DashboardSection {
   reportData: ReportData;
@@ -66,9 +57,5 @@ export interface ComponentProps extends DashboardSection {
   stateSetters: DashboardStateSetters;
   isFetching: boolean;
 
-  colorScheme: {
+  colorScheme: ColorScheme;
-    primary: string;
-    light: string;
-    text: string;
-  };
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -18,51 +18,20 @@ export default function DashboardView({
   isFetching,
 }: DashboardViewProps) {
   const theme = useTheme();
-  const themeMode = theme.palette.mode;
 
   const {
     flow,
     selectedGroupKey,
   } = state;
 
-  const colors = React.useMemo(() => {
+  const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows;
-    const palette = config.style.palette[flow];
-    const modeColors = palette[themeMode];
-
-    return {
-      primary: modeColors.primary,
-      light: modeColors.background || alpha(modeColors.primary, 0.1),
-      text:
-        modeColors.text ||
-        (themeMode === "light" ? theme.palette.text.primary : "#fff"),
-    };
-
-    // if (modeColors) {
-    //   return {
-    //     primary: modeColors.primary,
-    //     light: modeColors.background || alpha(modeColors.primary, 0.1),
-    //     text:
-    //       modeColors.text ||
-    //       (themeMode === "light" ? theme.palette.text.primary : "#fff"),
-    //   };
-    // }
-    //
-    // const themeColor =
-    //   flow === "outflows" ? theme.palette.error : theme.palette.success;
-    //
-    // return {
-    //   primary: themeColor.main,
-    //   light: alpha(themeColor.main, themeMode === "light" ? 0.08 : 0.15),
-    //   text: themeColor.main,
-    // };
-  }, [config.style?.palette, flow, themeMode, theme.palette]);
 
   return (
     <Container
       sx={{
         mt: 4,
         mb: 4,
-        background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
+        background: `linear-gradient(180deg, ${alpha(colorScheme.primary, theme.palette.mode === "dark" ? 0.06 : 0.04)} 0%, transparent 100%)`,
         borderRadius: 4,
         p: 2,
         transition: "background 0.3s ease",
@@ -89,9 +58,9 @@ export default function DashboardView({
               color: "text.secondary",
             },
             "&.Mui-selected": {
-              bgcolor: colors.primary,
+              bgcolor: colorScheme.primary,
               color: "white",
-              borderColor: colors.primary,
+              borderColor: colorScheme.primary,
             },
           }}
         >
@@ -125,7 +94,7 @@ export default function DashboardView({
                 stateSetters={stateSetters}
                 isFetching={isFetching}
 
-                colorScheme={colors}
+                colorScheme={colorScheme}
               />
             </Grid>
           );

src/components/HistoryChart/HistoryChart.view.tsx

@@ -76,7 +76,7 @@ export default function HistoryChartView({
         boxShadow: "none",
         border: "1px solid",
         borderColor: "divider",
-        bgcolor: isDark ? "background.paper" : colorScheme.light,
+        bgcolor: isDark ? "background.paper" : colorScheme.surface,
         opacity: isFetching ? 0.6 : 1,
         transition: "opacity 0.3s ease",
         pointerEvents: isFetching ? "none" : "auto",

src/components/LatestItems/LatestItems.view.tsx

@@ -9,6 +9,7 @@ import {
   Box,
   IconButton,
 } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { LatestItemsViewProps } from "./LatestItems.props";
 
@@ -46,7 +47,7 @@ export default function LatestItemsView({
               <Avatar
                 variant="rounded"
                 sx={{
-                  bgcolor: `${accentColor}22`,
+                  bgcolor: alpha(accentColor, 0.13),
                   width: 48,
                   height: 48,
                   borderRadius: 3,

src/components/ProgressCard/ProgressCard.view.tsx

@@ -25,7 +25,6 @@ export default function ProgressCardView({
   onClick,
 }: ProgressCardViewProps) {
   const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
 
   const percentage = getPercentage(progressAmount, totalAmount);
   const formattedProgress = formatCurrency(progressAmount);
@@ -41,7 +40,7 @@ export default function ProgressCardView({
         borderRadius: settings.compact ? 3 : 4,
         transform: selected ? "scale(1.02)" : "scale(1)",
         transition: "transform 0.2s ease, box-shadow 0.2s ease",
-        bgcolor: colorScheme.light,
+        bgcolor: colorScheme.surface,
         color: colorScheme.text,
         display: "flex",
         flexDirection: "column",
@@ -51,9 +50,8 @@ export default function ProgressCardView({
         overflow: "hidden",
         border: selected
           ? `2px solid ${colorScheme.primary}`
-          : isDark
+          : "1px solid",
-          ? "1px solid rgba(255,255,255,0.1)"
+        borderColor: selected ? colorScheme.primary : "divider",
-          : "1px solid rgba(0,0,0,0.06)",
         boxShadow: "none",
         opacity: isFetching ? 0.6 : 1,
         pointerEvents: isFetching ? "none" : "auto",
@@ -70,7 +68,6 @@ export default function ProgressCardView({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           letterSpacing: 0.5,
-          textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.3)" : "none",
         }}
       >
         {title}
@@ -83,7 +80,6 @@ export default function ProgressCardView({
           sx={{
             mb: 0.5,
             lineHeight: 1.2,
-            textShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "none",
           }}
         >
           {formattedProgress}
@@ -92,7 +88,7 @@ export default function ProgressCardView({
         <Divider
           sx={{
             my: 1,
-            borderColor: isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)",
+            borderColor: "divider",
             width: "100%",
           }}
         />
@@ -118,7 +114,7 @@ export default function ProgressCardView({
             height: settings.compact ? 6 : 10,
             borderRadius: 5,
             [`&.${linearProgressClasses.colorPrimary}`]: {
-              backgroundColor: isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)",
+              backgroundColor: alpha(theme.palette.divider, 0.5),
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,

src/dashboard-config.ts

@@ -37,32 +37,4 @@ export const configuration: DashboardConfig = {
       component: LatestItems,
     },
   ],
-  style: {
-    palette: {
-      outflows: {
-        light: {
-          primary: "#d32f2f",
-          background: "#fdecea",
-          text: "#b71c1c"
-        },
-        dark: {
-          primary: "#f44336",
-          background: "rgba(244, 67, 54, 0.15)",
-          text: "#ffcdd2"
-        }
-      },
-      inflows: {
-        light: {
-          primary: "#2e7d32",
-          background: "#e8f5e9",
-          text: "#1b5e20"
-        },
-        dark: {
-          primary: "#4caf50",
-          background: "rgba(76, 175, 80, 0.15)",
-          text: "#c8e6c9"
-        }
-      }
-    }
-  }
 };

src/shared-theme/AppTheme.tsx

@@ -3,9 +3,11 @@ import {
   ThemeProvider,
   createTheme,
   CssBaseline,
+  Box,
 } from "@mui/material";
 
 import { getDesignTokens } from "./themePrimitives";
+import { getSemanticColors } from "./themeConfig";
 
 import { inputsCustomizations } from "./customizations/inputs";
 import { dataDisplayCustomizations } from "./customizations/dataDisplay";
@@ -55,10 +57,16 @@ export default function AppTheme({
     [mode, toggleColorMode]
   );
 
+  const semantic = React.useMemo(
+    () => getSemanticColors(mode),
+    [mode]
+  );
+
   const theme = React.useMemo(
     () =>
       createTheme({
         ...getDesignTokens(mode),
+        semantic,
 
         components: {
           ...inputsCustomizations,
@@ -68,14 +76,27 @@ export default function AppTheme({
           ...surfacesCustomizations,
         },
       }),
-    [mode]
+    [mode, semantic]
   );
 
   return (
     <ColorModeContext.Provider value={contextValue}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        {children}
+        <Box
+          sx={{
+            "--bg-page": semantic.surface.page,
+            "--bg-card": semantic.surface.card,
+            "--bg-elevated": semantic.surface.elevated,
+            "--border-default": semantic.border.default,
+            "--border-subtle": semantic.border.subtle,
+            "--text-primary": semantic.text.primary,
+            "--text-secondary": semantic.text.secondary,
+            "--text-muted": semantic.text.muted,
+          }}
+        >
+          {children}
+        </Box>
       </ThemeProvider>
     </ColorModeContext.Provider>
   );

src/shared-theme/customizations/feedback.tsx

@@ -14,8 +14,8 @@ export const feedbackCustomizations: Components<Theme> = {
           color: orange[500],
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
+          backgroundColor: alpha(orange[900], 0.35),
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
+          border: `1px solid ${alpha(orange[800], 0.3)}`,
         }),
       }),
     },

src/shared-theme/customizations/inputs.tsx

@@ -125,15 +125,15 @@ export const inputsCustomizations: Components<Theme> = {
                 backgroundColor: gray[200],
               },
               ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
+                backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
-                borderColor: gray[700],
+                borderColor: (theme.vars || theme).palette.divider,
 
                 '&:hover': {
-                  backgroundColor: gray[900],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
-                  borderColor: gray[600],
+                  borderColor: 'hsla(0, 0%, 100%, 0.15)',
                 },
                 '&:active': {
-                  backgroundColor: gray[900],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
                 },
               }),
             },
@@ -183,12 +183,12 @@ export const inputsCustomizations: Components<Theme> = {
                 backgroundColor: gray[200],
               },
               ...theme.applyStyles('dark', {
-                color: gray[50],
+                color: 'hsl(0, 0%, 92%)',
                 '&:hover': {
-                  backgroundColor: gray[700],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.08)',
                 },
                 '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.12)',
                 },
               }),
             },
@@ -241,14 +241,14 @@ export const inputsCustomizations: Components<Theme> = {
           backgroundColor: gray[200],
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
+          backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
-          borderColor: gray[700],
+          borderColor: (theme.vars || theme).palette.divider,
           '&:hover': {
-            backgroundColor: gray[900],
+            backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
-            borderColor: gray[600],
+            borderColor: 'hsla(0, 0%, 100%, 0.15)',
           },
           '&:active': {
-            backgroundColor: gray[900],
+            backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
           },
         }),
         variants: [
@@ -288,7 +288,7 @@ export const inputsCustomizations: Components<Theme> = {
           [`& .${toggleButtonGroupClasses.selected}`]: {
             color: '#fff',
           },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
+          boxShadow: `0 2px 8px ${alpha(brand[700], 0.3)}`,
         }),
       }),
     },
@@ -302,7 +302,7 @@ export const inputsCustomizations: Components<Theme> = {
         fontWeight: 500,
         ...theme.applyStyles('dark', {
           color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
           [`&.${toggleButtonClasses.selected}`]: {
             color: brand[300],
           },

src/shared-theme/customizations/navigation.tsx

@@ -49,9 +49,8 @@ export const navigationCustomizations: Components<Theme> = {
           },
         },
         ...theme.applyStyles('dark', {
-          background: gray[900],
+          background: (theme.vars || theme).palette.background.paper,
-          boxShadow:
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
         }),
       }),
     },
@@ -84,17 +83,17 @@ export const navigationCustomizations: Components<Theme> = {
 
         ...theme.applyStyles('dark', {
           borderRadius: (theme.vars || theme).shape.borderRadius,
-          borderColor: gray[700],
+          borderColor: (theme.vars || theme).palette.divider,
           backgroundColor: (theme.vars || theme).palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
+          boxShadow: 'inset 0 1px 0 hsla(0, 0%, 100%, 0.05)',
           '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
+            borderColor: 'hsla(0, 0%, 100%, 0.15)',
             backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
           [`&.${selectClasses.focused}`]: {
             outlineOffset: 0,
-            borderColor: gray[900],
+            borderColor: 'hsl(210, 55%, 55%)',
           },
           '&:before, &:after': {
             display: 'none',
@@ -108,7 +107,7 @@ export const navigationCustomizations: Components<Theme> = {
           display: 'flex',
           alignItems: 'center',
           '&:focus-visible': {
-            backgroundColor: gray[900],
+            backgroundColor: (theme.vars || theme).palette.background.default,
           },
         }),
       }),
@@ -151,6 +150,7 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       paper: ({ theme }) => ({
         backgroundColor: (theme.vars || theme).palette.background.default,
+        borderRight: `1px solid ${(theme.vars || theme).palette.divider}`,
       }),
     },
   },
@@ -204,8 +204,8 @@ export const navigationCustomizations: Components<Theme> = {
         ...theme.applyStyles('dark', {
           ':hover': {
             color: (theme.vars || theme).palette.text.primary,
-            backgroundColor: gray[800],
+            backgroundColor: alpha((theme.vars || theme).palette.common.white, 0.08),
-            borderColor: gray[700],
+            borderColor: (theme.vars || theme).palette.divider,
           },
           [`&.${tabClasses.selected}`]: {
             color: '#fff',

src/shared-theme/customizations/surfaces.ts

@@ -40,7 +40,7 @@ export const surfacesCustomizations: Components<Theme> = {
         '&:hover': { backgroundColor: gray[50] },
         '&:focus-visible': { backgroundColor: 'transparent' },
         ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
+          '&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) },
         }),
       }),
     },
@@ -67,7 +67,7 @@ export const surfacesCustomizations: Components<Theme> = {
           border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
+            backgroundColor: (theme.vars || theme).palette.background.paper,
           }),
           variants: [
             {
@@ -79,7 +79,7 @@ export const surfacesCustomizations: Components<Theme> = {
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
+                  background: alpha((theme.vars || theme).palette.background.paper, 0.6),
                 }),
               },
             },

src/shared-theme/themeConfig.ts

@@ -0,0 +1,72 @@
+import { gray } from "./themePrimitives";
+import { alpha } from "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    semantic: SemanticColors;
+  }
+  interface ThemeOptions {
+    semantic?: SemanticColors;
+  }
+}
+
+export type SemanticColorMode = "light" | "dark";
+
+export interface SemanticColors {
+  surface: {
+    page: string;
+    card: string;
+    elevated: string;
+  };
+  border: {
+    default: string;
+    subtle: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    muted: string;
+  };
+}
+
+const darkBg = 'hsl(0, 0%, 9%)';
+const darkPaper = 'hsl(0, 0%, 14%)';
+const darkElevated = 'hsl(0, 0%, 19%)';
+
+export function getSemanticColors(mode: SemanticColorMode): SemanticColors {
+  if (mode === "dark") {
+    return {
+      surface: {
+        page: darkBg,
+        card: darkPaper,
+        elevated: darkElevated,
+      },
+      border: {
+        default: 'hsla(0, 0%, 100%, 0.08)',
+        subtle: 'hsla(0, 0%, 100%, 0.04)',
+      },
+      text: {
+        primary: 'hsl(0, 0%, 92%)',
+        secondary: 'hsl(0, 0%, 60%)',
+        muted: 'hsl(0, 0%, 45%)',
+      },
+    };
+  }
+
+  return {
+    surface: {
+      page: "hsl(0, 0%, 99%)",
+      card: "hsl(220, 35%, 97%)",
+      elevated: gray[100],
+    },
+    border: {
+      default: alpha(gray[300], 0.4),
+      subtle: alpha(gray[200], 0.3),
+    },
+    text: {
+      primary: gray[800],
+      secondary: gray[600],
+      muted: gray[500],
+    },
+  };
+}

src/shared-theme/themePrimitives.ts

@@ -23,6 +23,10 @@ declare module '@mui/material/styles' {
 
   interface Palette {
     baseShadow: string;
+    flows: {
+      outflows: { primary: string; surface: string; text: string };
+      inflows: { primary: string; surface: string; text: string };
+    };
   }
 }
 
@@ -52,7 +56,9 @@ export const gray = {
   500: 'hsl(220, 20%, 42%)',
   600: 'hsl(220, 20%, 35%)',
   700: 'hsl(220, 20%, 25%)',
+  750: 'hsl(220, 20%, 18%)',
   800: 'hsl(220, 30%, 6%)',
+  850: 'hsl(220, 22%, 11%)',
   900: 'hsl(220, 35%, 3%)',
 };
 
@@ -95,10 +101,14 @@ export const red = {
   900: 'hsl(0, 93%, 6%)',
 };
 
+const darkBg = 'hsl(0, 0%, 9%)';
+const darkPaper = 'hsl(0, 0%, 14%)';
+const darkElevated = 'hsl(0, 0%, 19%)';
+
 export const getDesignTokens = (mode: PaletteMode) => {
   customShadows[1] =
     mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
+      ? '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)'
       : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
 
   return {
@@ -111,9 +121,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
         contrastText: brand[50],
         ...(mode === 'dark' && {
           contrastText: brand[50],
-          light: brand[300],
+          light: 'hsl(210, 50%, 65%)',
-          main: brand[400],
+          main: 'hsl(210, 55%, 55%)',
-          dark: brand[700],
+          dark: 'hsl(210, 50%, 35%)',
         }),
       },
       info: {
@@ -122,10 +132,10 @@ export const getDesignTokens = (mode: PaletteMode) => {
         dark: brand[600],
         contrastText: gray[50],
         ...(mode === 'dark' && {
-          contrastText: brand[300],
+          contrastText: 'hsl(210, 30%, 80%)',
-          light: brand[500],
+          light: 'hsl(210, 40%, 50%)',
-          main: brand[700],
+          main: 'hsl(210, 35%, 40%)',
-          dark: brand[900],
+          dark: 'hsl(210, 30%, 25%)',
         }),
       },
       warning: {
@@ -133,9 +143,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
         main: orange[400],
         dark: orange[800],
         ...(mode === 'dark' && {
-          light: orange[400],
+          light: 'hsl(45, 60%, 55%)',
-          main: orange[500],
+          main: 'hsl(45, 55%, 45%)',
-          dark: orange[700],
+          dark: 'hsl(45, 50%, 30%)',
         }),
       },
       error: {
@@ -143,9 +153,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
         main: red[400],
         dark: red[800],
         ...(mode === 'dark' && {
-          light: red[400],
+          light: 'hsl(0, 55%, 60%)',
-          main: red[500],
+          main: 'hsl(0, 55%, 50%)',
-          dark: red[700],
+          dark: 'hsl(0, 50%, 35%)',
         }),
       },
       success: {
@@ -153,34 +163,46 @@ export const getDesignTokens = (mode: PaletteMode) => {
         main: green[400],
         dark: green[800],
         ...(mode === 'dark' && {
-          light: green[400],
+          light: 'hsl(120, 40%, 55%)',
-          main: green[500],
+          main: 'hsl(120, 40%, 45%)',
-          dark: green[700],
+          dark: 'hsl(120, 35%, 30%)',
         }),
       },
       grey: {
         ...gray,
       },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+      divider: mode === 'dark' ? 'hsla(0, 0%, 100%, 0.08)' : alpha(gray[300], 0.4),
       background: {
         default: 'hsl(0, 0%, 99%)',
         paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
+        ...(mode === 'dark' && { default: darkBg, paper: darkPaper }),
       },
       text: {
         primary: gray[800],
         secondary: gray[600],
         warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 92%)', secondary: 'hsl(0, 0%, 60%)' }),
       },
       action: {
         hover: alpha(gray[200], 0.2),
         selected: `${alpha(gray[200], 0.3)}`,
         ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
+          hover: 'hsla(0, 0%, 100%, 0.06)',
-          selected: alpha(gray[600], 0.3),
+          selected: 'hsla(0, 0%, 100%, 0.1)',
         }),
       },
+      flows: {
+        outflows: {
+          primary: mode === 'dark' ? 'hsl(0, 55%, 60%)' : '#d32f2f',
+          surface: mode === 'dark' ? 'hsla(0, 35%, 25%, 0.6)' : '#fdecea',
+          text: mode === 'dark' ? 'hsl(0, 60%, 80%)' : '#b71c1c',
+        },
+        inflows: {
+          primary: mode === 'dark' ? 'hsl(120, 40%, 55%)' : '#2e7d32',
+          surface: mode === 'dark' ? 'hsla(120, 25%, 22%, 0.6)' : '#e8f5e9',
+          text: mode === 'dark' ? 'hsl(120, 40%, 78%)' : '#1b5e20',
+        },
+      },
     },
     typography: {
       fontFamily: 'Inter, sans-serif',
@@ -285,6 +307,18 @@ export const colorSchemes = {
         hover: alpha(gray[200], 0.2),
         selected: `${alpha(gray[200], 0.3)}`,
       },
+      flows: {
+        outflows: {
+          primary: '#d32f2f',
+          surface: '#fdecea',
+          text: '#b71c1c',
+        },
+        inflows: {
+          primary: '#2e7d32',
+          surface: '#e8f5e9',
+          text: '#1b5e20',
+        },
+      },
       baseShadow:
         'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
     },
@@ -293,49 +327,60 @@ export const colorSchemes = {
     palette: {
       primary: {
         contrastText: brand[50],
-        light: brand[300],
+        light: 'hsl(210, 50%, 65%)',
-        main: brand[400],
+        main: 'hsl(210, 55%, 55%)',
-        dark: brand[700],
+        dark: 'hsl(210, 50%, 35%)',
       },
       info: {
-        contrastText: brand[300],
+        contrastText: 'hsl(210, 30%, 80%)',
-        light: brand[500],
+        light: 'hsl(210, 40%, 50%)',
-        main: brand[700],
+        main: 'hsl(210, 35%, 40%)',
-        dark: brand[900],
+        dark: 'hsl(210, 30%, 25%)',
       },
       warning: {
-        light: orange[400],
+        light: 'hsl(45, 60%, 55%)',
-        main: orange[500],
+        main: 'hsl(45, 55%, 45%)',
-        dark: orange[700],
+        dark: 'hsl(45, 50%, 30%)',
       },
       error: {
-        light: red[400],
+        light: 'hsl(0, 55%, 60%)',
-        main: red[500],
+        main: 'hsl(0, 55%, 50%)',
-        dark: red[700],
+        dark: 'hsl(0, 50%, 35%)',
       },
       success: {
-        light: green[400],
+        light: 'hsl(120, 40%, 55%)',
-        main: green[500],
+        main: 'hsl(120, 40%, 45%)',
-        dark: green[700],
+        dark: 'hsl(120, 35%, 30%)',
       },
       grey: {
         ...gray,
       },
-      divider: alpha(gray[700], 0.6),
+      divider: 'hsla(0, 0%, 100%, 0.08)',
       background: {
-        default: gray[900],
+        default: darkBg,
-        paper: 'hsl(220, 30%, 7%)',
+        paper: darkPaper,
       },
       text: {
-        primary: 'hsl(0, 0%, 100%)',
+        primary: 'hsl(0, 0%, 92%)',
-        secondary: gray[400],
+        secondary: 'hsl(0, 0%, 60%)',
       },
       action: {
-        hover: alpha(gray[600], 0.2),
+        hover: 'hsla(0, 0%, 100%, 0.06)',
-        selected: alpha(gray[600], 0.3),
+        selected: 'hsla(0, 0%, 100%, 0.1)',
       },
-      baseShadow:
+      flows: {
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+        outflows: {
+          primary: 'hsl(0, 55%, 60%)',
+          surface: 'hsla(0, 35%, 25%, 0.6)',
+          text: 'hsl(0, 60%, 80%)',
+        },
+        inflows: {
+          primary: 'hsl(120, 40%, 55%)',
+          surface: 'hsla(120, 25%, 22%, 0.6)',
+          text: 'hsl(120, 40%, 78%)',
+        },
+      },
+      baseShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
     },
   },
 };