diff --git a/src/app/_auth/login_signup.module.css b/src/app/_auth/login_signup.module.css
index 2b14bb9..c637ba7 100644
--- a/src/app/_auth/login_signup.module.css
+++ b/src/app/_auth/login_signup.module.css
@@ -1,20 +1,18 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .loginSignup {
     display: flex;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     margin: auto;
     flex-direction: column;
     justify-content: center;
     height: 100%;
-    width: calc(gridBaseline * 35);
+    width: calc(var(--gridBaseline) * 35);
     max-width: 90%;
 }
 
 .submitContainer {
     display: flex;
     width: 100%;
-    margin-top: gridBaseline;
+    margin-top: var(--gridBaseline);
     align-items: center;
     justify-content: space-between;
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index d900104..210e566 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,5 @@
+@import '../ui/base/design_system/design_system.css';
+
 @font-face {
     font-family: 'Futura Book';
     src: url('/futura-book.otf') format('opentype');
diff --git a/src/app/instructions/page.module.css b/src/app/instructions/page.module.css
index baaaa90..768ba40 100644
--- a/src/app/instructions/page.module.css
+++ b/src/app/instructions/page.module.css
@@ -1,16 +1,13 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorPurple, colorGreyA5 from "ui/base/colors/colors.module.css";
-
 .instructions {
     margin: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: calc(gridBaseline * 120);
+    max-width: calc(var(--gridBaseline) * 120);
 }
 
 .section {
-    margin: calc(gridBaseline * 2) 0;
+    margin: calc(var(--gridBaseline) * 2) 0;
 }
 
 .instructionList li::marker {
diff --git a/src/app/layout.module.css b/src/app/layout.module.css
index 30ed0a7..79cd8a2 100644
--- a/src/app/layout.module.css
+++ b/src/app/layout.module.css
@@ -1,5 +1,3 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .skeleton {
     width: 100vw;
     height: 100vh;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1a49467..91cb216 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import { ApiProvider } from 'app/api/api_provider';
 import type { Metadata } from 'next';
 import { getFlags } from 'services/server_context';
 import { SessionProvider } from 'session/session_provider';
-import colorStyles from 'ui/base/colors/colors.module.css';
+import { colors } from 'ui/base/design_system/design_tokens';
 import { NavBar } from 'ui/nav_bar/nav_bar';
 import './globals.css';
 import styles from './layout.module.css';
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
-  themeColor: colorStyles.colorPurple,
+  themeColor: colors.purple,
 };
 
 export const dynamic = 'force-dynamic';
diff --git a/src/app/maintenance_banner.tsx b/src/app/maintenance_banner.tsx
index f63cfa7..117e313 100644
--- a/src/app/maintenance_banner.tsx
+++ b/src/app/maintenance_banner.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import colorStyles from 'ui/base/colors/colors.module.css';
-import { gridBaseline } from 'ui/base/metrics/metrics';
+import { colors, metrics } from 'ui/base/design_system/design_tokens';
 
 export const MaintenanceBanner = (props: { message: string }) => {
   return (
     <div
       style={{
-        backgroundColor: colorStyles.colorRed,
-        color: colorStyles.colorWhite,
+        backgroundColor: colors.red,
+        color: colors.white,
         width: '100vw',
-        height: gridBaseline * 6,
+        height: metrics.gridBaseline * 6,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
diff --git a/src/app/map/_components/map_page.module.css b/src/app/map/_components/map_page.module.css
index eeb86f4..8538676 100644
--- a/src/app/map/_components/map_page.module.css
+++ b/src/app/map/_components/map_page.module.css
@@ -1,15 +1,14 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorGrey, colorGreyA15, colorGreyA30 from "ui/base/colors/colors.module.css";
-
-@value margins: calc(gridBaseline * 3);
-@value albumArtMaxWidth: 300px;
-@value gap: calc(gridBaseline * 3);
-@value minContentWidth: calc(gridBaseline * 80);
-@value breakpoint: calc(albumArtMaxWidth + gap + minContentWidth + margins);
+:root {
+  --margins: calc(var(--gridBaseline) * 3);
+  --albumArtMaxWidth: 300px;
+  --gap: calc(var(--gridBaseline) * 3);
+  --minContentWidth: calc(var(--gridBaseline) * 80);
+  --breakpoint: calc(var(--albumArtMaxWidth) + var(--gap) + var(--minContentWidth) + var(--margins));
+}
 
 .mapPage {
     height: 100%;
-    padding: margins;
+    padding: var(--margins);
     box-sizing: border-box;
 
     display: flex;
@@ -20,21 +19,21 @@
 .albumArt {
     position: relative;
     flex-shrink: 0;
-    height: albumArtMaxWidth;
-    width: albumArtMaxWidth;
+    height: var(--albumArtMaxWidth);
+    width: var(--albumArtMaxWidth);
     margin: auto;
-    margin-bottom: calc(gridBaseline * 3);
+    margin-bottom: calc(var(--gridBaseline) * 3);
     animation: 2s infinite loadingAlbumArt;
 }
 @keyframes loadingAlbumArt {
     0% {
-        background-color: colorGreyA15;
+        background-color: var(--colorGreyA15);
     }
     50% {
-        background-color: colorGreyA30;
+        background-color: var(--colorGreyA30);
     }
     100% {
-        background-color: colorGreyA15;
+        background-color: var(--colorGreyA15);
     }
 }
 
@@ -47,20 +46,20 @@
 .mapContent {
     display: flex;
     flex-direction: column;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     height: 100%;
-    min-width: min(100%, calc(gridBaseline * 100));
-    max-width: max(calc(gridBaseline * 140));
+    min-width: min(100%, calc(var(--gridBaseline) * 100));
+    max-width: max(calc(var(--gridBaseline) * 140));
 }
 
 .difficulties {
     display: flex;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
 }
 .difficultyPill {
-    background: colorGrey;
-    padding: calc(gridBaseline * 0.5) calc(gridBaseline * 2);
-    border-radius: calc(gridBaseline * 2);
+    background: var(--colorGrey);
+    padding: calc(var(--gridBaseline) * 0.5) calc(var(--gridBaseline) * 2);
+    border-radius: calc(var(--gridBaseline) * 2);
 }
 
 .description {
@@ -74,13 +73,13 @@
 
 .actions {
     display: grid;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
     grid-auto-flow: column;
     width: min-content;
-    margin: gridBaseline 0;
+    margin: var(--gridBaseline) 0;
 }
 
-@media screen and (min-width: breakpoint) {
+@media screen and (min-width: var(--breakpoint)) {
     .mapPage {
         flex-direction: row;
         align-items: flex-start;
@@ -88,6 +87,6 @@
 
     .albumArt {
         margin: inherit;
-        margin-right: calc(gridBaseline * 3);
+        margin-right: calc(var(--gridBaseline) * 3);
     }
 }
diff --git a/src/app/map/_components/submit_map.module.css b/src/app/map/_components/submit_map.module.css
index 31963e1..05edb06 100644
--- a/src/app/map/_components/submit_map.module.css
+++ b/src/app/map/_components/submit_map.module.css
@@ -1,10 +1,7 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorPurple, colorRed, colorGreyA30, colorGreyA5 from "ui/base/colors/colors.module.css";
-
 .submitMap {
     height: 100%;
     margin: auto;
-    width: calc(gridBaseline * 130);
+    width: calc(var(--gridBaseline) * 130);
     max-width: 95%;
     display: flex;
     flex-direction: column;
@@ -14,19 +11,19 @@
 
 .fileContainer {
     position: relative;
-    min-height: calc(gridBaseline * 30);
-    min-width: calc(gridBaseline * 30);
+    min-height: calc(var(--gridBaseline) * 30);
+    min-width: calc(var(--gridBaseline) * 30);
     max-width: 90%;
-    padding: calc(gridBaseline * 2);
+    padding: calc(var(--gridBaseline) * 2);
     border-width: 2px;
     border-style: dashed;
-    border-color: colorGreyA30;
-    background: colorGreyA5;
+    border-color: var(--colorGreyA30);
+    background: var(--colorGreyA5);
     cursor: pointer;
 }
 
 .fileContainer.hasMapData {
-    border-color: colorPurple;
+    border-color: var(--colorPurple);
 }
 
 .fileContainer.isSubmitting {
@@ -59,19 +56,19 @@
 }
 
 .progressContainer {
-    margin-left: calc(gridBaseline * 2);
+    margin-left: calc(var(--gridBaseline) * 2);
     position: relative;
-    min-height: gridBaseline;
-    width: calc(gridBaseline * 40);
+    min-height: var(--gridBaseline);
+    width: calc(var(--gridBaseline) * 40);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .progressBar {
-    border-radius: calc(gridBaseline / 2);
+    border-radius: calc(var(--gridBaseline) / 2);
     overflow: hidden;
-    background: colorGreyA30;
+    background: var(--colorGreyA30);
 }
 
 .progressInner {
@@ -79,10 +76,10 @@
     height: 100%;
     left: 0;
     top: 0;
-    background: colorPurple;
+    background: var(--colorPurple);
 }
 
 .progressError {
-    min-height: calc(gridBaseline * 4);
-    border: 1px solid colorRed;
+    min-height: calc(var(--gridBaseline) * 4);
+    border: 1px solid var(--colorRed);
 }
diff --git a/src/app/page.module.css b/src/app/page.module.css
index d68e4f9..0305676 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,24 +1,23 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-@value colorGreyA30, colorGreyA15, colorPurple from "ui/base/colors/colors.module.css";
-
-@value gutter: calc(gridBaseline * 2);
+:root {
+  --gutter: calc(var(--gridBaseline) * 2);
+}
 
 .filter {
     position: sticky;
     top: 0;
     background: white;
     z-index: 1;
-    border-bottom: 1px solid colorGreyA15;
+    border-bottom: 1px solid var(--colorGreyA15);
 
     display: grid;
     grid-template-columns: 1fr;
     grid-auto-flow: column;
-    gap: gridBaseline;
-    padding: gridBaseline gutter;
+    gap: var(--gridBaseline);
+    padding: var(--gridBaseline) var(--gutter);
 }
 
 .tableContainer {
-    padding-bottom: calc(gridBaseline * 2);
+    padding-bottom: calc(var(--gridBaseline) * 2);
     display: flex;
     flex-direction: column;
 }
@@ -28,7 +27,7 @@
 }
 
 .isScrollable .mapListRow {
-    box-shadow: 0 0 0 1px colorGreyA15;
+    box-shadow: 0 0 0 1px var(--colorGreyA15);
 }
 
 .loadMoreButton {
@@ -37,7 +36,7 @@
 }
 
 .mapListTable {
-    padding: 0 gutter;
+    padding: 0 var(--gutter);
     color: #666;
 }
 
@@ -49,11 +48,11 @@
 
 .mapListRow:hover,
 .bulkSelectEnabled .mapListRow:hover {
-    box-shadow: 0 0 0 1px colorPurple;
+    box-shadow: 0 0 0 1px var(--colorPurple);
 }
 
 .bulkSelectEnabled .mapListRow {
-    box-shadow: 0 0 0 1px colorGreyA15;
+    box-shadow: 0 0 0 1px var(--colorGreyA15);
 }
 
 .bulkSelectEnabled .mapListRow::after {
@@ -63,25 +62,25 @@
     align-items: center;
     position: absolute;
     top: 50%;
-    right: gridBaseline;
+    right: var(--gridBaseline);
     transform: translateY(-50%);
-    width: calc(gridBaseline * 3);
-    height: calc(gridBaseline * 3);
-    border: 1px solid colorGreyA15;
+    width: calc(var(--gridBaseline) * 3);
+    height: calc(var(--gridBaseline) * 3);
+    border: 1px solid var(--colorGreyA15);
     pointer-events: none;
 }
 
 .bulkSelectEnabled .mapListRow.mapListRowSelected::after {
     content: '✔';
-    color: colorPurple;
+    color: var(--colorPurple);
     font-weight: bolder;
     font-size: 20px;
-    border: 2px solid colorPurple;
+    border: 2px solid var(--colorPurple);
 }
 
 .bulkSelectEnabled .mapListRowSelected,
 .bulkSelectEnabled .mapListRowSelected:hover {
-    box-shadow: 0 0 0 2px colorPurple;
+    box-shadow: 0 0 0 2px var(--colorPurple);
 }
 
 .mapListCell {
@@ -90,7 +89,7 @@
 
 .routeLink {
     display: block;
-    padding: calc(gridBaseline * 1.5) gridBaseline;
+    padding: calc(var(--gridBaseline) * 1.5) var(--gridBaseline);
 }
 
 .centeredCell {
@@ -106,7 +105,7 @@
     right: 0;
     display: flex;
     flex-direction: column;
-    border-radius: calc(gridBaseline * 0.5);
+    border-radius: calc(var(--gridBaseline) * 0.5);
     overflow: hidden;
 }
 
@@ -116,10 +115,10 @@
 }
 
 .greyPill {
-    background-color: colorGreyA15;
+    background-color: var(--colorGreyA15);
 }
 .greyPill + .greyPill {
-    border-top: 1px solid colorGreyA30;
+    border-top: 1px solid var(--colorGreyA30);
 }
 
 @media (max-width: 640px) {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4eccaa3..2e87876 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,7 @@ import { useSearchParams } from 'next/navigation';
 import React, { Suspense, useState } from 'react';
 import { Difficulty, PDMap } from 'schema/maps';
 import { Button } from 'ui/base/button/button';
-import metrics from 'ui/base/metrics/metrics.module.css';
+import { metrics } from 'ui/base/design_system/design_tokens';
 import { Row, Table } from 'ui/base/table/table';
 import { TableSortStore, TableStore } from 'ui/base/table/table_presenter';
 import { RouteLink } from 'ui/base/text/link';
@@ -42,17 +42,17 @@ const Home = observer(() => {
           {
             content: <T.Small weight="bold">Favorites</T.Small>,
             sortLabel: 'favorites',
-            style: { width: `calc(${metrics.gridBaseline} * 15)` },
+            style: { width: `${metrics.gridBaseline * 15}px` },
           },
           {
             content: <T.Small weight="bold">Downloads</T.Small>,
             sortLabel: 'downloadCount',
-            style: { width: `calc(${metrics.gridBaseline} * 15)` },
+            style: { width: `${metrics.gridBaseline * 15}px` },
           },
           {
             content: <T.Small weight="bold">Upload date</T.Small>,
             sortLabel: 'submissionDate',
-            style: { width: `calc(${metrics.gridBaseline} * 20)` },
+            style: { width: `${metrics.gridBaseline * 20}px` },
           },
         ],
         6,
diff --git a/src/app/settings/page.module.css b/src/app/settings/page.module.css
index 7cb08e2..269aca0 100644
--- a/src/app/settings/page.module.css
+++ b/src/app/settings/page.module.css
@@ -1,9 +1,7 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .settings {
-    max-width: calc(gridBaseline * 80);
-    margin: calc(gridBaseline * 10) auto auto auto;
+    max-width: calc(var(--gridBaseline) * 80);
+    margin: calc(var(--gridBaseline) * 10) auto auto auto;
     display: flex;
     flex-direction: column;
-    gap: calc(gridBaseline * 2);
+    gap: calc(var(--gridBaseline) * 2);
 }
diff --git a/src/ui/base/button/button.module.css b/src/ui/base/button/button.module.css
index 142ff18..ee3ab74 100644
--- a/src/ui/base/button/button.module.css
+++ b/src/ui/base/button/button.module.css
@@ -1,9 +1,8 @@
-@value colorWhite, colorPurple, colorGreen, colorGrey, colorRed from "ui/base/colors/colors.module.css";
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
-@value regularColor: colorPurple;
-@value errorColor: colorRed;
-@value successColor: colorGreen;
+:root {
+  --regularColor: var(--colorPurple);
+  --errorColor: var(--colorRed);
+  --successColor: var(--colorGreen);
+}
 
 .a {
     text-decoration: none;
@@ -14,48 +13,48 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: gridBaseline;
+    gap: var(--gridBaseline);
 
     color: inherit;
-    padding: gridBaseline calc(gridBaseline * 2);
+    padding: var(--gridBaseline) calc(var(--gridBaseline) * 2);
     text-decoration: none;
-    background: colorWhite;
+    background: var(--colorWhite);
     transition:
         background 0.15s ease,
         color 0.15s ease;
     cursor: pointer;
-    border: 1px solid regularColor;
+    border: 1px solid var(--regularColor);
 }
 
 .button:hover:not(.disabled) {
-    color: colorWhite;
+    color: var(--colorWhite);
 }
 
 .regular.button {
-    color: regularColor;
+    color: var(--regularColor);
 }
 .regular.button:hover:not(.disabled) {
-    background: regularColor;
+    background: var(--regularColor);
 }
 
 .active {
-    background: regularColor;
+    background: var(--regularColor);
     color: white;
 }
 
 .error.button {
-    border-color: errorColor;
-    color: errorColor;
+    border-color: var(--errorColor);
+    color: var(--errorColor);
 }
 .error.button:hover:not(.disabled) {
-    background: errorColor;
+    background: var(--errorColor);
 }
 
 .success.button {
     position: relative;
-    border-color: successColor;
-    background: successColor;
-    color: colorWhite;
+    border-color: var(--successColor);
+    background: var(--successColor);
+    color: var(--colorWhite);
 }
 .success.button:hover:not(.disabled) {
     margin: -1px;
@@ -63,11 +62,11 @@
 }
 
 .button.disabled {
-    border-color: colorGrey;
-    color: colorGrey;
+    border-color: var(--colorGrey);
+    color: var(--colorGrey);
     cursor: not-allowed;
 }
 
 .trailingIcon {
-    margin-left: gridBaseline;
+    margin-left: var(--gridBaseline);
 }
diff --git a/src/ui/base/colors/colors.module.css b/src/ui/base/colors/colors.module.css
deleted file mode 100644
index 0eb0be2..0000000
--- a/src/ui/base/colors/colors.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@value colorBlack: #000;
-@value colorWhite: #fff;
-
-@value colorDarkGrey: #292929;
-@value colorGrey: #666;
-/* TODO: move to using css-in-js or figure out how to use color-mod in next */
-@value colorGreyA30: rgba(102, 102, 102, 0.3);
-@value colorGreyA15: rgba(102, 102, 102, 0.15);
-@value colorGreyA5: rgba(102, 102, 102, 0.05);
-
-@value colorGreen: #4c4;
-@value colorRed: #f00;
-@value colorPurple: #9b15f1;
diff --git a/src/ui/base/design_system/design_system.css b/src/ui/base/design_system/design_system.css
new file mode 100644
index 0000000..0457d43
--- /dev/null
+++ b/src/ui/base/design_system/design_system.css
@@ -0,0 +1,16 @@
+:root {
+  /* Colors */
+  --colorBlack: #000;
+  --colorWhite: #fff;
+  --colorDarkGrey: #292929;
+  --colorGrey: #666;
+  --colorGreyA30: rgba(102, 102, 102, 0.3);
+  --colorGreyA15: rgba(102, 102, 102, 0.15);
+  --colorGreyA5: rgba(102, 102, 102, 0.05);
+  --colorGreen: #4c4;
+  --colorRed: #f00;
+  --colorPurple: #9b15f1;
+
+  /* Metrics */
+  --gridBaseline: 8px;
+}
diff --git a/src/ui/base/design_system/design_tokens.ts b/src/ui/base/design_system/design_tokens.ts
new file mode 100644
index 0000000..e13d1dd
--- /dev/null
+++ b/src/ui/base/design_system/design_tokens.ts
@@ -0,0 +1,19 @@
+// Keep this file in sync with design_system.css
+// This provides TypeScript access to design system values defined in CSS custom properties
+
+export const colors = {
+  black: '#000',
+  white: '#fff',
+  darkGrey: '#292929',
+  grey: '#666',
+  greyA30: 'rgba(102, 102, 102, 0.3)',
+  greyA15: 'rgba(102, 102, 102, 0.15)',
+  greyA5: 'rgba(102, 102, 102, 0.05)',
+  green: '#4c4',
+  red: '#f00',
+  purple: '#9b15f1',
+} as const;
+
+export const metrics = {
+  gridBaseline: 8, // in px
+} as const;
diff --git a/src/ui/base/dialog/dialog.module.css b/src/ui/base/dialog/dialog.module.css
index cc6ab8d..9d52116 100644
--- a/src/ui/base/dialog/dialog.module.css
+++ b/src/ui/base/dialog/dialog.module.css
@@ -1,6 +1,3 @@
-@value colorBlack, colorWhite from "ui/base/colors/colors.module.css";
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .dialogContainer {
     position: fixed;
     top: 0;
@@ -16,24 +13,24 @@
 
 .dialog {
     position: relative;
-    background-color: colorWhite;
-    padding: calc(gridBaseline * 2);
-    border: 1px dotted colorBlack;
+    background-color: var(--colorWhite);
+    padding: calc(var(--gridBaseline) * 2);
+    border: 1px dotted var(--colorBlack);
 }
 
 .close {
     position: absolute;
-    top: calc(gridBaseline * -4);
-    right: calc(gridBaseline * -4);
+    top: calc(var(--gridBaseline) * -4);
+    right: calc(var(--gridBaseline) * -4);
 
-    width: calc(gridBaseline * 4);
-    height: calc(gridBaseline * 4);
-    line-height: calc(gridBaseline * 4);
+    width: calc(var(--gridBaseline) * 4);
+    height: calc(var(--gridBaseline) * 4);
+    line-height: calc(var(--gridBaseline) * 4);
 
     background: rgba(0, 0, 0, 0.4);
-    color: colorWhite;
+    color: var(--colorWhite);
     border-radius: 50%;
     border: none;
     cursor: pointer;
-    font-size: calc(gridBaseline * 2);
+    font-size: calc(var(--gridBaseline) * 2);
 }
diff --git a/src/ui/base/form/form_error.module.css b/src/ui/base/form/form_error.module.css
index 6899b81..58723bf 100644
--- a/src/ui/base/form/form_error.module.css
+++ b/src/ui/base/form/form_error.module.css
@@ -1,5 +1,3 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .formError {
-    margin-top: calc(gridBaseline * 2);
+    margin-top: calc(var(--gridBaseline) * 2);
 }
diff --git a/src/ui/base/metrics/metrics.module.css b/src/ui/base/metrics/metrics.module.css
deleted file mode 100644
index 1c8b26b..0000000
--- a/src/ui/base/metrics/metrics.module.css
+++ /dev/null
@@ -1 +0,0 @@
-@value gridBaseline: 8px;
diff --git a/src/ui/base/numeric/numeric.module.css b/src/ui/base/numeric/numeric.module.css
index 9b0f692..9a56a90 100644
--- a/src/ui/base/numeric/numeric.module.css
+++ b/src/ui/base/numeric/numeric.module.css
@@ -1,22 +1,19 @@
-@value colorRed, colorGrey from "ui/base/colors/colors.module.css";
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .container {
-    margin-top: gridBaseline;
+    margin-top: var(--gridBaseline);
     display: flex;
     flex-direction: column;
 }
 
 .label {
     font-size: 16px;
-    margin-bottom: calc(gridBaseline * 0.5);
+    margin-bottom: calc(var(--gridBaseline) * 0.5);
 }
 
 .numeric {
     outline: none;
 
-    border: 1px solid colorGrey;
-    padding: calc(gridBaseline * 0.5) gridBaseline;
+    border: 1px solid var(--colorGrey);
+    padding: calc(var(--gridBaseline) * 0.5) var(--gridBaseline);
 
     font-family: 'Futura Light';
     font-size: 20px;
@@ -25,5 +22,5 @@
 }
 
 .errorContainer .numeric {
-    border: 1px solid colorRed;
+    border: 1px solid var(--colorRed);
 }
diff --git a/src/ui/base/table/table.module.css b/src/ui/base/table/table.module.css
index cd2368f..412c58d 100644
--- a/src/ui/base/table/table.module.css
+++ b/src/ui/base/table/table.module.css
@@ -1,8 +1,6 @@
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .table {
     width: 100%;
-    border-spacing: 0 gridBaseline;
+    border-spacing: 0 var(--gridBaseline);
 }
 
 .header .cell.sortable {
diff --git a/src/ui/base/text/link.module.css b/src/ui/base/text/link.module.css
index b838da8..5ffc83a 100644
--- a/src/ui/base/text/link.module.css
+++ b/src/ui/base/text/link.module.css
@@ -1,5 +1,3 @@
-@value colorPurple from "ui/base/colors/colors.module.css";
-
 .link {
     cursor: pointer;
     color: inherit;
@@ -7,5 +5,5 @@
 }
 
 .link:hover {
-    color: colorPurple;
+    color: var(--colorPurple);
 }
diff --git a/src/ui/base/text/text.module.css b/src/ui/base/text/text.module.css
index c273334..7e373ca 100644
--- a/src/ui/base/text/text.module.css
+++ b/src/ui/base/text/text.module.css
@@ -1,6 +1,6 @@
-@value colorBlack, colorGreyA5, colorRed, colorWhite, colorGrey, colorPurple from "ui/base/colors/colors.module.css";
-@value weightValueSemibold: 600;
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
+:root {
+  --weightValueSemibold: 600;
+}
 
 .text {
     margin: 0;
@@ -20,16 +20,16 @@
 .styleCode {
     font-family: 'Courier Prime', monospace;
     letter-spacing: -0.03em;
-    background-color: colorGreyA5;
-    border: 1px solid colorPurple;
-    border-radius: calc(gridBaseline / 2);
+    background-color: var(--colorGreyA5);
+    border: 1px solid var(--colorPurple);
+    border-radius: calc(var(--gridBaseline) / 2);
 }
 
 .weightRegular {
     font-weight: 400;
 }
 .weightSemibold {
-    font-weight: weightValueSemibold;
+    font-weight: var(--weightValueSemibold);
 }
 .weightBold {
     font-weight: 700;
@@ -63,28 +63,28 @@
 }
 
 .textColorBlack {
-    color: colorBlack;
+    color: var(--colorBlack);
 }
 .textColorRed {
-    color: colorRed;
+    color: var(--colorRed);
 }
 .textColorWhite {
-    color: colorWhite;
+    color: var(--colorWhite);
 }
 .textColorGrey {
-    color: colorGrey;
+    color: var(--colorGrey);
 }
 .textColorPurple {
-    color: colorPurple;
+    color: var(--colorPurple);
 }
 
 .displayInline.styleCode {
-    padding: calc(gridBaseline / 6) calc(gridBaseline);
+    padding: calc(var(--gridBaseline) / 6) calc(var(--gridBaseline));
 }
 .displayBlock.styleCode {
     white-space: pre;
-    padding: calc(gridBaseline);
-    margin: calc(gridBaseline) 0;
+    padding: calc(var(--gridBaseline));
+    margin: calc(var(--gridBaseline)) 0;
 }
 
 .custom {
diff --git a/src/ui/base/textbox/textbox.module.css b/src/ui/base/textbox/textbox.module.css
index 6326369..2836d2f 100644
--- a/src/ui/base/textbox/textbox.module.css
+++ b/src/ui/base/textbox/textbox.module.css
@@ -1,6 +1,3 @@
-@value colorRed, colorGrey, colorGreyA15, colorPurple from "ui/base/colors/colors.module.css";
-@value gridBaseline from "ui/base/metrics/metrics.module.css";
-
 .container {
     display: flex;
     flex-direction: column;
@@ -10,25 +7,25 @@
     border-style: solid;
     display: flex;
     align-items: center;
-    padding: gridBaseline;
+    padding: var(--gridBaseline);
 }
 
 .borderGrey {
-    border-color: colorGrey;
+    border-color: var(--colorGrey);
 }
 .borderPurple {
-    border-color: colorPurple;
+    border-color: var(--colorPurple);
 }
 
 .readOnly {
-    background-color: colorGreyA15;
+    background-color: var(--colorGreyA15);
 }
 
 .textbox {
     flex: 1;
     border: none;
     outline: none;
-    padding: calc(gridBaseline * 0.5) gridBaseline;
+    padding: calc(var(--gridBaseline) * 0.5) var(--gridBaseline);
 
     font-family: 'Futura Light';
     font-size: 20px;
@@ -41,5 +38,5 @@
 }
 
 .errorContainer .textboxBorder {
-    border-color: colorRed;
+    border-color: var(--colorRed);
 }
diff --git a/src/ui/nav_bar/nav_bar.module.css b/src/ui/nav_bar/nav_bar.module.css
index 8ae5f97..8b45375 100644
--- a/src/ui/nav_bar/nav_bar.module.css
+++ b/src/ui/nav_bar/nav_bar.module.css
@@ -1,26 +1,23 @@
-@value gridBaseline from 'ui/base/metrics/metrics.module.css';
-@value colorDarkGrey, colorPurple, colorWhite from 'ui/base/colors/colors.module.css';
-
 .navbar {
     display: flex;
-    min-height: calc(gridBaseline * 7);
-    background: colorDarkGrey;
-    color: colorWhite;
+    min-height: calc(var(--gridBaseline) * 7);
+    background: var(--colorDarkGrey);
+    color: var(--colorWhite);
     align-items: center;
     justify-content: space-between;
 }
 
 .logo {
     color: inherit;
-    margin-left: calc(gridBaseline * 2.5);
+    margin-left: calc(var(--gridBaseline) * 2.5);
     text-decoration: none;
     transition: color 0.1s ease;
 }
 
 .userStatus {
-    margin-right: calc(gridBaseline * 3);
+    margin-right: calc(var(--gridBaseline) * 3);
 }
 
 .menuItem {
-    margin: 0 gridBaseline;
+    margin: 0 var(--gridBaseline);
 }