diff --git a/src/components/DeviceStatistics.tsx b/src/components/DeviceStatistics.tsx
index 698f9173..3632be91 100644
--- a/src/components/DeviceStatistics.tsx
+++ b/src/components/DeviceStatistics.tsx
@@ -18,17 +18,17 @@ const DeviceStatistics: VoidComponent<DeviceStatisticsProps> = (props) => {
     <div class={clsx('flex h-10 w-full gap-8', props.class)}>
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
-        <span class="text-label-lg font-mono uppercase">{formatDistance(allTime()?.distance)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatDistance(allTime()?.distance)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
-        <span class="text-label-lg font-mono uppercase">{formatDuration(allTime()?.minutes)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatDuration(allTime()?.minutes)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Routes</span>
-        <span class="text-label-lg font-mono uppercase">{allTime()?.routes ?? 0}</span>
+        <span class="font-mono text-label-lg uppercase">{allTime()?.routes ?? 0}</span>
       </div>
     </div>
   )
diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx
index e3317a2c..5e0ca456 100644
--- a/src/components/RouteStatistics.tsx
+++ b/src/components/RouteStatistics.tsx
@@ -28,25 +28,25 @@ const RouteStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
-        <span class="text-label-lg font-mono uppercase">{formatRouteDistance(props.route)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatRouteDistance(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
-        <span class="text-label-lg font-mono uppercase">{formatRouteDuration(props.route)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatRouteDuration(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Engaged</span>
         <Suspense>
-          <span class="text-label-lg font-mono uppercase">{formatEngagement(timeline())}</span>
+          <span class="font-mono text-label-lg uppercase">{formatEngagement(timeline())}</span>
         </Suspense>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">User flags</span>
         <Suspense>
-          <span class="text-label-lg font-mono uppercase">{formatUserFlags(timeline())}</span>
+          <span class="font-mono text-label-lg uppercase">{formatUserFlags(timeline())}</span>
         </Suspense>
       </div>
     </div>
diff --git a/src/components/material/List.tsx b/src/components/material/List.tsx
index 39888807..af540aef 100644
--- a/src/components/material/List.tsx
+++ b/src/components/material/List.tsx
@@ -11,8 +11,8 @@ type ListItemContentProps = {
 export const ListItemContent: VoidComponent<ListItemContentProps> = (props) => {
   return (
     <div>
-      <div class="text-on-surface text-body-lg">{props.headline}</div>
-      {props.subhead && <div class="text-on-surface-variant text-body-md">{props.subhead}</div>}
+      <div class="text-body-lg text-on-surface">{props.headline}</div>
+      {props.subhead && <div class="text-body-md text-on-surface-variant">{props.subhead}</div>}
     </div>
   )
 }
diff --git a/src/components/material/Ripple.tsx b/src/components/material/Ripple.tsx
deleted file mode 100644
index 3e51ffda..00000000
--- a/src/components/material/Ripple.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { onCleanup } from 'solid-js'
-import type { JSX, VoidComponent } from 'solid-js'
-
-export type RippleEffect = {
-  id: number
-  style: RippleStyle
-  timestamp: number
-}
-
-type RippleStyle = Pick<
-  JSX.CSSProperties,
-  'height' | 'width' | 'left' | 'top' | 'z-index'
->
-
-type RippleProps = {
-  id: number
-  class: string
-  style: RippleStyle
-  terminate: (id: number) => void
-}
-
-const Ripple: VoidComponent<RippleProps> = (props) => {
-  const timer = setTimeout(() => props.terminate(props.id), 550)
-  onCleanup(() => clearTimeout(timer))
-
-  return <span class={props.class} style={props.style} />
-}
-
-export default Ripple
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index a27036e5..d6133669 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -20,7 +20,7 @@ export default function Login() {
         />
 
         <div class="flex flex-col items-center gap-2">
-          <h1 class="md:mt-4 text-display-sm font-extrabold">comma connect</h1>
+          <h1 class="text-display-sm font-extrabold md:mt-4">comma connect</h1>
           <p class="text-body-lg">Manage your openpilot experience.</p>
         </div>
 
diff --git a/src/pages/dashboard/components/DeviceList.tsx b/src/pages/dashboard/components/DeviceList.tsx
index 2012dfb4..14cdea95 100644
--- a/src/pages/dashboard/components/DeviceList.tsx
+++ b/src/pages/dashboard/components/DeviceList.tsx
@@ -36,7 +36,7 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               <ListItemContent
                 headline={getDeviceName(device)}
                 subhead={
-                  <span class="lowercase text-label-sm font-mono">
+                  <span class="font-mono text-label-sm lowercase">
                     {device.dongle_id}
                   </span>
                 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ce2f67f1..29a06ab9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -140,12 +140,6 @@ export default {
         }],
       },
       keyframes: {
-        ripple: {
-          '100%': {
-            transform: 'scale(4)',
-            opacity: '0',
-          },
-        },
         shimmer: {
           '100%': {
             transform: 'translateX(100%)',
@@ -203,15 +197,12 @@ export default {
         },
       },
       animation: {
-        ripple: 'ripple 600ms linear',
         indeterminate1: 'indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
         indeterminate2: 'indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite',
         'circular-rotate': 'circular-rotate 1.4s linear infinite',
         'circular-dash': 'circular-dash 1.4s ease-in-out infinite',
       },
       transitionProperty: {
-        typography: 'color, font-size, font-weight',
-        surface: 'background-color, border-color, color, box-shadow',
         indeterminate: 'transform, background-color',
         drawer: 'left, opacity, width',
       },