diff --git a/src/app/(main)/MobileNav.tsx b/src/app/(main)/MobileNav.tsx
index de12b14c3..af67bc716 100644
--- a/src/app/(main)/MobileNav.tsx
+++ b/src/app/(main)/MobileNav.tsx
@@ -38,7 +38,7 @@ export function MobileNav() {
   ];
 
   return (
-    <Grid columns="auto 1fr" flexGrow={1} backgroundColor="3" borderRadius>
+    <Grid columns="auto 1fr" flexGrow={1} backgroundColor="surface-sunken" borderRadius>
       <MobileMenuButton>
         {({ close }) => {
           return (
diff --git a/src/app/(main)/TopNav.tsx b/src/app/(main)/TopNav.tsx
index d410097ae..11a234cdc 100644
--- a/src/app/(main)/TopNav.tsx
+++ b/src/app/(main)/TopNav.tsx
@@ -16,7 +16,12 @@ export function TopNav() {
       style={{ position: 'sticky', top: 0 }}
       zIndex={1}
     >
-      <Row alignItems="center" justifyContent="flex-end" backgroundColor="2" borderRadius>
+      <Row
+        alignItems="center"
+        justifyContent="flex-end"
+        backgroundColor="surface-raised"
+        borderRadius
+      >
         <ThemeButton />
         <LanguageButton />
         <ProfileButton />
diff --git a/src/app/(main)/boards/[boardId]/BoardHeader.tsx b/src/app/(main)/boards/[boardId]/BoardHeader.tsx
index f3e832446..d49d6de37 100644
--- a/src/app/(main)/boards/[boardId]/BoardHeader.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardHeader.tsx
@@ -93,7 +93,7 @@ function BoardEditHeader() {
             autoComplete="off"
             style={{ fontSize: '2rem', fontWeight: 700, width: '100%' }}
           >
-            <Heading size="4">{board?.name}</Heading>
+            <Heading size="xl">{board?.name}</Heading>
           </TextField>
         </Row>
         <Row>
diff --git a/src/app/(main)/links/[linkId]/LinkPanels.tsx b/src/app/(main)/links/[linkId]/LinkPanels.tsx
index f33525e70..07a624530 100644
--- a/src/app/(main)/links/[linkId]/LinkPanels.tsx
+++ b/src/app/(main)/links/[linkId]/LinkPanels.tsx
@@ -20,7 +20,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -35,7 +35,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -59,7 +59,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
           <WorldMap websiteId={linkId} />
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>
diff --git a/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
index 9cc24c923..3acf61004 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
@@ -20,7 +20,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -35,7 +35,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -59,7 +59,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
           <WorldMap websiteId={pixelId} />
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>
diff --git a/src/app/(main)/teams/[teamId]/TeamSettings.tsx b/src/app/(main)/teams/[teamId]/TeamSettings.tsx
index 4bbb8905a..c0259f47d 100644
--- a/src/app/(main)/teams/[teamId]/TeamSettings.tsx
+++ b/src/app/(main)/teams/[teamId]/TeamSettings.tsx
@@ -41,7 +41,7 @@ export function TeamSettings({ teamId }: { teamId: string }) {
       </Panel>
       <Panel>
         <Row alignItems="center" justifyContent="space-between">
-          <Heading size="2">{formatMessage(labels.members)}</Heading>
+          <Heading size="base">{formatMessage(labels.members)}</Heading>
           {isAdmin && <TeamsMemberAddButton teamId={teamId} />}
         </Row>
         <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
index d81519d76..7821b07c1 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
@@ -33,7 +33,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
         <Grid columns="1fr auto" gap>
           <Column gap>
             <Row>
-              <Text size="4" weight="bold">
+              <Text size="lg" weight="bold">
                 {name}
               </Text>
             </Row>
@@ -66,21 +66,21 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
                 <Column alignItems="center" position="relative">
                   <Row
                     borderRadius="full"
-                    backgroundColor="3"
+                    backgroundColor="surface-sunken"
                     width="40px"
                     height="40px"
                     justifyContent="center"
                     alignItems="center"
                     style={{ zIndex: 1 }}
                   >
-                    <Text weight="bold" size="3">
+                    <Text weight="bold" size="base">
                       {index + 1}
                     </Text>
                   </Row>
                   {index > 0 && (
                     <Box
                       position="absolute"
-                      backgroundColor="3"
+                      backgroundColor="surface-sunken"
                       width="2px"
                       height="120px"
                       top="-100%"
@@ -121,7 +121,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
                       style={{ width: '100%' }}
                     />
                     <Row minWidth="90px" justifyContent="end">
-                      <Text weight="bold" size="7">
+                      <Text weight="bold" size="4xl">
                         {Math.round(remaining * 100)}%
                       </Text>
                     </Row>
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx b/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
index 1d0b96e50..40abea27c 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
@@ -42,7 +42,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
           <Grid columns="1fr auto" gap>
             <Column gap>
               <Row>
-                <Text size="4" weight="bold">
+                <Text size="lg" weight="bold">
                   {name}
                 </Text>
               </Row>
@@ -92,7 +92,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
               maxValue={data?.total || 1}
               style={{ width: '100%' }}
             />
-            <Text weight="bold" size="7">
+            <Text weight="bold" size="4xl">
               {data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
             </Text>
           </Row>
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx b/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx
index fdd8a146b..0cccb6f7d 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx
@@ -131,7 +131,7 @@ const Cell = ({ children }: { children: ReactNode }) => {
       alignItems="center"
       width="100px"
       height="100px"
-      backgroundColor="2"
+      backgroundColor="surface-raised"
       borderRadius
     >
       {children}
diff --git a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
index 4a666f104..b92821b1f 100644
--- a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
@@ -21,7 +21,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.pages)}</Heading>
+          <Heading size="base">{formatMessage(labels.pages)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="path">{formatMessage(labels.path)}</Tab>
@@ -40,7 +40,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -62,7 +62,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
 
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -82,7 +82,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
         </Panel>
 
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>
@@ -108,7 +108,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
         </Panel>
 
         <Panel>
-          <Heading size="2">{formatMessage(labels.traffic)}</Heading>
+          <Heading size="base">{formatMessage(labels.traffic)}</Heading>
           <Row border="bottom" marginBottom="4" />
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>
diff --git a/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx b/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
index 294b5fcc9..4123a1abb 100644
--- a/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
@@ -169,7 +169,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
         <Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6" height="100%">
           <Column gap="6">
             <Row alignItems="center" justifyContent="space-between">
-              <Heading size="2">{formatMessage(labels.previous)}</Heading>
+              <Heading size="base">{formatMessage(labels.previous)}</Heading>
               <DateDisplay startDate={startDate} endDate={endDate} />
             </Row>
             <MetricsTable
@@ -183,7 +183,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
           </Column>
           <Column border="left" paddingLeft="6" gap="6">
             <Row alignItems="center" justifyContent="space-between">
-              <Heading size="2"> {formatMessage(labels.current)}</Heading>
+              <Heading size="base"> {formatMessage(labels.current)}</Heading>
               <DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
             </Row>
             <MetricsTable
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
index 0bd5fb46f..7bd3f62ee 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
@@ -183,7 +183,7 @@ export function RealtimeLog({ data }: { data: any }) {
 
   return (
     <Column gap>
-      <Heading size="2">{formatMessage(labels.activity)}</Heading>
+      <Heading size="base">{formatMessage(labels.activity)}</Heading>
       {isPhone ? (
         <>
           <Row>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
index df0ef834a..a93885aa9 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx
@@ -61,7 +61,7 @@ export function SessionActivity({
 
           return (
             <Column key={eventId} gap>
-              {showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
+              {showHeader && <Heading size="sm">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
               <Row alignItems="center" gap="6" height="40px">
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
                   <Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
index 7c82c17ad..15cb86ccc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
@@ -17,8 +17,8 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
               <Label>{dataKey}</Label>
               <Row alignItems="center" gap>
                 <Text>{stringValue}</Text>
-                <Box paddingY="1" paddingX="2" border borderRadius borderColor="5">
-                  <Text color="muted" size="1">
+                <Box paddingY="1" paddingX="2" border borderRadius borderColor="muted">
+                  <Text color="muted" size="xs">
                     {DATA_TYPES[dataType]}
                   </Text>
                 </Box>
diff --git a/src/app/login/LoginPage.tsx b/src/app/login/LoginPage.tsx
index 6f485e3f7..8b90c8f33 100644
--- a/src/app/login/LoginPage.tsx
+++ b/src/app/login/LoginPage.tsx
@@ -4,7 +4,7 @@ import { LoginForm } from './LoginForm';
 
 export function LoginPage() {
   return (
-    <Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
+    <Column alignItems="center" height="100vh" backgroundColor="surface-raised" paddingTop="12">
       <LoginForm />
     </Column>
   );
diff --git a/src/components/charts/ChartTooltip.tsx b/src/components/charts/ChartTooltip.tsx
index 95ba2a2b4..e1fce0d2b 100644
--- a/src/components/charts/ChartTooltip.tsx
+++ b/src/components/charts/ChartTooltip.tsx
@@ -1,4 +1,4 @@
-import { Column, FloatingTooltip, Row, StatusLight } from '@umami/react-zen';
+import { Column, FloatingTooltip, Row, StatusLight, Text } from '@umami/react-zen';
 import type { ReactNode } from 'react';
 
 export function ChartTooltip({
@@ -12,10 +12,18 @@ export function ChartTooltip({
 }) {
   return (
     <FloatingTooltip>
-      <Column gap="3" fontSize="1">
-        {title && <Row alignItems="center">{title}</Row>}
+      <Column
+        gap="3"
+        backgroundColor="surface-inverted"
+        color="inverted"
+        padding="4"
+        borderRadius="md"
+      >
+        {title && <Text size="sm">{title}</Text>}
         <Row alignItems="center">
-          <StatusLight color={color}>{value}</StatusLight>
+          <StatusLight color={color}>
+            <Text size="sm">{value}</Text>
+          </StatusLight>
         </Row>
       </Column>
     </FloatingTooltip>
diff --git a/src/components/common/EmptyPlaceholder.tsx b/src/components/common/EmptyPlaceholder.tsx
index 64492e043..d7a88ff7a 100644
--- a/src/components/common/EmptyPlaceholder.tsx
+++ b/src/components/common/EmptyPlaceholder.tsx
@@ -12,12 +12,12 @@ export function EmptyPlaceholder({ title, description, icon, children }: EmptyPl
   return (
     <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
       {icon && (
-        <Icon color="10" size="xl">
+        <Icon color="muted" size="xl">
           {icon}
         </Icon>
       )}
       {title && (
-        <Text weight="bold" size="4">
+        <Text weight="bold" size="lg">
           {title}
         </Text>
       )}
diff --git a/src/components/common/SectionHeader.tsx b/src/components/common/SectionHeader.tsx
index 5b911efb4..f6642feaa 100644
--- a/src/components/common/SectionHeader.tsx
+++ b/src/components/common/SectionHeader.tsx
@@ -19,7 +19,7 @@ export function SectionHeader({
     <Row {...props} justifyContent="space-between" alignItems="center" height="60px">
       <Row gap="3" alignItems="center">
         {icon && <Icon size="md">{icon}</Icon>}
-        {title && <Heading size="3">{title}</Heading>}
+        {title && <Heading size="lg">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}
       </Row>
       <Row justifyContent="flex-end">{children}</Row>
diff --git a/src/components/input/FilterBar.tsx b/src/components/input/FilterBar.tsx
index 5a52e5666..11707949d 100644
--- a/src/components/input/FilterBar.tsx
+++ b/src/components/input/FilterBar.tsx
@@ -51,7 +51,13 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
   }
 
   return (
-    <Row gap alignItems="center" justifyContent="space-between" padding="2" backgroundColor="3">
+    <Row
+      gap
+      alignItems="center"
+      justifyContent="space-between"
+      padding="2"
+      backgroundColor="surface-sunken"
+    >
       <Row alignItems="center" gap="2" wrap="wrap">
         {segment && !isLoading && (
           <FilterItem
@@ -138,11 +144,11 @@ const FilterItem = ({ name, label, operator, value, onRemove }) => {
     >
       <Row alignItems="center" gap="4">
         <Row alignItems="center" gap="2">
-          <Text color="12" weight="bold">
+          <Text color="primary" weight="bold">
             {label}
           </Text>
-          <Text color="11">{operator}</Text>
-          <Text color="12" weight="bold">
+          <Text color="muted">{operator}</Text>
+          <Text color="primary" weight="bold">
             {value}
           </Text>
         </Row>
diff --git a/src/components/metrics/ActiveUsers.tsx b/src/components/metrics/ActiveUsers.tsx
index a4bc7da22..d440f9ae7 100644
--- a/src/components/metrics/ActiveUsers.tsx
+++ b/src/components/metrics/ActiveUsers.tsx
@@ -30,7 +30,7 @@ export function ActiveUsers({
   return (
     <LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
       <StatusLight variant="success">
-        <Text size="2" weight="medium">
+        <Text size="sm" weight="medium">
           {count} {formatMessage(labels.online)}
         </Text>
       </StatusLight>
diff --git a/src/components/metrics/Legend.tsx b/src/components/metrics/Legend.tsx
index 34ddb5a01..2fea4abc8 100644
--- a/src/components/metrics/Legend.tsx
+++ b/src/components/metrics/Legend.tsx
@@ -23,7 +23,7 @@ export function Legend({
           <Row key={text} onClick={() => onClick(item)}>
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
               <Text
-                size="2"
+                size="sm"
                 color={hidden ? 'disabled' : undefined}
                 truncate={true}
                 style={{ maxWidth: '300px' }}
diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 4babd50b7..545d4f37f 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -133,7 +133,7 @@ const AnimatedRow = ({
           justifyContent="flex-start"
           position="relative"
           border="left"
-          borderColor="8"
+          borderColor="strong"
           color="muted"
           paddingLeft="3"
         >
diff --git a/src/components/metrics/WeeklyTraffic.tsx b/src/components/metrics/WeeklyTraffic.tsx
index 90e47c636..73cd63768 100644
--- a/src/components/metrics/WeeklyTraffic.tsx
+++ b/src/components/metrics/WeeklyTraffic.tsx
@@ -49,7 +49,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                   });
                   return (
                     <Row key={i} justifyContent="flex-end">
-                      <Text color="muted" size="2">
+                      <Text color="muted" size="sm">
                         {label}
                       </Text>
                     </Row>
@@ -79,7 +79,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                           <Row
                             alignItems="center"
                             justifyContent="center"
-                            backgroundColor="2"
+                            backgroundColor="surface-raised"
                             width="16px"
                             height="16px"
                             borderRadius="full"