diff --git a/src/components/DeviceStatistics.tsx b/src/components/DeviceStatistics.tsx
index 9477113a..698f9173 100644
--- a/src/components/DeviceStatistics.tsx
+++ b/src/components/DeviceStatistics.tsx
@@ -5,8 +5,6 @@ import clsx from 'clsx'
 import { getDeviceStats } from '~/api/devices'
 import { formatDistance, formatDuration } from '~/utils/date'
 
-import Typography from '~/components/material/Typography'
-
 type DeviceStatisticsProps = {
   class?: string
   dongleId: string
@@ -19,28 +17,18 @@ const DeviceStatistics: VoidComponent<DeviceStatisticsProps> = (props) => {
   return (
     <div class={clsx('flex h-10 w-full gap-8', props.class)}>
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Distance
-        </Typography>
-        <Typography variant="label-lg">
-          {formatDistance(allTime()?.distance)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Distance</span>
+        <span class="text-label-lg font-mono uppercase">{formatDistance(allTime()?.distance)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Duration
-        </Typography>
-        <Typography variant="label-lg">
-          {formatDuration(allTime()?.minutes)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Duration</span>
+        <span class="text-label-lg font-mono uppercase">{formatDuration(allTime()?.minutes)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Routes
-        </Typography>
-        <Typography variant="label-lg">{allTime()?.routes ?? 0}</Typography>
+        <span class="text-body-sm text-on-surface-variant">Routes</span>
+        <span class="text-label-lg font-mono uppercase">{allTime()?.routes ?? 0}</span>
       </div>
     </div>
   )
diff --git a/src/components/RouteStaticMap.tsx b/src/components/RouteStaticMap.tsx
index 8bfa23d6..d8e83d5d 100644
--- a/src/components/RouteStaticMap.tsx
+++ b/src/components/RouteStaticMap.tsx
@@ -8,7 +8,6 @@ import { getThemeId } from '~/theme'
 import type { Route } from '~/types'
 
 import Icon from '~/components/material/Icon'
-import Typography from '~/components/material/Typography'
 
 const loadImage = (url: string | undefined): Promise<string | undefined> => {
   if (!url) {
@@ -46,7 +45,7 @@ const State = (props: {
         props.opaque && 'bg-surface text-on-surface',
       )}
     >
-      <Typography variant="label-sm">{props.children}</Typography>
+      <span class="text-label-sm">{props.children}</span>
       {props.trailing}
     </div>
   )
diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx
index adb3420e..e3317a2c 100644
--- a/src/components/RouteStatistics.tsx
+++ b/src/components/RouteStatistics.tsx
@@ -6,8 +6,6 @@ import { TimelineStatistics, getTimelineStatistics } from '~/api/derived'
 import type { Route } from '~/types'
 import { formatRouteDistance, formatRouteDuration } from '~/utils/date'
 
-import Typography from '~/components/material/Typography'
-
 const formatEngagement = (timeline?: TimelineStatistics): string => {
   if (!timeline) return ''
   const { engagedDuration, duration } = timeline
@@ -29,42 +27,26 @@ const RouteStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
   return (
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Distance
-        </Typography>
-        <Typography variant="label-lg">
-          {formatRouteDistance(props.route)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Distance</span>
+        <span class="text-label-lg font-mono uppercase">{formatRouteDistance(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Duration
-        </Typography>
-        <Typography variant="label-lg">
-          {formatRouteDuration(props.route)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Duration</span>
+        <span class="text-label-lg font-mono uppercase">{formatRouteDuration(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Engaged
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Engaged</span>
         <Suspense>
-          <Typography variant="label-lg">
-            {formatEngagement(timeline())}
-          </Typography>
+          <span class="text-label-lg font-mono uppercase">{formatEngagement(timeline())}</span>
         </Suspense>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          User flags
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">User flags</span>
         <Suspense>
-          <Typography variant="label-lg">
-            {formatUserFlags(timeline())}
-          </Typography>
+          <span class="text-label-lg font-mono uppercase">{formatUserFlags(timeline())}</span>
         </Suspense>
       </div>
     </div>
diff --git a/src/components/material/Button.tsx b/src/components/material/Button.tsx
index b8be359e..f7504431 100644
--- a/src/components/material/Button.tsx
+++ b/src/components/material/Button.tsx
@@ -3,7 +3,6 @@ import { splitProps } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase, { ButtonBaseProps } from './ButtonBase'
-import Typography from './Typography'
 
 type ButtonProps = ButtonBaseProps & {
   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
@@ -42,7 +41,7 @@ const Button: ParentComponent<ButtonProps> = (props) => {
       {...rest}
     >
       {props.leading}
-      <Typography variant="label-lg">{props.children}</Typography>
+      <span class="text-label-lg">{props.children}</span>
       {props.trailing}
     </ButtonBase>
   )
diff --git a/src/components/material/Card.tsx b/src/components/material/Card.tsx
index d884294d..87e340d1 100644
--- a/src/components/material/Card.tsx
+++ b/src/components/material/Card.tsx
@@ -2,7 +2,6 @@ import type { ParentComponent, JSXElement, VoidComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type CardHeaderProps = {
   class?: string
@@ -19,12 +18,8 @@ export const CardHeader: VoidComponent<CardHeaderProps> = (props) => {
     >
       {props.leading}
       <div class="flex h-12 grow flex-col justify-between">
-        {props.headline && (
-          <Typography variant="title-md">{props.headline}</Typography>
-        )}
-        {props.subhead && (
-          <Typography variant="body-md">{props.subhead}</Typography>
-        )}
+        {props.headline && <span class="text-title-md">{props.headline}</span>}
+        {props.subhead && <span class="text-body-md">{props.subhead}</span>}
       </div>
       {props.trailing}
     </div>
@@ -40,12 +35,8 @@ type CardHeadlineProps = {
 export const CardHeadline: VoidComponent<CardHeadlineProps> = (props) => {
   return (
     <div class={clsx('flex h-12 grow flex-col justify-between', props.class)}>
-      {props.title && <Typography variant="body-lg">{props.title}</Typography>}
-      {props.subhead && (
-        <Typography variant="body-md" color="on-surface-variant">
-          {props.subhead}
-        </Typography>
-      )}
+      {props.title && <span class="text-body-lg">{props.title}</span>}
+      {props.subhead && <span class="text-body-md text-on-surface-variant">{props.subhead}</span>}
     </div>
   )
 }
@@ -55,11 +46,7 @@ type CardContentProps = {
 }
 
 export const CardContent: ParentComponent<CardContentProps> = (props) => {
-  return (
-    <div class={clsx('flex flex-col gap-4 p-4', props.class)}>
-      {props.children}
-    </div>
-  )
+  return <div class={clsx('flex flex-col gap-4 p-4', props.class)}>{props.children}</div>
 }
 
 type CardTextContentProps = {
@@ -71,9 +58,7 @@ export const CardTextContent: ParentComponent<CardTextContentProps> = (
 ) => {
   return (
     <div class={clsx('flex', props.class)}>
-      <Typography variant="body-md" color="on-surface-variant">
-        {props.children}
-      </Typography>
+      <span class="text-body-md text-on-surface-variant">{props.children}</span>
     </div>
   )
 }
@@ -83,11 +68,7 @@ type CardActionsProps = {
 }
 
 export const CardActions: ParentComponent<CardActionsProps> = (props) => {
-  return (
-    <div class={clsx('flex justify-end gap-4', props.class)}>
-      {props.children}
-    </div>
-  )
+  return <div class={clsx('flex justify-end gap-4', props.class)}>{props.children}</div>
 }
 
 type CardProps = {
diff --git a/src/components/material/FloatingActionButton.tsx b/src/components/material/FloatingActionButton.tsx
index 557e3689..6732a117 100644
--- a/src/components/material/FloatingActionButton.tsx
+++ b/src/components/material/FloatingActionButton.tsx
@@ -2,7 +2,6 @@ import type { JSXElement, ParentComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase, { ButtonBaseProps } from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type FloatingActionButtonProps = ButtonBaseProps & {
   leading?: JSXElement
@@ -20,7 +19,7 @@ const FloatingActionButton: ParentComponent<FloatingActionButtonProps> = (
       onClick={props.onClick}
     >
       {props.leading}
-      <Typography variant="label-lg">{props.children}</Typography>
+      <span class="text-label-lg">{props.children}</span>
     </ButtonBase>
   )
 }
diff --git a/src/components/material/List.tsx b/src/components/material/List.tsx
index 565f04dd..39888807 100644
--- a/src/components/material/List.tsx
+++ b/src/components/material/List.tsx
@@ -2,7 +2,6 @@ import type { JSXElement, ParentComponent, VoidComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type ListItemContentProps = {
   headline: JSXElement
@@ -12,14 +11,8 @@ type ListItemContentProps = {
 export const ListItemContent: VoidComponent<ListItemContentProps> = (props) => {
   return (
     <div>
-      <Typography color="on-surface" variant="body-lg" as="div">
-        {props.headline}
-      </Typography>
-      {props.subhead && (
-        <Typography color="on-surface-variant" variant="body-md" as="div">
-          {props.subhead}
-        </Typography>
-      )}
+      <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>
   )
 }
diff --git a/src/components/material/NavigationBar.tsx b/src/components/material/NavigationBar.tsx
index 24d803f1..318aecee 100644
--- a/src/components/material/NavigationBar.tsx
+++ b/src/components/material/NavigationBar.tsx
@@ -3,7 +3,6 @@ import { A } from '@solidjs/router'
 import clsx from 'clsx'
 
 import Icon, { IconProps } from '~/components/material/Icon'
-import Typography from '~/components/material/Typography'
 
 type NavigationBarItemProps = {
   icon: IconProps['children']
@@ -25,9 +24,9 @@ export const NavigationBarItem: ParentComponent<NavigationBarItemProps> = (
       <Icon class="flex transition-all" filled={props.selected}>
         {props.icon}
       </Icon>
-      <Typography as="div" class="mt-2 flex" variant="label-lg">
+      <div class="mt-2 flex text-label-lg">
         {props.children}
-      </Typography>
+      </div>
     </A>
   )
 }
diff --git a/src/components/material/TopAppBar.tsx b/src/components/material/TopAppBar.tsx
index 6ff5442c..a3ef8031 100644
--- a/src/components/material/TopAppBar.tsx
+++ b/src/components/material/TopAppBar.tsx
@@ -1,13 +1,12 @@
 import type { JSXElement, ParentComponent } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 import clsx from 'clsx'
 
-import Typography from '~/components/material/Typography'
-
 type TopAppBarProps = {
   class?: string
   leading?: JSXElement
   trailing?: JSXElement
-  as?: string
+  component?: string
 }
 
 const TopAppBar: ParentComponent<TopAppBarProps> = (props) => {
@@ -19,9 +18,9 @@ const TopAppBar: ParentComponent<TopAppBarProps> = (props) => {
       )}
     >
       {props.leading}
-      <Typography class="grow" as={props.as || 'h2'} variant="title-lg">
+      <Dynamic class="grow text-title-lg" component={props.component || 'h2'}>
         {props.children}
-      </Typography>
+      </Dynamic>
       {props.trailing}
     </div>
   )
diff --git a/src/components/material/Typography.tsx b/src/components/material/Typography.tsx
deleted file mode 100644
index 4735f228..00000000
--- a/src/components/material/Typography.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { ParentComponent } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import clsx from 'clsx'
-
-export type TypographyProps = {
-  class?: string
-  color?:
-    | 'inherit'
-    | 'on-surface'
-    | 'on-surface-variant'
-    | 'on-primary'
-    | 'on-secondary'
-    | 'on-tertiary'
-  variant?:
-    | 'display-lg'
-    | 'display-md'
-    | 'display-sm'
-    | 'headline-lg'
-    | 'headline-md'
-    | 'headline-sm'
-    | 'title-lg'
-    | 'title-md'
-    | 'title-sm'
-    | 'label-lg'
-    | 'label-md'
-    | 'label-sm'
-    | 'body-lg'
-    | 'body-md'
-    | 'body-sm'
-  weight?:
-    | 'thin'
-    | 'extra-light'
-    | 'light'
-    | 'regular'
-    | 'medium'
-    | 'semi-bold'
-    | 'bold'
-    | 'extra-bold'
-    | 'black'
-  as?: string
-}
-
-const Typography: ParentComponent<TypographyProps> = (props) => {
-  // TODO: letter spacing
-  const variant = () => props.variant || 'body-md'
-  const styles = () =>
-    ({
-      'display-lg': 'font-sans text-[57px] leading-[64px]',
-      'display-md': 'font-sans text-[45px] leading-[52px]',
-      'display-sm': 'font-sans text-[36px] leading-[44px]',
-      'headline-lg': 'font-sans text-[32px] leading-[40px]',
-      'headline-md': 'font-sans text-[28px] leading-[36px]',
-      'headline-sm': 'font-sans text-[24px] leading-[32px]',
-      'title-lg': 'font-sans text-[22px] leading-[28px]',
-      'title-md': 'font-sans text-[16px] leading-[24px]',
-      'title-sm': 'font-sans text-[14px] leading-[20px]',
-      'label-lg': 'font-mono text-[14px] leading-[20px] uppercase',
-      'label-md': 'font-mono text-[12px] leading-[16px] uppercase',
-      'label-sm': 'font-mono text-[11px] leading-[16px] uppercase',
-      'body-lg': 'font-sans text-[16px] leading-[24px]',
-      'body-md': 'font-sans text-[14px] leading-[20px]',
-      'body-sm': 'font-sans text-[12px] leading-[16px]',
-    }[variant()])
-
-  const variantWeight = () =>
-    ({
-      'display-lg': 'regular',
-      'display-md': 'regular',
-      'display-sm': 'regular',
-      'headline-lg': 'regular',
-      'headline-md': 'regular',
-      'headline-sm': 'regular',
-      'title-lg': 'regular',
-      'title-md': 'medium',
-      'title-sm': 'medium',
-      'label-lg': 'medium',
-      'label-md': 'medium',
-      'label-sm': 'medium',
-      'body-lg': 'regular',
-      'body-md': 'regular',
-      'body-sm': 'regular',
-    }[variant()])
-
-  const weight = () => props.weight || variantWeight()
-  const weightStyles = () =>
-    ({
-      light: 'font-light',
-      regular: 'font-regular',
-      medium: 'font-medium',
-      'semi-bold': 'font-semibold',
-      bold: 'font-bold',
-      'extra-bold': 'font-extrabold',
-    }[weight() || variantWeight()])
-
-  const color = () => props.color || 'inherit'
-  const colorStyles = () =>
-    ({
-      inherit: '',
-      'on-surface': 'text-on-surface',
-      'on-surface-variant': 'text-on-surface-variant',
-      'on-primary': 'text-on-primary',
-      'on-secondary': 'text-on-secondary',
-      'on-tertiary': 'text-on-tertiary',
-    }[color()])
-
-  return (
-    <Dynamic
-      class={clsx(
-        'transition-typography',
-        styles(),
-        weightStyles(),
-        colorStyles(),
-        props.class,
-      )}
-      component={props.as || 'span'}
-    >
-      {props.children}
-    </Dynamic>
-  )
-}
-
-export default Typography
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index 4f8d079a..a27036e5 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -2,7 +2,6 @@ import { getGoogleAuthUrl, getAppleAuthUrl, getGitHubAuthUrl } from '~/api/auth'
 import { setAccessToken } from '~/api/auth/client'
 
 import Button from '~/components/material/Button'
-import Typography from '~/components/material/Typography'
 
 export default function Login() {
   const loginAsDemoUser = function () {
@@ -21,18 +20,8 @@ export default function Login() {
         />
 
         <div class="flex flex-col items-center gap-2">
-          <Typography
-            class="md:mt-4"
-            variant="display-sm"
-            weight="extra-bold"
-            as="h1"
-          >
-            comma connect
-          </Typography>
-
-          <Typography variant="body-lg" as="p">
-            Manage your openpilot experience.
-          </Typography>
+          <h1 class="md:mt-4 text-display-sm font-extrabold">comma connect</h1>
+          <p class="text-body-lg">Manage your openpilot experience.</p>
         </div>
 
         <div class="flex flex-col items-stretch gap-4 self-stretch">
@@ -84,10 +73,10 @@ export default function Login() {
         </div>
 
         <div class="flex justify-between gap-4">
-          <Typography variant="body-lg" as="p">
+          <p class="text-body-lg">
             Make sure to sign in with the same account if you have previously
             paired your comma three.
-          </Typography>
+          </p>
 
           <img
             src="/images/icon-comma-three-light.svg"
diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
index 36dca7e0..0e6bab61 100644
--- a/src/pages/dashboard/Dashboard.tsx
+++ b/src/pages/dashboard/Dashboard.tsx
@@ -18,7 +18,6 @@ import type { Device } from '~/types'
 import Drawer from '~/components/material/Drawer'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
-import Typography from '~/components/material/Typography'
 
 import DeviceList from './components/DeviceList'
 import DeviceActivity from './activities/DeviceActivity'
@@ -39,14 +38,14 @@ const DashboardDrawer = (props: {
   return (
     <>
       <TopAppBar
-        as="h1"
+        component="h1"
         leading={<IconButton onClick={props.onClose}>arrow_back</IconButton>}
       >
         comma connect
       </TopAppBar>
-      <Typography class="mx-4 mb-2" as="h2" variant="label-sm">
+      <h2 class="mx-4 mb-2 text-label-sm">
         Devices
-      </Typography>
+      </h2>
       <Show when={props.devices} keyed>
         {(devices: Device[]) => <DeviceList class="p-2" devices={devices} />}
       </Show>
diff --git a/src/pages/dashboard/activities/DeviceActivity.tsx b/src/pages/dashboard/activities/DeviceActivity.tsx
index 73ac2829..f47638f0 100644
--- a/src/pages/dashboard/activities/DeviceActivity.tsx
+++ b/src/pages/dashboard/activities/DeviceActivity.tsx
@@ -5,7 +5,6 @@ import { getDevice } from '~/api/devices'
 
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
-import Typography from '~/components/material/Typography'
 import DeviceStatistics from '~/components/DeviceStatistics'
 import { getDeviceName } from '~/utils/device'
 
@@ -35,7 +34,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
           </Suspense>
         </div>
         <div class="flex flex-col gap-2">
-          <Typography variant="label-sm">Routes</Typography>
+          <span class="text-label-sm">Routes</span>
           <RouteList dongleId={props.dongleId} />
         </div>
       </div>
diff --git a/src/pages/dashboard/activities/RouteActivity.tsx b/src/pages/dashboard/activities/RouteActivity.tsx
index 73361da8..d4aa35f7 100644
--- a/src/pages/dashboard/activities/RouteActivity.tsx
+++ b/src/pages/dashboard/activities/RouteActivity.tsx
@@ -10,7 +10,6 @@ import { getRoute } from '~/api/route'
 
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
-import Typography from '~/components/material/Typography'
 
 import RouteStaticMap from '~/components/RouteStaticMap'
 import RouteStatistics from '~/components/RouteStatistics'
@@ -47,9 +46,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         </Suspense>
 
         <div class="flex flex-col gap-2">
-          <Typography as="h3" variant="label-sm">
-            Timeline
-          </Typography>
+          <h3 class="text-label-sm">Timeline</h3>
           <Timeline class="mb-1" routeName={routeName()} seekTime={seekTime()} />
           <Suspense fallback={<div class="h-10" />}>
             <RouteStatistics route={route()} />
@@ -57,9 +54,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         </div>
 
         <div class="flex flex-col gap-2">
-          <Typography as="h3" variant="label-sm">
-            Route Map
-          </Typography>
+          <h3 class="text-label-sm">Route Map</h3>
           <div class="h-64 overflow-hidden rounded-lg">
             <Suspense fallback={<div class="skeleton-loader size-full bg-surface" />}>
               <RouteStaticMap route={route()} />
diff --git a/src/pages/dashboard/components/DeviceList.tsx b/src/pages/dashboard/components/DeviceList.tsx
index ad99ef2c..2012dfb4 100644
--- a/src/pages/dashboard/components/DeviceList.tsx
+++ b/src/pages/dashboard/components/DeviceList.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx'
 
 import Icon from '~/components/material/Icon'
 import List, { ListItem, ListItemContent } from '~/components/material/List'
-import Typography from '~/components/material/Typography'
 import type { Device } from '~/types'
 import { getDeviceName } from '~/utils/device'
 
@@ -37,9 +36,9 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               <ListItemContent
                 headline={getDeviceName(device)}
                 subhead={
-                  <Typography class="lowercase" variant="label-sm">
+                  <span class="lowercase text-label-sm font-mono">
                     {device.dongle_id}
-                  </Typography>
+                  </span>
                 }
               />
             </ListItem>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 69920035..ce2f67f1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -80,6 +80,65 @@ export default {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
         mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
       },
+      fontSize: {
+        'display-lg': ['57px', {
+          lineHeight: '64px',
+          letterSpacing: '-0.25px',
+        }],
+        'display-md': ['45px', {
+          lineHeight: '52px',
+        }],
+        'display-sm': ['36px', {
+          lineHeight: '44px',
+        }],
+        'headline-lg': ['32px', {
+          lineHeight: '40px',
+        }],
+        'headline-md': ['28px', {
+          lineHeight: '36px',
+        }],
+        'headline-sm': ['24px', {
+          lineHeight: '32px',
+        }],
+        'title-lg': ['22px', {
+          lineHeight: '28px',
+        }],
+        'title-md': ['16px', {
+          lineHeight: '24px',
+          fontWeight: 500,
+          letterSpacing: '0.15px',
+        }],
+        'title-sm': ['14px', {
+          lineHeight: '20px',
+          fontWeight: 500,
+          letterSpacing: '0.1px',
+        }],
+        'label-lg': ['14px', {
+          lineHeight: '20px',
+          fontWeight: 500,
+        }],
+        'label-md': ['12px', {
+          lineHeight: '18px',
+          fontWeight: 500,
+        }],
+        'label-sm': ['11px', {
+          lineHeight: '16px',
+          fontWeight: 500,
+          letterSpacing: '0.5px',
+        }],
+        'body-lg': ['16px', {
+          lineHeight: '24px',
+          letterSpacing: '0.5px',
+        }],
+        'body-md': ['14px', {
+          lineHeight: '20px',
+          letterSpacing: '0.25px',
+        }],
+        'body-sm': ['12px', {
+          lineHeight: '16px',
+          letterSpacing: '0.4px',
+        }],
+      },
       keyframes: {
         ripple: {
           '100%': {