diff --git a/package-lock.json b/package-lock.json
index f9692c093..25cbbb651 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
             "license": "Apache-2.0",
             "dependencies": {
                 "@datepicker-react/hooks": "^2.3.1",
+                "@fontsource-variable/roboto-flex": "^5.2.6",
                 "@popperjs/core": "^2.11.5",
                 "@styled-system/theme-get": "^5.1.2",
                 "@types/react-select": "^4.0.18",
@@ -3200,6 +3201,15 @@
             "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
             "license": "MIT"
         },
+        "node_modules/@fontsource-variable/roboto-flex": {
+            "version": "5.2.6",
+            "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.2.6.tgz",
+            "integrity": "sha512-8jUDGkb6gRUexJkdUz1GThB9fshF7ENe/vVmtf+nz2MxQZZsrrYT92tST3xM+xf/BnoqL6yRkGdv9zNITiyYCw==",
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
         "node_modules/@formatjs/ecma402-abstract": {
             "version": "2.3.4",
             "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz",
diff --git a/package.json b/package.json
index 86c007401..15204dd74 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     },
     "dependencies": {
         "@datepicker-react/hooks": "^2.3.1",
+        "@fontsource-variable/roboto-flex": "^5.2.6",
         "@popperjs/core": "^2.11.5",
         "@styled-system/theme-get": "^5.1.2",
         "@types/react-select": "^4.0.18",
diff --git a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap
index 7ad06ec0c..05de82704 100644
--- a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap
+++ b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap
@@ -66,7 +66,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
 .c7 {
   color: inherit;
   font-size: 1rem;
-  font-family: "Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   line-height: 1.4;
   margin: 0;
   font-size: 0.875rem;
@@ -75,7 +75,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
 .c8 {
   color: var(--wave-s-color-foreground-neutral-emphasized);
   font-size: 1rem;
-  font-family: "Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   line-height: 1.4;
   margin: 0;
   font-size: 0.875rem;
diff --git a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap
index f251891d0..8d301168f 100644
--- a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap
+++ b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`TabBar.Link has a bright color if selected 1`] = `
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: "Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   margin-right: 1.5rem;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -53,7 +53,7 @@ exports[`TabBar.Link renders with default props 1`] = `
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: "Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   margin-right: 1.5rem;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
index 196a787e5..1435a1fe3 100644
--- a/src/essentials/Colors/Colors.ts
+++ b/src/essentials/Colors/Colors.ts
@@ -5,33 +5,7 @@ import { createThemeGlobalStyle } from './globalStyles';
 export const Colors = {
     white: 'hsl(0, 0%, 100%)',
     black: 'hsl(0, 0%, 0%)',
-    neutral: {
-        10: 'hsl(0, 0%, 11%)',
-        20: 'hsl(0, 0%, 19%)',
-        30: 'hsl(0, 0%, 28%)',
-        40: 'hsl(0, 0%, 37%)',
-        50: 'hsl(0, 0%, 47%)',
-        60: 'hsl(0, 0%, 57%)',
-        70: 'hsl(0, 0%, 67%)',
-        80: 'hsl(0, 0%, 78%)',
-        90: 'hsl(0, 0%, 89%)',
-        95: 'hsl(0, 0%, 95%)',
-        97: 'hsl(0, 0%, 98%)',
-        99: 'hsl(0, 0%, 99%)'
-    },
     blue: {
-        10: 'hsl(214, 77%, 10%)',
-        20: 'hsl(215, 75%, 20%)',
-        30: 'hsl(214, 76%, 31%)',
-        40: 'hsl(214, 75%, 41%)',
-        50: 'hsl(214, 78%, 51%)',
-        60: 'hsl(214, 78%, 61%)',
-        70: 'hsl(214, 79%, 71%)',
-        80: 'hsl(215, 78%, 80%)',
-        90: 'hsl(215, 80%, 90%)',
-        95: 'hsl(215, 76%, 95%)',
-        97: 'hsl(218, 80%, 98%)',
-
         primary: {
             1100: 'hsl(211, 100%, 6%)',
             900: 'hsl(211, 100%, 12%)',
@@ -45,23 +19,14 @@ export const Colors = {
             1000: 'hsl(212, 92%, 34%)',
             900: 'hsl(212, 92%, 45%)',
             350: 'hsl(212, 75%, 78%)',
-            150: 'hsl(213, 74%, 91%)',
+            150: 'hsl(214, 74%, 91%)',
             100: 'hsl(211, 74%, 94%)',
-            50: 'hsl(210, 75%, 97%)'
+            50: 'hsl(210, 73%, 97%)'
         }
     },
     red: {
-        10: 'hsl(348, 100%, 13%)',
-        20: 'hsl(345, 100%, 20%)',
-        30: 'hsl(344, 100%, 29%)',
-        40: 'hsl(342, 100%, 37%)',
-        50: 'hsl(342, 100%, 45%)',
-        60: 'hsl(352, 100%, 66%)',
-        70: 'hsl(355, 100%, 76%)',
-        80: 'hsl(357, 100%, 85%)',
-        90: 'hsl(0, 100%, 93%)',
-        95: 'hsl(3, 100%, 96%)',
-        97: 'hsl(0, 100%, 98%)'
+        1000: 'hsl(352, 92%, 39%)',
+        900: 'hsl(352, 100%, 52%)'
     },
     magenta: {
         1000: 'hsl(302, 100%, 37%)',
@@ -73,44 +38,18 @@ export const Colors = {
         1000: 'hsl(149, 92%, 24%)',
         900: 'hsl(149, 93%, 32%)',
         350: 'hsl(149, 44%, 74%)',
-
-        10: 'hsl(124, 47%, 7%)',
-        20: 'hsl(122, 47%, 13%)',
-        30: 'hsl(124, 48%, 20%)',
-        40: 'hsl(123, 48%, 26%)',
-        50: 'hsl(123, 48%, 33%)',
-        60: 'hsl(123, 27%, 46%)',
-        70: 'hsl(124, 23%, 60%)',
-        80: 'hsl(122, 24%, 73%)',
-        90: 'hsl(124, 24%, 87%)',
-        95: 'hsl(120, 24%, 93%)',
-        97: 'hsl(120, 20%, 97%)'
+        50: 'hsl(144, 50%, 96%)'
     },
     yellow: {
-        10: 'hsl(45, 92%, 5%)',
-        20: 'hsl(45, 95%, 15%)',
-        30: 'hsl(46, 94%, 25%)',
-        40: 'hsl(46, 93%, 36%)',
-        50: 'hsl(46, 94%, 46%)',
-        60: 'hsl(46, 98%, 51%)',
-        70: 'hsl(46, 98%, 61%)',
-        80: 'hsl(46, 97%, 71%)',
-        90: 'hsl(46, 98%, 80%)',
-        95: 'hsl(46, 96%, 90%)',
-        97: 'hsl(46, 100%, 95%)'
+        900: 'hsl(48, 100%, 50%)',
+        350: 'hsl(48, 100%, 81%)',
+        50: 'hsl(48, 100%, 97%)'
     },
     orange: {
-        10: 'hsl(32, 92%, 10%)',
-        20: 'hsl(32, 92%, 20%)',
-        30: 'hsl(33, 92%, 30%)',
-        40: 'hsl(32, 92%, 45%)',
-        50: 'hsl(32, 92%, 50%)',
-        60: 'hsl(32, 91%, 55%)',
-        70: 'hsl(32, 91%, 65%)',
-        80: 'hsl(32, 92%, 75%)',
-        90: 'hsl(32, 92%, 85%)',
-        95: 'hsl(32, 92%, 90%)',
-        97: 'hsl(30, 100%, 96%)'
+        1000: 'hsl(21, 96%, 38%)',
+        900: 'hsl(21, 100%, 51%)',
+        350: 'hsl(21, 100%, 81%)',
+        50: 'hsl(20, 100%, 97%)'
     },
     transparent: 'transparent'
 } as const;
@@ -153,11 +92,11 @@ export const SemanticColors = {
             default: Colors.green[900]
         },
         warning: {
-            default: Colors.yellow[60]
+            default: Colors.yellow[900]
         },
         danger: {
-            default: Colors.orange[40],
-            emphasized: Colors.orange[30]
+            default: Colors.orange[900],
+            emphasized: Colors.orange[1000]
         }
     },
     background: {
@@ -191,15 +130,15 @@ export const SemanticColors = {
                 emphasized: Colors.blue.secondary[900]
             },
             success: {
-                default: Colors.green[97]
+                default: Colors.green[50]
             },
             warning: {
-                default: Colors.yellow[97]
+                default: Colors.yellow[50]
             },
             danger: {
-                faded: Colors.orange[97],
-                default: Colors.orange[40],
-                emphasized: Colors.orange[30]
+                faded: Colors.orange[50],
+                default: Colors.orange[900],
+                emphasized: Colors.orange[1000]
             }
         },
         surface: {
@@ -219,17 +158,17 @@ export const SemanticColors = {
                 emphasized: Colors.blue.secondary[900]
             },
             success: {
-                default: Colors.green[97],
+                default: Colors.green[50],
                 emphasized: Colors.green[900]
             },
             warning: {
-                default: Colors.yellow[97],
-                emphasized: Colors.yellow[60]
+                default: Colors.yellow[50],
+                emphasized: Colors.yellow[900]
             },
             danger: {
-                faded: Colors.orange[97],
-                default: Colors.orange[97],
-                emphasized: Colors.orange[40]
+                faded: Colors.orange[50],
+                default: Colors.orange[50],
+                emphasized: Colors.orange[900]
             }
         },
         backdrop: Colors.blue.primary[900]
@@ -257,18 +196,18 @@ export const SemanticColors = {
             default: Colors.green[900]
         },
         warning: {
-            banner: Colors.yellow[90],
-            default: Colors.yellow[60]
+            banner: Colors.yellow[350],
+            default: Colors.yellow[900]
         },
         danger: {
-            banner: Colors.orange[80],
-            faded: Colors.orange[80],
-            default: Colors.orange[40]
+            banner: Colors.orange[350],
+            faded: Colors.orange[350],
+            default: Colors.orange[900]
         }
     },
     logo: {
-        free: 'hsl(350, 91%, 41%)',
-        now: 'hsl(350, 91%, 41%)',
+        free: 'hsl(342, 100%, 45%)',
+        now: 'hsl(342, 100%, 45%)',
         subtitle: Colors.black,
         lyft: 'hsl(316, 81%, 56%)'
     },
@@ -320,11 +259,11 @@ export const SemanticColorsDarkSchema = {
             default: Colors.green[900]
         },
         warning: {
-            default: Colors.yellow[60]
+            default: Colors.yellow[900]
         },
         danger: {
-            default: Colors.orange[40],
-            emphasized: Colors.orange[30]
+            default: Colors.orange[900],
+            emphasized: Colors.orange[1000]
         }
     },
     background: {
@@ -358,15 +297,15 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.blue.secondary[1000]
             },
             success: {
-                default: Colors.green[97]
+                default: Colors.green[50]
             },
             warning: {
-                default: Colors.yellow[97]
+                default: Colors.yellow[50]
             },
             danger: {
-                faded: Colors.orange[30],
-                default: Colors.orange[40],
-                emphasized: Colors.orange[30]
+                faded: Colors.orange[1000],
+                default: Colors.orange[900],
+                emphasized: Colors.orange[1000]
             }
         },
         surface: {
@@ -391,12 +330,12 @@ export const SemanticColorsDarkSchema = {
             },
             warning: {
                 default: Colors.blue.primary[750],
-                emphasized: Colors.yellow[60]
+                emphasized: Colors.yellow[900]
             },
             danger: {
-                faded: Colors.orange[80],
+                faded: Colors.orange[350],
                 default: Colors.blue.primary[750],
-                emphasized: Colors.red[40]
+                emphasized: Colors.red[1000]
             }
         },
         backdrop: Colors.blue.primary[50]
@@ -424,20 +363,20 @@ export const SemanticColorsDarkSchema = {
             default: Colors.green[900]
         },
         warning: {
-            banner: Colors.yellow[90],
-            default: Colors.yellow[60]
+            banner: Colors.yellow[350],
+            default: Colors.yellow[900]
         },
         danger: {
-            banner: Colors.orange[80],
-            faded: Colors.orange[40],
-            default: Colors.orange[40]
+            banner: Colors.orange[350],
+            faded: Colors.orange[900],
+            default: Colors.orange[900]
         }
     },
     logo: {
-        free: 'hsl(350, 91%, 41%)',
+        free: 'hsl(342, 100%, 45%)',
         now: Colors.white,
         subtitle: Colors.white,
-        lyft: Colors.white
+        lyft: 'hsl(316, 81%, 56%)'
     },
     shadow: {
         default: Colors.blue.primary[550]
diff --git a/src/essentials/Colors/ModernColors.ts b/src/essentials/Colors/ModernColors.ts
index b3c4deb1c..bea6c1d48 100644
--- a/src/essentials/Colors/ModernColors.ts
+++ b/src/essentials/Colors/ModernColors.ts
@@ -6,80 +6,54 @@ export const Colors = {
     white: 'hsl(0, 0%, 99%)',
     black: 'hsl(0, 0%, 0%)',
     neutral: {
-        10: 'hsl(0, 0%, 11%)',
-        20: 'hsl(0, 0%, 19%)',
-        30: 'hsl(0, 0%, 28%)',
-        40: 'hsl(0, 0%, 37%)',
-        50: 'hsl(0, 0%, 47%)',
-        60: 'hsl(0, 0%, 57%)',
-        70: 'hsl(0, 0%, 67%)',
-        80: 'hsl(0, 0%, 78%)',
-        90: 'hsl(0, 0%, 89%)',
-        95: 'hsl(0, 0%, 95%)',
-        97: 'hsl(0, 0%, 98%)',
-        99: 'hsl(0, 0%, 99%)'
+        900: 'hsl(0, 0%, 11%)',
+        800: 'hsl(0, 0%, 19%)',
+        750: 'hsl(0, 0%, 28%)',
+        650: 'hsl(0, 0%, 37%)',
+        550: 'hsl(0, 0%, 47%)',
+        350: 'hsl(0, 0%, 67%)',
+        200: 'hsl(0, 0%, 78%)',
+        50: 'hsl(0, 0%, 95%)',
+        10: 'hsl(0, 0%, 98%)'
     },
     primary: {
-        10: 'hsl(348, 100%, 13%)',
-        20: 'hsl(345, 100%, 20%)',
-        30: 'hsl(344, 100%, 29%)',
-        40: 'hsl(342, 100%, 37%)',
-        50: 'hsl(342, 100%, 45%)',
-        60: 'hsl(352, 100%, 66%)',
-        70: 'hsl(355, 100%, 76%)',
-        80: 'hsl(357, 100%, 85%)',
-        90: 'hsl(0, 100%, 93%)',
-        95: 'hsl(3, 100%, 96%)',
-        97: 'hsl(0, 100%, 98%)'
+        1100: 'hsl(348, 100%, 13%)',
+        1000: 'hsl(345, 100%, 20%)',
+        950: 'hsl(344, 100%, 29%)',
+        900: 'hsl(342, 100%, 37%)',
+        500: 'hsl(342, 100%, 45%)',
+        350: 'hsl(352, 100%, 66%)',
+        150: 'hsl(355, 100%, 76%)',
+        120: 'hsl(357, 100%, 85%)',
+        100: 'hsl(0, 100%, 93%)',
+        50: 'hsl(3, 100%, 96%)',
+        10: 'hsl(0, 100%, 98%)'
     },
     brand: {
-        freenow: 'hsl(342, 100%, 45%)', // RED-50
+        rushhour: 'hsl(342, 100%, 45%)',
         lyft: 'hsl(316, 81%, 56%)'
     },
     magenta: {
-        1000: 'hsl(302, 100%, 18%)',
-        900: 'hsl(302, 100%, 33%)',
-        350: 'hsl(311, 100%, 84%)',
-        50: 'hsl(324, 100%, 96%)'
+        1000: 'hsl(302, 100%, 37%)',
+        900: 'hsl(302, 100%, 50%)',
+        350: 'hsl(302, 100%, 81%)',
+        50: 'hsl(300, 100%, 97%)'
     },
     green: {
-        10: 'hsl(124, 47%, 7%)',
-        20: 'hsl(122, 47%, 13%)',
-        30: 'hsl(124, 48%, 20%)',
-        40: 'hsl(123, 48%, 26%)',
-        50: 'hsl(123, 48%, 33%)',
-        60: 'hsl(123, 27%, 46%)',
-        70: 'hsl(124, 23%, 60%)',
-        80: 'hsl(122, 24%, 73%)',
-        90: 'hsl(124, 24%, 87%)',
-        95: 'hsl(120, 24%, 93%)',
-        97: 'hsl(120, 20%, 97%)'
+        1000: 'hsl(124, 47%, 7%)',
+        900: 'hsl(123, 48%, 33%)',
+        350: 'hsl(123, 27%, 46%)',
+        50: 'hsl(120, 24%, 93%)'
     },
     yellow: {
-        10: 'hsl(45, 92%, 5%)',
-        20: 'hsl(45, 95%, 15%)',
-        30: 'hsl(46, 94%, 25%)',
-        40: 'hsl(46, 93%, 36%)',
-        50: 'hsl(46, 94%, 46%)',
-        60: 'hsl(46, 98%, 51%)',
-        70: 'hsl(46, 98%, 61%)',
-        80: 'hsl(46, 97%, 71%)',
-        90: 'hsl(46, 98%, 80%)',
-        95: 'hsl(46, 96%, 90%)',
-        97: 'hsl(46, 100%, 95%)'
+        900: 'hsl(46, 94%, 46%)',
+        350: 'hsl(46, 98%, 61%)',
+        50: 'hsl(46, 100%, 95%)'
     },
     red: {
-        10: 'hsl(348, 100%, 13%)',
-        20: 'hsl(345, 100%, 20%)',
-        30: 'hsl(344, 100%, 29%)',
-        40: 'hsl(342, 100%, 37%)',
-        50: 'hsl(342, 100%, 45%)',
-        60: 'hsl(352, 100%, 66%)',
-        70: 'hsl(355, 100%, 76%)',
-        80: 'hsl(357, 100%, 85%)',
-        90: 'hsl(0, 100%, 93%)',
-        95: 'hsl(3, 100%, 96%)',
-        97: 'hsl(0, 100%, 98%)'
+        1000: 'hsl(345, 100%, 20%)',
+        900: 'hsl(342, 100%, 37%)',
+        350: 'hsl(357, 100%, 85%)'
     },
     transparent: 'transparent'
 } as const;
@@ -90,72 +64,72 @@ export const SemanticColors = {
     white: Colors.white,
     transparent: Colors.transparent,
     foreground: {
-        primary: Colors.neutral[10],
+        primary: Colors.neutral[900],
         accent: {
-            default: Colors.primary[40],
-            emphasized: Colors.primary[20]
+            default: Colors.primary[900],
+            emphasized: Colors.primary[950]
         },
         neutral: {
-            faded: Colors.neutral[80],
-            default: Colors.neutral[60],
-            emphasized: Colors.neutral[40]
+            faded: Colors.neutral[200],
+            default: Colors.neutral[350],
+            emphasized: Colors.neutral[550]
         },
         'on-background': {
             primary: Colors.white,
             accent: Colors.white,
-            neutral: Colors.neutral[10],
+            neutral: Colors.neutral[900],
             disabled: Colors.white,
             info: Colors.white,
             success: Colors.white,
-            warning: Colors.neutral[10],
+            warning: Colors.neutral[900],
             danger: Colors.white
         },
-        disabled: Colors.neutral[80],
-        focus: Colors.neutral[40],
+        disabled: Colors.neutral[200],
+        focus: Colors.neutral[550],
         info: {
-            faded: Colors.neutral[40],
-            default: Colors.neutral[10]
+            faded: Colors.neutral[550],
+            default: Colors.neutral[900]
         },
         success: {
-            default: Colors.green[40]
+            default: Colors.green[900]
         },
         warning: {
-            default: Colors.yellow[60]
+            default: Colors.yellow[900]
         },
         danger: {
-            default: Colors.red[40],
-            emphasized: Colors.red[30]
+            default: Colors.red[900],
+            emphasized: Colors.red[1000]
         }
     },
     background: {
         page: {
             default: Colors.white,
-            'elevation-0': Colors.neutral[95],
+            'elevation-0': Colors.neutral[10],
             'elevation-1': Colors.white,
             'elevation-2': Colors.white,
             'elevation-3': Colors.white
         },
         element: {
             primary: {
-                default: Colors.primary[40],
-                emphasized: Colors.primary[20]
+                default: Colors.primary[500],
+                emphasized: Colors.primary[900]
             },
             disabled: {
-                faded: Colors.neutral[90],
-                default: Colors.neutral[80]
+                faded: Colors.neutral[50],
+                default: Colors.neutral[200]
             },
             neutral: {
                 default: Colors.white,
-                emphasized: Colors.neutral[90]
+                emphasized: Colors.neutral[50]
             },
             accent: {
                 faded: Colors.primary[50],
-                default: Colors.primary[70],
-                emphasized: Colors.primary[40]
+                default: Colors.primary[500],
+                emphasized: Colors.primary[900]
             },
             info: {
-                default: Colors.neutral[90],
-                emphasized: Colors.neutral[40]
+                default: Colors.neutral[50],
+                emphasized: Colors.neutral[550]
             },
             success: {
                 default: Colors.white
@@ -165,90 +139,90 @@ export const SemanticColors = {
             },
             danger: {
                 faded: Colors.primary[50],
-                default: Colors.red[40],
-                emphasized: Colors.red[30]
+                default: Colors.red[900],
+                emphasized: Colors.red[1000]
             }
         },
         surface: {
             primary: {
-                default: Colors.neutral[40],
-                emphasized: Colors.neutral[10]
+                default: Colors.neutral[550],
+                emphasized: Colors.neutral[900]
             },
             neutral: {
-                faded: Colors.neutral[90],
-                default: Colors.white,
-                emphasized: Colors.neutral[40]
+                faded: Colors.neutral[10],
+                default: Colors.neutral[50],
+                emphasized: Colors.neutral[200]
             },
             info: {
-                faded: Colors.primary[95],
-                active: Colors.primary[80],
-                default: Colors.neutral[90],
-                emphasized: Colors.neutral[40]
+                faded: Colors.primary[100],
+                active: Colors.primary[150],
+                default: Colors.neutral[50],
+                emphasized: Colors.neutral[550]
             },
             success: {
-                default: Colors.white,
-                emphasized: Colors.green[40]
+                default: Colors.neutral[50],
+                emphasized: Colors.green[900]
             },
             warning: {
-                default: Colors.white,
-                emphasized: Colors.yellow[60]
+                default: Colors.neutral[50],
+                emphasized: Colors.yellow[900]
             },
             danger: {
                 faded: Colors.primary[50],
-                default: Colors.white,
-                emphasized: Colors.red[40]
+                default: Colors.neutral[50],
+                emphasized: Colors.red[900]
             }
         },
-        backdrop: Colors.neutral[10]
+        backdrop: Colors.neutral[900]
     },
     border: {
         accent: {
-            faded: Colors.primary[70],
-            default: Colors.primary[40]
+            faded: Colors.primary[350],
+            default: Colors.primary[500]
         },
         neutral: {
-            faded: Colors.neutral[90],
-            default: Colors.neutral[80],
-            emphasized: Colors.neutral[40]
+            faded: Colors.neutral[50],
+            default: Colors.neutral[200],
+            emphasized: Colors.neutral[550]
         },
-        disabled: Colors.neutral[80],
-        focus: Colors.neutral[40],
+        disabled: Colors.neutral[200],
+        focus: Colors.neutral[550],
         info: {
-            banner: Colors.neutral[80],
-            faded: Colors.neutral[80],
-            default: Colors.neutral[40]
+            banner: Colors.neutral[200],
+            faded: Colors.neutral[200],
+            default: Colors.neutral[550]
         },
         success: {
-            banner: Colors.neutral[80],
-            faded: Colors.green[60],
-            default: Colors.green[40]
+            banner: Colors.neutral[200],
+            faded: Colors.green[350],
+            default: Colors.green[900]
         },
         warning: {
-            banner: Colors.neutral[80],
-            default: Colors.yellow[60]
+            banner: Colors.neutral[200],
+            default: Colors.yellow[900]
         },
         danger: {
-            banner: Colors.neutral[80],
-            faded: Colors.red[80],
-            default: Colors.red[40]
+            banner: Colors.neutral[200],
+            faded: Colors.red[350],
+            default: Colors.red[900]
         }
     },
     logo: {
-        free: Colors.brand.freenow,
-        now: Colors.brand.freenow,
+        free: Colors.brand.rushhour,
+        now: Colors.brand.rushhour,
         subtitle: Colors.black,
         lyft: Colors.brand.lyft
     },
     shadow: {
-        default: Colors.neutral[80]
+        default: Colors.neutral[200]
     },
     chart: {
         '1': Colors.primary[50],
-        '2': Colors.primary[90],
-        '3': Colors.primary[70],
-        '4': Colors.primary[60],
-        '5': Colors.primary[30],
-        '6': Colors.primary[10]
+        '2': Colors.primary[120],
+        '3': Colors.primary[350],
+        '4': Colors.primary[500],
+        '5': Colors.primary[950],
+        '6': Colors.primary[1100]
     }
 } satisfies SemanticColorsSchema;
 
@@ -260,162 +234,162 @@ export const SemanticColorsDarkSchema = {
         primary: Colors.white,
         accent: {
             default: Colors.white,
-            emphasized: Colors.neutral[60]
+            emphasized: Colors.neutral[350]
         },
         neutral: {
-            faded: Colors.neutral[60],
-            default: Colors.neutral[60],
-            emphasized: Colors.neutral[80]
+            faded: Colors.neutral[350],
+            default: Colors.neutral[350],
+            emphasized: Colors.neutral[200]
         },
         'on-background': {
-            primary: Colors.primary[40],
-            accent: Colors.primary[40],
-            neutral: Colors.neutral[10],
-            disabled: Colors.neutral[60],
+            primary: Colors.primary[900],
+            accent: Colors.primary[900],
+            neutral: Colors.neutral[900],
+            disabled: Colors.neutral[350],
             info: Colors.white,
             success: Colors.white,
-            warning: Colors.neutral[10],
+            warning: Colors.neutral[900],
             danger: Colors.white
         },
-        disabled: Colors.neutral[40],
+        disabled: Colors.neutral[550],
         focus: Colors.white,
         info: {
             faded: Colors.white,
             default: Colors.white
         },
         success: {
-            default: Colors.green[40]
+            default: Colors.green[900]
         },
         warning: {
-            default: Colors.yellow[60]
+            default: Colors.yellow[900]
         },
         danger: {
-            default: Colors.red[40],
+            default: Colors.red[900],
             emphasized: Colors.primary[50]
         }
     },
     background: {
         page: {
-            default: Colors.neutral[20],
-            'elevation-0': Colors.neutral[10],
-            'elevation-1': Colors.neutral[20],
-            'elevation-2': Colors.neutral[30],
-            'elevation-3': Colors.neutral[40]
+            default: Colors.neutral[800],
+            'elevation-0': Colors.neutral[900],
+            'elevation-1': Colors.neutral[750],
+            'elevation-2': Colors.neutral[650],
+            'elevation-3': Colors.neutral[550]
         },
         element: {
             primary: {
-                default: Colors.neutral[90],
+                default: Colors.neutral[50],
                 emphasized: Colors.white
             },
             accent: {
-                faded: Colors.primary[20],
-                default: Colors.primary[40],
-                emphasized: Colors.primary[70]
+                faded: Colors.primary[900],
+                default: Colors.primary[500],
+                emphasized: Colors.primary[350]
             },
             disabled: {
-                faded: Colors.neutral[30],
-                default: Colors.neutral[40]
+                faded: Colors.neutral[650],
+                default: Colors.neutral[550]
             },
             neutral: {
-                default: Colors.neutral[60],
+                default: Colors.neutral[350],
                 emphasized: Colors.white
             },
             info: {
-                default: Colors.neutral[60],
-                emphasized: Colors.neutral[40]
+                default: Colors.neutral[350],
+                emphasized: Colors.neutral[550]
             },
             success: {
-                default: Colors.green[90]
+                default: Colors.green[50]
             },
             warning: {
-                default: Colors.yellow[97]
+                default: Colors.yellow[50]
             },
             danger: {
-                faded: Colors.red[30],
-                default: Colors.red[40],
-                emphasized: Colors.red[30]
+                faded: Colors.red[1000],
+                default: Colors.red[900],
+                emphasized: Colors.red[1000]
             }
         },
         surface: {
             primary: {
-                default: Colors.neutral[40],
-                emphasized: Colors.neutral[80]
+                default: Colors.neutral[550],
+                emphasized: Colors.neutral[200]
             },
             neutral: {
-                faded: Colors.neutral[60],
-                default: Colors.neutral[40],
-                emphasized: Colors.neutral[40]
+                faded: Colors.neutral[350],
+                default: Colors.neutral[550],
+                emphasized: Colors.neutral[550]
             },
             info: {
-                faded: Colors.primary[40],
-                active: Colors.primary[40],
-                default: Colors.primary[20],
-                emphasized: Colors.neutral[40]
+                faded: Colors.primary[900],
+                active: Colors.primary[900],
+                default: Colors.primary[1000],
+                emphasized: Colors.neutral[550]
             },
             success: {
-                default: Colors.neutral[20],
-                emphasized: Colors.green[40]
+                default: Colors.neutral[750],
+                emphasized: Colors.green[900]
             },
             warning: {
-                default: Colors.neutral[20],
-                emphasized: Colors.yellow[60]
+                default: Colors.neutral[750],
+                emphasized: Colors.yellow[900]
             },
             danger: {
-                faded: Colors.red[30],
-                default: Colors.neutral[20],
-                emphasized: Colors.red[40]
+                faded: Colors.red[1000],
+                default: Colors.neutral[750],
+                emphasized: Colors.red[900]
             }
         },
-        backdrop: Colors.neutral[90]
+        backdrop: Colors.neutral[50]
     },
     border: {
         accent: {
-            faded: Colors.primary[70],
-            default: Colors.primary[70]
+            faded: Colors.primary[350],
+            default: Colors.primary[500]
         },
         neutral: {
-            faded: Colors.neutral[90],
-            default: Colors.neutral[80],
-            emphasized: Colors.neutral[90]
+            faded: Colors.neutral[50],
+            default: Colors.neutral[200],
+            emphasized: Colors.neutral[50]
         },
-        disabled: Colors.neutral[40],
-        focus: Colors.neutral[40],
+        disabled: Colors.neutral[550],
+        focus: Colors.neutral[550],
         info: {
-            banner: Colors.neutral[80],
-            faded: Colors.neutral[40],
-            default: Colors.neutral[40]
+            banner: Colors.neutral[200],
+            faded: Colors.neutral[550],
+            default: Colors.neutral[550]
         },
         success: {
-            banner: Colors.green[40],
-            faded: Colors.green[40],
-            default: Colors.green[40]
+            banner: Colors.green[900],
+            faded: Colors.green[900],
+            default: Colors.green[900]
         },
         warning: {
-            banner: Colors.yellow[60],
-            default: Colors.yellow[60]
+            banner: Colors.yellow[900],
+            default: Colors.yellow[900]
         },
         danger: {
-            banner: Colors.red[40],
-            faded: Colors.red[40],
-            default: Colors.red[40]
+            banner: Colors.red[900],
+            faded: Colors.red[900],
+            default: Colors.red[900]
         }
     },
     logo: {
-        free: Colors.brand.freenow,
+        free: Colors.brand.rushhour,
         now: Colors.white,
         subtitle: Colors.white,
         lyft: Colors.white
     },
     shadow: {
-        default: Colors.neutral[30]
+        default: Colors.neutral[650]
     },
     chart: {
         '1': Colors.primary[50],
-        '2': Colors.primary[90],
-        '3': Colors.primary[80],
-        '4': Colors.primary[70],
-        '5': Colors.primary[60],
-        '6': Colors.primary[30]
+        '2': Colors.primary[120],
+        '3': Colors.primary[150],
+        '4': Colors.primary[350],
+        '5': Colors.primary[500],
+        '6': Colors.primary[950]
     }
 } satisfies SemanticColorsSchema;
 
diff --git a/src/essentials/Colors/globalStyles.ts b/src/essentials/Colors/globalStyles.ts
index 2ac73e252..c0f14c149 100644
--- a/src/essentials/Colors/globalStyles.ts
+++ b/src/essentials/Colors/globalStyles.ts
@@ -8,6 +8,10 @@ import {
 } from '../../utils/cssVariables';
 import { SemanticColorsSchema } from './types';
 
+if (process.env.NODE_ENV !== 'test') {
+    import('../fonts/fonts');
+}
+
 export const createThemeGlobalStyle = (
     bareVariables: TokenObject,
     lightScheme: SemanticColorsSchema,
@@ -23,7 +27,7 @@ export const createThemeGlobalStyle = (
     color-scheme: dark;
     ${generateSemanticTierCssVariables(darkScheme)}
   }
-  
+
   .light-scheme {
     color-scheme: light;
     ${generateSemanticTierCssVariables(lightScheme)}
@@ -35,12 +39,92 @@ export const createThemeGlobalStyle = (
       ${generateSemanticTierCssVariables(darkScheme)}
     }
   }
-  
+
   body, .wave {
     color: ${getSemanticValue('foreground-primary')};
-    background-color: ${getSemanticValue('background-page-default')}
+    background-color: ${getSemanticValue('background-page-default')};
+    font-family: "Roboto Flex Variable", system-ui, sans-serif;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0,
+      "XOPQ" 100,
+      "XTRA" 506,
+      "YOPQ" 85,
+      "YTAS" 730,
+      "YTDE" -203,
+      "YTFI" 738,
+      "YTLC" 550,
+      "YTUC" 712;
+
+      /* roboto-flex-latin-wght-normal */
+    @font-face {
+      font-family: "Roboto Flex Variable";
+      font-style: oblique 0deg 10deg;
+      font-display: swap;
+      font-weight: 100 1000;
+      font-stretch: 25% 151%;
+      src: url(@fontsource-variable/roboto-flex/files/roboto-flex-latin-full-normal.woff2)
+        format("woff2-variations");
+      unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+        U+2215, U+FEFF, U+FFFD;
+    }
+
+    /* roboto-flex-cyrillic-wght-normal */
+    @font-face {
+      font-family: "Roboto Flex Variable";
+      font-style: oblique 0deg 10deg;
+      font-display: swap;
+      font-weight: 100 1000;
+      font-stretch: 25% 151%;
+      src: url(@fontsource-variable/roboto-flex/files/roboto-flex-cyrillic-full-normal.woff2)
+        format("woff2-variations");
+      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+    }
+
+    /* roboto-flex-cyrillic-ext-wght-normal */
+    @font-face {
+      font-family: "Roboto Flex Variable";
+      font-style: oblique 0deg 10deg;
+      font-display: swap;
+      font-weight: 100 1000;
+      font-stretch: 25% 151%;
+      src: url(@fontsource-variable/roboto-flex/files/roboto-flex-cyrillic-ext-full-normal.woff2)
+        format("woff2-variations");
+      unicode-range:
+        U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    }
+
+    /* roboto-flex-greek-wght-normal */
+    @font-face {
+      font-family: "Roboto Flex Variable";
+      font-style: oblique 0deg 10deg;
+      font-display: swap;
+      font-weight: 100 1000;
+      font-stretch: 25% 151%;
+      src: url(@fontsource-variable/roboto-flex/files/roboto-flex-greek-full-normal.woff2)
+        format("woff2-variations");
+      unicode-range:
+        U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+    }
+
+    /* roboto-flex-latin-ext-wght-normal */
+    @font-face {
+      font-family: "Roboto Flex Variable";
+      font-style: oblique 0deg 10deg;
+      font-display: swap;
+      font-weight: 100 1000;
+      font-stretch: 25% 151%;
+      src: url(@fontsource-variable/roboto-flex/files/roboto-flex-latin-ext-full-normal.woff2)
+        format("woff2-variations");
+      unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    }
   }
-  
+
   svg {
       fill: currentColor;
   }
diff --git a/src/essentials/fonts/fonts.ts b/src/essentials/fonts/fonts.ts
new file mode 100644
index 000000000..da225f90d
--- /dev/null
+++ b/src/essentials/fonts/fonts.ts
@@ -0,0 +1 @@
+import '@fontsource-variable/roboto-flex';
diff --git a/src/essentials/theme.ts b/src/essentials/theme.ts
index a26ba78ca..1e3b99b9a 100644
--- a/src/essentials/theme.ts
+++ b/src/essentials/theme.ts
@@ -11,7 +11,7 @@ const theme: DefaultTheme = {
         bold: 700
     },
     fonts: {
-        normal: fontStack(['Open Sans', 'sans-serif']),
+        normal: fontStack(['Roboto Flex Variable', 'Open Sans', 'sans-serif']),
         monospace: fontStack(['Hack', 'monospace'])
     },
     mediaQueries: MediaQueries,