diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 3df50bec4..09f5da1a6 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -33,7 +33,7 @@ jobs:
           VITE_APP_GIT_SHA: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }}
         run: |
           export VITE_APP_GIT_TIMESTAMP="$(git show -s --format=%cI)"
-          args=(--output ./dist --head-sha "$VITE_APP_GIT_SHA")
+          args=(--output ./dist --artifact-output "$RUNNER_TEMP/connect-gallery.html" --head-sha "$VITE_APP_GIT_SHA")
           if [[ -n "$BASELINE_URL" ]]; then
             args+=(--baseline-url "$BASELINE_URL")
           fi
@@ -45,3 +45,15 @@ jobs:
           path: ./dist
           retention-days: 1
           name: build-artifacts-${{ github.run_id }}
+
+      - name: Upload directly viewable gallery report
+        id: gallery-artifact
+        uses: actions/upload-artifact@v7
+        with:
+          path: ${{ runner.temp }}/connect-gallery.html
+          archive: false
+          if-no-files-found: error
+          retention-days: 14
+
+      - name: Add gallery link to build summary
+        run: echo "### [Open connect gallery](${{ steps.gallery-artifact.outputs.artifact-url }})" >> "$GITHUB_STEP_SUMMARY"
diff --git a/scripts/build-gallery.mjs b/scripts/build-gallery.mjs
index 80a2b5977..064f3545d 100644
--- a/scripts/build-gallery.mjs
+++ b/scripts/build-gallery.mjs
@@ -156,12 +156,20 @@ async function downloadBaseline(baselineUrl, destination) {
       item.state === state.name && item.viewport === viewport.name
     ));
     if (!capture?.assets?.current) return false;
-    const response = await getResponse(new URL(capture.assets.current, root));
-    await writeFile(
-      resolve(destination, captureFilename(state.name, viewport.name)),
-      Buffer.from(await response.arrayBuffer()),
-    );
-    return true;
+    const captureUrl = new URL(capture.assets.current, root);
+    try {
+      const response = await getResponse(captureUrl);
+      const buffer = Buffer.from(await response.arrayBuffer());
+      readPng(buffer, `Baseline capture ${state.name}/${viewport.name} from ${captureUrl}`);
+      await writeFile(
+        resolve(destination, captureFilename(state.name, viewport.name)),
+        buffer,
+      );
+      return true;
+    } catch (error) {
+      console.warn(`Skipping unavailable baseline capture ${state.name}/${viewport.name}: ${error.message}`);
+      return false;
+    }
   }));
   const downloaded = (await Promise.all(downloads)).filter(Boolean).length;
   if (downloaded === 0) throw new Error(`Gallery manifest at ${manifestUrl} has no compatible captures`);
@@ -432,8 +440,16 @@ async function serveDirectory(directory) {
   };
 }
 
+function readPng(buffer, label) {
+  try {
+    return PNG.sync.read(buffer);
+  } catch (error) {
+    throw new Error(`${label} is not a valid PNG: ${error.message}`, { cause: error });
+  }
+}
+
 function assertNotBlank(buffer, name) {
-  const png = PNG.sync.read(buffer);
+  const png = readPng(buffer, name);
   const first = [png.data[0], png.data[1], png.data[2], png.data[3]];
   for (let offset = 4; offset < png.data.length; offset += 4) {
     if (
@@ -729,8 +745,8 @@ async function captureRenderers(renderers, output, fixtures) {
 
 async function compareImages(basePath, currentPath, diffPath) {
   const [baseBuffer, currentBuffer] = await Promise.all([readFile(basePath), readFile(currentPath)]);
-  const baseline = PNG.sync.read(baseBuffer);
-  const current = PNG.sync.read(currentBuffer);
+  const baseline = readPng(baseBuffer, `Baseline image ${basePath}`);
+  const current = readPng(currentBuffer, `Current image ${currentPath}`);
   if (baseline.width !== current.width || baseline.height !== current.height) {
     throw new Error(`Image dimensions differ: ${baseline.width}x${baseline.height} vs ${current.width}x${current.height}`);
   }
@@ -764,7 +780,7 @@ function imageMarkup(path, alt, viewport) {
   return `<a href="${path}" aria-label="Open full-resolution ${alt}"><img src="${path}" loading="lazy" width="${viewport.width}" height="${viewport.height}" alt="${alt}"></a>`;
 }
 
-function renderReport(manifest) {
+function renderReport(manifest, { showPreviewLink = true } = {}) {
   const hasBaseline = Boolean(manifest.baseSha);
   const count = (status) => manifest.captures.filter((capture) => capture.status === status).length;
   const renderRows = (viewportName) => manifest.captures.filter((capture) => capture.viewport === viewportName).map((capture) => {
@@ -792,7 +808,7 @@ function renderReport(manifest) {
   const tables = GALLERY_VIEWPORTS.map((viewport) => `
       <section>
         <h2>${viewport.name[0].toUpperCase()}${viewport.name.slice(1)} (${viewport.width} × ${viewport.height})</h2>
-        <table border="1" cellspacing="0">
+        <table class="${hasBaseline ? 'comparison' : 'gallery'}" border="1" cellspacing="0">
           <thead>${hasBaseline
     ? '<tr><th>Page</th><th>Baseline</th><th>PR</th><th>Diff</th><th>Result</th></tr>'
     : '<tr><th>Page</th><th>Screenshot</th></tr>'}</thead>
@@ -814,13 +830,16 @@ function renderReport(manifest) {
   <title>connect ${hasBaseline ? 'visual regression report' : 'gallery'}</title>
   <style>
     table { width: 100%; table-layout: fixed; }
-    img { max-width: 100%; height: auto; }
+    table th:first-child { width: 7rem; }
+    table.comparison th:last-child { width: 9rem; }
+    td > a { display: block; max-width: 100%; overflow: auto; }
+    img { display: block; width: auto; max-width: none; height: auto; }
     [hidden] { display: none !important; }
   </style>
 </head>
 <body>
   <header>
-    <p><a class="preview" href="/">Open interactive preview</a></p>
+    ${showPreviewLink ? '<p><a class="preview" href="/">Open interactive preview</a></p>' : ''}
     <h1>${hasBaseline ? 'Visual regression report' : 'Gallery'}</h1>
     <p>${hasBaseline ? `Base: <code>${manifest.baseSha}</code><br>` : ''}Head: <code>${manifest.headSha}</code><br>Generated: <time datetime="${manifest.generatedAt}">${manifest.generatedAt}</time></p>
   </header>
@@ -843,7 +862,19 @@ function renderReport(manifest) {
 </html>\n`;
 }
 
-async function buildReport(captures, output, headSha, baseSha, baselineUrl) {
+async function renderSelfContainedReport(manifest, output) {
+  const inlineManifest = JSON.parse(JSON.stringify(manifest));
+  await Promise.all(inlineManifest.captures.flatMap((capture) => (
+    Object.entries(capture.assets).map(async ([name, asset]) => {
+      if (!asset) return;
+      const contents = await readFile(resolve(output, asset.replace(/^\/+/, '')));
+      capture.assets[name] = `data:image/png;base64,${contents.toString('base64')}`;
+    })
+  )));
+  return renderReport(inlineManifest, { showPreviewLink: false });
+}
+
+async function buildReport(captures, output, headSha, baseSha, baselineUrl, artifactOutput) {
   const currentDirectory = resolve(captures, 'current');
   const baseDirectory = resolve(captures, 'base');
   const hasBaseline = Boolean(baseSha);
@@ -863,7 +894,7 @@ async function buildReport(captures, output, headSha, baseSha, baselineUrl) {
     for (const viewport of GALLERY_VIEWPORTS) {
       const filename = captureFilename(state.name, viewport.name);
       const currentSource = resolve(currentDirectory, filename);
-      const currentAsset = `/connect-gallery-assets/current/${filename}`;
+      const currentAsset = `./connect-gallery-assets/current/${filename}`;
       let status = 'unavailable';
       let changedPixels = null;
       let changedRatio = null;
@@ -871,7 +902,7 @@ async function buildReport(captures, output, headSha, baseSha, baselineUrl) {
       let diffAsset = null;
       const baselineSource = resolve(baseDirectory, filename);
       if (hasBaseline && await fileExists(baselineSource)) {
-        baselineAsset = `/connect-gallery-assets/baseline/${filename}`;
+        baselineAsset = `./connect-gallery-assets/baseline/${filename}`;
         let hasDiff;
         ({ changedPixels, changedRatio, hasDiff } = await compareImages(
           baselineSource,
@@ -879,7 +910,7 @@ async function buildReport(captures, output, headSha, baseSha, baselineUrl) {
           resolve(assetsDirectory, 'diff', filename),
         ));
         status = changedRatio > CHANGE_THRESHOLD ? 'changed' : 'unchanged';
-        if (hasDiff) diffAsset = `/connect-gallery-assets/diff/${filename}`;
+        if (hasDiff) diffAsset = `./connect-gallery-assets/diff/${filename}`;
       }
       results.push({
         state: state.name,
@@ -904,11 +935,19 @@ async function buildReport(captures, output, headSha, baseSha, baselineUrl) {
     captures: results,
   };
   await mkdir(output, { recursive: true });
-  await Promise.all([
+  const writes = [
     writeFile(resolve(assetsDirectory, 'manifest.json'), `${JSON.stringify(manifest, null, 2)}\n`),
     writeFile(resolve(output, 'connect-gallery.html'), renderReport(manifest)),
-  ]);
+  ];
+  if (artifactOutput) {
+    await mkdir(dirname(artifactOutput), { recursive: true });
+    writes.push(renderSelfContainedReport(manifest, output).then((report) => (
+      writeFile(artifactOutput, report)
+    )));
+  }
+  await Promise.all(writes);
   console.log(`Gallery report written to ${resolve(output, 'connect-gallery.html')}`);
+  if (artifactOutput) console.log(`Self-contained gallery artifact written to ${artifactOutput}`);
 }
 
 async function main() {
@@ -948,6 +987,7 @@ async function main() {
       args['head-sha'] ?? process.env.GITHUB_SHA ?? await gitSha(source),
       baseSha,
       baselineUrl,
+      args['artifact-output'] ? resolve(args['artifact-output']) : null,
     );
   } finally {
     await rm(temporary, { recursive: true, force: true });
diff --git a/src/App.jsx b/src/App.jsx
index 6a0fa3c78..02fd93d74 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,8 +6,6 @@ import qs from 'query-string';
 import localforage from 'localforage';
 import * as Sentry from '@sentry/react';
 
-import { CircularProgress, Grid } from '@material-ui/core';
-
 import MyCommaAuth, { config as AuthConfig, storage as AuthStorage } from '@commaai/my-comma-auth';
 import { athena as Athena, auth as Auth, billing as Billing, request as Request } from './api';
 
@@ -121,11 +119,9 @@ class App extends Component {
 
   renderLoading() {
     return (
-      <Grid container alignItems="center" style={{ width: '100%', height: '100vh' }}>
-        <Grid item align="center" xs={12}>
-          <CircularProgress size="10vh" style={{ color: '#525E66' }} />
-        </Grid>
-      </Grid>
+      <div className="flex h-screen w-full items-center justify-center" role="status" aria-label="Loading">
+        <div className="h-[10vh] w-[10vh] animate-spin rounded-full border-[0.8vh] border-progress border-t-transparent" />
+      </div>
     );
   }
 
diff --git a/src/colors.js b/src/colors.js
index beb491844..668791006 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -1,20 +1,9 @@
 const Colors = {
-  transparent: 'transparent',
   white: '#fff',
-  darken10: 'rgba(0, 0, 0, 0.1)',
-  darken20: 'rgba(0, 0, 0, 0.2)',
-  darken30: 'rgba(0, 0, 0, 0.3)',
-  darken40: 'rgba(0, 0, 0, 0.4)',
-  darken50: 'rgba(0, 0, 0, 0.5)',
-  darken60: 'rgba(0, 0, 0, 0.6)',
-  darken70: 'rgba(0, 0, 0, 0.7)',
-  darken80: 'rgba(0, 0, 0, 0.8)',
-  darken90: 'rgba(0, 0, 0, 0.9)',
   white03: 'rgba(255, 255, 255, 0.03)',
   white05: 'rgba(255, 255, 255, 0.05)',
   white08: 'rgba(255, 255, 255, 0.08)',
   white10: 'rgba(255, 255, 255, 0.1)',
-  white12: 'rgba(255, 255, 255, 0.12)',
   white20: 'rgba(255, 255, 255, 0.2)',
   white30: 'rgba(255, 255, 255, 0.3)',
   white40: 'rgba(255, 255, 255, 0.4)',
@@ -23,112 +12,20 @@ const Colors = {
   white70: 'rgba(255, 255, 255, 0.7)',
   white80: 'rgba(255, 255, 255, 0.8)',
   white90: 'rgba(255, 255, 255, 0.9)',
-  black: '#030404',
-  blue50: '#258FDA',
   blue100: '#2284c9',
-  blue200: '#1f79b8',
-  blue300: '#1c6ea8',
-  blue400: '#1a6397',
-  blue500: '#175886',
-  blue600: '#144d75',
-  blue700: '#114265',
-  blue800: '#0e3754',
-  blue900: '#0b2c43',
-  blue950: '#061622',
-  blue999: '#030b11',
-  lightBlue50: '#eef6fc',
-  lightBlue100: '#ddeef9',
-  lightBlue200: '#cde5f6',
-  lightBlue300: '#bcddf4',
-  lightBlue400: '#abd4f1',
-  lightBlue500: '#9acbee',
-  lightBlue600: '#8ac3eb',
   lightBlue700: '#79bae8',
-  lightBlue800: '#68b1e5',
   lightBlue900: '#57a9e3',
-  desatBlue800: '#657f92',
   primeBlue50: '#5e8bff',
-  primeBlue100: '#5984F2',
   primeBlue200: '#547de6',
-  primeBlue300: '#4b6fcc',
-  primeBlue400: '#4261b3',
-  primeBlue500: '#385399',
-  primeBlue600: '#2f4680',
-  primeBlue700: '#263866',
-  primeBlue800: '#1c2a4d',
-  primeBlue900: '#131c33',
-  red50: '#da2535',
-  red100: '#c92231',
-  red200: '#b81f2d',
   red300: '#971a25',
   red400: '#861721',
   red500: '#75141d',
-  red600: '#651118',
-  red700: '#540e14',
-  red800: '#430b10',
-  red900: '#32090c',
-  lightRed50: '#fceeef',
-  lightRed100: '#f9dde0',
-  lightRed200: '#f6cdd0',
-  lightRed300: '#f4bcc1',
-  lightRed400: '#f1abb1',
-  lightRed500: '#ee9aa2',
-  lightRed600: '#eb8a92',
-  lightRed700: '#e87983',
-  lightRed800: '#e56873',
-  lightRed900: '#e35764',
-  lightRed950: '#e04754',
-  lightRed999: '#dd3645',
-  green50: '#22c967',
   green100: '#20b85f',
   green200: '#1da756',
   green300: '#1a974e',
   green400: '#178645',
   green500: '#14753c',
-  green600: '#116534',
-  green700: '#0e542b',
-  green800: '#0c4323',
-  green900: '#09321a',
-  lightGreen50: '#eefcf4',
-  lightGreen100: '#def9e9',
-  lightGreen200: '#cdf6de',
-  lightGreen300: '#bcf4d3',
-  lightGreen400: '#abf1c8',
-  lightGreen500: '#9beebd',
-  lightGreen600: '#8aebb2',
-  lightGreen700: '#79e8a7',
-  lightGreen800: '#68e59c',
-  lightGreen900: '#25da70',
-  orange50: '#da6f25',
-  orange100: '#c96722',
   orange200: '#b85e1f',
-  orange300: '#a7551c',
-  orange400: '#964d19',
-  orange500: '#864417',
-  orange600: '#753c14',
-  orange700: '#643311',
-  orange800: '#532b0e',
-  orange900: '#42220b',
-  lightOrange50: '#f9e8dd',
-  lightOrange100: '#f6ddcc',
-  lightOrange200: '#f4d2bb',
-  lightOrange300: '#f1c7aa',
-  lightOrange400: '#eebc9a',
-  lightOrange500: '#ebb189',
-  lightOrange600: '#e8a678',
-  lightOrange700: '#e59b67',
-  lightOrange800: '#e08546',
-  lightOrange900: '#dd7a35',
-  yellow50: '#f1ebaa',
-  yellow100: '#eee79a',
-  yellow200: '#ebe389',
-  yellow300: '#e8df78',
-  yellow400: '#e5db67',
-  yellow500: '#e3d756',
-  yellow600: '#e0d346',
-  yellow700: '#ddcf35',
-  yellow800: '#daca25',
-  yellow900: '#c9bb22',
   grey50: '#6e7d84',
   grey100: '#65737a',
   grey200: '#5c696f',
@@ -140,19 +37,7 @@ const Colors = {
   grey800: '#272c2f',
   grey900: '#1e2224',
   grey950: '#151819',
-  grey999: '#0c0e0f',
-  lightGrey50: '#f8f9f9',
-  lightGrey100: '#eeeff0',
-  lightGrey200: '#e3e6e8',
-  lightGrey300: '#d8dcdf',
-  lightGrey400: '#cdd3d6',
-  lightGrey500: '#c3c9cd',
   lightGrey600: '#b8c0c4',
-  lightGrey700: '#adb6bb',
-  lightGrey800: '#a3adb2',
-  lightGrey900: '#98a3a9',
-  lightGrey950: '#8d9aa1',
-  lightGrey999: '#77878f',
 };
 
 export default Colors;
diff --git a/src/components/AppDrawer/index.jsx b/src/components/AppDrawer/index.jsx
index fe1f639b4..9ba52da81 100644
--- a/src/components/AppDrawer/index.jsx
+++ b/src/components/AppDrawer/index.jsx
@@ -38,9 +38,9 @@ const AppDrawer = ({
       open={isPermanent || drawerIsOpen}
       onClose={toggleDrawerOff}
       variant={isPermanent ? 'permanent' : 'temporary'}
-      PaperProps={{ style: { width, top: 'auto' } }}
+      PaperProps={{ style: { width, top: 'auto', borderRight: 'none' } }}
     >
-      <div ref={contentRef} className="flex flex-col h-full bg-[linear-gradient(180deg,#1B2023_0%,#111516_100%)] ml-safe-left">
+      <div ref={contentRef} className="flex flex-col h-full bg-linear-to-b from-surface-overlay to-surface-overlay-deep ml-safe-left">
         {!isPermanent
           && (
             <Link to="/" className="flex items-center min-h-[64px] mx-2">
diff --git a/src/components/AppHeader/AccountMenu.jsx b/src/components/AppHeader/AccountMenu.jsx
index af0d41746..3cde1f494 100644
--- a/src/components/AppHeader/AccountMenu.jsx
+++ b/src/components/AppHeader/AccountMenu.jsx
@@ -20,7 +20,7 @@ const Version = () => {
 
   if (sha) {
     const commitUrl = `https://github.com/commaai/connect/commit/${sha}`;
-    content.push(<a key="0" className="text-blue-400 underline" href={commitUrl} target="_blank" rel="noreferrer">{sha.substring(0, 7)}</a>);
+    content.push(<a key="0" className="text-link underline" href={commitUrl} target="_blank" rel="noreferrer">{sha.substring(0, 7)}</a>);
 
     if (timestamp) {
       const buildDate = dayjs(timestamp).fromNow();
@@ -30,7 +30,7 @@ const Version = () => {
     content.push('dev');
   }
 
-  return <span className="text-xs text-[#ffffff66]">{content}</span>
+  return <span className="text-xs text-content/40">{content}</span>
 };
 
 const AccountMenu = ({ profile, open, onClose }) => {
@@ -48,15 +48,15 @@ const AccountMenu = ({ profile, open, onClose }) => {
   return (
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute right-0 mt-1 z-50 w-56 sm:w-64 rounded bg-[#30373B] shadow-lg overflow-hidden">
+      <div className="absolute right-0 mt-1 z-50 w-56 sm:w-64 rounded bg-surface-raised shadow-lg overflow-hidden">
         <div className="flex flex-col items-start gap-2 px-4 pt-3 pb-4">
-          <span className="font-bold text-white">{profile.email}</span>
-          <span className="text-xs text-[#ffffff66]">{profile.user_id}</span>
+          <span className="font-bold text-content">{profile.email}</span>
+          <span className="text-xs text-content/40">{profile.user_id}</span>
           {version}
         </div>
-        <div className="h-px bg-white/10" />
+        <div className="h-px bg-content/10" />
         <a
-          className="block px-4 py-3 text-white hover:bg-white/10"
+          className="block px-4 py-3 text-content hover:bg-content/10"
           href={USERADMIN_URL_ROOT}
           target="_blank"
           rel="noreferrer"
@@ -65,7 +65,7 @@ const AccountMenu = ({ profile, open, onClose }) => {
           Manage Account
         </a>
         <button
-          className="block w-full px-4 py-3 text-left text-white hover:bg-white/10"
+          className="block w-full px-4 py-3 text-left text-content hover:bg-content/10"
           onClick={onLogOut}
         >
           Log out
diff --git a/src/components/AppHeader/index.jsx b/src/components/AppHeader/index.jsx
index 330ffa9d8..2d8b4ba34 100644
--- a/src/components/AppHeader/index.jsx
+++ b/src/components/AppHeader/index.jsx
@@ -2,64 +2,21 @@ import React, { Suspense, useCallback, useState } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 
-import { withStyles } from '@material-ui/core/styles';
-import { Typography, IconButton, AppBar } from '@material-ui/core';
+import { IconButton, AppBar } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 
 import MyCommaAuth from '@commaai/my-comma-auth';
 
 import { selectDevice } from '../../actions';
 import { AccountIcon } from '../../icons';
-import Colors from '../../colors';
 import { filterRegularClick } from '../../utils';
 
 import AccountMenu from './AccountMenu';
 import PWAIcon from '../PWAIcon';
 
-const styles = () => ({
-  header: {
-    backgroundColor: '#1D2225',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 7.5,
-    flexWrap: 'wrap',
-  },
-  titleContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'nowrap',
-  },
-  logo: {
-    alignItems: 'center',
-    display: 'flex',
-    maxWidth: 200,
-    textDecoration: 'none',
-  },
-  logoImgLink: {
-    lineHeight: 0,
-  },
-  logoImg: {
-    height: 34,
-    width: 18.9,
-    margin: '0px 28px',
-  },
-  logoText: {
-    fontSize: 20,
-    fontWeight: 800,
-  },
-  accountIcon: {
-    color: Colors.white30,
-    height: 34,
-    width: 34,
-  },
-});
-
 const AppHeader = ({
-  profile, classes, dispatch, drawerIsOpen, viewingRoute, showDrawerButton,
-  forwardRef, handleDrawerStateChanged, primeNav, dongleId,
+  profile, dispatch, drawerIsOpen, showDrawerButton,
+  forwardRef, handleDrawerStateChanged, dongleId,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -82,66 +39,62 @@ const AppHeader = ({
   const open = menuOpen;
 
   return (
-    <>
-      <AppBar position="sticky" elevation={1}>
-        <div ref={forwardRef} className={classes.header}>
-          <div className={classes.titleContainer}>
-            {showDrawerButton ? (
-              <IconButton
-                aria-label="menu"
-                className="mr-3"
-                onClick={toggleDrawer}
-              >
-                <MenuIcon />
-              </IconButton>
-            )
-              : (
-                <a
-                  href={`/${dongleId}`}
-                  className={classes.logoImgLink}
-                  onClick={filterRegularClick(() => dispatch(selectDevice(dongleId)))}
-                >
-                  <img alt="comma" src="/images/comma-white.png" className={classes.logoImg} />
-                </a>
-              )}
-            <a
-              href={`/${dongleId}`}
-              onClick={filterRegularClick(() => dispatch(selectDevice(dongleId)))}
+    <AppBar position="sticky" elevation={1}>
+      <div ref={forwardRef} className="flex flex-row flex-wrap items-center justify-between border-b border-content/10 bg-surface p-[7.5px]">
+        <div className="flex flex-nowrap items-center">
+          {showDrawerButton ? (
+            <IconButton
+              aria-label="menu"
+              className="mr-3"
+              onClick={toggleDrawer}
             >
-              <Typography className={classes.logoText}>connect</Typography>
-            </a>
-          </div>
-          <div className="flex flex-row gap-2">
-            <Suspense><PWAIcon /></Suspense>
-            <div className="relative">
-              <IconButton
-                aria-expanded={open}
-                aria-haspopup="true"
-                onClick={handleClickedAccount}
-                aria-label="account menu"
+              <MenuIcon />
+            </IconButton>
+          )
+            : (
+              <a
+                href={`/${dongleId}`}
+                className="leading-none"
+                onClick={filterRegularClick(() => dispatch(selectDevice(dongleId)))}
               >
-                <AccountIcon className={classes.accountIcon} />
-              </IconButton>
-              {Boolean(MyCommaAuth.isAuthenticated() && profile) && (
-                <AccountMenu
-                  open={open}
-                  onClose={handleClose}
-                  profile={profile}
-                />
-              )}
-            </div>
+                <img alt="comma" src="/images/comma-white.png" className="mx-7 h-[34px] w-[18.9px]" />
+              </a>
+            )}
+          <a
+            href={`/${dongleId}`}
+            onClick={filterRegularClick(() => dispatch(selectDevice(dongleId)))}
+          >
+            <p className="text-xl font-extrabold text-content">connect</p>
+          </a>
+        </div>
+        <div className="flex flex-row gap-2">
+          <Suspense><PWAIcon /></Suspense>
+          <div className="relative">
+            <IconButton
+              aria-expanded={open}
+              aria-haspopup="true"
+              onClick={handleClickedAccount}
+              aria-label="account menu"
+            >
+              <AccountIcon className="h-[34px] w-[34px] text-content/30" />
+            </IconButton>
+            {Boolean(MyCommaAuth.isAuthenticated() && profile) && (
+              <AccountMenu
+                open={open}
+                onClose={handleClose}
+                profile={profile}
+              />
+            )}
           </div>
         </div>
-      </AppBar>
-    </>
+      </div>
+    </AppBar>
   );
 };
 
 const stateToProps = Obstruction({
   dongleId: 'dongleId',
-  filter: 'filter',
   profile: 'profile',
-  primeNav: 'primeNav',
 });
 
-export default connect(stateToProps)(withStyles(styles)(AppHeader));
+export default connect(stateToProps)(AppHeader);
diff --git a/src/components/BodyTeleop/ControlsBar.jsx b/src/components/BodyTeleop/ControlsBar.jsx
index 0d73baf3c..9709f2066 100644
--- a/src/components/BodyTeleop/ControlsBar.jsx
+++ b/src/components/BodyTeleop/ControlsBar.jsx
@@ -6,9 +6,9 @@ const CAMERAS = [
   { key: 'driver', label: 'driver', num: '2' },
 ];
 
-const btnBase = `h-11 w-[80px] rounded-xl text-[14px] font-bold tracking-[0.2px] uppercase flex items-center justify-center min-w-[44px] cursor-pointer select-none hover:text-white hover:bg-white/20 bg-glass`;
-const btnInactive = `${btnBase} bg-white/10 text-white/60`;
-const btnActive = `${btnBase} bg-white/30 text-white`;
+const btnBase = `h-11 w-[80px] rounded-xl text-[14px] font-bold tracking-[0.2px] uppercase flex items-center justify-center min-w-[44px] cursor-pointer select-none hover:text-content hover:bg-content/20 bg-glass`;
+const btnInactive = `${btnBase} bg-content/10 text-content/60`;
+const btnActive = `${btnBase} bg-content/30 text-content`;
 
 const controlsGroupBase = 'z-10 flex flex-row items-stretch gap-3.5 rounded-[20px] p-4 bg-glass-dark';
 const controlsGroupLandscape = 'absolute bottom-4 left-4';
@@ -87,7 +87,7 @@ const ControlsBar = ({
               </button>
             ))}
           </div>
-          <span className="text-[10px] lg:text-[13px] font-semibold tracking-[0.5px] uppercase text-white/35 text-center leading-none">Camera</span>
+          <span className="text-[10px] lg:text-[13px] font-semibold tracking-[0.5px] uppercase text-content/35 text-center leading-none">Camera</span>
         </div>
       )}
       <div className="flex flex-col items-center justify-between gap-[5px] lg:gap-[7px]">
@@ -99,7 +99,7 @@ const ControlsBar = ({
         >
           <PhotoCamera className="text-[25px]" />
         </div>
-        <span className="text-[10px] lg:text-[13px] font-semibold tracking-[0.5px] uppercase text-white/35 text-center leading-none">Snapshot</span>
+        <span className="text-[10px] lg:text-[13px] font-semibold tracking-[0.5px] uppercase text-content/35 text-center leading-none">Snapshot</span>
       </div>
     </div>
   );
diff --git a/src/components/BodyTeleop/Joystick.jsx b/src/components/BodyTeleop/Joystick.jsx
index bcea115e8..7dd92b488 100644
--- a/src/components/BodyTeleop/Joystick.jsx
+++ b/src/components/BodyTeleop/Joystick.jsx
@@ -3,28 +3,31 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { getOrientationSource } from '../../hooks/window';
 
 const TriggerGroup = ({ bumperActive, bumperLabel, bumperKey, cameraActive, triggerValue, triggerColor, triggerKey, directionLabel }) => {
-  const activeStyle = cameraActive ? { background: 'rgba(59,130,246,0.35)', borderColor: 'rgba(59,130,246,0.5)' } : undefined;
+  const activeStyle = cameraActive ? {
+    background: 'color-mix(in srgb, var(--color-action-hover) 35%, transparent)',
+    borderColor: 'color-mix(in srgb, var(--color-action-hover) 50%, transparent)',
+  } : undefined;
 
   return (
     <div className="flex flex-col items-center gap-1">
-      <span className={`text-[9px] font-bold tracking-[0.5px] uppercase transition-colors duration-100 ${bumperActive ? 'text-white/90' : 'text-white/50'}`}>
+      <span className={`text-[9px] font-bold tracking-[0.5px] uppercase transition-colors duration-100 ${bumperActive ? 'text-content/90' : 'text-content/50'}`}>
         {bumperLabel}
       </span>
       <div
-        className={`w-12 h-6 rounded-[12px_12px_4px_4px] border-2 flex items-center justify-center transition-[background,border-color] duration-100 ${bumperActive ? 'bg-white/25 border-white/50' : 'border-white/25 bg-white/5 backdrop-blur-lg'}`}
+        className={`w-12 h-6 rounded-[12px_12px_4px_4px] border-2 flex items-center justify-center transition-[background,border-color] duration-100 ${bumperActive ? 'bg-content/25 border-content/50' : 'border-content/25 bg-content/5 backdrop-blur-lg'}`}
         style={activeStyle}
       >
-        <span className={`text-[9px] font-bold tracking-[0.5px] uppercase transition-colors duration-100 ${bumperActive ? 'text-white/90' : 'text-white/50'}`}>
+        <span className={`text-[9px] font-bold tracking-[0.5px] uppercase transition-colors duration-100 ${bumperActive ? 'text-content/90' : 'text-content/50'}`}>
           {bumperKey}
         </span>
       </div>
-      <div className="w-12 h-20 rounded-[8px_8px_24px_24px] relative overflow-hidden bg-glass bg-radial-white">
+      <div className="w-12 h-20 rounded-[8px_8px_24px_24px] relative overflow-hidden bg-glass bg-radial-content">
         <div className="absolute bottom-0 left-0 right-0 transition-[height] duration-[50ms] linear" style={{ height: `${triggerValue * 100}%`, background: triggerColor }} />
-        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] font-bold tracking-[0.5px] text-white/40 z-[1] pointer-events-none">
+        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] font-bold tracking-[0.5px] text-content/40 z-[1] pointer-events-none">
           {triggerKey}
         </span>
       </div>
-      <span className="text-[10px] font-bold tracking-[0.5px] text-white/50 uppercase whitespace-nowrap">
+      <span className="text-[10px] font-bold tracking-[0.5px] text-content/50 uppercase whitespace-nowrap">
         {directionLabel}
       </span>
     </div>
@@ -39,17 +42,17 @@ const ControllerOverlay = ({ gamepadSteering, gamepadGas, gamepadBrake, gamepadL
       <TriggerGroup
         bumperActive={gamepadLB} bumperLabel="Driver Camera" bumperKey="L1"
         cameraActive={activeCamera === 'driver'} triggerValue={gamepadBrake}
-        triggerColor="rgba(239,68,68,0.45)" triggerKey="LT" directionLabel="Backward"
+        triggerColor="color-mix(in srgb, var(--color-danger) 45%, transparent)" triggerKey="LT" directionLabel="Backward"
       />
 
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
-        <span className="text-[10px] font-bold tracking-[0.5px] text-white/50 uppercase whitespace-nowrap">L Stick — Steering</span>
-        <div className="w-[100px] h-[100px] rounded-full relative flex items-center justify-center bg-glass bg-radial-white">
-          <div className="absolute top-1/2 left-3 right-3 h-0.5 -translate-y-1/2 bg-white/10 rounded-[1px]" />
-          <span className="absolute top-1/2 -translate-y-[55%] text-sm text-white/20 select-none" style={{ left: 6 }}>{'\u25C0'}</span>
-          <span className="absolute top-1/2 -translate-y-[55%] text-sm text-white/20 select-none" style={{ right: 6 }}>{'\u25B6'}</span>
+        <span className="text-[10px] font-bold tracking-[0.5px] text-content/50 uppercase whitespace-nowrap">L Stick — Steering</span>
+        <div className="w-[100px] h-[100px] rounded-full relative flex items-center justify-center bg-glass bg-radial-content">
+          <div className="absolute top-1/2 left-3 right-3 h-0.5 -translate-y-1/2 bg-content/10 rounded-[1px]" />
+          <span className="absolute top-1/2 -translate-y-[55%] text-sm text-content/20 select-none" style={{ left: 6 }}>{'\u25C0'}</span>
+          <span className="absolute top-1/2 -translate-y-[55%] text-sm text-content/20 select-none" style={{ right: 6 }}>{'\u25B6'}</span>
           <div
-            className="w-8 h-8 rounded-full absolute transition-[left] duration-[50ms] linear bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.4),rgba(255,255,255,0.1))] bg-glass"
+            className="w-8 h-8 rounded-full absolute transition-[left] duration-[50ms] linear bg-radial-content bg-glass"
             style={{ left: `calc(${thumbLeft}% - 16px)` }}
           />
         </div>
@@ -58,7 +61,7 @@ const ControllerOverlay = ({ gamepadSteering, gamepadGas, gamepadBrake, gamepadL
       <TriggerGroup
         bumperActive={gamepadRB} bumperLabel="Road Camera" bumperKey="R1"
         cameraActive={activeCamera === 'wideRoad'} triggerValue={gamepadGas}
-        triggerColor="rgba(34,197,94,0.45)" triggerKey="RT" directionLabel="Forward"
+        triggerColor="color-mix(in srgb, var(--color-success) 45%, transparent)" triggerKey="RT" directionLabel="Forward"
       />
     </div>
   );
@@ -72,7 +75,7 @@ const TouchJoystick = ({ className, thumbPos, joystickAreaRef, onTouchStart, onT
   return (
     <div
       ref={joystickAreaRef}
-      className={`touch-none rounded-2xl bg-glass bg-radial-white ${className || ''}`}
+      className={`touch-none rounded-2xl bg-glass bg-radial-content ${className || ''}`}
       onTouchStart={onTouchStart}
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
@@ -80,12 +83,12 @@ const TouchJoystick = ({ className, thumbPos, joystickAreaRef, onTouchStart, onT
       onMouseDown={onMouseDown}
       onContextMenu={(e) => e.preventDefault()}
     >
-      <div className="absolute left-1/2 top-2 bottom-2 w-px -translate-x-1/2 bg-white/10" />
-      <div className="absolute top-1/2 left-2 right-2 h-px -translate-y-1/2 bg-white/10" />
-      <div className="absolute left-1/2 top-1/2 w-1.5 h-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/30" />
+      <div className="absolute left-1/2 top-2 bottom-2 w-px -translate-x-1/2 bg-content/10" />
+      <div className="absolute top-1/2 left-2 right-2 h-px -translate-y-1/2 bg-content/10" />
+      <div className="absolute left-1/2 top-1/2 w-1.5 h-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-content/30" />
       <div
-        className={`absolute w-[52px] h-[52px] rounded-full -translate-x-1/2 -translate-y-1/2 will-change-[left,top] md:w-[56px] md:h-[56px] bg-glass bg-radial-white
-          ${thumbPos ? 'bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.6),rgba(255,255,255,0.15))]' : 'bg-radial-white'}`}
+        className={`absolute w-[52px] h-[52px] rounded-full -translate-x-1/2 -translate-y-1/2 will-change-[left,top] md:w-[56px] md:h-[56px] bg-glass bg-radial-content
+          ${thumbPos ? 'bg-radial-content-active' : 'bg-radial-content'}`}
         style={{ left: thumbLeft, top: thumbTop }}
       />
     </div>
diff --git a/src/components/BodyTeleop/SettingsMenu.jsx b/src/components/BodyTeleop/SettingsMenu.jsx
index bed124b57..9421ec8fd 100644
--- a/src/components/BodyTeleop/SettingsMenu.jsx
+++ b/src/components/BodyTeleop/SettingsMenu.jsx
@@ -14,7 +14,7 @@ const QUALITY_OPTIONS = [
   { key: 'low', label: 'low', bitrate: '500 kbps' },
 ];
 
-const rowClass = 'flex items-center h-9 px-3.5 gap-3 cursor-pointer select-none text-[13px] text-white/85 hover:bg-white/10 transition-colors whitespace-nowrap';
+const rowClass = 'flex items-center h-9 px-3.5 gap-3 cursor-pointer select-none text-[13px] text-content/85 hover:bg-content/10 transition-colors whitespace-nowrap';
 const pageClass = 'absolute top-0 left-0 w-max min-w-[200px] py-1.5 transition-all duration-200 ease-out';
 
 const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
@@ -58,7 +58,7 @@ const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
   return (
     <div ref={wrapperRef} className="relative">
       <div
-        className="flex items-center justify-center h-9 w-9 rounded-[18px] cursor-pointer select-none bg-glass text-white/60 hover:text-white/90 hover:!bg-black/60"
+        className="flex items-center justify-center h-9 w-9 rounded-[18px] cursor-pointer select-none bg-glass text-content/60 hover:text-content/90 hover:!bg-scrim/60"
         onClick={toggleOpen}
         title="Settings"
       >
@@ -89,7 +89,7 @@ const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
         >
           <div className={rowClass} onClick={() => setView('quality')}>
             <span className="flex-1">Quality</span>
-            <span className="flex items-center gap-1 text-white/45">
+            <span className="flex items-center gap-1 text-content/45">
               {selected?.label}
               <ChevronRight style={{ fontSize: 18 }} />
             </span>
@@ -106,18 +106,18 @@ const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
             pointerEvents: open && view === 'quality' ? 'auto' : 'none',
           }}
         >
-          <div className={`${rowClass} font-medium text-white/90`} onClick={() => setView('main')}>
-            <ArrowBackBold className="w-4 h-4 -ml-1 text-white/70" />
+          <div className={`${rowClass} font-medium text-content/90`} onClick={() => setView('main')}>
+            <ArrowBackBold className="w-4 h-4 -ml-1 text-content/70" />
             <span>Quality (Bitrate)</span>
           </div>
-          <div className="h-px bg-white/10 mx-2 my-1" />
+          <div className="h-px bg-content/10 mx-2 my-1" />
           {options.map((opt) => (
             <div key={opt.key} className={rowClass} onClick={() => selectQuality(opt.key)}>
               <span className="flex w-4 items-center justify-center">
-                {opt.key === quality && <Check style={{ fontSize: 16 }} className="text-white" />}
+                {opt.key === quality && <Check style={{ fontSize: 16 }} className="text-content" />}
               </span>
               <span className="flex-1">{opt.label}</span>
-              {opt.bitrate && <span className="text-[10px] text-white/40">{opt.bitrate}</span>}
+              {opt.bitrate && <span className="text-[10px] text-content/40">{opt.bitrate}</span>}
             </div>
           ))}
         </div>
diff --git a/src/components/BodyTeleop/StatusBar.jsx b/src/components/BodyTeleop/StatusBar.jsx
index 5288643a9..c4287748f 100644
--- a/src/components/BodyTeleop/StatusBar.jsx
+++ b/src/components/BodyTeleop/StatusBar.jsx
@@ -13,8 +13,8 @@ const PACKET_LOSS_POOR = 0.02;
 const RTT_POOR_MS = 250;
 
 const QUALITY_INDICATOR = {
-  good: { color: '#22c967', label: 'connected' },
-  poor: { color: '#f5c542', label: 'poor connection' },
+  good: { color: 'var(--color-success)', label: 'connected' },
+  poor: { color: 'var(--color-warning)', label: 'poor connection' },
 };
 
 const STATS_ROWS = [
@@ -273,28 +273,28 @@ export const StatsPanel = ({ isLandscape, stats, latency, latencyHistory }) => {
           if (showInCompact == false && compact) return;
           return (
             <div key={key} className="flex justify-between leading-tight md:py-[3px]">
-              <span className={`${textSize} text-white/45 mr-1.5`}>{label}</span>
-              <span className={`${textSize} text-white/[0.85] text-right min-w-16`}>{stats?.[key] ?? '--'}</span>
+              <span className={`${textSize} text-content/45 mr-1.5`}>{label}</span>
+              <span className={`${textSize} text-content/85 text-right min-w-16`}>{stats?.[key] ?? '--'}</span>
             </div>
           )
         })}
       </div>
-      {!compact && <div className="h-px bg-white/[0.08] my-px md:my-[5px]" />}
+      {!compact && <div className="h-px bg-content/8 my-px md:my-[5px]" />}
       <div>
-        {!compact && <div className="text-[7px] font-bold text-white/35 tracking-[0.5px] leading-tight py-[2px] pb-px md:text-[11px]">{"FRAME LATENCY"}</div>}
+        {!compact && <div className="text-[7px] font-bold text-content/35 tracking-[0.5px] leading-tight py-[2px] pb-px md:text-[11px]">{"FRAME LATENCY"}</div>}
         {LATENCY_LAYERS.map(({ label, key, labelColor }) => (
           <div key={label} className="flex justify-between leading-tight md:py-[3px]">
             <span className={`${textSize} mr-1.5 md:mr-[20px]`} style={{ color: labelColor }}>{label}</span>
-            <span className={`${textSize} text-nowrap text-white/[0.85] text-right`}>{fmtMs(latency?.[key])}</span>
+            <span className={`${textSize} text-nowrap text-content/85 text-right`}>{fmtMs(latency?.[key])}</span>
           </div>
         ))}
         <div className="flex justify-between leading-tight md:py-[3px]">
-          <span className={`${textSize} mr-1.5 md:mr-[18px]`} style={{ fontWeight: 700, color: 'rgba(255,255,255,0.65)' }}>Frame Latency</span>
-          <span className={`${textSize} text-white/[0.85] text-right`} style={{ fontWeight: 700 }}>{fmtMs(latency?.totalMs)}</span>
+          <span className={`${textSize} mr-1.5 md:mr-[18px] text-content/65`} style={{ fontWeight: 700 }}>Frame Latency</span>
+          <span className={`${textSize} text-content/85 text-right`} style={{ fontWeight: 700 }}>{fmtMs(latency?.totalMs)}</span>
         </div>
       </div>
-      <canvas ref={latencyCanvasRef} className={`${compact ? "w-[100px] self-stretch": "w-full h-[30px] md:h-[90px] mt-1"} rounded-[3px] bg-black/30 md:rounded-[6px]`} />
-      {!compact && <div className="h-px bg-white/[0.08] my-px md:my-[5px]" />}
+      <canvas ref={latencyCanvasRef} className={`${compact ? "w-[100px] self-stretch": "w-full h-[30px] md:h-[90px] mt-1"} rounded-[3px] bg-scrim/30 md:rounded-[6px]`} />
+      {!compact && <div className="h-px bg-content/8 my-px md:my-[5px]" />}
     </div>
   );
 };
@@ -309,11 +309,11 @@ const StatsMenu = ({
   return (
     <div ref={wrapperRef}>
       <div
-        className="group flex items-center justify-center h-9 px-3.5 rounded-[18px] cursor-pointer select-none bg-glass hover:!bg-black/60"
+        className="group flex items-center justify-center h-9 px-3.5 rounded-[18px] cursor-pointer select-none bg-glass hover:!bg-scrim/60"
         onClick={toggleStats}
         title="Toggle stats"
       >
-        <span className="text-[13px] font-semibold tracking-[0.5px] uppercase text-center leading-none text-white/60 group-hover:text-white/90">
+        <span className="text-[13px] font-semibold tracking-[0.5px] uppercase text-center leading-none text-content/60 group-hover:text-content/90">
           stats
         </span>
       </div>
@@ -341,12 +341,12 @@ const StatusBar = ({
           style={{ backgroundColor: indicator.color }}
           title={indicator.label}
         />
-        <span className="text-base hidden xxs:inline text-white/70">{stats?.rtt ?? '--'}</span>
+        <span className="text-base hidden xxs:inline text-content/70">{stats?.rtt ?? '--'}</span>
       </div>
       {battery && (
         <div className="flex items-center justify-center gap-2 h-10 px-3.5">
-          <BatteryIcon style={{ fontSize: 20, color: 'rgba(255, 255, 255, 0.7)' }} />
-          <span className="text-base text-white/70 w-9">{battery.level}%</span>
+          <BatteryIcon className="text-content/70" style={{ fontSize: 20 }} />
+          <span className="text-base text-content/70 w-9">{battery.level}%</span>
         </div>
       )}
       <StatsMenu
diff --git a/src/components/BodyTeleop/Video.jsx b/src/components/BodyTeleop/Video.jsx
index 8be12cb92..c315c7c2d 100644
--- a/src/components/BodyTeleop/Video.jsx
+++ b/src/components/BodyTeleop/Video.jsx
@@ -16,12 +16,12 @@ const ConnectOverlay = ({ connectionState, error, onConnect }) => {
       <div className="flex flex-col items-center gap-3 pointer-events-auto">
         {connecting ? (
           <>
-            <CircularProgress style={{ color: 'rgba(255, 255, 255, 0.7)' }} thickness={4} size={40} />
-            <span className="text-xs text-white/50">Connecting...</span>
+            <CircularProgress className="text-content/70" thickness={4} size={40} />
+            <span className="text-xs text-content/50">Connecting...</span>
           </>
         ) : canRetry ? (
           <Button
-            className="flex items-center gap-2 rounded-3xl px-6 py-2.5 text-white text-sm font-medium normal-case bg-red-600/60 hover:bg-red-600/70 cursor-pointer"
+            className="flex items-center gap-2 rounded-3xl px-6 py-2.5 text-content text-sm font-medium normal-case bg-danger/60 hover:bg-danger/70 cursor-pointer"
             onClick={onConnect}
             disableRipple
           >
@@ -30,7 +30,7 @@ const ConnectOverlay = ({ connectionState, error, onConnect }) => {
           </Button>
         ) : null}
         {error && (
-          <div className={`max-w-[280px] md:max-w-[450px] rounded-lg px-3 py-1.5 text-center text-xs text-[#fca5a5] !bg-[rgba(220,38,38,0.4)] !select-text`}>
+          <div className="max-w-[280px] md:max-w-[450px] rounded-lg px-3 py-1.5 text-center text-xs text-danger-content !bg-danger/40 !select-text">
             {error}
           </div>
         )}
@@ -70,7 +70,7 @@ const Video = ({
   }, [connectionTimeLabel]);
 
   return (
-    <div ref={containerRef} className={`relative w-full ${className} bg-black overflow-hidden`} style={{ touchAction: 'none' }}>
+    <div ref={containerRef} className={`relative w-full ${className} bg-scrim overflow-hidden`} style={{ touchAction: 'none' }}>
       <video
         ref={videoRef}
         autoPlay
@@ -82,7 +82,7 @@ const Video = ({
         className={`w-full h-full pointer-events-none object-contain`}
       />
       {connected && connectionTimeLabel && (
-        <div className={`absolute bottom-5 left-1/2 z-10 -translate-x-1/2 select-none rounded bg-black/50 px-2 py-0.5 text-sm leading-4 text-white/70 pointer-events-none transition-opacity duration-500 ease-out ${showConnectionTime ? 'opacity-100' : 'opacity-0'}`}>
+        <div className={`absolute bottom-5 left-1/2 z-10 -translate-x-1/2 select-none rounded bg-scrim/50 px-2 py-0.5 text-sm leading-4 text-content/70 pointer-events-none transition-opacity duration-500 ease-out ${showConnectionTime ? 'opacity-100' : 'opacity-0'}`}>
           {`connected in ${connectionTimeLabel}`}
         </div>
       )}
diff --git a/src/components/BodyTeleop/index.jsx b/src/components/BodyTeleop/index.jsx
index 6213c04cc..a6a4bbceb 100644
--- a/src/components/BodyTeleop/index.jsx
+++ b/src/components/BodyTeleop/index.jsx
@@ -127,26 +127,26 @@ const BodyTeleop = ({ dongleId, device, onClose }) => {
   };
 
   return (
-    <div className="fixed top-0 left-0 w-screen h-full z-[1300] bg-[#030404]">
+    <div className="fixed top-0 left-0 w-screen h-full z-[1300] bg-canvas-deep">
       <div className={`
-        absolute inset-0 bg-[#030404] flex flex-col touch-none
+        absolute inset-0 bg-canvas-deep flex flex-col touch-none
         overflow-hidden select-none [-webkit-touch-callout:none] [-webkit-text-size-adjust:none]
         mt-safe-top mb-safe-bottom ml-safe-left mr-safe-right
       `}>
         <div
           className={isLandscape
             ? 'absolute left-2 top-2 z-20 flex items-center gap-1'
-            : 'flex items-center px-3 py-2 bg-[#1D2225] border-b border-white/10 min-h-[64px] z-10'}
+            : 'flex items-center px-3 py-2 bg-surface border-b border-content/10 min-h-[64px] z-10'}
         >
           <button
-            className={isLandscape ? 'flex items-center rounded-full hover:text-white/90 text-white/60 p-2 w-10 h-10 bg-glass' : 'text-white p-2'}
+            className={isLandscape ? 'flex items-center rounded-full hover:text-content/90 text-content/60 p-2 w-10 h-10 bg-glass' : 'text-content p-2'}
             onClick={handleClose}
           >
             <ArrowBackBold style={{ fontSize: 20 }} />
           </button>
           <div
             className={isLandscape
-              ? 'rounded-[20px] px-3.5 h-10 flex items-center text-base font-medium text-white bg-glass border-0'
+              ? 'rounded-[20px] px-3.5 h-10 flex items-center text-base font-medium text-content bg-glass border-0'
               : 'text-base font-medium ml-2 flex-1'}
           >
             {deviceName}
@@ -170,7 +170,7 @@ const BodyTeleop = ({ dongleId, device, onClose }) => {
         <Video key="teleop-video" {...videoProps} className={isLandscape ? "h-full" : started ? "aspect-[16/9]" : "flex-1"} />
         { connected && notCar && !started && (
           <div className="absolute w-full bottom-36 2xl:bottom-12 pointer-events-none text-center select-none">
-            <span className="text-sm md:text-base text-white/70">Turn on comma body ignition to remote control</span>
+            <span className="text-sm md:text-base text-content/70">Turn on comma body ignition to remote control</span>
           </div>
         )}
         {connected && (
diff --git a/src/components/CommacareBadge.jsx b/src/components/CommacareBadge.jsx
index a35e0f69c..3d96b0222 100644
--- a/src/components/CommacareBadge.jsx
+++ b/src/components/CommacareBadge.jsx
@@ -1,47 +1,21 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core';
 
-import Colors from '../colors';
 import CommacareIcon from '../icons/commacare.png';
 
 export const COMMACARE_URL = 'https://comma.ai/connect#what-is-commacare';
 
-const styles = () => ({
-  pill: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    padding: '6px 14px 6px 12px',
-    borderRadius: 12,
-    border: `1px solid ${Colors.green300}`,
-    color: Colors.green300,
-    fontWeight: 600,
-    letterSpacing: '0.04em',
-    lineHeight: 1,
-    textDecoration: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 150ms',
-    '&:hover': {
-      backgroundColor: 'rgba(81, 191, 135, 0.1)',
-    },
-  },
-  pillIcon: {
-    width: 24,
-    marginRight: 12,
-  },
-});
-
-const CommacareBadge = ({ classes, size = 22, style, variant = 'icon', onClick }) => {
+const CommacareBadge = ({ size = 22, style, variant = 'icon', onClick }) => {
   if (variant === 'pill') {
     return (
       <a
-        className={classes.pill}
+        className="inline-flex cursor-pointer items-center rounded-xl border border-care py-1.5 pl-3 pr-3.5 font-semibold leading-none tracking-[0.04em] text-care no-underline transition-colors hover:bg-success/10"
         style={style}
         href={COMMACARE_URL}
         target="_blank"
         rel="noreferrer"
         onClick={(e) => e.stopPropagation()}
       >
-        <img src={CommacareIcon} alt="" className={classes.pillIcon} />
+        <img src={CommacareIcon} alt="" className="mr-3 w-6" />
         commacare
       </a>
     );
@@ -55,4 +29,4 @@ const CommacareBadge = ({ classes, size = 22, style, variant = 'icon', onClick }
   );
 };
 
-export default withStyles(styles)(CommacareBadge);
+export default CommacareBadge;
diff --git a/src/components/Dashboard/AddDevice.jsx b/src/components/Dashboard/AddDevice.jsx
index 73e475748..8d1208798 100644
--- a/src/components/Dashboard/AddDevice.jsx
+++ b/src/components/Dashboard/AddDevice.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import qs from 'query-string';
 import { BarcodeDetector } from 'barcode-detector/ponyfill';
-import { withStyles, Typography, Button, Modal, Paper, Divider, CircularProgress } from '@material-ui/core';
+import { withStyles, Button, Modal, Paper, Divider, CircularProgress } from '@material-ui/core';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import * as Sentry from '@sentry/react';
 
@@ -12,7 +12,7 @@ import { selectDevice, updateDevices, analyticsEvent } from '../../actions';
 import { verifyPairToken, pairErrorToMessage } from '../../utils';
 import Colors from '../../colors';
 
-const styles = (theme) => ({
+const styles = {
   titleContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -43,8 +43,8 @@ const styles = (theme) => ({
   },
   modal: {
     position: 'absolute',
-    padding: theme.spacing.unit * 2,
-    width: theme.spacing.unit * 50,
+    padding: 16,
+    width: 400,
     maxWidth: '90%',
     left: '50%',
     top: '50%',
@@ -67,7 +67,7 @@ const styles = (theme) => ({
     '&::before': {
       content: '\'\'',
       position: 'absolute',
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backgroundColor: 'color-mix(in srgb, var(--color-scrim) 80%, transparent)',
       top: -1,
       bottom: -1,
       right: -1,
@@ -96,7 +96,7 @@ const styles = (theme) => ({
     width: '100%',
     height: '100%',
   },
-});
+};
 
 class AddDevice extends Component {
   constructor(props) {
@@ -385,38 +385,38 @@ class AddDevice extends Component {
       <>
         <Button onClick={this.onOpenModal} className={ classes.addButton } style={ buttonStyle }>
           { buttonText }
-          { buttonIcon && <AddCircleOutlineIcon style={{ color: 'rgba(255, 255, 255, 0.3)' }} /> }
+          { buttonIcon && <AddCircleOutlineIcon className="text-content/30" /> }
         </Button>
         <Modal aria-labelledby="add-device-modal" open={ modalOpen } onClose={ this.modalClose }>
           <Paper className={ classes.modal }>
             <div className={ classes.titleContainer }>
-              <Typography variant="title">Pair device</Typography>
-              <Typography variant="caption">
+              <h1>Pair device</h1>
+              <span className="type-caption">
                 scan QR code
-              </Typography>
+              </span>
             </div>
             <Divider className={ classes.divider } />
             { hasCamera === false
               ? (
                 <>
-                  <Typography style={{ marginBottom: 5 }}>
+                  <p style={{ marginBottom: 5 }}>
                     { cameraError || 'Camera not found, please enable camera access.' }
-                  </Typography>
+                  </p>
                   <br />
-                  <Typography>
+                  <p>
                     You can also scan the QR code using any other QR code
                     reader application.
-                  </Typography>
+                  </p>
                 </>
               )
               : (
                 <div className={ `${classes.videoContainer} ${videoContainerOverlay}` }>
                   <canvas className={ classes.canvas } ref={ this.onCanvasRef } />
                   <div className={ classes.videoOverlay }>
-                    { pairLoading && <CircularProgress size="10vw" style={{ color: '#525E66' }} /> }
+                    { pairLoading && <CircularProgress size="10vw" className="text-progress" /> }
                     { pairError && (
                     <>
-                      <Typography>{ pairError }</Typography>
+                      <p>{ pairError }</p>
                       <Button className={ classes.retryButton } onClick={ this.restart }>
                         try again
                       </Button>
@@ -424,10 +424,10 @@ class AddDevice extends Component {
                     ) }
                     { pairDongleId && (
                     <>
-                      <Typography>
+                      <p>
                         {'Successfully paired device '}
                         <span className={ classes.pairedDongleId }>{ pairDongleId }</span>
-                      </Typography>
+                      </p>
                       <Button className={ classes.retryButton } onClick={ this.modalClose }>
                         close
                       </Button>
diff --git a/src/components/Dashboard/DeviceList.jsx b/src/components/Dashboard/DeviceList.jsx
index d99accb3f..aba068797 100644
--- a/src/components/Dashboard/DeviceList.jsx
+++ b/src/components/Dashboard/DeviceList.jsx
@@ -3,88 +3,19 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
 
-import { withStyles, Typography, IconButton } from '@material-ui/core';
+import { IconButton } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
 
 import MyCommaAuth from '@commaai/my-comma-auth';
 import { devices as Devices } from '../../api';
 
 import { updateDevices } from '../../actions';
-import Colors from '../../colors';
 import { deviceNamePretty, deviceIsOnline, filterRegularClick, emptyDevice } from '../../utils';
 import VisibilityHandler from '../VisibilityHandler';
 
 import AddDevice from './AddDevice';
 import DeviceSettingsModal from './DeviceSettingsModal';
 
-const styles = (theme) => ({
-  deviceList: {
-    overflow: 'auto',
-  },
-  device: {
-    textDecoration: 'none',
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '16px 32px',
-    '&.isSelected': {
-      backgroundColor: 'rgba(0, 0, 0, 0.25)',
-    },
-  },
-  settingsButton: {
-    height: 46,
-    width: 46,
-    color: Colors.white30,
-    transition: 'color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    '&:hover': {
-      color: Colors.white,
-    },
-  },
-  deviceOnline: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: Colors.green400,
-  },
-  deviceOffline: {
-    backgroundColor: Colors.grey400,
-  },
-  deviceInfo: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  deviceName: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    marginLeft: 16,
-  },
-  deviceAlias: {
-    fontWeight: 600,
-  },
-  deviceId: {
-    color: '#74838e',
-  },
-  editDeviceIcon: {
-    color: 'white',
-    '&:hover': {
-      color: theme.palette.grey[100],
-    },
-  },
-  nameField: {
-    marginRight: theme.spacing.unit,
-  },
-  saveButton: {
-    marginRight: theme.spacing.unit,
-  },
-  textField: {
-    marginBottom: theme.spacing.unit,
-  },
-  addDeviceContainer: {
-    '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.25)' },
-  },
-});
-
 class DeviceList extends Component {
   constructor(props) {
     super(props);
@@ -123,35 +54,35 @@ class DeviceList extends Component {
   }
 
   renderDevice(device) {
-    const { classes, handleDeviceSelected, profile, selectedDevice } = this.props;
+    const { handleDeviceSelected, profile, selectedDevice } = this.props;
     const isSelectedCls = (selectedDevice === device.dongle_id) ? 'isSelected' : '';
-    const offlineCls = !deviceIsOnline(device) ? classes.deviceOffline : '';
+    const onlineCls = deviceIsOnline(device) ? 'bg-engaged' : 'bg-progress';
     return (
       <a
         key={device.dongle_id}
-        className={ `${classes.device} ${isSelectedCls}` }
+        className={`flex items-center justify-between px-8 py-4 no-underline [&.isSelected]:bg-scrim/25 ${isSelectedCls}`}
         onClick={ filterRegularClick(() => handleDeviceSelected(device.dongle_id)) }
         href={ `/${device.dongle_id}` }
       >
-        <div className={classes.deviceInfo}>
-          <div className={ `${classes.deviceOnline} ${offlineCls}` }>&nbsp;</div>
-          <div className={ classes.deviceName }>
-            <Typography className={classes.deviceAlias}>
+        <div className="flex items-center">
+          <div className={`h-1.5 w-1.5 rounded-[3px] ${onlineCls}`}>&nbsp;</div>
+          <div className="ml-4 flex flex-col justify-center">
+            <p className="font-semibold">
               {deviceNamePretty(device)}
-            </Typography>
-            <Typography variant="caption" className={classes.deviceId}>
+            </p>
+            <span className="type-caption text-content-subtle">
               { device.dongle_id }
-            </Typography>
+            </span>
           </div>
         </div>
         { (device.is_owner || (profile && profile.superuser))
           && (
           <IconButton
-            className={classes.settingsButton}
+            className="h-[46px] w-[46px] text-content/30 transition-colors hover:text-content"
             aria-label="device settings"
             onClick={ (ev) => this.handleOpenedSettingsModal(device.dongle_id, ev) }
           >
-            <SettingsIcon className={classes.settingsButtonIcon} />
+            <SettingsIcon />
           </IconButton>
           )}
       </a>
@@ -160,7 +91,7 @@ class DeviceList extends Component {
 
   render() {
     const { settingsModalDongleId } = this.state;
-    const { classes, device, selectedDevice: dongleId } = this.props;
+    const { device, selectedDevice: dongleId } = this.props;
 
     let { devices } = this.props;
     if (devices === null) {
@@ -193,12 +124,12 @@ class DeviceList extends Component {
       <>
         <VisibilityHandler onVisible={ this.onVisible } minInterval={ 10 } />
         <div
-          className={`scrollstyle ${classes.deviceList}`}
+          className="scrollstyle overflow-auto"
           style={{ height: 'calc(100vh - 64px)' }}
         >
           {devices.map(this.renderDevice)}
           {MyCommaAuth.isAuthenticated() && (
-            <div className={classes.addDeviceContainer}>
+            <div className="hover:bg-scrim/25">
               <AddDevice buttonText="add new device" buttonStyle={addButtonStyle} buttonIcon />
             </div>
           )}
@@ -219,4 +150,4 @@ const stateToProps = Obstruction({
   profile: 'profile',
 });
 
-export default connect(stateToProps)(withStyles(styles)(DeviceList));
+export default connect(stateToProps)(DeviceList);
diff --git a/src/components/Dashboard/DeviceSettingsModal.jsx b/src/components/Dashboard/DeviceSettingsModal.jsx
index 264a03e7f..60cda063c 100644
--- a/src/components/Dashboard/DeviceSettingsModal.jsx
+++ b/src/components/Dashboard/DeviceSettingsModal.jsx
@@ -9,8 +9,6 @@ import {
   IconButton,
   Modal,
   Paper,
-  TextField,
-  Typography,
   withStyles,
 } from '@material-ui/core';
 import CheckIcon from '@material-ui/icons/Check';
@@ -25,11 +23,11 @@ import { ErrorOutline } from '../../icons';
 import UploadQueue from '../Files/UploadQueue';
 import CommacareBadge, { COMMACARE_URL } from '../CommacareBadge';
 
-const styles = (theme) => ({
+const styles = {
   modal: {
     position: 'absolute',
-    padding: theme.spacing.unit * 2,
-    width: theme.spacing.unit * 50,
+    padding: 16,
+    width: 400,
     maxWidth: '90%',
     left: '50%',
     top: '40%',
@@ -37,7 +35,7 @@ const styles = (theme) => ({
     outline: 'none',
   },
   modalUnpair: {
-    width: theme.spacing.unit * 45,
+    width: 360,
     maxWidth: '80%',
   },
   titleContainer: {
@@ -50,8 +48,8 @@ const styles = (theme) => ({
     textAlign: 'right',
   },
   form: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingTop: 8,
+    paddingBottom: 8,
   },
   formRow: {
     minHeight: 75,
@@ -61,9 +59,6 @@ const styles = (theme) => ({
     marginBottom: 5,
     backgroundColor: Colors.red500,
   },
-  textField: {
-    maxWidth: '70%',
-  },
   fabProgress: {
     position: 'absolute',
     top: 0,
@@ -71,7 +66,7 @@ const styles = (theme) => ({
     zIndex: 1,
   },
   wrapper: {
-    margin: theme.spacing.unit,
+    margin: 8,
     position: 'relative',
     display: 'inline-block',
   },
@@ -98,7 +93,7 @@ const styles = (theme) => ({
     padding: 10,
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 0, 0, 0.3)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 30%, transparent)',
     '& p': { display: 'inline-block', marginLeft: 10 },
     color: Colors.white,
   },
@@ -112,7 +107,7 @@ const styles = (theme) => ({
     '& a': { color: Colors.white, textDecoration: 'underline' },
     color: Colors.white,
   },
-});
+};
 
 const initialState = {
   deviceAlias: '',
@@ -280,12 +275,12 @@ class DeviceSettingsModal extends Component {
         >
           <Paper className={classes.modal}>
             <div className={ classes.titleContainer }>
-              <Typography variant="title">
+              <h1>
                 Device settings
-              </Typography>
-              <Typography variant="caption">
+              </h1>
+              <span className="type-caption">
                 { device.dongle_id }
-              </Typography>
+              </span>
             </div>
             <Divider />
             <div>
@@ -313,18 +308,20 @@ class DeviceSettingsModal extends Component {
             <div className={classes.form}>
               { this.state.error && (
               <div className={ classes.formRowError }>
-                <Typography>{ this.state.error }</Typography>
+                <p>{ this.state.error }</p>
               </div>
               ) }
               <div className={classes.formRow}>
-                <TextField
-                  id="device_alias"
-                  label="Device name"
-                  className={ classes.textField }
-                  value={ this.state.deviceAlias ? this.state.deviceAlias : '' }
-                  onChange={this.handleAliasChange}
-                  onKeyPress={ (ev) => this.callOnEnter(this.setDeviceAlias, ev) }
-                />
+                <label className="inline-flex max-w-[70%] flex-col" htmlFor="device_alias">
+                  <span className="ml-4 mt-1 text-xs text-content/70">Device name</span>
+                  <input
+                    id="device_alias"
+                    className="rounded-[20px] border border-surface-muted bg-transparent px-4 py-3 outline-none placeholder:text-content/30"
+                    value={ this.state.deviceAlias ? this.state.deviceAlias : '' }
+                    onChange={this.handleAliasChange}
+                    onKeyDown={ (ev) => this.callOnEnter(this.setDeviceAlias, ev) }
+                  />
+                </label>
                 { (this.props.device.alias !== this.state.deviceAlias || this.state.hasSavedAlias)
                 && (
                 <div className={classes.wrapper}>
@@ -336,16 +333,19 @@ class DeviceSettingsModal extends Component {
                 )}
               </div>
               <div className={classes.formRow}>
-                <TextField
-                  id="device_share"
-                  label="Share by email or user id"
-                  className={ classes.textField }
-                  value={this.state.shareEmail}
-                  onChange={this.handleEmailChange}
-                  variant="outlined"
-                  onKeyPress={ (ev) => this.callOnEnter(this.shareDevice, ev) }
-                  helperText="give another user read access to this device"
-                />
+                <label className="inline-flex max-w-[70%] flex-col" htmlFor="device_share">
+                  <span className="ml-4 mt-1 text-xs text-content/70">Share by email or user id</span>
+                  <input
+                    id="device_share"
+                    className="rounded-[20px] border border-surface-muted bg-transparent px-4 py-3 outline-none placeholder:text-content/30"
+                    value={this.state.shareEmail}
+                    onChange={this.handleEmailChange}
+                    onKeyDown={ (ev) => this.callOnEnter(this.shareDevice, ev) }
+                  />
+                  <span className="ml-2 mt-1 text-xs text-content/70">
+                    give another user read access to this device
+                  </span>
+                </label>
                 { (this.state.shareEmail.length > 0 || this.state.hasShared)
                 && (
                 <div className={classes.wrapper}>
@@ -372,19 +372,19 @@ class DeviceSettingsModal extends Component {
         >
           <Paper className={ `${classes.modal} ${classes.modalUnpair}` }>
             <div className={ classes.titleContainer }>
-              <Typography variant="title">
+              <h1>
                 Unpair device
-              </Typography>
-              <Typography variant="caption">
+              </h1>
+              <span className="type-caption">
                 { device.dongle_id }
-              </Typography>
+              </span>
             </div>
             <Divider />
             { this.state.unpairError
             && (
             <div className={ classes.unpairError }>
               <ErrorOutline />
-              <Typography>{ this.state.unpairError }</Typography>
+              <p>{ this.state.unpairError }</p>
             </div>
             )}
             { this.props.device.prime
@@ -392,7 +392,7 @@ class DeviceSettingsModal extends Component {
             <div className={ classes.unpairWarning }>
               <WarningIcon />
               {commacare ? (
-                <Typography>
+                <p>
                   Unpairing will also cancel comma prime and
                   {' '}
                   <strong>permanently end your commacare extended warranty.</strong>
@@ -400,9 +400,9 @@ class DeviceSettingsModal extends Component {
                   Your standard 1-year warranty still applies for any remaining time.
                   {' '}
                   <a href={COMMACARE_URL} target="_blank" rel="noreferrer">What is commacare?</a>
-                </Typography>
+                </p>
               ) : (
-                <Typography>Unpairing will also cancel the comma prime subscription for this device.</Typography>
+                <p>Unpairing will also cancel the comma prime subscription for this device.</p>
               )}
             </div>
             )}
@@ -415,7 +415,7 @@ class DeviceSettingsModal extends Component {
                 { this.state.unpaired ? 'Close' : 'Cancel' }
               </Button>
               { this.state.unpaired
-                ? <Typography variant="body2">Unpaired</Typography>
+                ? <aside className="type-body-strong">Unpaired</aside>
                 : (
                   <Button
                     variant="outlined"
diff --git a/src/components/Dashboard/DriveList.jsx b/src/components/Dashboard/DriveList.jsx
index ba8c6be65..70965663f 100644
--- a/src/components/Dashboard/DriveList.jsx
+++ b/src/components/Dashboard/DriveList.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
-import { withStyles, Typography } from '@material-ui/core';
 import FilterList from '@material-ui/icons/FilterList';
 
 import { devices as Devices } from '../../api';
@@ -15,27 +14,8 @@ import DriveListEmpty from './DriveListEmpty';
 import DriveListItem from './DriveListItem';
 import ScrollIntoView from '../ScrollIntoView'
 
-const styles = () => ({
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '8px 16px',
-  },
-  drives: {
-    padding: '0px 16px',
-    flex: '1',
-  },
-  endMessage: {
-    padding: 8,
-    textAlign: 'center',
-    marginBottom: 32,
-  },
-});
-
 const DriveList = (props) => {
-  const { dispatch, classes, device, dongleId, routes, lastRoutes } = props;
+  const { dispatch, device, dongleId, routes, lastRoutes } = props;
 
   const [deviceStats, setDeviceStats] = useState({});
   const [isTimeSelectOpen, setIsTimeSelectOpen] = useState(false);
@@ -71,8 +51,8 @@ const DriveList = (props) => {
     contentStatus = <DriveListEmpty device={device} routes={routes} />;
   } else if (routes && routes.length > 5) {
     contentStatus = (
-      <div className={classes.endMessage}>
-        <Typography>There are no more routes found in selected time range.</Typography>
+      <div className="mb-8 p-2 text-center">
+        <p>There are no more routes found in selected time range.</p>
       </div>
     );
   }
@@ -87,7 +67,7 @@ const DriveList = (props) => {
     const routesSize = displayRoutes.length
 
     content = (
-      <div className={`${classes.drives} DriveList`}>
+      <div className="DriveList flex-1 px-4">
         {displayRoutes.map((drive, index) => {
             // when the last item is in view, we fetch the next routes
             return (index === routesSize - 1 ?
@@ -113,24 +93,24 @@ const DriveList = (props) => {
     return (
       <div className="flex gap-2.5 md:gap-8 items-center px-1 justify-center xss:justify-start">
         <div className="flex flex-row items-center gap-1">
-          <Typography className="font-semibold text-white">
+          <p className="font-semibold text-content">
             { distance }
-          </Typography>
-          <Typography>
+          </p>
+          <p>
             { metric ? 'kilometers' : 'miles' }
-          </Typography>
+          </p>
         </div>
         <div className="flex flex-row items-center gap-1">
-          <Typography className="font-semibold text-white">
+          <p className="font-semibold text-content">
             { deviceStats.result.all.routes }
-          </Typography>
-          <Typography>drives</Typography>
+          </p>
+          <p>drives</p>
         </div>
         <div className="flex flex-row items-center gap-1">
-          <Typography className="font-semibold text-white">
+          <p className="font-semibold text-content">
             { Math.round(deviceStats.result.all.minutes / 60.0) }
-          </Typography>
-          <Typography>hours</Typography>
+          </p>
+          <p>hours</p>
         </div>
       </div>
     );
@@ -142,12 +122,11 @@ const DriveList = (props) => {
       <div className="flex flex-row justify-between mx-4 pb-2 gap-2 flex-wrap">
         { renderStats() }
         <button
-          className="w-full xxs:w-fit flex flex-row items-center justify-center text-white normal-case py-1 px-2 rounded-md whitespace-nowrap active:scale-[0.98]"
-          style={{ background: 'linear-gradient(to bottom, #30373B 0%, #1D2225 150%)' }}
+          className="w-full xxs:w-fit flex flex-row items-center justify-center text-content normal-case py-1 px-2 rounded-md whitespace-nowrap active:scale-[0.98] bg-linear-to-b from-surface-raised to-surface"
           onClick={() => setIsTimeSelectOpen(true)}
         >
           <FilterList className="mr-2 text-xl" />
-          <Typography>Filter</Typography>
+          <p>Filter</p>
         </button>
       </div>
       {content}
@@ -164,4 +143,4 @@ const stateToProps = Obstruction({
   device: 'device',
 });
 
-export default connect(stateToProps)(withStyles(styles)(DriveList));
+export default connect(stateToProps)(DriveList);
diff --git a/src/components/Dashboard/DriveListEmpty.jsx b/src/components/Dashboard/DriveListEmpty.jsx
index 2147f2567..9895eced2 100644
--- a/src/components/Dashboard/DriveListEmpty.jsx
+++ b/src/components/Dashboard/DriveListEmpty.jsx
@@ -1,33 +1,21 @@
 import React from 'react';
-import { Grid, Typography, withStyles } from '@material-ui/core';
 
-import { useWindowWidth } from '../../hooks/window';
-
-const styles = () => ({
-  zeroState: {
-    flex: '0',
-  },
-});
-
-const DriveListEmpty = (props) => {
-  const windowWidth = useWindowWidth();
-  const { classes, device, routes } = props;
+const DriveListEmpty = ({ device, routes }) => {
   let zeroRidesEle = null;
 
   if (device && routes === null) {
-    zeroRidesEle = <Typography>Loading...</Typography>;
+    zeroRidesEle = <p>Loading...</p>;
   } else if (routes?.length === 0) {
     zeroRidesEle = (
-      <Typography>No routes found in selected time range.</Typography>
+      <p>No routes found in selected time range.</p>
     );
   }
 
-  const containerPadding = windowWidth > 520 ? 36 : 16;
   return (
-    <Grid container className={classes.zeroState} style={{ padding: `16px ${containerPadding}px` }}>
+    <div className="flex w-full flex-[0_1_0%] px-4 py-4 min-[521px]:px-9">
       {zeroRidesEle}
-    </Grid>
+    </div>
   );
 };
 
-export default withStyles(styles)(DriveListEmpty);
+export default DriveListEmpty;
diff --git a/src/components/Dashboard/DriveListItem.jsx b/src/components/Dashboard/DriveListItem.jsx
index 00f42ccaf..c804f421a 100644
--- a/src/components/Dashboard/DriveListItem.jsx
+++ b/src/components/Dashboard/DriveListItem.jsx
@@ -2,62 +2,19 @@ import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import dayjs from 'dayjs';
 
-import { withStyles, Grid, Typography } from '@material-ui/core';
-
 import { pushTimelineRange } from '../../actions';
 import { fetchEvents, fetchLocations } from '../../actions/cached';
-import Colors from '../../colors';
 import { useWindowWidth } from '../../hooks/window';
 import { RightArrow } from '../../icons';
 import { formatDriveDuration, filterRegularClick } from '../../utils';
 import { isMetric, KM_PER_MI } from '../../utils/conversions';
 import Timeline from '../Timeline';
 
-const styles = () => ({
-  drive: {
-    background: 'linear-gradient(to bottom, #30373B 0%, #1D2225 100%)',
-    borderTop: '1px solid rgba(255, 255, 255, .05)',
-    borderRadius: 8,
-    display: 'flex',
-    flexDirection: 'column',
-    marginBottom: 12,
-    overflow: 'hidden',
-    padding: 0,
-    transition: 'background .2s',
-    textDecoration: 'none',
-    '&:hover': {},
-  },
-  driveHeader: {
-    alignItems: 'center',
-  },
-  driveHeaderIntro: {
-    display: 'flex',
-  },
-  driveGridItem: {
-    flexGrow: 1,
-  },
-  driveGridItemRightAlign: {
-    textAlign: 'right',
-  },
-  driveHeaderIntroSmall: {
-    justifyContent: 'center',
-  },
-  driveArrow: {
-    color: Colors.grey500,
-    height: '100%',
-    marginLeft: '25%',
-    width: 32,
-  },
-  firstLine: {
-    fontWeight: 600,
-  },
-});
-
 const DriveListItem = (props) => {
   const el = useRef();
   const [isVisible, setVisible] = useState(false);
   const windowWidth = useWindowWidth();
-  const { classes, dispatch, drive } = props;
+  const { dispatch, drive } = props;
 
   useEffect(() => {
     const onScroll = () => {
@@ -117,35 +74,35 @@ const DriveListItem = (props) => {
   return (
     <a
       key={drive.fullname}
-      className={`${classes.drive} DriveEntry`}
+      className="DriveEntry mb-3 flex flex-col overflow-hidden rounded-lg border-t border-content/5 bg-linear-to-b from-surface-raised to-surface p-0 no-underline transition-colors"
       ref={el}
       href={`/${drive.dongle_id}/${drive.log_id}`}
       onClick={onClick}
     >
-      <div className={classes.driveHeader} style={!small ? { padding: '18px 32px' } : { padding: 18 }}>
-        <Grid container>
-          <div className={classes.driveGridItem} style={gridStyle.date}>
-            <Typography className={classes.firstLine}>{startDate}</Typography>
-            <Typography>{`${startTime} to ${endTime}`}</Typography>
+      <div className="items-center" style={!small ? { padding: '18px 32px' } : { padding: 18 }}>
+        <div className="flex w-full flex-wrap">
+          <div className="grow" style={gridStyle.date}>
+            <p className="font-semibold">{startDate}</p>
+            <p>{`${startTime} to ${endTime}`}</p>
           </div>
-          <div className={`${classes.driveGridItem} ${small && classes.driveGridItemRightAlign}`} style={gridStyle.dur}>
-            <Typography className={classes.firstLine}>{duration}</Typography>
-            <Typography>{distance}</Typography>
+          <div className={`grow ${small ? 'text-right' : ''}`} style={gridStyle.dur}>
+            <p className="font-semibold">{duration}</p>
+            <p>{distance}</p>
           </div>
-          <div className={classes.driveGridItem} style={gridStyle.origin}>
-            <Typography className={classes.firstLine}>{drive.startLocation?.place}</Typography>
-            <Typography>{drive.startLocation?.details}</Typography>
+          <div className="grow" style={gridStyle.origin}>
+            <p className="font-semibold">{drive.startLocation?.place}</p>
+            <p>{drive.startLocation?.details}</p>
           </div>
-          <div className={`${classes.driveGridItem} ${small && classes.driveGridItemRightAlign}`} style={gridStyle.dest}>
-            <Typography className={classes.firstLine}>{drive.endLocation?.place}</Typography>
-            <Typography>{drive.endLocation?.details}</Typography>
+          <div className={`grow ${small ? 'text-right' : ''}`} style={gridStyle.dest}>
+            <p className="font-semibold">{drive.endLocation?.place}</p>
+            <p>{drive.endLocation?.details}</p>
           </div>
           {!small && (
-            <div className={classes.driveGridItem} style={gridStyle.arrow}>
-              <RightArrow className={classes.driveArrow} />
+            <div className="grow" style={gridStyle.arrow}>
+              <RightArrow className="ml-[25%] h-full w-8 text-progress" />
             </div>
           )}
-        </Grid>
+        </div>
       </div>
       <Timeline
         route={drive}
@@ -156,4 +113,4 @@ const DriveListItem = (props) => {
   );
 };
 
-export default connect(() => ({}))(withStyles(styles)(DriveListItem));
+export default connect()(DriveListItem);
diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx
index 1bd585efe..2f6dea3d3 100644
--- a/src/components/Dashboard/index.jsx
+++ b/src/components/Dashboard/index.jsx
@@ -13,7 +13,7 @@ const Prime = lazy(() => import('../Prime'));
 const DashboardLoading = () => (
   <Grid container alignItems="center" style={{ width: '100%', height: '100vh' }}>
     <Grid item align="center" xs={12}>
-      <CircularProgress size="10vh" style={{ color: '#525E66' }} />
+      <CircularProgress size="10vh" className="text-progress" />
     </Grid>
   </Grid>
 );
diff --git a/src/components/DeviceInfo/index.jsx b/src/components/DeviceInfo/index.jsx
index 23568f7d0..3b190c576 100644
--- a/src/components/DeviceInfo/index.jsx
+++ b/src/components/DeviceInfo/index.jsx
@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
 import dayjs from 'dayjs';
 
-import { withStyles, Typography, CircularProgress, Popper, Tooltip } from '@material-ui/core';
+import { withStyles, CircularProgress, Popper, Tooltip } from '@material-ui/core';
 
 import { athena as Athena } from '../../api';
 import { analyticsEvent, primeNav, streamNav, fetchDeviceNotCar } from '../../actions';
@@ -16,7 +16,7 @@ import VisibilityHandler from '../VisibilityHandler';
 import CommacareBadge from '../CommacareBadge';
 import { LivestreamIcon, CarBatteryIcon, CameraIcon, GamepadIcon } from '../../icons';
 
-const styles = (theme) => ({
+const styles = () => ({
   container: {
     borderBottom: `1px solid ${Colors.white10}`,
     display: 'flex',
@@ -24,30 +24,19 @@ const styles = (theme) => ({
     minHeight: 64,
     justifyContent: 'center',
   },
-  row: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  columnGap: {
-    columnGap: theme.spacing.unit * 4,
-  },
-  bold: {
-    fontWeight: 600,
-  },
   button: {
     backgroundColor: Colors.white,
     color: Colors.grey900,
     '&:hover': {
-      background: '#ddd',
+      background: 'var(--color-field-hover)',
       color: Colors.grey900,
     },
     '&:disabled': {
-      background: '#ddd',
+      background: 'var(--color-field-hover)',
       color: Colors.grey900,
     },
     '&:disabled:hover': {
-      background: '#ddd',
+      background: 'var(--color-field-hover)',
       color: Colors.grey900,
     },
   },
@@ -63,13 +52,6 @@ const styles = (theme) => ({
       color: Colors.lightGrey600,
     },
   },
-  buttonRow: {
-    justifyContent: 'center',
-  },
-  spaceAround: {
-    display: 'flex',
-    justifyContent: 'space-around',
-  },
   carBattery: {
     padding: '5px 16px',
     borderRadius: 15,
@@ -129,11 +111,11 @@ const styles = (theme) => ({
       height: '10px',
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '#d1d1d1',
+      backgroundColor: 'var(--color-field-muted)',
       borderRadius: '8px',
     },
     '&::-webkit-scrollbar-track': {
-      backgroundColor: '#272c2f',
+      backgroundColor: 'var(--color-surface-muted)',
     },
   },
   scrollSnapItem: {
@@ -143,10 +125,6 @@ const styles = (theme) => ({
     maxWidth: '450px',
     margin: '0',
   },
-  buttonIcon: {
-    fontSize: 20,
-    marginLeft: theme.spacing.unit,
-  },
   popover: {
     borderRadius: 22,
     padding: '8px 16px',
@@ -322,7 +300,7 @@ class DeviceInfo extends Component {
           <div className={`flex flex-row justify-between items-center gap-4 md:my-2 my-4 pl-1 flex-wrap`}>
             <div className={`flex flex-row gap-4 items-center shrink-0`}>
               {commacare && <CommacareBadge onClick={() => this.props.dispatch(primeNav(true))} />}
-              <Typography variant="title">{truncateName(deviceNamePretty(device))}</Typography>
+              <h1>{truncateName(deviceNamePretty(device))}</h1>
             </div>
             { this.renderButtons() }
           </div>
@@ -406,8 +384,8 @@ class DeviceInfo extends Component {
               disabled={ !deviceIsOnline(device) }
             >
               { bodyTeleopEnabled
-                ? <GamepadIcon className='text-black' />
-                : <LivestreamIcon className='text-black' />}
+                ? <GamepadIcon className='text-content-inverse' />
+                : <LivestreamIcon className='text-content-inverse' />}
             </button>
           </Tooltip>
         )}
@@ -425,7 +403,7 @@ class DeviceInfo extends Component {
             >
               { snapshot.fetching
                 ? <CircularProgress size={ 19 } />
-                : <CameraIcon className='text-black' />}
+                : <CameraIcon className='text-content-inverse' />}
             </button>
           </Tooltip>
         )}
@@ -436,7 +414,7 @@ class DeviceInfo extends Component {
           { deviceIsOnline(device) ? (
             <>
               <CarBatteryIcon className="text-[20px] mr-1" />
-              <Typography className='w-[45px]'>{ batteryText }</Typography>
+              <p className="w-[45px]">{ batteryText }</p>
             </>
           ) : (
             <Tooltip
@@ -444,7 +422,7 @@ class DeviceInfo extends Component {
               title={pingTooltip}
               placement="bottom"
             >
-              <Typography>device offline</Typography>
+              <p>device offline</p>
             </Tooltip>
           )}
         </div>
@@ -454,7 +432,7 @@ class DeviceInfo extends Component {
           placement="bottom"
           anchorEl={ this.snapshotButtonRef.current }
         >
-          <Typography>{ error }</Typography>
+          <p>{ error }</p>
         </Popper>
       </div>
     );
@@ -465,16 +443,16 @@ class DeviceInfo extends Component {
     if (!src) {
       return (
         <div className={ classes.snapshotImageError }>
-          <Typography>
+          <p>
             { isFront && 'Interior' }
             {' '}
             snapshot not available
-          </Typography>
+          </p>
           { isFront
             && (
-            <Typography>
+            <p>
               Enable &ldquo;Record and Upload Driver Camera&rdquo; on your device for interior camera snapshots
-            </Typography>
+            </p>
             )}
         </div>
       );
diff --git a/src/components/DriveVideo/index.jsx b/src/components/DriveVideo/index.jsx
index d4eb61e27..7e455f9eb 100644
--- a/src/components/DriveVideo/index.jsx
+++ b/src/components/DriveVideo/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { CircularProgress, Typography } from '@material-ui/core';
+import { CircularProgress } from '@material-ui/core';
 import debounce from 'debounce';
 import Obstruction from 'obstruction';
 import ReactPlayer from 'react-player/file';
@@ -20,7 +20,7 @@ const VideoOverlay = ({ loading, error }) => {
     content = (
       <>
         <ErrorOutline className="mb-2" />
-        <Typography>{error}</Typography>
+        <p>{error}</p>
       </>
     );
   } else if (loading) {
@@ -29,7 +29,7 @@ const VideoOverlay = ({ loading, error }) => {
     return null;
   }
   return (
-    <div className="z-50 absolute h-full w-full bg-[#16181AAA]">
+    <div className="z-50 absolute h-full w-full bg-canvas/67">
       <div className="relative text-center top-[calc(50%_-_25px)]">
         {content}
       </div>
diff --git a/src/components/DriveView/Media.jsx b/src/components/DriveView/Media.jsx
index 4ead69820..dfd46d630 100644
--- a/src/components/DriveView/Media.jsx
+++ b/src/components/DriveView/Media.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
 
-import { withStyles, Divider, Typography, Menu, MenuItem, CircularProgress, Button, Popper, ListItem } from '@material-ui/core';
+import { withStyles, Divider, Menu, MenuItem, CircularProgress, Button, Popper, ListItem } from '@material-ui/core';
 import WarningIcon from '@material-ui/icons/Warning';
 import ContentCopyIcon from '@material-ui/icons/ContentCopy';
 import ShareIcon from '@material-ui/icons/Share';
@@ -45,12 +45,12 @@ const styles = () => ({
     display: 'flex',
     width: 'max-content',
     alignItems: 'center',
-    border: '1px solid rgba(255,255,255,.1)',
+    border: '1px solid color-mix(in srgb, var(--color-content) 10%, transparent)',
     borderRadius: 50,
   },
   mediaOption: {
     alignItems: 'center',
-    borderRight: '1px solid rgba(255,255,255,.1)',
+    borderRight: '1px solid color-mix(in srgb, var(--color-content) 10%, transparent)',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -66,24 +66,11 @@ const styles = () => ({
       borderRight: 'none',
     },
   },
-  mediaOptionDisabled: {
-    cursor: 'auto',
-  },
-  mediaOptionIcon: {
-    backgroundColor: '#fff',
-    borderRadius: 3,
-    height: 20,
-    margin: '2px 0',
-    width: 30,
-  },
   mediaOptionText: {
     fontSize: 12,
     fontWeight: 500,
     textAlign: 'center',
   },
-  mediaSource: {
-    width: '100%',
-  },
   menuLoading: {
     position: 'absolute',
     outline: 'none',
@@ -164,45 +151,6 @@ const styles = () => ({
     color: Colors.white,
     '& p': { fontSize: '0.8rem' },
   },
-  noPrimePopover: {
-    borderRadius: 16,
-    padding: 16,
-    border: `1px solid ${Colors.white10}`,
-    backgroundColor: Colors.grey800,
-    marginTop: 12,
-    zIndex: 5,
-    '& p': {
-      fontSize: '0.9rem',
-      color: Colors.white,
-      margin: 0,
-    },
-  },
-  noPrimeHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-    '& p': {
-      fontSize: '1rem',
-      fontWeight: 500,
-    },
-  },
-  noPrimeButton: {
-    padding: '6px 24px',
-    borderRadius: 15,
-    textTransform: 'none',
-    minHeight: 'unset',
-    color: Colors.white,
-    backgroundColor: Colors.primeBlue50,
-    '&:disabled': {
-      background: '#ddd',
-      color: Colors.grey900,
-    },
-    '&:hover': {
-      color: Colors.white,
-      backgroundColor: Colors.primeBlue200,
-    },
-  },
 });
 
 const MediaType = {
@@ -583,14 +531,14 @@ class Media extends Component {
                   style={inView !== MediaType.VIDEO ? { opacity: 0.6 } : {}}
                   onClick={() => this.setState({ inView: MediaType.VIDEO })}
                 >
-                  <Typography className={classes.mediaOptionText}>Video</Typography>
+                  <p className={classes.mediaOptionText}>Video</p>
                 </div>
                 <div
                   className={classes.mediaOption}
                   style={inView !== MediaType.MAP ? { opacity: 0.6 } : { }}
                   onClick={() => this.setState({ inView: MediaType.MAP })}
                 >
-                  <Typography className={classes.mediaOptionText}>Map</Typography>
+                  <p className={classes.mediaOptionText}>Map</p>
                 </div>
               </div>
             )}
@@ -600,14 +548,14 @@ class Media extends Component {
               aria-haspopup="true"
               onClick={ (ev) => this.setState({ downloadMenu: ev.target }) }
             >
-              <Typography className={classes.mediaOptionText}>Files</Typography>
+              <p className={classes.mediaOptionText}>Files</p>
             </div>
             <div
               className={classes.mediaOption}
               aria-haspopup="true"
               onClick={ (ev) => this.setState({ moreInfoMenu: ev.target }) }
             >
-              <Typography className={classes.mediaOptionText}>More info</Typography>
+              <p className={classes.mediaOptionText}>More info</p>
             </div>
           </div>
         </div>
@@ -806,7 +754,7 @@ class Media extends Component {
           anchorEl={ dcamUploadInfo }
           className={ classes.dcameraUploadInfo }
         >
-          <Typography>make sure to enable the &ldquo;Record and Upload Driver Camera&rdquo; toggle</Typography>
+          <p>make sure to enable the &ldquo;Record and Upload Driver Camera&rdquo; toggle</p>
         </Popper>
       </>
     );
diff --git a/src/components/DriveView/index.jsx b/src/components/DriveView/index.jsx
index ef21a19ab..16e95b0be 100644
--- a/src/components/DriveView/index.jsx
+++ b/src/components/DriveView/index.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import dayjs from 'dayjs';
 
-import { IconButton, Typography } from '@material-ui/core';
+import { IconButton } from '@material-ui/core';
 
 import { popTimelineRange, pushTimelineRange, updateSegmentRange } from '../../actions';
 import { ArrowBackBold, CloseBold } from '../../icons';
@@ -48,7 +48,7 @@ class DriveView extends Component {
 
     return (
       <div className="DriveView">
-        <div className="flex flex-col rounded-lg m-4 bg-[linear-gradient(to_bottom,#30373B_0%,#272D30_10%,#1D2225_100%)]">
+        <div className="flex flex-col rounded-lg m-4 bg-linear-to-b from-surface-raised via-surface-muted via-10% to-surface">
           <div>
             <div className="items-center justify-between flex p-3 gap-2">
               <IconButton
@@ -58,7 +58,7 @@ class DriveView extends Component {
               >
                 <ArrowBackBold />
               </IconButton>
-              <div className="text-white text-lg font-medium">
+              <div className="text-content text-lg font-medium">
                 <span className="hidden sm:inline">{`${startDay} `}</span>
                 {`${startTime} - ${endTime}`}
               </div>
@@ -74,7 +74,7 @@ class DriveView extends Component {
           </div>
           <div className="p-3 md:p-8">
             {(routes && routes.length === 0)
-              ? <Typography>Route does not exist.</Typography>
+              ? <p>Route does not exist.</p>
               : <Media />}
           </div>
         </div>
diff --git a/src/components/ErrorFallback.jsx b/src/components/ErrorFallback.jsx
index c4e0f00be..0b53936a0 100644
--- a/src/components/ErrorFallback.jsx
+++ b/src/components/ErrorFallback.jsx
@@ -78,7 +78,7 @@ ${error.toString()}${componentStack}`;
         </p>
         <div className="flex flex-row gap-4">
           <button
-            className="flex items-center gap-1 bg-blue-600 rounded-md px-4 py-2 font-bold hover:bg-blue-500 transition-colors"
+            className="flex items-center gap-1 bg-action rounded-md px-4 py-2 font-bold hover:bg-action-hover transition-colors"
             type="button"
             onClick={reload}
           >
@@ -89,12 +89,12 @@ ${error.toString()}${componentStack}`;
       </div>
       <details className="mt-8">
         <summary>Show debugging information</summary>
-        <div className="relative bg-black rounded-xl mt-2 overflow-hidden">
+        <div className="relative bg-scrim rounded-xl mt-2 overflow-hidden">
           <pre className="select-all overflow-x-auto px-4 pt-4 pb-2 text-sm">
             {information}
           </pre>
           <button
-            className={`absolute right-2 top-2 flex rounded-md pl-2 pr-2 py-2 text-white font-bold transition-colors ${copied ? 'bg-green-500' : 'bg-gray-700 hover:bg-gray-600'}`}
+            className={`absolute right-2 top-2 flex rounded-md pl-2 pr-2 py-2 text-content font-bold transition-colors ${copied ? 'bg-success' : 'bg-surface-raised hover:bg-surface-muted'}`}
             type="button"
             aria-label={copied ? 'Copied' : 'Copy error'}
             onClick={copyError}
diff --git a/src/components/Files/UploadQueue.jsx b/src/components/Files/UploadQueue.jsx
index 15043f435..9f73847dc 100644
--- a/src/components/Files/UploadQueue.jsx
+++ b/src/components/Files/UploadQueue.jsx
@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
 
 import {
   withStyles,
-  Divider, Typography, CircularProgress, Button, Modal, Paper, LinearProgress,
+  Divider, CircularProgress, Button, Modal, Paper, LinearProgress,
 } from '@material-ui/core';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import WarningIcon from '@material-ui/icons/Warning';
@@ -14,10 +14,10 @@ import { deviceIsOnline, deviceOnCellular, deviceVersionAtLeast } from '../../ut
 import Colors from '../../colors';
 import ResizeHandler from '../ResizeHandler';
 
-const styles = (theme) => ({
+const styles = {
   modal: {
     position: 'absolute',
-    padding: theme.spacing.unit * 2,
+    padding: 16,
     width: 'max-content',
     maxWidth: '90%',
     left: '50%',
@@ -35,7 +35,7 @@ const styles = (theme) => ({
     textAlign: 'right',
   },
   uploadContainer: {
-    margin: `${theme.spacing.unit}px 0`,
+    margin: '8px 0',
     color: Colors.white90,
     textAlign: 'left',
     overflowY: 'auto',
@@ -100,11 +100,11 @@ const styles = (theme) => ({
   },
   cellularWarning: {
     backgroundColor: Colors.grey500,
-    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
+    padding: '12px 16px',
     borderRadius: 4,
     display: 'flex',
     flexDirection: 'column',
-    marginBottom: theme.spacing.unit,
+    marginBottom: 8,
     '& div': {
       display: 'flex',
       alignItems: 'center',
@@ -112,7 +112,7 @@ const styles = (theme) => ({
       '& svg': { marginRight: 8 },
     },
   },
-});
+};
 
 class UploadQueue extends Component {
   constructor(props) {
@@ -197,8 +197,8 @@ class UploadQueue extends Component {
         <Modal aria-labelledby="upload-queue-modal" open={ this.props.open } onClose={ this.props.onClose }>
           <Paper className={ classes.modal }>
             <div className={ classes.titleContainer }>
-              <Typography variant="title">Upload queue</Typography>
-              <Typography variant="caption" style={{ marginLeft: 8 }}>{ device.dongle_id }</Typography>
+              <h1>Upload queue</h1>
+              <span className="type-caption" style={{ marginLeft: 8 }}>{ device.dongle_id }</span>
             </div>
             <Divider />
             <div className={ classes.uploadContainer } style={{ maxHeight: (windowHeight * 0.90) - 98 }}>
diff --git a/src/components/IosPwaPopup/index.jsx b/src/components/IosPwaPopup/index.jsx
index 3246478c8..c1a8ebc8a 100644
--- a/src/components/IosPwaPopup/index.jsx
+++ b/src/components/IosPwaPopup/index.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import localforage from 'localforage';
-import { withStyles, Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
 import { Clear } from '@material-ui/icons';
 
 import MyCommaAuth from '@commaai/my-comma-auth';
@@ -121,8 +121,8 @@ class IosPwaPopup extends Component {
       <div className="fixed bottom-3 left-3 right-3 z-20">
         <div className={`${classes.box} xs:w-fit`}>
           <Clear className={ classes.hide } onClick={ this.hide } />
-          <Typography className={ classes.title }>Add to home screen</Typography>
-          <Typography>
+          <p className={ classes.title }>Add to home screen</p>
+          <p>
             Install this webapp on your home screen:
             {' '}
             <br />
@@ -131,7 +131,7 @@ class IosPwaPopup extends Component {
             <img className={classes.icon} src={IosShareIcon} width={35 / 2.2} height={44 / 2.2} alt="share" />
             {' '}
             and then &lsquo;Add to Home Screen&rsquo;
-          </Typography>
+          </p>
         </div>
       </div>
     );
diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx
index 1ea55f152..2a8a69a6f 100644
--- a/src/components/Navigation/index.jsx
+++ b/src/components/Navigation/index.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
 import ReactMapGL, { GeolocateControl, HTMLOverlay, Marker, Source, WebMercatorViewport, Layer } from 'react-map-gl';
-import { withStyles, Typography, Button } from '@material-ui/core';
+import { withStyles, Button } from '@material-ui/core';
 import { Clear } from '@material-ui/icons';
 import dayjs from 'dayjs';
 
@@ -75,11 +75,11 @@ const styles = () => ({
     flexGrow: 1,
     maxWidth: 125,
     '&:hover': {
-      background: '#ddd',
+      background: 'var(--color-field-hover)',
       color: Colors.grey900,
     },
     '&:disabled': {
-      background: '#ddd',
+      background: 'var(--color-field-hover)',
       color: Colors.grey900,
     },
   },
@@ -512,8 +512,8 @@ class Navigation extends Component {
         {mapError
           && (
             <div className={classes.mapError}>
-              <Typography>Could not initialize map.</Typography>
-              <Typography>{mapError}</Typography>
+              <p>Could not initialize map.</p>
+              <p>{mapError}</p>
             </div>
           )}
         <ReactMapGL
@@ -636,8 +636,8 @@ class Navigation extends Component {
         <Clear className={classes.clearSearchSelect} onClick={this.clearSearchSelect} />
         <div className={classes.searchSelectBoxHeader}>
           <div className={classes.searchSelectBoxTitle}>
-            <Typography className={classes.bold}>{title}</Typography>
-            <Typography className={classes.searchSelectBoxDetails}>{timeFromNow(carLocation.time)}</Typography>
+            <p className={classes.bold}>{title}</p>
+            <p className={classes.searchSelectBoxDetails}>{timeFromNow(carLocation.time)}</p>
           </div>
           <div className={classes.searchSelectBoxButtons}>
             <Button classes={{ root: classes.searchSelectButton }} target="_blank" href={geoUri}>
@@ -645,10 +645,10 @@ class Navigation extends Component {
             </Button>
           </div>
         </div>
-        <Typography className={classes.searchSelectBoxDetails}>
+        <p className={classes.searchSelectBoxDetails}>
           {Utils.formatPlaceName(searchSelect)}
           {Utils.formatPlaceAddress(searchSelect)}
-        </Typography>
+        </p>
       </div>
     );
   }
@@ -664,7 +664,7 @@ class Navigation extends Component {
         />
         <div className={classes.searchSelectBoxHeader}>
           <div className={classes.searchSelectBoxTitle}>
-            <Typography className={classes.primeAdTitle}>comma prime</Typography>
+            <p className={classes.primeAdTitle}>comma prime</p>
           </div>
           <div className={classes.searchSelectBoxButtons}>
             <Button
@@ -675,11 +675,11 @@ class Navigation extends Component {
             </Button>
           </div>
         </div>
-        <Typography className={classes.primeAdDetails}>
+        <p className={classes.primeAdDetails}>
           {this.props.device?.eligible_features?.commacare
             ? 'Put your car on the internet with comma prime and extend your 1-year limited warranty with commacare'
             : 'Put your car on the internet with comma prime'}
-        </Typography>
+        </p>
       </div>
     );
   }
diff --git a/src/components/PWAIcon.jsx b/src/components/PWAIcon.jsx
index c90a40622..bf07b4535 100644
--- a/src/components/PWAIcon.jsx
+++ b/src/components/PWAIcon.jsx
@@ -61,14 +61,14 @@ const PWAIcon = ({ immediate }) => {
   let callback;
   if (needRefresh) {
     title = 'Install update';
-    icon = <Download className="w-7 h-7 text-[rgba(128,255,128,0.5)]" />;
+    icon = <Download className="w-7 h-7 text-success/50" />;
     callback = () => {
       setInstalling(true);
       updateServiceWorker(true);
     };
   } else if (offlineReady) {
     title = 'No updates available';
-    icon = <CheckCircle className="w-6 h-6 text-[rgba(255,255,255,0.5)]" />;
+    icon = <CheckCircle className="w-6 h-6 text-content/50" />;
     callback = close;
   }
 
@@ -83,7 +83,7 @@ const PWAIcon = ({ immediate }) => {
         disabled={installing}
       >
         {installing ? (
-          <CircularProgress className="flex text-[rgba(128,255,128,0.5)]" size={24} />
+          <CircularProgress className="flex text-success/50" size={24} />
         ) : icon}
       </IconButton>
     </Tooltip>
diff --git a/src/components/Prime/PrimeCheckout.jsx b/src/components/Prime/PrimeCheckout.jsx
index 8dbc915d3..420dcc101 100644
--- a/src/components/Prime/PrimeCheckout.jsx
+++ b/src/components/Prime/PrimeCheckout.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import dayjs from 'dayjs';
 import * as Sentry from '@sentry/react';
-import { withStyles, Typography, IconButton, Button, CircularProgress } from '@material-ui/core';
+import { withStyles, IconButton, Button, CircularProgress } from '@material-ui/core';
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
 import CheckIcon from '@material-ui/icons/Check';
 
@@ -39,7 +39,7 @@ const styles = () => ({
     display: 'flex',
     flexDirection: 'column',
     maxWidth: 430,
-    color: '#fff',
+    color: 'var(--color-content)',
   },
   primeHeader: {
     display: 'flex',
@@ -53,23 +53,8 @@ const styles = () => ({
     alignItems: 'center',
     '& :first-child': { marginRight: 8 },
   },
-  primeBlock: {
-    marginTop: 10,
-  },
-  moreInfoContainer: {
-    '& p': { display: 'inline' },
-    '& button': { display: 'inline', marginLeft: '15px' },
-  },
   deviceId: {
-    color: '#525E66',
-  },
-  leftMargin: {
-    marginLeft: 10,
-  },
-  deviceBlock: {
-    marginLeft: 10,
-    '& aside': { display: 'inline', marginRight: 5 },
-    '& span': { display: 'inline' },
+    color: 'var(--color-progress)',
   },
   overviewBlockError: {
     borderRadius: 12,
@@ -77,7 +62,7 @@ const styles = () => ({
     padding: '8px 12px',
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 0, 0, 0.2)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 20%, transparent)',
     '& p': { display: 'inline-block', marginLeft: 10 },
   },
   overviewBlockDisabled: {
@@ -141,7 +126,7 @@ const styles = () => ({
     padding: '10px 14px 10px 12px',
     borderRadius: 12,
     border: `1px solid ${Colors.green300}`,
-    color: '#fff',
+    color: 'var(--color-content)',
     '& strong': { color: Colors.green300, letterSpacing: '0.04em' },
     '& a': { color: Colors.green300, textDecoration: 'underline' },
   },
@@ -381,11 +366,11 @@ class PrimeCheckout extends Component {
             <KeyboardBackspaceIcon />
           </IconButton>
           <div className={ classes.headerDevice }>
-            <Typography variant="body2">{deviceNamePretty(device)}</Typography>
-            <Typography variant="caption" className={classes.deviceId}>{`(${device.dongle_id})`}</Typography>
+            <aside className="type-body-strong">{deviceNamePretty(device)}</aside>
+            <span className={`type-caption ${classes.deviceId}`}>{`(${device.dongle_id})`}</span>
           </div>
         </div>
-        <h2 className={ classes.primeTitle }>comma prime</h2>
+        <h1 className={ classes.primeTitle }>comma prime</h1>
         <div style={ blockMargin }>
           <div className={ classes.checkList }>
             <div className={ classes.checkListItem } style={ paddingStyle }>
@@ -416,24 +401,24 @@ class PrimeCheckout extends Component {
           <div className={ classes.commacareBanner } style={ blockMargin }>
             <div className={classes.commacareBannerHeader}>
               <img src={CommacareIcon} alt="" className={classes.commacareBannerIcon} />
-              <Typography>
+              <p>
                 <strong>INCLUDES COMMACARE</strong>
-              </Typography>
+              </p>
             </div>
-            <Typography variant="body2">
+            <aside className="type-body-strong">
               comma four includes a standard 1-year limited warranty. Subscribe within 30 days of delivery to extend your coverage to 2 years for the duration of your prime subscription.
               {' '}
               <a href={COMMACARE_URL} target="_blank" rel="noreferrer">Learn more</a>
-            </Typography>
+            </aside>
           </div>
         )}
         {device?.device_type === 'four' && !device?.eligible_features?.commacare && (
           <div className={ classes.commacareIneligible } style={ blockMargin }>
-            <Typography variant="body2">
+            <aside className="type-body-strong">
               This device is past the delivery window. commacare extended warranty won&apos;t be included with this subscription.
               {' '}
               <a href={COMMACARE_URL} target="_blank" rel="noreferrer">What is commacare?</a>
-            </Typography>
+            </aside>
           </div>
         )}
         <div className={ classes.planBoxContainer } style={ blockMargin }>
@@ -469,26 +454,26 @@ class PrimeCheckout extends Component {
             && (
             <div className={ classes.planLoading }>
               <CircularProgress size={ 38 } style={{ color: Colors.white }} />
-              <Typography>Fetching SIM data</Typography>
+              <p>Fetching SIM data</p>
             </div>
             )}
         </div>
         { disabledDataPlanText && (
         <div className={ classes.overviewBlockDisabled } style={ blockMargin }>
           <InfoOutline />
-          <Typography>{ disabledDataPlanText }</Typography>
+          <p>{ disabledDataPlanText }</p>
         </div>
         ) }
         <div style={ blockMargin }>
-          <Typography className={ classes.learnMore }>
+          <p className={ classes.learnMore }>
             {'Learn more about comma prime from our '}
             <a className={ classes.linkHighlight} target="_blank" href="https://comma.ai/connect#faq" rel="noreferrer">FAQ</a>
-          </Typography>
+          </p>
         </div>
         { error && (
         <div className={ classes.overviewBlockError }>
           <ErrorOutline />
-          <Typography>{ error }</Typography>
+          <p>{ error }</p>
         </div>
         ) }
         <div style={ blockMargin }>
@@ -505,7 +490,7 @@ class PrimeCheckout extends Component {
         { chargeText
           && (
           <div style={ blockMargin }>
-            <Typography className={ classes.chargeText }>{ chargeText }</Typography>
+            <p className={ classes.chargeText }>{ chargeText }</p>
           </div>
           )}
       </div>
diff --git a/src/components/Prime/PrimeManage.jsx b/src/components/Prime/PrimeManage.jsx
index f0e47525e..84a14d39a 100644
--- a/src/components/Prime/PrimeManage.jsx
+++ b/src/components/Prime/PrimeManage.jsx
@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
 import dayjs from 'dayjs';
 import * as Sentry from '@sentry/react';
 
-import { withStyles, Typography, Button, Modal, Paper, IconButton, CircularProgress } from '@material-ui/core';
+import { withStyles, Button, Modal, Paper, IconButton, CircularProgress } from '@material-ui/core';
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
 import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
 
@@ -42,7 +42,7 @@ export function primeSwitchErrorMessage(error, plan = 'data') {
   return 'Could not reach the billing service. Check your internet connection and try again.';
 }
 
-const styles = (theme) => ({
+const styles = {
   linkHighlight: {
     '&:link': {
       textDecoration: "underline",
@@ -67,10 +67,7 @@ const styles = (theme) => ({
   },
   primeContainer: {
     borderBottom: `1px solid ${Colors.white10}`,
-    color: '#fff',
-  },
-  primeBlock: {
-    marginTop: 10,
+    color: 'var(--color-content)',
   },
   overviewBlock: {
     marginTop: 20,
@@ -80,14 +77,14 @@ const styles = (theme) => ({
     padding: 10,
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 0, 0, 0.2)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 20%, transparent)',
     '& p': { display: 'inline-block', marginLeft: 10 },
   },
   overviewBlockSuccess: {
     marginTop: 15,
     padding: 10,
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 255, 0, 0.2)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-success) 20%, transparent)',
     '& p': {
       display: 'inline-block',
       marginLeft: 10,
@@ -99,7 +96,7 @@ const styles = (theme) => ({
     padding: 10,
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    backgroundColor: 'color-mix(in srgb, var(--color-scrim) 20%, transparent)',
     '& p': { display: 'inline-block', marginLeft: 10 },
   },
   overviewBlockDisabled: {
@@ -158,8 +155,8 @@ const styles = (theme) => ({
   },
   modal: {
     position: 'absolute',
-    padding: theme.spacing.unit * 2,
-    width: theme.spacing.unit * 50,
+    padding: 16,
+    width: 400,
     maxWidth: '90%',
     left: '50%',
     top: '40%',
@@ -193,13 +190,13 @@ const styles = (theme) => ({
     },
   },
   cancelError: {
-    backgroundColor: 'rgba(255, 0, 0, 0.3)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 30%, transparent)',
     marginTop: 10,
     padding: 10,
     '& p': { margin: 0 },
   },
   cancelSuccess: {
-    backgroundColor: 'rgba(0, 255, 0, 0.3)',
+    backgroundColor: 'color-mix(in srgb, var(--color-feedback-success) 30%, transparent)',
     marginTop: 10,
     padding: 10,
     '& p': { margin: 0 },
@@ -219,7 +216,7 @@ const styles = (theme) => ({
       marginTop: 0,
     },
   },
-});
+};
 
 export class PrimeManage extends Component {
   constructor(props) {
@@ -434,84 +431,84 @@ export class PrimeManage extends Component {
             </IconButton>
           </div>
           <div className={classes.primeContainer} style={{ padding: `16px ${containerPadding}px` }}>
-            <Typography variant="title">comma prime</Typography>
+            <h1>comma prime</h1>
             {stripeStatus && (
               <>
                 {stripeStatus.paid !== 'paid'
                   && (
                     <div className={classes.overviewBlockLoading}>
                       <CircularProgress size={19} style={{ color: Colors.white }} />
-                      <Typography>Waiting for confirmed payment</Typography>
+                      <p>Waiting for confirmed payment</p>
                     </div>
                   )}
                 {Boolean(stripeStatus.paid === 'paid' && !hasPrimeSub)
                   && (
                     <div className={classes.overviewBlockLoading}>
                       <CircularProgress size={19} style={{ color: Colors.white }} />
-                      <Typography>Processing subscription</Typography>
+                      <p>Processing subscription</p>
                     </div>
                   )}
                 {Boolean(stripeStatus.paid === 'paid' && hasPrimeSub)
                   && (
                     <div className={classes.overviewBlockSuccess}>
-                      <Typography>comma prime activated</Typography>
+                      <p>comma prime activated</p>
                       {subscription.is_prime_sim && (
-                        <Typography>
+                        <p>
                           Connectivity will be enabled as soon as activation propagates to your
                           local cell tower. Rebooting your device may help.
-                        </Typography>
+                        </p>
                       )}
                     </div>
                   )}
               </>
             )}
             <div className={classes.overviewBlock}>
-              <Typography variant="subheading">Device</Typography>
+              <h2>Device</h2>
               <div className={classes.manageItem}>
-                <Typography variant="body2">{alias}</Typography>
-                <Typography variant="caption" className={classes.deviceId}>
+                <aside className="type-body-strong">{alias}</aside>
+                <span className={`type-caption ${classes.deviceId}`}>
                   {`(${device.dongle_id})`}
-                </Typography>
+                </span>
               </div>
             </div>
             {hasPrimeSub && (
               <>
                 <div className={classes.overviewBlock}>
-                  <Typography variant="subheading">Plan</Typography>
-                  <Typography className={classes.manageItem}>
+                  <h2>Plan</h2>
+                  <p className={classes.manageItem}>
                     {planName}
                     <span>{` ${planSubtext}`}</span>
-                  </Typography>
+                  </p>
                 </div>
                 <div className={classes.overviewBlock}>
-                  <Typography variant="subheading">Joined</Typography>
-                  <Typography className={classes.manageItem}>{joinDate}</Typography>
+                  <h2>Joined</h2>
+                  <p className={classes.manageItem}>{joinDate}</p>
                 </div>
                 {!hasCancelAt
                   && (
                     <div className={classes.overviewBlock}>
-                      <Typography variant="subheading">Next payment</Typography>
-                      <Typography className={classes.manageItem}>{nextPaymentDate}</Typography>
+                      <h2>Next payment</h2>
+                      <p className={classes.manageItem}>{nextPaymentDate}</p>
                     </div>
                   )}
                 {hasCancelAt
                   && (
                     <div className={classes.overviewBlock}>
-                      <Typography variant="subheading">Subscription end</Typography>
-                      <Typography className={classes.manageItem}>{cancelAtDate}</Typography>
+                      <h2>Subscription end</h2>
+                      <p className={classes.manageItem}>{cancelAtDate}</p>
                     </div>
                   )}
                 <div className={classes.overviewBlock}>
-                  <Typography variant="subheading">Amount</Typography>
-                  <Typography className={classes.manageItem}>
+                  <h2>Amount</h2>
+                  <p className={classes.manageItem}>
                     {`$${(subscription.amount / 100).toFixed(2)}`}
-                  </Typography>
+                  </p>
                 </div>
                 {commacare && <CommacareBadge variant="pill" style={{ marginTop: 14 }} />}
                 {this.state.error && (
                   <div className={classes.overviewBlockError}>
                     <ErrorOutline />
-                    <Typography>{this.state.error}</Typography>
+                    <p>{this.state.error}</p>
                   </div>
                 )}
                 <div className={`${classes.overviewBlock} ${classes.paymentElement}`}>
@@ -558,24 +555,24 @@ export class PrimeManage extends Component {
                   && (
                     <div className={classes.overviewBlockDisabled}>
                       <PriorityHighIcon />
-                      <Typography>
+                      <p>
                         Your prime subscription will be canceled on May 15th unless you replace the
                         SIM
                         card in your device. A new SIM card can be ordered from the
                         <a className={ classes.linkHighlight} href="https://comma.ai/shop/comma-prime-sim">shop</a>
                         .
                         Use discount code SIMSWAP at checkout to receive a free SIM card.
-                      </Typography>
+                      </p>
                     </div>
                   )}
                 {hasCancelAt && !device.eligible_features?.prime_data && subscription.plan === 'data'
                   && (
                     <div className={classes.overviewBlockDisabled}>
                       <InfoOutline />
-                      <Typography>
+                      <p>
                         Standard comma prime discontinued for
                         {deviceTypePretty(device.device_type)}
-                      </Typography>
+                      </p>
                     </div>
                   )}
               </>
@@ -599,17 +596,17 @@ export class PrimeManage extends Component {
             {this.state.planSwitchStatus === 'success'
               ? (
                 <>
-                  <Typography variant="title" className="text-white">
+                  <h1 className="text-content">
                     {`Welcome to ${primePlanName(this.state.planSwitchTarget)}`}
-                  </Typography>
-                  <div className="mt-4 rounded-lg bg-green-500/20 p-3 text-green-100">
-                    <Typography>{this.state.planSwitchMessage}</Typography>
+                  </h1>
+                  <div className="mt-4 rounded-lg bg-success/20 p-3 text-success-content">
+                    <p>{this.state.planSwitchMessage}</p>
                   </div>
-                  <Typography className="mt-3 text-white/80">
+                  <p className="mt-3 text-content/80">
                     {this.state.planSwitchTarget === 'data'
                       ? 'Your plan now includes data for $24/month.'
                       : 'Your plan no longer includes data and costs $14/month.'}
-                  </Typography>
+                  </p>
                   <div className="mt-4">
                     <Button
                       variant="contained"
@@ -628,31 +625,31 @@ export class PrimeManage extends Component {
               )
               : (
                 <>
-                  <Typography variant="title" className="text-white">
+                  <h1 className="text-content">
                     {`Switch to ${primePlanName(this.state.planSwitchTarget)} plan`}
-                  </Typography>
-                  <Typography className="mt-3 text-white/80">
+                  </h1>
+                  <p className="mt-3 text-content/80">
                     {this.state.planSwitchTarget === 'data'
                       ? (
                         <>
                           The Standard plan costs $24/month, includes a data plan, and is
                           {' '}
-                          <strong className="font-bold text-white">only available in the U.S.</strong>
+                          <strong className="font-bold text-content">only available in the U.S.</strong>
                         </>
                       )
                       : 'The Lite plan costs $14/month and does not include a data plan.'}
-                  </Typography>
+                  </p>
                 </>
               )}
             {this.state.planSwitchStatus === 'loading' && (
-              <div className="mt-4 flex flex-col items-center justify-center rounded-lg bg-black/20 p-5 text-center">
+              <div className="mt-4 flex flex-col items-center justify-center rounded-lg bg-scrim/20 p-5 text-center">
                 <CircularProgress size={19} style={{ color: Colors.white }} />
-                <Typography className="mt-2 text-white/80">Switching your plan…</Typography>
+                <p className="mt-2 text-content/80">Switching your plan…</p>
               </div>
             )}
             {this.state.planSwitchStatus === 'error' && (
-              <div className="mt-4 rounded-lg bg-red-500/20 p-3 text-red-100">
-                <Typography className="text-inherit">{this.state.planSwitchMessage}</Typography>
+              <div className="mt-4 rounded-lg bg-danger/20 p-3 text-danger-content">
+                <p className="text-inherit">{this.state.planSwitchMessage}</p>
               </div>
             )}
             {this.state.planSwitchStatus !== 'success' && (
@@ -687,35 +684,35 @@ export class PrimeManage extends Component {
           onClose={() => this.setState({ cancelModal: false })}
         >
           <Paper className={classes.modal}>
-            <Typography variant="title">Cancel prime subscription</Typography>
+            <h1>Cancel prime subscription</h1>
             {this.state.cancelError && (
               <div className={classes.cancelError}>
-                <Typography>{this.state.cancelError}</Typography>
+                <p>{this.state.cancelError}</p>
               </div>
             )}
             {this.state.cancelSuccess && (
               <div className={classes.cancelSuccess}>
-                <Typography>{this.state.cancelSuccess}</Typography>
+                <p>{this.state.cancelSuccess}</p>
               </div>
             )}
-            <Typography>
+            <p>
               {`Device: ${alias} (${dongleId})`}
-            </Typography>
-            <Typography>
+            </p>
+            <p>
               We&apos;re sorry to see you go.
-            </Typography>
-            <Typography>
+            </p>
+            <p>
               Your subscription will be cancelled immediately and can be resumed at any time.
-            </Typography>
+            </p>
             {commacare && (
               <div className={classes.commacareWarning}>
-                <Typography>
+                <p>
                   Cancelling will <strong>permanently end your extended warranty coverage.</strong>
                   {' '}
                   Your standard 1-year warranty still applies for any remaining time.
                   {' '}
                   <a href={COMMACARE_URL} target="_blank" rel="noreferrer">What is commacare?</a>
-                </Typography>
+                </p>
               </div>
             )}
             <Button
diff --git a/src/components/Prime/index.jsx b/src/components/Prime/index.jsx
index 21a6e711a..58507177a 100644
--- a/src/components/Prime/index.jsx
+++ b/src/components/Prime/index.jsx
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import qs from 'query-string';
 
-import { Typography } from '@material-ui/core';
 import PrimeManage from './PrimeManage';
 import PrimeCheckout from './PrimeCheckout';
 
@@ -22,7 +21,7 @@ const Prime = (props) => {
   }
 
   if (!device.is_owner && !profile.superuser) {
-    return (<Typography>No access</Typography>);
+    return (<p>No access</p>);
   }
   if (device.prime || stripeSuccess) {
     return (<PrimeManage stripeSuccess={ stripeSuccess } />);
diff --git a/src/components/TimeDisplay/index.jsx b/src/components/TimeDisplay/index.jsx
index 1a340b1a4..e4cc03024 100644
--- a/src/components/TimeDisplay/index.jsx
+++ b/src/components/TimeDisplay/index.jsx
@@ -5,7 +5,6 @@ import raf from 'raf';
 import dayjs from 'dayjs';
 
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import VolumeUp from '@material-ui/icons/VolumeUp';
 import VolumeOff from '@material-ui/icons/VolumeOff';
@@ -27,14 +26,14 @@ const timerSteps = [
   8,
 ];
 
-const styles = (theme) => ({
+const styles = {
   base: {
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: theme.palette.grey[999],
+    backgroundColor: 'var(--color-canvas-deep)',
     height: '64px',
     borderRadius: '32px',
-    padding: theme.spacing.unit,
+    padding: 8,
     width: 400,
     maxWidth: '100%',
     margin: '0 auto',
@@ -52,7 +51,7 @@ const styles = (theme) => ({
     },
   },
   desiredPlaySpeedContainer: {
-    marginRight: theme.spacing.unit * 1,
+    marginRight: 8,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -62,14 +61,14 @@ const styles = (theme) => ({
     width: '98%',
     height: '98%',
     '&.dim': {
-      color: theme.palette.grey[300],
+      color: 'var(--color-content-subtle)',
     },
     '&.small': {
       width: '80%',
       height: '80%',
     },
     '&.circle': {
-      border: `1px solid ${theme.palette.grey[900]}`,
+      border: '1px solid var(--color-surface)',
       borderRadius: '50%',
     },
   },
@@ -80,25 +79,25 @@ const styles = (theme) => ({
   tinyArrowIcon: {
     width: 12,
     height: 12,
-    color: theme.palette.grey[500],
+    color: 'var(--color-progress)',
     '&[disabled]': {
       visibility: 'hidden',
     },
   },
   rightBorderBox: {
-    borderRight: `1px solid ${theme.palette.grey[900]}`,
+    borderRight: '1px solid var(--color-surface)',
   },
   leftBorderBox: {
-    borderLeft: `1px solid ${theme.palette.grey[900]}`,
+    borderLeft: '1px solid var(--color-surface)',
   },
   currentTime: {
-    margin: `0 ${theme.spacing.unit * 1}px`,
+    margin: '0 8px',
     fontSize: 15,
     fontWeight: 500,
     display: 'block',
     flexGrow: 1,
   },
-});
+};
 
 class TimeDisplay extends Component {
   static getDerivedStateFromProps(props, state) {
@@ -252,13 +251,13 @@ class TimeDisplay extends Component {
           </IconButton>
         </div>
         { !isThin && (
-          <Typography variant="caption" align="center" style={{ paddingTop: 4 }}>
+          <span className="type-caption text-center" style={{ paddingTop: 4 }}>
             CURRENT PLAYBACK TIME
-          </Typography>
+          </span>
         )}
-        <Typography variant="body1" align="center" className={classes.currentTime}>
+        <p className={`${classes.currentTime} text-center`}>
           <span ref={this.textHolder}>{ displayTime }</span>
-        </Typography>
+        </p>
         {!isIos() && (
           <div className={ classes.desiredPlaySpeedContainer }>
             <IconButton
@@ -269,10 +268,10 @@ class TimeDisplay extends Component {
             >
               <UpArrow className={classes.tinyArrowIcon} />
             </IconButton>
-            <Typography variant="body2" align="center">
+            <aside className="type-body-strong text-center">
               {desiredPlaySpeed}
               ×
-            </Typography>
+            </aside>
             <IconButton
               className={classes.tinyArrowIcon}
               onClick={this.decreaseSpeed}
diff --git a/src/components/TimeSelect/index.jsx b/src/components/TimeSelect/index.jsx
index 449121037..0c323dbc3 100644
--- a/src/components/TimeSelect/index.jsx
+++ b/src/components/TimeSelect/index.jsx
@@ -4,20 +4,20 @@ import Obstruction from 'obstruction';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 
-import { Button, Divider, Modal, Paper, Typography, withStyles } from '@material-ui/core';
+import { Button, Divider, Modal, Paper, withStyles } from '@material-ui/core';
 
 import Colors from '../../colors';
 import { selectTimeFilter } from '../../actions';
 
-const styles = (theme) => ({
+const styles = {
   modalContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
   modal: {
-    padding: theme.spacing.unit * 2,
-    width: theme.spacing.unit * 50,
+    padding: 16,
+    width: 400,
     maxWidth: '90%',
     outline: 'none',
   },
@@ -44,7 +44,7 @@ const styles = (theme) => ({
       backgroundColor: Colors.white70,
     },
   },
-});
+};
 
 const LOOKBACK_WINDOW_MILLIS = 365 * 24 * 3600 * 1000; // 30 days
 
@@ -123,7 +123,7 @@ class TimeSelect extends Component {
         >
           <Paper className={classes.modal}>
             <div className={ classes.datePickerContainer }>
-              <Typography variant="body2">Start date:</Typography>
+              <aside className="type-body-strong">Start date:</aside>
               <input
                 label="Start date"
                 type="date"
@@ -134,7 +134,7 @@ class TimeSelect extends Component {
               />
             </div>
             <div className={ classes.datePickerContainer }>
-              <Typography variant="body2">End date:</Typography>
+              <aside className="type-body-strong">End date:</aside>
               <input
                 label="End date"
                 type="date"
diff --git a/src/components/Timeline/index.jsx b/src/components/Timeline/index.jsx
index a3b7c66d4..b6845c355 100644
--- a/src/components/Timeline/index.jsx
+++ b/src/components/Timeline/index.jsx
@@ -12,7 +12,6 @@ import dayjs from 'dayjs';
 import Measure from 'react-measure';
 
 import Thumbnails from './thumbnails';
-import theme from '../../theme';
 import { pushTimelineRange } from '../../actions';
 import Colors from '../../colors';
 import { currentOffset } from '../../timeline';
@@ -33,10 +32,10 @@ const styles = () => ({
   segment: {
     position: 'absolute',
     height: 12,
-    background: theme.palette.states.drivingBlue,
+    background: 'var(--color-driving)',
   },
   statusGradient: {
-    background: 'linear-gradient(rgba(0, 0, 0, 0.0) 4%, rgba(255, 255, 255, 0.025) 10%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.4))',
+    background: 'linear-gradient(transparent 4%, color-mix(in srgb, var(--color-content) 2.5%, transparent) 10%, color-mix(in srgb, var(--color-scrim) 10%, transparent) 25%, color-mix(in srgb, var(--color-scrim) 40%, transparent))',
     height: 12,
     left: 0,
     pointerEvents: 'none',
@@ -52,21 +51,21 @@ const styles = () => ({
     width: '100%',
     '&.active': {},
     '&.engage': {
-      background: theme.palette.states.engagedGreen,
+      background: 'var(--color-engaged)',
     },
     '&.overriding': {
-      background: theme.palette.states.engagedGrey,
+      background: 'var(--color-engaged-override)',
     },
     '&.alert': {
       '&.userPrompt': {
-        background: theme.palette.states.alertOrange,
+        background: 'var(--color-alert)',
       },
       '&.critical': {
-        background: theme.palette.states.alertRed,
+        background: 'var(--color-alert-critical)',
       },
     },
     '&.bookmark, &.flag': {  // TODO: remove flag selector once 14 days expires old events caches
-      background: theme.palette.states.userBookmark,
+      background: 'var(--color-bookmark)',
       zIndex: 1,
     },
   },
@@ -81,14 +80,14 @@ const styles = () => ({
     },
   },
   ruler: {
-    backgroundColor: 'rgb(37, 51, 61)',
+    backgroundColor: 'var(--color-timeline-track)',
     touchAction: 'none',
     width: '100%',
     height: 44,
   },
   rulerRemaining: {
-    backgroundColor: 'rgba(29, 34, 37, 0.9)',
-    borderLeft: '1px solid #D8DDDF',
+    backgroundColor: 'color-mix(in srgb, var(--color-surface) 90%, transparent)',
+    borderLeft: '1px solid var(--color-boundary-strong)',
     position: 'absolute',
     left: 0,
     height: 44,
@@ -96,27 +95,11 @@ const styles = () => ({
     pointerEvents: 'none',
     width: '100%',
   },
-  loopStart: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    borderRight: '1px solid rgba(0, 0, 0, 0.8)',
-    position: 'absolute',
-    left: 0,
-    height: 44,
-    pointerEvents: 'none',
-  },
-  loopEnd: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    borderLeft: '1px solid rgba(0, 0, 0, 0.8)',
-    position: 'absolute',
-    right: 0,
-    height: 44,
-    pointerEvents: 'none',
-  },
   dragHighlight: {
     pointerEvents: 'none',
-    background: 'rgba(255, 255, 255, 0.1)',
-    borderLeft: '1px solid rgba(255, 255, 255, 0.3)',
-    borderRight: '1px solid rgba(255, 255, 255, 0.3)',
+    background: 'color-mix(in srgb, var(--color-content) 10%, transparent)',
+    borderLeft: '1px solid color-mix(in srgb, var(--color-content) 30%, transparent)',
+    borderRight: '1px solid color-mix(in srgb, var(--color-content) 30%, transparent)',
     position: 'absolute',
     height: 44,
   },
diff --git a/src/components/anonymous.jsx b/src/components/anonymous.jsx
index bacfaf651..63c3c960f 100644
--- a/src/components/anonymous.jsx
+++ b/src/components/anonymous.jsx
@@ -7,8 +7,6 @@ import PropTypes from 'prop-types';
 import qs from 'query-string';
 
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-
 import {config as AuthConfig} from '@commaai/my-comma-auth';
 
 import Colors from '../colors';
@@ -20,6 +18,7 @@ const styles = () => ({
   baseContainer: {
     width: '100%',
     height: '100vh',
+    backgroundColor: '#000',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -60,13 +59,13 @@ const styles = () => ({
     width: 380,
     maxWidth: '90%',
     textAlign: 'center',
-    margin: '10px 0 30px',
+    margin: '20px 0 30px',
     fontSize: '18px',
   },
   logInButton: {
     cursor: 'pointer',
     alignItems: 'center',
-    background: '#ffffff',
+    background: 'var(--color-field)',
     display: 'flex',
     borderRadius: 80,
     fontSize: 21,
@@ -77,14 +76,14 @@ const styles = () => ({
     maxWidth: '90%',
     marginBottom: 10,
     '&:hover': {
-      background: '#eee',
+      background: 'var(--color-field-hover)',
     },
   },
   buttonText: {
     fontSize: 18,
     width: 190,
     textAlign: 'center',
-    color: 'black',
+    color: 'var(--color-content-inverse)',
     fontWeight: 600,
   },
   buttonImage: {
@@ -135,21 +134,21 @@ class AnonymousLanding extends Component {
             <img alt="comma" src="/images/comma-white.png" className={classes.logoImg} />
           </div>
           <div className={classes.logoSpacer}>&nbsp;</div>
-          <Typography className={classes.logoText}>comma connect</Typography>
-          <Typography className={classes.tagline}>
+          <p className={classes.logoText}>comma connect</p>
+          <p className={classes.tagline}>
             Manage your comma device, view your drives, and use comma prime features
-          </Typography>
+          </p>
           <a href={AuthConfig.GOOGLE_REDIRECT_LINK} className={classes.logInButton}>
             <img className={classes.buttonImage} src={AuthGoogleIcon} alt="" />
-            <Typography className={classes.buttonText}>Sign in with Google</Typography>
+            <p className={classes.buttonText}>Sign in with Google</p>
           </a>
           <a onClick={() => AppleID.auth.signIn()} className={classes.logInButton}>
             <img className={classes.buttonImage} src={AuthAppleIcon} alt="" />
-            <Typography className={classes.buttonText}>Sign in with Apple</Typography>
+            <p className={classes.buttonText}>Sign in with Apple</p>
           </a>
           <a href={AuthConfig.GITHUB_REDIRECT_LINK} className={`${classes.logInButton} githubAuth`}>
             <img className={classes.buttonImage} src={AuthGithubIcon} alt="" />
-            <Typography className={classes.buttonText}>Sign in with GitHub</Typography>
+            <p className={classes.buttonText}>Sign in with GitHub</p>
           </a>
 
           <span className="max-w-sm text-center mt-2 mb-8 text-sm">
diff --git a/src/components/explorer.jsx b/src/components/explorer.jsx
index 7c43e3a31..5a98f86c3 100644
--- a/src/components/explorer.jsx
+++ b/src/components/explorer.jsx
@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
 import localforage from 'localforage';
 import { replace } from 'connected-react-router';
 
-import { withStyles, Button, CircularProgress, Divider, Modal, Paper, Typography } from '@material-ui/core';
+import { withStyles, Button, CircularProgress, Divider, Modal, Paper } from '@material-ui/core';
 import 'mapbox-gl/src/css/mapbox-gl.css';
 
 import { devices as Devices } from '../api';
@@ -26,16 +26,16 @@ import ResizeHandler from './ResizeHandler';
 import DriveView from './DriveView';
 import NoDeviceUpsell from './DriveView/NoDeviceUpsell';
 
-const styles = (theme) => ({
+const styles = {
   window: {
-    background: 'linear-gradient(180deg, #1D2225 0%, #16181A 100%)',
+    background: 'linear-gradient(180deg, var(--color-surface) 0%, var(--color-canvas) 100%)',
     display: 'flex',
     flexDirection: 'column',
   },
   modal: {
     position: 'absolute',
-    padding: theme.spacing.unit * 2,
-    width: theme.spacing.unit * 50,
+    padding: 16,
+    width: 400,
     maxWidth: '90%',
     left: '50%',
     top: '40%',
@@ -58,7 +58,7 @@ const styles = (theme) => ({
   pairedDongleId: {
     fontWeight: 'bold',
   },
-});
+};
 
 class ExplorerApp extends Component {
   constructor(props) {
@@ -236,17 +236,17 @@ class ExplorerApp extends Component {
             <IosPwaPopup />
             <Modal open={ Boolean(pairLoading || pairError || pairDongleId) } onClose={ this.closePair }>
               <Paper className={classes.modal}>
-                <Typography variant="title">Pairing device</Typography>
+                <h1>Pairing device</h1>
                 <Divider />
                 { pairLoading && <CircularProgress size={32} className={classes.fabProgress} /> }
                 { pairDongleId
                   && (
-                  <Typography>
+                  <p>
                     {'Successfully paired device '}
                     <span className={ classes.pairedDongleId }>{ pairDongleId }</span>
-                  </Typography>
+                  </p>
                   )}
-                { pairError && <Typography>{ pairError }</Typography> }
+                { pairError && <p>{ pairError }</p> }
                 <Button variant="contained" className={ classes.closeButton } onClick={ this.closePair }>
                   Close
                 </Button>
diff --git a/src/components/utils/InfoTooltip.jsx b/src/components/utils/InfoTooltip.jsx
index 225e8cb53..b52bc5d85 100644
--- a/src/components/utils/InfoTooltip.jsx
+++ b/src/components/utils/InfoTooltip.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ClickAwayListener, Tooltip, Typography, withStyles } from '@material-ui/core';
+import { ClickAwayListener, Tooltip, withStyles } from '@material-ui/core';
 
 import { InfoOutline } from '../../icons';
 
-const styles = (theme) => ({
+const styles = {
   arrowPopper: {
     opacity: 1,
     '& $arrowArrow': {
@@ -15,7 +15,7 @@ const styles = (theme) => ({
       height: '1em',
       '&::before': {
         borderWidth: '1em 1em 0 1em',
-        borderColor: `${theme.palette.grey[900]} transparent transparent transparent`,
+        borderColor: 'var(--color-surface) transparent transparent transparent',
       },
     },
   },
@@ -34,14 +34,14 @@ const styles = (theme) => ({
     },
   },
   tooltip: {
-    background: theme.palette.grey[900],
+    background: 'var(--color-surface)',
     marginBottom: 8,
   },
   icon: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
     fontSize: 18,
   },
-});
+};
 
 class InfoTooltip extends Component {
   constructor(props) {
@@ -93,7 +93,7 @@ class InfoTooltip extends Component {
           }}
           title={(
             <>
-              <Typography color="inherit">{title}</Typography>
+              <p className="text-inherit">{title}</p>
               <span className={classes.arrowArrow} ref={this.handleArrowRef} />
             </>
           )}
diff --git a/src/components/utils/SwitchLoading.jsx b/src/components/utils/SwitchLoading.jsx
index 89a233df2..9e93c32ea 100644
--- a/src/components/utils/SwitchLoading.jsx
+++ b/src/components/utils/SwitchLoading.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { withStyles, Switch, FormControlLabel, Popper, Typography } from '@material-ui/core';
+import { withStyles, Switch, FormControlLabel, Popper } from '@material-ui/core';
 
 import Colors from '../../colors';
 import { ErrorOutline } from '../../icons';
@@ -121,7 +121,7 @@ class SwitchLoading extends Component {
             anchorEl={ this.state.errorPopper }
             className={classes.copiedPopover}
           >
-            <Typography>{ this.state.error }</Typography>
+            <p>{ this.state.error }</p>
           </Popper>
         </>
         )}
diff --git a/src/index.css b/src/index.css
index 1023f5a09..3b4150679 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,58 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
+  /*
+   * Semantic colour roles
+   * ---------------------
+   * Keep component classes coupled to purpose rather than palette values.
+   */
+
+  /* Foundations */
+  --color-canvas: #16181a;
+  --color-canvas-deep: #030404;
+  --color-scrim: #000000;
+  --color-surface: #1d2225;
+  --color-surface-muted: #272d30;
+  --color-surface-raised: #30373b;
+  --color-surface-overlay: #1b2023;
+  --color-surface-overlay-deep: #111516;
+
+  /* Content and boundaries */
+  --color-content: #ffffff;
+  --color-content-inverse: #000000;
+  --color-content-subtle: #74838e;
+  --color-boundary-strong: #d8dddf;
+  --color-progress: #525e66;
+  --color-field: #ffffff;
+  --color-field-hover: #dddddd;
+  --color-field-muted: #d1d1d1;
+
+  /* Actions */
+  --color-action: #2563eb;
+  --color-action-hover: #3b82f6;
+  --color-link: #60a5fa;
+
+  /* Status */
+  --color-success: #22c967;
+  --color-care: #1a974e;
+  --color-success-content: #dcfce7;
+  --color-warning: #f5c542;
+  --color-danger: #dc2626;
+  --color-danger-content: #fca5a5;
+  --color-feedback-error: #ff0000;
+  --color-feedback-success: #00ff00;
+
+  /* Driving states */
+  --color-driving: #175886;
+  --color-engaged: #178645;
+  --color-engaged-override: #919b95;
+  --color-alert: #da6f25;
+  --color-alert-critical: #c92231;
+  --color-bookmark: #e3d756;
+
+  /* Data visualisation */
+  --color-timeline-track: #25333d;
+
   --animate-fadein: fadein 0.25s;
   --breakpoint-xxs: 360px;
   --breakpoint-xs: 480px;
@@ -41,13 +93,41 @@
 }
 
 :root {
+  /*
+   * Typography
+   * ----------
+   * These values mirror the Material UI typography scale used on master.
+   * Native elements inherit the body style; type-* classes cover variants.
+   */
+  --font-text: 'Inter', sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-size-body: 0.875rem;
+  --font-size-caption: 0.75rem;
+  --font-size-h1: 1.3125rem;
+  --font-size-h2: 1rem;
+  --line-height-body: 1.46429em;
+  --line-height-body-strong: 1.71429em;
+  --line-height-caption: 1.375em;
+  --line-height-h1: 1.16667em;
+  --line-height-h2: 1.5em;
+  --color-text-primary: color-mix(in srgb, var(--color-content) 87%, transparent);
+  --color-text-secondary: color-mix(in srgb, var(--color-content) 54%, transparent);
+
   color-scheme: dark;
-  background: #16181A;
+  background: var(--color-canvas);
 }
 
 html {
+  box-sizing: border-box;
+  color: var(--color-text-primary);
+  font-family: var(--font-text);
   font-size: 16px;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
   -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   
   margin-top: env(safe-area-inset-top);
   margin-bottom: env(safe-area-inset-bottom);
@@ -55,15 +135,80 @@ html {
   margin-right: env(safe-area-inset-right);
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 body {
-  background: #16181A;
-  font-family: 'Inter', sans-serif;
+  background: var(--color-canvas);
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
   scrollbar-gutter: stable;
   overflow-y: scroll;
   margin: 0;
   padding: 0;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+}
+
+/*
+ * Native text elements
+ * --------------------
+ * Replaces Material UI Typography's root reset and variants.
+ */
+
+p,
+h1,
+h2,
+aside {
+  display: block;
+  margin: 0;
+}
+
+h1 {
+  color: var(--color-text-primary);
+  font-family: var(--font-text);
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-h1);
+}
+
+h2 {
+  color: var(--color-text-primary);
+  font-family: var(--font-text);
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-h2);
+}
+
+.type-body-strong {
+  color: var(--color-text-primary);
+  font-family: var(--font-text);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-body-strong);
+}
+
+.type-caption {
+  color: var(--color-text-secondary);
+  display: block;
+  font-family: var(--font-text);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-caption);
+}
+
 a:focus {
   outline: none;
   box-shadow: none;
@@ -75,7 +220,7 @@ a:focus {
 */
 
 .scrollstyle {
-  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  scrollbar-color: color-mix(in srgb, var(--color-content) 20%, transparent) transparent;
 }
 
 .scrollstyle::-webkit-scrollbar-track {
@@ -94,15 +239,15 @@ a:focus {
 }
 
 .scrollstyle:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: color-mix(in srgb, var(--color-content) 10%, transparent);
 }
 
 .scrollstyle::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: color-mix(in srgb, var(--color-content) 20%, transparent);
 }
 
 .scrollstyle::-webkit-scrollbar-thumb:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: color-mix(in srgb, var(--color-content) 20%, transparent);
 }
 
 /*
@@ -111,12 +256,15 @@ a:focus {
 
 @layer utilities {
   .bg-glass {
-    @apply bg-black/30 backdrop-blur-[10px] border-[1.5px] border-white/20 shadow-[inset_0_0_20px_rgba(255,255,255,0.1),0_4px_20px_rgba(0,0,0,0.4)];
+    @apply bg-scrim/30 backdrop-blur-[10px] border-[1.5px] border-content/20 shadow-[inset_0_0_20px_color-mix(in_srgb,var(--color-content)_10%,transparent),0_4px_20px_color-mix(in_srgb,var(--color-scrim)_40%,transparent)];
   }
   .bg-glass-dark {
-    @apply bg-black/40 backdrop-blur-[10px] shadow-[0_2px_12px_rgba(0,0,0,0.3)];
+    @apply bg-scrim/40 backdrop-blur-[10px] shadow-[0_2px_12px_color-mix(in_srgb,var(--color-scrim)_30%,transparent)];
+  }
+  .bg-radial-content {
+    @apply bg-[radial-gradient(circle_at_30%_30%,color-mix(in_srgb,var(--color-content)_25%,transparent),color-mix(in_srgb,var(--color-content)_5%,transparent))];
   }
-  .bg-radial-white {
-    @apply bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.25),rgba(255,255,255,0.05))];
+  .bg-radial-content-active {
+    @apply bg-[radial-gradient(circle_at_35%_35%,color-mix(in_srgb,var(--color-content)_60%,transparent),color-mix(in_srgb,var(--color-content)_15%,transparent))];
   }
 }
diff --git a/src/index.jsx b/src/index.jsx
index 126b16b61..dc93e03db 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { CssBaseline, MuiThemeProvider } from '@material-ui/core';
+import { MuiThemeProvider } from '@material-ui/core';
 import * as Sentry from '@sentry/react';
 
 import './index.css';
@@ -24,7 +24,6 @@ if (import.meta.env.VITE_APP_GIT_TIMESTAMP) {
 
 ReactDOM.createRoot(document.getElementById('root')).render((
   <MuiThemeProvider theme={Theme}>
-    <CssBaseline />
     <App />
   </MuiThemeProvider>
 ));
diff --git a/src/theme.js b/src/theme.js
index d88b60be8..fc98679f7 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,10 +1,10 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 import Colors from './colors';
-import { ChevronIcon } from './icons';
 
 const theme = createMuiTheme({
+  // Font ownership lives in index.css. MUI controls inherit the HTML default.
   typography: {
-    fontFamily: "'Inter', sans-serif",
+    fontFamily: 'inherit',
   },
   overrides: {
     MuiButton: {
@@ -17,105 +17,9 @@ const theme = createMuiTheme({
         backgroundColor: '#30373B',
       },
     },
-    MuiDrawer: {
-      paper: {
-        overflowY: null,
-      },
-      paperAnchorDockedLeft: {
-        borderRight: 'none',
-      },
-    },
-    MuiSelect: {
-      select: {
-        padding: '12px',
-        paddingRight: '48px',
-        margin: '0px',
-        '&>div': {
-          margin: '0',
-        },
-        '&:focus': {
-          background: 'inherit',
-        },
-      },
-      selectMenu: {
-        paddingRight: 54,
-      },
-      icon: {
-        marginRight: 20,
-        color: Colors.white30,
-      },
-    },
-    MuiInput: {
-      root: {
-        position: 'relative',
-        border: `1px solid ${Colors.grey800}`,
-        borderRadius: 20,
-        overflow: 'hidden',
-      },
-      input: {
-        padding: '12px 16px',
-        '&::placeholder': {
-          opacity: 1,
-          color: Colors.white30,
-        },
-        '&:focus': {
-          outline: 'none',
-          boxShadow: 'none',
-        },
-      },
-    },
-    MuiInputLabel: {
-      shrink: {
-        transform: 'translate(0, -2px) scale(0.75)',
-      },
-    },
-    MuiFormLabel: {
-      root: {
-        marginLeft: 16,
-        marginTop: 4,
-      },
-    },
-    MuiFormHelperText: {
-      root: {
-        marginLeft: 8,
-        marginTop: 4,
-      },
-    },
-    MuiTab: {
-      root: {
-        minHeight: 40,
-      },
-    },
-    MuiListItem: {
-      root: {
-        '&:focus': {
-          outline: 'none',
-          boxShadow: 'none',
-        },
-      },
-    },
-    MuiSnackbarContent: {
-      root: {
-        backgroundColor: Colors.grey700,
-        color: Colors.white,
-      },
-    },
-  },
-  props: {
-    MuiSelect: {
-      disableUnderline: true,
-      IconComponent: ChevronIcon,
-    },
-    MuiInput: {
-      disableUnderline: true,
-    },
   },
   palette: {
     type: 'dark',
-    placeholder: Colors.white30,
-    background: {
-      default: Colors.grey999,
-    },
     primary: {
       light: Colors.lightBlue700,
       main: Colors.lightBlue900,
@@ -126,14 +30,6 @@ const theme = createMuiTheme({
       main: Colors.green200,
       dark: Colors.green500,
     },
-    states: {
-      drivingBlue: Colors.blue500,
-      engagedGreen: Colors.green400,
-      engagedGrey: '#919b95',
-      alertOrange: Colors.orange50,
-      alertRed: Colors.red100,
-      userBookmark: Colors.yellow500,
-    },
     grey: {
       50: Colors.grey50,
       100: Colors.grey100,
@@ -145,22 +41,6 @@ const theme = createMuiTheme({
       700: Colors.grey700,
       800: Colors.grey800,
       900: Colors.grey900,
-      950: Colors.grey950,
-      999: Colors.grey999,
-    },
-    lightGrey: {
-      200: Colors.lightGrey200,
-    },
-    white: {
-      10: Colors.white10,
-      12: Colors.white12,
-      20: Colors.white20,
-      30: Colors.white30,
-      40: Colors.white40,
-      50: Colors.white50,
-    },
-    error: {
-      main: 'rgba(209, 35, 35, 0.72)',
     },
   },
 });