diff --git a/assets/css/app.scss b/assets/css/app.scss
index 282239bd43..d98de57097 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -11,6 +11,8 @@
   --tw-content: '' !important;
 }
 
+@import "../node_modules/@mbta/rider-design-system/dist/variables.light.css" (prefers-color-scheme: light);
+@import "../node_modules/@mbta/rider-design-system/dist/variables.dark.css" (prefers-color-scheme: dark);
 @import '../../deps/mbta_metro/priv/static/assets/default.css';
 
 ////////////////////////////////////////////////////////////////////////////////////////
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index a2e619f98e..13af49936a 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -3,13 +3,35 @@
 
 const plugin = require("tailwindcss/plugin");
 
-const {
-  colors,
-  content,
-  fontFamily,
-  plugins,
-  safelist
-} = require("mbta_metro");
+const { content, plugins, safelist } = require("mbta_metro");
+const { theme: tailwindTheme } = require("mbta_metro/tailwindTheme");
+
+const moreColors = {
+  ...tailwindTheme.colors,
+  gray: {
+    DEFAULT: "#494f5c",
+    dark: "#1c1e23",
+    light: "#788093",
+    lighter: "#b0b5c0",
+    lightest: "#e9eaed",
+    "bordered-background": "#f2f3f5"
+  },
+  "brand-primary": {
+    DEFAULT: "#165c96",
+    darkest: "#0b2f4c",
+    lightest: "#cee0f4"
+  },
+  "logan-express": {
+    BB: "#f16823",
+    BT: "#0066cc",
+    DV: "#704c9f",
+    FH: "#e81d2d",
+    WO: "#00954c"
+  },
+  massport: "#104c8f",
+  subway: "#494f5c"
+};
+tailwindTheme.colors = moreColors;
 
 module.exports = {
   corePlugins: {
@@ -31,45 +53,7 @@ module.exports = {
     }
   ],
   theme: {
-    extend: {
-      colors: {
-        ...colors,
-        gray: {
-          DEFAULT: "#494f5c",
-          dark: "#1c1e23",
-          light: "#788093",
-          lighter: "#b0b5c0",
-          lightest: "#e9eaed",
-          "bordered-background": "#f2f3f5"
-        },
-        "brand-primary": {
-          DEFAULT: "#165c96",
-          darkest: "#0b2f4c",
-          lightest: "#cee0f4"
-        },
-        "logan-express": {
-          BB: "#f16823",
-          BT: "#0066cc",
-          DV: "#704c9f",
-          FH: "#e81d2d",
-          WO: "#00954c"
-        },
-        massport: "#104c8f",
-        subway: "#494f5c",
-        // These will come from the design system someday
-        "blue-line": "#003da5",
-        "green-line": "#00843d",
-        "orange-line": "#ed8b00",
-        "red-line": "#da291c",
-        "silver-line": "#7c878e",
-        "commuter-rail": "#80276c",
-        bus: "#ffc72c",
-        ferry: "#008eaa"
-      }
-    },
-    fontFamily: {
-      ...fontFamily
-    },
+    extend: tailwindTheme,
     // match screens to Bootstrap's breakpoints for now
     // matched from $container-max-widths
     screens: {