diff --git a/.vscode/settings.json b/.vscode/settings.json
index a0f7c59d7..5aee58a06 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,8 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }
diff --git a/src/app.css b/src/app.css
index 326d15975..29ce0137b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -10,28 +10,14 @@
   *,
   html,
   body {
-    box-sizing: border-box;
+    @apply box-border;
   }
 
   body {
-    @apply surface-background;
-    font-family: theme('fontFamily.primary');
-    position: relative;
-    overscroll-behavior: none;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  titles,
-  labels {
-    font-family: theme('fontFamily.secondary');
+    @apply body-normal surface-background relative overscroll-none;
   }
 
   input[type='search']::-webkit-search-cancel-button {
-    display: none;
+    @apply hidden;
   }
 }
diff --git a/src/lib/components/batch-operations/header.svelte b/src/lib/components/batch-operations/header.svelte
index 49762abbf..2b7434177 100644
--- a/src/lib/components/batch-operations/header.svelte
+++ b/src/lib/components/batch-operations/header.svelte
@@ -32,17 +32,17 @@
 
 <div class="flex items-center justify-between">
   <div class="flex flex-col gap-2">
-    <div class="flex flex-row gap-2 max-sm:flex-col">
-      <h1 class="text-2xl">
+    <div class="flex flex-row items-center gap-2 max-sm:flex-col">
+      <h1>
         {translate('batch.describe-page-title')}
       </h1>
       <Badge type={jobStateToBadgeType[operation.state]}>
         {operation.state}
       </Badge>
     </div>
-    <h2 class="text-sm">
+    <p>
       {operation.jobId}
-    </h2>
+    </p>
   </div>
   {#if operation.state === 'Running'}
     <Tooltip
diff --git a/src/lib/components/data-encoder-settings.svelte b/src/lib/components/data-encoder-settings.svelte
index 07889f2d8..b5fdc5712 100644
--- a/src/lib/components/data-encoder-settings.svelte
+++ b/src/lib/components/data-encoder-settings.svelte
@@ -80,7 +80,7 @@
   >
     <div class="flex w-full flex-col gap-4 xl:w-1/2">
       <div class="flex items-center justify-between space-x-2">
-        <h3 data-testid="data-encoder-title" class="text-xl">
+        <h3 data-testid="data-encoder-title">
           {translate('common.codec-server')}
         </h3>
       </div>
diff --git a/src/lib/components/lines-and-dots/input-and-results-payload.svelte b/src/lib/components/lines-and-dots/input-and-results-payload.svelte
index 78d530afc..168284995 100644
--- a/src/lib/components/lines-and-dots/input-and-results-payload.svelte
+++ b/src/lib/components/lines-and-dots/input-and-results-payload.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex w-full grow flex-col gap-2 py-4 {$$restProps.class}">
-  <h3 class="flex items-center gap-2 text-2xl">
+  <h3 class="flex items-center gap-2">
     {title}
   </h3>
   {#if content}
diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
index b5f50e457..a78d7c750 100644
--- a/src/lib/components/lines-and-dots/workflow-details.svelte
+++ b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <h3 class="flex items-center text-2xl">Summary</h3>
+  <h3 class="flex items-center">Summary</h3>
   <div
     class="surface-primary grid w-full grid-flow-row grid-cols-1 gap-2 rounded-xl border-2 border-primary p-2 md:grid-cols-2 xl:grid-cols-3"
   >
diff --git a/src/lib/components/schedule/schedule-day-of-month-view.svelte b/src/lib/components/schedule/schedule-day-of-month-view.svelte
index cc564a7b6..96b9757e6 100644
--- a/src/lib/components/schedule/schedule-day-of-month-view.svelte
+++ b/src/lib/components/schedule/schedule-day-of-month-view.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.recurring-dates-heading')}
   </h3>
   <p>{translate('schedules.recurring-dates-description')}</p>
diff --git a/src/lib/components/schedule/schedule-day-of-week-view.svelte b/src/lib/components/schedule/schedule-day-of-week-view.svelte
index 7a0c88459..13771447c 100644
--- a/src/lib/components/schedule/schedule-day-of-week-view.svelte
+++ b/src/lib/components/schedule/schedule-day-of-week-view.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.recurring-days-heading')}
   </h3>
   <p>{translate('schedules.recurring-days-description')}</p>
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index e73d79941..731ff6591 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -142,7 +142,7 @@
       <Link href={backHref} icon="chevron-left">
         {backTitle}
       </Link>
-      <h1 class="font-base text-2xl">{title}</h1>
+      <h1>{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
       <Alert intent="error" title="" hidden={!$error}>
diff --git a/src/lib/components/schedule/schedule-frequency-panel.svelte b/src/lib/components/schedule/schedule-frequency-panel.svelte
index 7eda8fa0d..e2aac334d 100644
--- a/src/lib/components/schedule/schedule-frequency-panel.svelte
+++ b/src/lib/components/schedule/schedule-frequency-panel.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4">{translate('schedules.schedule-spec')}</h2>
   <div class="pr-2">
     <ScheduleFrequency {calendar} {interval} {timezoneName} class="text-base" />
   </div>
diff --git a/src/lib/components/schedule/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-input-payload.svelte
index a717f43a2..d0a7a7b00 100644
--- a/src/lib/components/schedule/schedule-input-payload.svelte
+++ b/src/lib/components/schedule/schedule-input-payload.svelte
@@ -39,10 +39,7 @@
       />
     {/key}
   </PayloadDecoder>
-  <span
-    class="font-secondary text-xs font-light italic"
-    class:text-red-700={error}
-  >
+  <span class="text-xs font-light italic" class:text-red-700={error}>
     {translate('workflows.signal-payload-input-label-hint')}
   </span>
 </div>
diff --git a/src/lib/components/schedule/schedule-notes.svelte b/src/lib/components/schedule/schedule-notes.svelte
index 730a62492..c60b8d49b 100644
--- a/src/lib/components/schedule/schedule-notes.svelte
+++ b/src/lib/components/schedule/schedule-notes.svelte
@@ -5,6 +5,6 @@
 </script>
 
 <div>
-  <h2 class="mb-4 text-lg">{translate('common.notes')}</h2>
+  <h2 class="mb-4">{translate('common.notes')}</h2>
   <p>{notes}</p>
 </div>
diff --git a/src/lib/components/schedule/schedule-recent-runs.svelte b/src/lib/components/schedule/schedule-recent-runs.svelte
index f57fc0885..0ecf1068f 100644
--- a/src/lib/components/schedule/schedule-recent-runs.svelte
+++ b/src/lib/components/schedule/schedule-recent-runs.svelte
@@ -35,7 +35,7 @@
 
 <Panel class="w-full">
   <div class="flex justify-between">
-    <h2 class="mb-4 text-lg">{translate('schedules.recent-runs')}</h2>
+    <h2 class="mb-4">{translate('schedules.recent-runs')}</h2>
     <Link
       href={routeForWorkflowsWithQuery({
         namespace,
diff --git a/src/lib/components/schedule/schedule-upcoming-runs.svelte b/src/lib/components/schedule/schedule-upcoming-runs.svelte
index 10f9f7aba..935d98094 100644
--- a/src/lib/components/schedule/schedule-upcoming-runs.svelte
+++ b/src/lib/components/schedule/schedule-upcoming-runs.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-lg">{translate('schedules.upcoming-runs')}</h2>
+  <h2 class="mb-4">{translate('schedules.upcoming-runs')}</h2>
   {#each futureRuns.slice(0, 5) as run}
     <div class="row">
       <p>
diff --git a/src/lib/components/schedule/schedules-calendar-view.svelte b/src/lib/components/schedule/schedules-calendar-view.svelte
index 1d0ce307b..82ef5b47f 100644
--- a/src/lib/components/schedule/schedules-calendar-view.svelte
+++ b/src/lib/components/schedule/schedules-calendar-view.svelte
@@ -45,7 +45,7 @@
 </script>
 
 <Tabs class="mt-8 w-full">
-  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4">{translate('schedules.schedule-spec')}</h2>
   <TabList label="Schedule Tabs" class="flex flex-wrap gap-6">
     {#if schedule}
       <Tab
@@ -112,7 +112,7 @@
     </TabPanel>
     <TabPanel id="string-panel" tabId="string-tab">
       <div class="my-2 flex w-full flex-col gap-4">
-        <h3 class="text-lg font-medium">
+        <h3>
           {translate('schedules.cron-view-title')}
         </h3>
         <p>{translate('schedules.cron-view-description')}</p>
diff --git a/src/lib/components/schedule/schedules-interval-view.svelte b/src/lib/components/schedule/schedules-interval-view.svelte
index eb12802c7..3d117c6ff 100644
--- a/src/lib/components/schedule/schedules-interval-view.svelte
+++ b/src/lib/components/schedule/schedules-interval-view.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.interval-view-heading')}
   </h3>
   <p>
@@ -94,7 +94,7 @@
       error={error(second)}
     />
   </div>
-  <h3 class="mt-4 text-lg font-medium">
+  <h3 class="mt-4">
     {translate('schedules.offset-heading')}
   </h3>
   <p>
diff --git a/src/lib/components/schedule/schedules-time-view.svelte b/src/lib/components/schedule/schedules-time-view.svelte
index 6a4d05d18..abc2148e5 100644
--- a/src/lib/components/schedule/schedules-time-view.svelte
+++ b/src/lib/components/schedule/schedules-time-view.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div class="flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.time-view-heading')}
   </h3>
   <p>
diff --git a/src/lib/components/worker-compatibility.svelte b/src/lib/components/worker-compatibility.svelte
index 9d3278b1e..86271e0df 100644
--- a/src/lib/components/worker-compatibility.svelte
+++ b/src/lib/components/worker-compatibility.svelte
@@ -33,7 +33,7 @@
   $: defaultVersion = getCurrentCompatibilityDefaultVersion(compatibility);
 </script>
 
-<h2 class="text-base font-medium" data-testid="version-sets">
+<h2 data-testid="version-sets">
   {translate('workers.version-sets')}
 </h2>
 <Table class="mb-6 w-full min-w-[600px] table-fixed">
@@ -77,7 +77,7 @@
     </tr>
   {/each}
 </Table>
-<h2 class="flex items-center gap-2 text-base font-medium" data-testid="workers">
+<h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
   <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
 </h2>
diff --git a/src/lib/components/worker-rules.svelte b/src/lib/components/worker-rules.svelte
index ec9136351..6cca06239 100644
--- a/src/lib/components/worker-rules.svelte
+++ b/src/lib/components/worker-rules.svelte
@@ -32,7 +32,7 @@
   };
 </script>
 
-<h2 class="text-base font-medium" data-testid="worker-rules">
+<h2 data-testid="worker-rules">
   {translate('workers.assignment-rules')}
 </h2>
 <Table class="mb-6 w-full table-fixed">
@@ -81,7 +81,7 @@
   {/if}
 </Table>
 
-<h2 class="text-base font-medium" data-testid="worker-rules">
+<h2 data-testid="worker-rules">
   {translate('workers.redirect-rules')}
 </h2>
 <Table class="mb-6 w-full table-fixed">
diff --git a/src/lib/components/worker-table.svelte b/src/lib/components/worker-table.svelte
index b9877eb3a..c4f7cdf34 100644
--- a/src/lib/components/worker-table.svelte
+++ b/src/lib/components/worker-table.svelte
@@ -14,7 +14,7 @@
   export let workers: GetPollersResponse;
 </script>
 
-<h2 class="flex items-center gap-2 text-base font-medium" data-testid="workers">
+<h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
   <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
 </h2>
diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
index f7e017979..7020656fe 100644
--- a/src/lib/components/workflow-status.svelte
+++ b/src/lib/components/workflow-status.svelte
@@ -42,9 +42,7 @@
   };
 
   const workflowStatus = cva(
-    [
-      'flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap text-black',
-    ],
+    ['flex items-center rounded-sm px-1 py-0.5 whitespace-nowrap text-black'],
     {
       variants: {
         status: {
diff --git a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
index 5d732ae08..74d5eecda 100644
--- a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
@@ -79,10 +79,10 @@
       bind:value={name}
     />
     <div>
-      <span class="font-secondary text-sm font-medium"
+      <span class="text-sm font-medium"
         >{translate('workflows.signal-payload-input-label')}</span
       >
-      <span class="font-secondary text-xs font-light italic">
+      <span class="text-xs font-light italic">
         {translate('workflows.signal-payload-input-label-hint')}
       </span>
       <CodeBlock
diff --git a/src/lib/components/workflow/input-and-results.svelte b/src/lib/components/workflow/input-and-results.svelte
index 5a39c51d6..cb294fae8 100644
--- a/src/lib/components/workflow/input-and-results.svelte
+++ b/src/lib/components/workflow/input-and-results.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <article class="flex w-full flex-col" {...$$restProps}>
-  <h3 class="mb-2 flex items-center gap-2 text-lg">
+  <h3 class="mb-2 flex items-center gap-2">
     {title}
     {#if showParsedContentCount}
       <Badge type="count" class="rounded-sm">{payloads.length}</Badge>
diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
index efa8675ee..cfaa316cf 100644
--- a/src/lib/components/workflow/pending-activities.svelte
+++ b/src/lib/components/workflow/pending-activities.svelte
@@ -55,7 +55,7 @@
         {#each pendingActivities as { id, ...pendingActivity } (id)}
           {@const failed = pendingActivity.attempt > 1}
           <div class="pending-activity-row-container">
-            <h3 class="w-full self-start text-sm font-normal text-slate-500">
+            <h3 class="w-full self-start text-sm text-secondary">
               {pendingActivity.activityId}
             </h3>
             <div class="pending-activity-row">
diff --git a/src/lib/components/workflow/workflow-summary.svelte b/src/lib/components/workflow/workflow-summary.svelte
index f25ddad39..223738437 100644
--- a/src/lib/components/workflow/workflow-summary.svelte
+++ b/src/lib/components/workflow/workflow-summary.svelte
@@ -33,7 +33,7 @@
   >
     <div class="flex flex-col gap-2 xl:flex-row">
       <div class="grow basis-1/3 overflow-hidden">
-        <h3 class="font-medium">{translate('common.execution-details')}</h3>
+        <h4>{translate('common.execution-details')}</h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           title={translate('common.workflow-type')}
@@ -55,7 +55,7 @@
         />
       </div>
       <div class="grow overflow-hidden">
-        <h3 class="font-medium">{translate('common.task-queue')}</h3>
+        <h4>{translate('common.task-queue')}</h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           content={workflow?.taskQueue}
@@ -74,9 +74,9 @@
         />
       </div>
       <div class="grow-0">
-        <h3 class="font-medium">
+        <h4>
           {translate('workflows.start-and-close-time')}
-        </h3>
+        </h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           title={translate('common.start-time')}
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
index 888e24482..187528cc6 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
@@ -36,7 +36,7 @@
     {#if updating}
       <Loading />
     {:else}
-      <h2 class="text-lg font-medium">
+      <h2>
         {#if query}
           {translate('workflows.workflow-query-empty-state-title')}
         {:else}
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
index ac75eafc4..e1c9fbaea 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
@@ -15,6 +15,6 @@
 
 <style lang="postcss">
   .workflows-summary-table-header-cell {
-    @apply whitespace-nowrap px-2 text-left font-secondary text-sm font-medium;
+    @apply whitespace-nowrap px-2 text-left text-sm font-medium;
   }
 </style>
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
index 93f2d9dc3..dff5fb2ff 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
@@ -65,7 +65,7 @@
   }
 
   .batch-actions-table-cell {
-    @apply overflow-visible whitespace-nowrap px-2 text-left font-secondary text-sm font-medium;
+    @apply overflow-visible whitespace-nowrap px-2 text-left text-sm font-medium;
   }
 
   .configuration-button-table-cell {
diff --git a/src/lib/holocene/accordion.svelte b/src/lib/holocene/accordion.svelte
index 5c41b19f0..997c35f29 100644
--- a/src/lib/holocene/accordion.svelte
+++ b/src/lib/holocene/accordion.svelte
@@ -54,11 +54,11 @@
     on:click={toggleAccordion}
   >
     <div class="space-between flex w-full flex-row items-center">
-      <h2 class="flex w-full items-center gap-2 text-lg font-medium">
+      <h3 class="flex w-full items-center gap-2">
         {#if icon}<Icon name={icon} />{/if}
         {title}
         <slot name="summary" />
-      </h2>
+      </h3>
       <div
         class="flex flex-row items-center gap-2 pr-2"
         on:click|stopPropagation
@@ -68,7 +68,7 @@
       </div>
       <Icon class="m-2" name={open ? 'chevron-up' : 'chevron-down'} />
     </div>
-    <p class="flex items-center font-secondary">
+    <p class="flex items-center">
       {#if error}
         <Badge class="mr-2" type="danger">{error}</Badge>
       {/if}
diff --git a/src/lib/holocene/alert.svelte b/src/lib/holocene/alert.svelte
index a3616a573..a705ccf4d 100644
--- a/src/lib/holocene/alert.svelte
+++ b/src/lib/holocene/alert.svelte
@@ -64,7 +64,7 @@
 
 <style lang="postcss">
   .alert {
-    @apply items-start gap-2 break-words rounded-lg border-2 p-5 font-primary text-sm text-primary;
+    @apply items-start gap-2 break-words rounded-lg border-2 p-5 text-sm text-primary;
   }
 
   .alert.success {
@@ -84,6 +84,6 @@
   }
 
   .content :global(> *) {
-    @apply font-secondary text-sm font-normal;
+    @apply text-sm font-normal;
   }
 </style>
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index b3667854b..1be650d9e 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -354,6 +354,6 @@
   }
 
   .combobox-input {
-    @apply ml-2 h-full w-full grow bg-transparent font-primary text-primary placeholder:text-secondary focus:outline-none;
+    @apply ml-2 h-full w-full grow bg-transparent text-primary placeholder:text-secondary focus:outline-none;
   }
 </style>
diff --git a/src/lib/holocene/drawer-content.svelte b/src/lib/holocene/drawer-content.svelte
index dd30e954c..12684a668 100644
--- a/src/lib/holocene/drawer-content.svelte
+++ b/src/lib/holocene/drawer-content.svelte
@@ -7,11 +7,11 @@
 </script>
 
 <div class="title-wrapper {position}">
-  <h1>{title}</h1>
+  <h2>{title}</h2>
   {#if $$slots['subtitle']}
-    <h3 class="font-primary text-xs font-normal">
+    <p class="text-xs font-normal">
       <slot name="subtitle" />
-    </h3>
+    </p>
   {/if}
 </div>
 
@@ -32,10 +32,6 @@
     }
   }
 
-  .title-wrapper h1 {
-    @apply font-primary text-base font-medium;
-  }
-
   .content {
     @apply whitespace-normal px-8;
 
diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index f77edea9a..2c38a93f5 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -237,7 +237,7 @@
   }
 
   .count {
-    @apply mx-2 hidden font-secondary text-sm font-medium tracking-widest;
+    @apply mx-2 hidden text-sm font-medium tracking-widest;
 
     > .ok {
       @apply text-information;
diff --git a/src/lib/holocene/input/number-input.svelte b/src/lib/holocene/input/number-input.svelte
index 657994b35..0281b5b13 100644
--- a/src/lib/holocene/input/number-input.svelte
+++ b/src/lib/holocene/input/number-input.svelte
@@ -81,7 +81,7 @@
 
 <style lang="postcss">
   .units {
-    @apply font-secondary text-sm font-medium text-primary;
+    @apply text-sm font-medium text-primary;
   }
 
   .input-container {
diff --git a/src/lib/holocene/label.svelte b/src/lib/holocene/label.svelte
index d5239c8e7..b86a61aa1 100644
--- a/src/lib/holocene/label.svelte
+++ b/src/lib/holocene/label.svelte
@@ -30,7 +30,6 @@
     'gap-2',
     'text-primary',
     'text-sm',
-    'font-secondary',
     'font-medium',
     'focus:outline-none',
     hidden && 'sr-only',
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index e5b079059..0dba2c2a6 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -50,7 +50,7 @@
   {...$$restProps}
 >
   {#if icon}
-    <Icon width={20} height={20} class="mt-0.5" name={icon} />
+    <Icon class="mt-0.5" name={icon} />
   {/if}
   {#if text}
     {text}
diff --git a/src/lib/holocene/loading.svelte b/src/lib/holocene/loading.svelte
index 7bcc2e530..60ad9d6b2 100644
--- a/src/lib/holocene/loading.svelte
+++ b/src/lib/holocene/loading.svelte
@@ -49,7 +49,7 @@
   {:else}
     <Logo height={160} width={160} />
   {/if}
-  <h2 class="text-xl font-medium">
+  <h2>
     {title}
   </h2>
 </div>
diff --git a/src/lib/holocene/markdown.svelte b/src/lib/holocene/markdown.svelte
index 53c9f2df9..574dd8012 100644
--- a/src/lib/holocene/markdown.svelte
+++ b/src/lib/holocene/markdown.svelte
@@ -78,7 +78,7 @@
   }
 
   .count {
-    @apply invisible absolute -bottom-5 right-0 font-secondary text-sm font-medium text-primary;
+    @apply invisible absolute -bottom-5 right-0 text-sm font-medium text-primary;
   }
 
   .count > .warn {
diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 0e31c5010..e0eb51514 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -159,7 +159,7 @@
 
 <style lang="postcss">
   .menu-item {
-    @apply flex cursor-pointer flex-row items-center gap-2 rounded border border-transparent font-primary text-sm font-medium focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+    @apply flex cursor-pointer flex-row items-center gap-2 rounded border border-transparent text-sm font-medium focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
 
     &.hoverable {
       @apply hover:surface-interactive-secondary focus-visible:surface-interactive-secondary;
diff --git a/src/lib/holocene/orderable-list/orderable-list.svelte b/src/lib/holocene/orderable-list/orderable-list.svelte
index 089df735c..93ac3db9e 100644
--- a/src/lib/holocene/orderable-list/orderable-list.svelte
+++ b/src/lib/holocene/orderable-list/orderable-list.svelte
@@ -3,9 +3,9 @@
 </script>
 
 <div class="orderable-section">
-  <h4 class="orderable-heading">
+  <h5>
     <slot name="heading">Items</slot>
-  </h4>
+  </h5>
   <ol class="orderable-list">
     <slot>
       <OrderableListItem readonly label="No Items" pinned={false} />
@@ -18,10 +18,6 @@
     @apply flex flex-col gap-2;
   }
 
-  .orderable-heading {
-    @apply text-sm font-medium text-primary;
-  }
-
   .orderable-list {
     @apply surface-primary rounded-lg border-2 border-subtle;
   }
diff --git a/src/lib/holocene/radio-input/radio-group.svelte b/src/lib/holocene/radio-input/radio-group.svelte
index 950b67125..1f4067f03 100644
--- a/src/lib/holocene/radio-input/radio-group.svelte
+++ b/src/lib/holocene/radio-input/radio-group.svelte
@@ -28,7 +28,7 @@
 
 <div class={merge('flex flex-col gap-2 p-1', className)} {...$$restProps}>
   {#if description}
-    <p class="font-secondary text-sm font-medium">{description}</p>
+    <p class="text-sm font-medium">{description}</p>
   {/if}
   <slot />
 </div>
diff --git a/src/lib/holocene/table/table.svelte b/src/lib/holocene/table/table.svelte
index ef1266351..7b1657da4 100644
--- a/src/lib/holocene/table/table.svelte
+++ b/src/lib/holocene/table/table.svelte
@@ -36,7 +36,7 @@
     @apply relative;
 
     thead :global(th) {
-      @apply text-left font-secondary text-sm font-medium;
+      @apply text-left text-sm font-medium;
     }
 
     tbody :global(td) {
diff --git a/src/lib/holocene/textarea.svelte b/src/lib/holocene/textarea.svelte
index dbcb7076c..6ed1a226d 100644
--- a/src/lib/holocene/textarea.svelte
+++ b/src/lib/holocene/textarea.svelte
@@ -101,7 +101,7 @@
   }
 
   .error-msg {
-    @apply min-h-[1.25rem] break-words border-danger font-primary text-sm font-normal text-danger;
+    @apply min-h-[1.25rem] break-words border-danger text-sm font-normal text-danger;
   }
 
   .error-msg.min-width {
@@ -109,7 +109,7 @@
   }
 
   .count {
-    @apply invisible text-right font-secondary text-sm font-medium text-primary group-focus-within:visible;
+    @apply invisible text-right text-sm font-medium text-primary group-focus-within:visible;
   }
 
   .count > .warn {
diff --git a/src/lib/holocene/toast.svelte b/src/lib/holocene/toast.svelte
index 85759eed6..aec2ba28a 100644
--- a/src/lib/holocene/toast.svelte
+++ b/src/lib/holocene/toast.svelte
@@ -34,7 +34,7 @@
   )}
   transition:fly={{ x: 250 }}
 >
-  <p class="font-secondary text-sm">
+  <p class="text-sm">
     <slot />
   </p>
   <button
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 37927c29e..d78593873 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -99,10 +99,7 @@
         <WorkflowStatus status={workflow?.status} big />
       </div>
       <div class="flex flex-col flex-wrap gap-0">
-        <h1
-          data-testid="workflow-id-heading"
-          class="gap-0 overflow-hidden text-base font-medium lg:text-2xl"
-        >
+        <h1 data-testid="workflow-id-heading" class="gap-0 overflow-hidden">
           <Copyable
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/layouts/workflow-history-layout-v2.svelte b/src/lib/layouts/workflow-history-layout-v2.svelte
index f4a3e23ba..e65efc70d 100644
--- a/src/lib/layouts/workflow-history-layout-v2.svelte
+++ b/src/lib/layouts/workflow-history-layout-v2.svelte
@@ -77,7 +77,7 @@
       class="flex flex-col items-center justify-between gap-2 py-2 md:flex-row"
     >
       <div class="flex flex-col items-center gap-2 md:flex-row md:gap-4">
-        <h2 class="text-2xl font-medium">
+        <h2>
           {translate('workflows.event-history')}
         </h2>
         <ToggleButtons>
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index 88edae8d6..68b9938d3 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -90,7 +90,7 @@
       class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:items-end"
       aria-label={translate('workflows.event-history-view')}
     >
-      <h2 class="text-2xl font-medium">
+      <h2>
         {translate('workflows.event-history')}
       </h2>
       <div id="event-view-toggle" class="surface-primary mt-4 flex gap-4">
diff --git a/src/lib/pages/batch-operations.svelte b/src/lib/pages/batch-operations.svelte
index 9a927ad03..da7fa60c8 100644
--- a/src/lib/pages/batch-operations.svelte
+++ b/src/lib/pages/batch-operations.svelte
@@ -9,7 +9,7 @@
   export let namespace: string;
 </script>
 
-<h1 class="text-2xl">{translate('batch.list-page-title')}</h1>
+<h1>{translate('batch.list-page-title')}</h1>
 {#await listBatchOperations(namespace)}
   <Loading />
 {:then { operations }}
diff --git a/src/lib/pages/import-events-view.svelte b/src/lib/pages/import-events-view.svelte
index ee9ffd9ad..3b953a6a3 100644
--- a/src/lib/pages/import-events-view.svelte
+++ b/src/lib/pages/import-events-view.svelte
@@ -12,7 +12,7 @@
     class="flex flex-col items-start justify-between gap-4 pb-4 md:flex-row"
     aria-label={translate('events.import-event-history')}
   >
-    <h3 class="text-lg font-medium">
+    <h3>
       {translate('events.import-event-history')}
     </h3>
     <div class="flex gap-4">
diff --git a/src/lib/pages/import-events.svelte b/src/lib/pages/import-events.svelte
index e1bb2c448..10fb32366 100644
--- a/src/lib/pages/import-events.svelte
+++ b/src/lib/pages/import-events.svelte
@@ -15,7 +15,7 @@
     class="block items-center justify-between gap-4 pb-4 lg:flex"
     aria-label={translate('events.import-event-history')}
   >
-    <h1 class="text-lg font-medium" data-testid="import-event-history">
+    <h1 data-testid="import-event-history">
       {translate('events.import-event-history')}
     </h1>
     <div class="flex gap-4">
@@ -33,7 +33,7 @@
         class="mb-8">{translate('events.api-history-link')}</Link
       >
     </div>
-    <h2 class="mt-8 text-lg font-medium">
+    <h2 class="mt-8">
       {translate('events.history-expected-formats')}
     </h2>
     <div class="h-40 text-center">
diff --git a/src/lib/pages/nexus-create-endpoint.svelte b/src/lib/pages/nexus-create-endpoint.svelte
index 830c83521..f93b3f834 100644
--- a/src/lib/pages/nexus-create-endpoint.svelte
+++ b/src/lib/pages/nexus-create-endpoint.svelte
@@ -27,7 +27,7 @@
       {translate('nexus.back-to-endpoints')}
     </Link>
   </div>
-  <h1 data-testid="namespace-selector-title" class="text-2xl">
+  <h1 data-testid="namespace-selector-title">
     {translate('nexus.create-endpoint')}
   </h1>
   <NexusForm {error} {targetNamespaceList} {callerNamespaceList} {isCloud} />
diff --git a/src/lib/pages/nexus-edit-endpoint.svelte b/src/lib/pages/nexus-edit-endpoint.svelte
index fa7005a24..d619572f8 100644
--- a/src/lib/pages/nexus-edit-endpoint.svelte
+++ b/src/lib/pages/nexus-edit-endpoint.svelte
@@ -33,7 +33,7 @@
   </div>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <h1 data-testid="namespace-selector-title" class="text-2xl">
+      <h1 data-testid="namespace-selector-title">
         {endpoint.spec.name}
       </h1>
       <div class="flex items-center gap-2">
diff --git a/src/lib/pages/nexus-empty-state.svelte b/src/lib/pages/nexus-empty-state.svelte
index f634b6538..30f2eaf29 100644
--- a/src/lib/pages/nexus-empty-state.svelte
+++ b/src/lib/pages/nexus-empty-state.svelte
@@ -13,7 +13,7 @@
       <div class="mb-8 flex items-center gap-4">
         <h1
           data-testid="namespace-selector-title"
-          class="text-marketingGreen font-mono text-2xl uppercase"
+          class="text-marketingGreen font-mono uppercase"
         >
           {translate('nexus.endpoints')}
         </h1>
@@ -21,7 +21,7 @@
       </div>
       <div class="surface-information flex w-full flex-col gap-4 pr-8 md:pr-24">
         <h2 class="text-4xl">Get Started</h2>
-        <p class="">
+        <p>
           Nexus RPC is a modern open-source service framework for
           arbitrary-length operations whose lifetime may extend beyond a
           traditional RPC. Nexus was designed with Durable Execution in mind, as
@@ -29,7 +29,7 @@
           Namespaces, clusters, and regions – with a clean API contract to
           streamline multi-team collaboration.
         </p>
-        <p class="">
+        <p>
           Any service can be exposed via a Nexus Endpoint as a set of sync or
           async Nexus operations – the latter provides an operation identity and
           a uniform interface to get the status of an operation or its result,
diff --git a/src/lib/pages/nexus-endpoint.svelte b/src/lib/pages/nexus-endpoint.svelte
index f1392099a..8e40653c0 100644
--- a/src/lib/pages/nexus-endpoint.svelte
+++ b/src/lib/pages/nexus-endpoint.svelte
@@ -22,7 +22,7 @@
   </div>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <h1 data-testid="namespace-selector-title" class="text-2xl">
+      <h1 data-testid="namespace-selector-title">
         {endpoint.spec.name}
       </h1>
       <Button
@@ -59,12 +59,12 @@
       </div>
     </div>
   </div>
-  <h2 class="text-xl">Description</h2>
+  <h2>Description</h2>
   <p class="w-full whitespace-pre-wrap xl:w-1/2">
     {endpoint.spec?.descriptionString || 'No description provided'}
   </p>
   {#if endpoint.spec?.allowedCallerNamespaces}
-    <h2 class="text-xl">Allowed Caller Namespaces</h2>
+    <h2>Allowed Caller Namespaces</h2>
     <div class="flex flex-wrap items-center gap-4">
       {#each endpoint.spec?.allowedCallerNamespaces as namespace}
         <Link href={routeForNamespace({ namespace })}>{namespace}</Link>
diff --git a/src/lib/pages/nexus-endpoints.svelte b/src/lib/pages/nexus-endpoints.svelte
index 01dd206c7..c146b5427 100644
--- a/src/lib/pages/nexus-endpoints.svelte
+++ b/src/lib/pages/nexus-endpoints.svelte
@@ -41,7 +41,7 @@
   <NexusEmptyState />
 {:else}
   <div class="mb-8 flex items-center justify-between">
-    <h1 data-testid="namespace-selector-title" class="text-2xl">
+    <h1 data-testid="namespace-selector-title">
       {translate('nexus.endpoints')}
     </h1>
     <Button variant="primary" href={routeForNexusEndpointCreate()}
@@ -70,7 +70,7 @@
             <div
               class="transition:colors flex cursor-pointer flex-col gap-1 rounded-lg p-4 duration-200 ease-in-out"
             >
-              <h3 class="break-all text-lg font-medium">
+              <h3 class="break-all">
                 {endpoint.spec.name}
               </h3>
               <p class="text-xs text-secondary">
diff --git a/src/lib/pages/schedule-view.svelte b/src/lib/pages/schedule-view.svelte
index 0f7dabc6d..23de31d7f 100644
--- a/src/lib/pages/schedule-view.svelte
+++ b/src/lib/pages/schedule-view.svelte
@@ -255,7 +255,7 @@
       <Link href={routeForSchedules({ namespace })} icon="chevron-left">
         {translate('schedules.back-to-schedules')}
       </Link>
-      <h1 class="select-all text-2xl font-medium" data-testid="schedule-name">
+      <h1 class="select-all" data-testid="schedule-name">
         {scheduleId}
       </h1>
       <p class="text-sm">
@@ -273,8 +273,8 @@
         <Link href={routeForSchedules({ namespace })} icon="chevron-left">
           {translate('schedules.back-to-schedules')}
         </Link>
-        <h1 class="relative flex items-center text-2xl">
-          <span class="select-all font-medium" data-testid="schedule-name">
+        <h1 class="relative flex items-center">
+          <span class="select-all" data-testid="schedule-name">
             {scheduleId}
           </span>
         </h1>
@@ -590,10 +590,7 @@
       <Link href={routeForSchedules({ namespace })} icon="chevron-left">
         {translate('schedules.back-to-schedules')}
       </Link>
-      <h1
-        class="mt-8 select-all text-2xl font-medium"
-        data-testid="schedule-name"
-      >
+      <h1 class="mt-8 select-all" data-testid="schedule-name">
         {scheduleId}
       </h1>
       <p class="text-sm">
diff --git a/src/lib/pages/schedules.svelte b/src/lib/pages/schedules.svelte
index 5ba58b124..760d3c5fc 100644
--- a/src/lib/pages/schedules.svelte
+++ b/src/lib/pages/schedules.svelte
@@ -65,9 +65,7 @@
       let:visibleItems
     >
       <div>
-        <h1
-          class="flex flex-col gap-0 text-xl md:flex-row md:items-center md:gap-2 md:text-2xl"
-        >
+        <h1 class="flex flex-col gap-0 md:flex-row md:items-center md:gap-2">
           <SchedulesCount />
         </h1>
       </div>
diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index 30840cb81..434041bc4 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -162,10 +162,7 @@
     </Link>
   </div>
   <div class="flex w-full flex-col gap-4 lg:w-2/3 2xl:w-1/2">
-    <h1
-      class="mb-4 overflow-hidden text-base font-medium lg:text-2xl"
-      data-testid="start-workflow"
-    >
+    <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
       Start a Workflow
     </h1>
     <div
diff --git a/src/lib/pages/task-queue.svelte b/src/lib/pages/task-queue.svelte
index 78cfc5b2a..5dfc292bc 100644
--- a/src/lib/pages/task-queue.svelte
+++ b/src/lib/pages/task-queue.svelte
@@ -17,7 +17,7 @@
 
 {#await getPollers({ queue: taskQueue, namespace }) then workers}
   <section class="flex flex-col gap-4">
-    <h2 class="text-lg font-medium" data-testid="task-queue-name">
+    <h2 data-testid="task-queue-name">
       {taskQueue}
     </h2>
     <Tabs>
diff --git a/src/lib/pages/workflow-history-event-group.svelte b/src/lib/pages/workflow-history-event-group.svelte
index c8645578c..40402c65c 100644
--- a/src/lib/pages/workflow-history-event-group.svelte
+++ b/src/lib/pages/workflow-history-event-group.svelte
@@ -75,7 +75,7 @@
 </script>
 
 {#if eventGroup}
-  <h2 class="flex w-full items-center text-lg font-medium">
+  <h2 class="flex w-full items-center">
     {#if workflowLink}
       <Link href={workflowLink}>
         {eventGroup.displayName}
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 1a55886e6..a3688614c 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -10,7 +10,7 @@
 <div class="flex flex-col gap-4">
   {#if workflow?.searchAttributes}
     <div class="mt-4 flex flex-col gap-2">
-      <h3 class="font-medium">{translate('common.search-attributes')}</h3>
+      <h3>{translate('common.search-attributes')}</h3>
       <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ searchAttributes: workflow.searchAttributes }}
@@ -28,7 +28,7 @@
 
   {#if workflow?.memo}
     <div class="mt-4 flex flex-col gap-2">
-      <h3 class="font-medium">{translate('common.memo')}</h3>
+      <h3>{translate('common.memo')}</h3>
       <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ memo: workflow.memo }}
diff --git a/src/lib/pages/workflow-pending-activities.svelte b/src/lib/pages/workflow-pending-activities.svelte
index 8f0da4cdc..830425ec7 100644
--- a/src/lib/pages/workflow-pending-activities.svelte
+++ b/src/lib/pages/workflow-pending-activities.svelte
@@ -43,7 +43,7 @@
         <td class="px-5 py-4">
           <ul>
             <li class="event-table-row">
-              <h4 class="font-semibold">
+              <h4>
                 {translate('workflows.activity-type')}
               </h4>
               <Badge type={failed ? 'danger' : undefined}>
diff --git a/src/lib/pages/workflow-workers.svelte b/src/lib/pages/workflow-workers.svelte
index fee86ebda..b3da8c4c0 100644
--- a/src/lib/pages/workflow-workers.svelte
+++ b/src/lib/pages/workflow-workers.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <section class="flex flex-col gap-4">
-  <h2 class="text-lg font-medium" data-testid="task-queue-name">
+  <h2 data-testid="task-queue-name">
     {translate('common.task-queue')}:
     <Link
       href={routeForTaskQueue({
diff --git a/src/lib/pages/workflows-with-new-search.svelte b/src/lib/pages/workflows-with-new-search.svelte
index 990de42d1..e169317cf 100644
--- a/src/lib/pages/workflows-with-new-search.svelte
+++ b/src/lib/pages/workflows-with-new-search.svelte
@@ -201,10 +201,7 @@
 
 <header class="flex flex-col gap-2">
   <div class="flex flex-col justify-between gap-2 md:flex-row">
-    <h1
-      class="flex items-center gap-2 text-xl md:text-2xl"
-      data-cy="workflows-title"
-    >
+    <h1 class="flex items-center gap-2" data-cy="workflows-title">
       {#if $supportsAdvancedVisibility}
         <span data-testid="workflow-count"
           >{$workflowCount.count.toLocaleString()}</span
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index b78d9ed0b..a9c3c0a34 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -4,6 +4,56 @@ import { colors } from './colors';
 import { css } from './utilities';
 import { dark, light } from './variables';
 
+const textStyles = plugin(({ addBase, theme }) => {
+  addBase({
+    h1: {
+      fontSize: theme('fontSize.3xl'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    h2: {
+      fontSize: theme('fontSize.2xl'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    h3: {
+      fontSize: theme('fontSize.xl'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    h4: {
+      fontSize: theme('fontSize.lg'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    h5: {
+      fontSize: theme('fontSize.base'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    h6: {
+      fontSize: theme('fontSize.sm'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.body-normal': {
+      fontSize: theme('fontSize.sm'),
+      fontWeight: theme('fontWeight.normal'),
+    },
+    '.body-medium': {
+      fontSize: theme('fontSize.sm'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.body-small': {
+      fontSize: theme('fontSize.xs'),
+      fontWeight: theme('fontWeight.normal'),
+    },
+    '.body-small-medium': {
+      fontSize: theme('fontSize.xs'),
+      fontWeight: theme('fontWeight.medium'),
+    },
+    '.body-small-mono': {
+      fontFamily: theme('fontFamily.mono'),
+      fontSize: theme('fontSize.xs'),
+      fontWeight: theme('fontWeight.normal'),
+    },
+  });
+});
+
 const temporal = plugin(
   ({ addComponents, addBase }) => {
     addBase({
@@ -189,4 +239,4 @@ const temporal = plugin(
 );
 
 export default temporal;
-export { colors };
+export { colors, textStyles };
diff --git a/src/lib/theme/preset.ts b/src/lib/theme/preset.ts
index 5c8f690fa..2fe92db24 100644
--- a/src/lib/theme/preset.ts
+++ b/src/lib/theme/preset.ts
@@ -1,10 +1,10 @@
 import type { Config } from 'tailwindcss';
 
-import temporal from './plugin';
+import temporal, { textStyles } from './plugin';
 
 const config = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
-  plugins: [temporal],
+  plugins: [temporal, textStyles],
 } satisfies Config;
 
 export default config;
diff --git a/src/routes/(app)/namespaces/+page.svelte b/src/routes/(app)/namespaces/+page.svelte
index fbf550684..8e10eda18 100644
--- a/src/routes/(app)/namespaces/+page.svelte
+++ b/src/routes/(app)/namespaces/+page.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <PageTitle title="Namespaces" url={$page.url.href} />
-<h1 data-testid="namespace-selector-title" class="mb-8 text-2xl">
+<h1 data-testid="namespace-selector-title" class="mb-8">
   {translate('common.namespaces')}
 </h1>
 {#if $namespaces?.length > 0}
diff --git a/src/routes/(app)/namespaces/[namespace]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/+page.svelte
index 4ad03603b..d7b2cbf56 100644
--- a/src/routes/(app)/namespaces/[namespace]/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/+page.svelte
@@ -60,7 +60,7 @@
   }`}
   url={$page.url.href}
 />
-<h1 class="text-2xl" data-testid="namespace-title">
+<h1 data-testid="namespace-title">
   {translate('namespaces.namespace')}: {namespace?.namespaceInfo?.name}
 </h1>
 <h2 data-testid="namespace-description">
@@ -68,7 +68,7 @@
 </h2>
 <Card class="flex flex-col gap-4 lg:flex-row">
   <article class="namespace-info flex w-full flex-col">
-    <h3 class="text-lg font-medium">{translate('common.details')}</h3>
+    <h3>{translate('common.details')}</h3>
     <Table variant="simple">
       <caption class="sr-only" slot="caption"
         >{`${translate('namespaces.namespace')} ${translate(
@@ -144,7 +144,7 @@
   </article>
 
   <article class="namespace-info flex w-full flex-col">
-    <h3 class="text-lg font-medium">{translate('namespaces.versions')}</h3>
+    <h3>{translate('namespaces.versions')}</h3>
     <Table variant="simple">
       <caption class="sr-only" slot="caption"
         >{translate('namespaces.versions')}</caption
@@ -165,7 +165,7 @@
   </article>
 
   <article class="namespace-info flex w-full flex-col">
-    <h3 class="text-lg font-medium">
+    <h3>
       {translate('namespaces.client-actions')}
     </h3>
     <Table variant="simple">
@@ -233,7 +233,7 @@
 
 {#if $searchAttributes}
   <section>
-    <h3 class="my-4 text-lg font-medium">
+    <h3 class="my-4">
       {translate('events.attribute-group.search-attributes')}
     </h3>
     <Table class="w-full">
diff --git a/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte b/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
index 3cec4f5a8..503fc7b17 100644
--- a/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
@@ -31,7 +31,7 @@
   url={$page.url.href}
 />
 {#if archivalEnabled && visibilityArchivalEnabled}
-  <h1 class="text-2xl" data-testid="archived-enabled-title">
+  <h1 data-testid="archived-enabled-title">
     {translate('workflows.archived-workflows')}
   </h1>
   {#if !archivalQueryingNotSupported}<WorkflowFilters />{/if}
@@ -57,7 +57,7 @@
     />
   {/if}
 {:else if archivalEnabled}
-  <h1 class="text-2xl" data-testid="visibility-disabled-title">
+  <h1 data-testid="visibility-disabled-title">
     {translate('workflows.visibility-disabled-archival')}
   </h1>
   <p>
@@ -76,7 +76,7 @@
     copySuccessIconTitle={translate('common.copy-success-icon-title')}
   />
 {:else}
-  <h1 class="text-2xl" data-testid="archived-disabled-title">
+  <h1 data-testid="archived-disabled-title">
     {translate('workflows.archival-disabled-title')}
   </h1>
   <p>{translate('workflows.archival-disabled-details')}:</p>
diff --git a/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte b/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
index aea24f510..6b3694f5e 100644
--- a/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
@@ -2,10 +2,7 @@
   import { translate } from '$lib/i18n/translate';
 </script>
 
-<h1
-  class="relative flex items-center gap-4 text-2xl"
-  data-testid="pollers-title"
->
+<h1 class="relative flex items-center gap-4" data-testid="pollers-title">
   {translate('common.task-queue')}
 </h1>
 <slot />
diff --git a/src/routes/(app)/select-namespace/+page.svelte b/src/routes/(app)/select-namespace/+page.svelte
index 0cc21424f..77ad3cfbe 100644
--- a/src/routes/(app)/select-namespace/+page.svelte
+++ b/src/routes/(app)/select-namespace/+page.svelte
@@ -48,7 +48,7 @@
   url={$page.url.href}
 />
 <div class="w-full p-8 xl:w-1/2">
-  <h1 class="my-4 text-3xl">
+  <h1 class="my-4">
     {translate('namespaces.select-namespace-welcome')}
   </h1>
   <p class="mb-8">{translate('namespaces.select-namespace')}</p>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b602e68b8..232824fc7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,15 +1,14 @@
 import type { Config } from 'tailwindcss';
 import { fontFamily } from 'tailwindcss/defaultTheme';
 
-import temporal from './src/lib/theme/plugin';
+import temporal, { textStyles } from './src/lib/theme/plugin';
 
 const config = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   darkMode: ['selector', '[data-theme="dark"]'],
   theme: {
     fontFamily: {
-      primary: ['Inter Variable', ...fontFamily.sans],
-      secondary: ['Inter', ...fontFamily.sans],
+      sans: ['Inter', ...fontFamily.sans],
       mono: ['Noto Sans Mono', ...fontFamily.mono],
     },
     extend: {
@@ -21,7 +20,7 @@ const config = {
       },
     },
   },
-  plugins: [temporal],
+  plugins: [temporal, textStyles],
 } satisfies Config;
 
 export default config;