diff --git a/.storybook/preview.less b/.storybook/preview.less
index 2213059a..4ffa873e 100644
--- a/.storybook/preview.less
+++ b/.storybook/preview.less
@@ -34,7 +34,7 @@
 }
 
 body {
-	@font-14-400();
+	@body-compact-01();
 }
 
 #storybook-root {
diff --git a/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap b/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap
index 6a357ca0..430fd3be 100644
--- a/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap
+++ b/packages/pelagos/__tests__/components/__snapshots__/EditorDetailsPanel-test.js.snap
@@ -6,27 +6,31 @@ exports[`EditorDetailsPanel rendering renders expected elements when showButtons
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
   </React.Fragment>
@@ -39,27 +43,31 @@ exports[`EditorDetailsPanel rendering renders expected elements when showButtons
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
     <DefaultDetailsButtons
@@ -84,27 +92,31 @@ exports[`EditorDetailsPanel rendering renders expected elements with two childre
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
     cloneWithClassName
@@ -118,27 +130,31 @@ exports[`EditorDetailsPanel rendering renders expected elements with two childre
   className="EditorDetailsPanel"
   id="test"
 >
-  <IconButton
-    aria-label="Close"
-    className="EditorDetailsPanel__close"
-    icon={
-      {
-        "icon": [],
-        "iconName": "xmark-thin",
-      }
-    }
-    id="closeDetailsPanelBtn"
-    size="large"
-    tooltipPlacement="left"
-    tooltipText="Close"
-    type="ghost"
-  />
-  <h2
-    className="EditorDetailsPanel__title"
-    id="detailsPanelTitle"
+  <div
+    className="EditorDetailsPanel__header"
   >
-    Test
-  </h2>
+    <h2
+      className="EditorDetailsPanel__title"
+      id="detailsPanelTitle"
+    >
+      Test
+    </h2>
+    <IconButton
+      aria-label="Close"
+      className="EditorDetailsPanel__close"
+      icon={
+        {
+          "icon": [],
+          "iconName": "xmark-thin",
+        }
+      }
+      id="closeDetailsPanelBtn"
+      size="large"
+      tooltipPlacement="left"
+      tooltipText="Close"
+      type="ghost"
+    />
+  </div>
   <React.Fragment>
     cloneWithClassName
   </React.Fragment>
diff --git a/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap b/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap
index c1a3cb98..97abf87a 100644
--- a/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap
+++ b/packages/pelagos/__tests__/table/__snapshots__/TableTitle-test.js.snap
@@ -2,9 +2,10 @@
 
 exports[`TableTitle rendering renders expected elements 1`] = `
 <div
-  className="Table__title"
+  className="Table__header"
 >
   <h2
+    className="Table__title"
     id="test"
   >
     Test title
diff --git a/packages/pelagos/less/headers.less b/packages/pelagos/less/headers.less
index 08e9167e..b5452602 100644
--- a/packages/pelagos/less/headers.less
+++ b/packages/pelagos/less/headers.less
@@ -15,28 +15,26 @@
 	}
 
 	h1 {
-		@font-24-400();
+		@heading-04();
 	}
 
 	h2 {
-		@font-18-400();
+		@heading-03();
 	}
 
 	h3 {
-		@font-16-600();
+		@heading-02();
 	}
 
 	h4 {
-		@font-14-600();
+		@heading-compact-02();
 	}
 
 	h5 {
-		@font-12-600();
-		color: var(--text-secondary);
+		@heading-01();
 	}
 
 	h6 {
-		@font-10-600();
-		color: var(--text-secondary);
+		@heading-compact-01();
 	}
 }
diff --git a/packages/pelagos/less/inputs.less b/packages/pelagos/less/inputs.less
index b1296942..47a4feef 100644
--- a/packages/pelagos/less/inputs.less
+++ b/packages/pelagos/less/inputs.less
@@ -16,7 +16,7 @@
 	}
 
 	::placeholder {
-		@font-12-400();
+		@body-compact-01();
 		color: var(--text-placeholder);
 
 		@media print {
diff --git a/packages/pelagos/src/components/BlockHeader.js b/packages/pelagos/src/components/BlockHeader.js
index 5d3e2cd1..616a8dc4 100644
--- a/packages/pelagos/src/components/BlockHeader.js
+++ b/packages/pelagos/src/components/BlockHeader.js
@@ -3,7 +3,7 @@ import {t} from '@bluecateng/l10n.macro';
 
 import './BlockHeader.less';
 
-/** Header for a form section. */
+/** Header for a form section, usually as a Collapsible title. */
 const BlockHeader = ({className, header, configured}) => (
 	<h2 className={`BlockHeader${className ? ` ${className}` : ''}`}>
 		{header}
diff --git a/packages/pelagos/src/components/BlockHeader.less b/packages/pelagos/src/components/BlockHeader.less
index f3a7a34f..f9639fe7 100644
--- a/packages/pelagos/src/components/BlockHeader.less
+++ b/packages/pelagos/src/components/BlockHeader.less
@@ -3,19 +3,19 @@
 
 @layer pelagos {
 	.BlockHeader {
+		@body-01();
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
 	.BlockHeader__indicator {
-		@font-10-400();
+		@helper-text-01();
 		color: var(--text-helper);
 		margin-left: @sp-12;
 	}
 
 	.BlockHeader--configured {
-		@font-12-400();
 		color: var(--text-secondary);
 	}
 }
diff --git a/packages/pelagos/src/components/Breadcrumb.less b/packages/pelagos/src/components/Breadcrumb.less
index feedbb05..558ce0bf 100644
--- a/packages/pelagos/src/components/Breadcrumb.less
+++ b/packages/pelagos/src/components/Breadcrumb.less
@@ -7,7 +7,7 @@
 	}
 
 	.Breadcrumb__crumbs {
-		@font-12-400();
+		@body-compact-01();
 		color: var(--text-primary);
 		display: block;
 	}
@@ -26,7 +26,7 @@
 	.Breadcrumb__back {
 		position: absolute;
 		left: -32px;
-		top: -8px;
+		top: -7px;
 	}
 
 	@media print {
diff --git a/packages/pelagos/src/components/Button.less b/packages/pelagos/src/components/Button.less
index c5b8a31a..15b28ba5 100644
--- a/packages/pelagos/src/components/Button.less
+++ b/packages/pelagos/src/components/Button.less
@@ -6,7 +6,7 @@
 @layer pelagos {
 	.Button {
 		@focus-visible();
-		@font-14-600();
+		@body-compact-01();
 		display: inline-flex;
 		align-items: center;
 		white-space: nowrap;
diff --git a/packages/pelagos/src/components/Calendar.less b/packages/pelagos/src/components/Calendar.less
index 63267c9c..daf1ae47 100644
--- a/packages/pelagos/src/components/Calendar.less
+++ b/packages/pelagos/src/components/Calendar.less
@@ -22,8 +22,7 @@
 	}
 
 	.Calendar__dayLabel {
-		@font-10-600();
-		color: var(--text-secondary);
+		@body-compact-01();
 	}
 
 	.Calendar__cell {
diff --git a/packages/pelagos/src/components/Collapsible.less b/packages/pelagos/src/components/Collapsible.less
index 7bfc3881..83a7d079 100644
--- a/packages/pelagos/src/components/Collapsible.less
+++ b/packages/pelagos/src/components/Collapsible.less
@@ -21,6 +21,7 @@
 	}
 
 	.Collapsible__title {
+		@body-01();
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/pelagos/src/components/DetailRegion.less b/packages/pelagos/src/components/DetailRegion.less
index 495ce933..e8e9c4ee 100644
--- a/packages/pelagos/src/components/DetailRegion.less
+++ b/packages/pelagos/src/components/DetailRegion.less
@@ -13,7 +13,7 @@
 		}
 
 		&__title {
-			@font-12-400();
+			@label-01();
 			color: var(--text-secondary);
 		}
 	}
diff --git a/packages/pelagos/src/components/Dialog.less b/packages/pelagos/src/components/Dialog.less
index 06aa5cab..bed1f629 100644
--- a/packages/pelagos/src/components/Dialog.less
+++ b/packages/pelagos/src/components/Dialog.less
@@ -108,7 +108,7 @@
 		}
 
 		&__title {
-			@font-16-600();
+			@heading-03();
 			@ellipsis();
 			padding: @sp-16;
 			border-bottom: 1px solid var(--border-subtle);
diff --git a/packages/pelagos/src/components/EditorDetailsPanel.js b/packages/pelagos/src/components/EditorDetailsPanel.js
index 196566da..6b4395f5 100644
--- a/packages/pelagos/src/components/EditorDetailsPanel.js
+++ b/packages/pelagos/src/components/EditorDetailsPanel.js
@@ -27,20 +27,21 @@ const EditorDetailsPanel = ({
 	onDelete,
 }) => (
 	<aside id={id} className="EditorDetailsPanel" aria-labelledby="detailsPanelTitle">
-		<IconButton
-			id="closeDetailsPanelBtn"
-			className="EditorDetailsPanel__close"
-			icon={xmarkThin}
-			size="large"
-			aria-label={t`Close`}
-			tooltipText={t`Close`}
-			tooltipPlacement="left"
-			onClick={useSlidingPanel(id, onClose)}
-		/>
-
-		<h2 id="detailsPanelTitle" className="EditorDetailsPanel__title">
-			{item.name}
-		</h2>
+		<div className="EditorDetailsPanel__header">
+			<h2 id="detailsPanelTitle" className="EditorDetailsPanel__title">
+				{item.name}
+			</h2>
+			<IconButton
+				id="closeDetailsPanelBtn"
+				className="EditorDetailsPanel__close"
+				icon={xmarkThin}
+				size="large"
+				aria-label={t`Close`}
+				tooltipText={t`Close`}
+				tooltipPlacement="left"
+				onClick={useSlidingPanel(id, onClose)}
+			/>
+		</div>
 
 		{Array.isArray(children) ? (
 			<>
diff --git a/packages/pelagos/src/components/EditorDetailsPanel.less b/packages/pelagos/src/components/EditorDetailsPanel.less
index 206080f7..798f1571 100644
--- a/packages/pelagos/src/components/EditorDetailsPanel.less
+++ b/packages/pelagos/src/components/EditorDetailsPanel.less
@@ -19,23 +19,20 @@
 		}
 	}
 
-	.EditorDetailsPanel__close {
-		position: absolute;
-		right: 4px;
-		top: 0;
+	.EditorDetailsPanel__header {
+		flex-direction: row;
+		align-items: center;
 	}
 
 	.EditorDetailsPanel__title {
-		@font-16-600();
 		padding: @sp-12 @sp-24;
-		margin-right: @sp-24;
 		word-break: break-all;
+		flex: 1;
 	}
 
 	.EditorDetailsPanel__body {
 		flex: 1;
-		overflow-x: hidden;
-		overflow-y: auto;
+		overflow: hidden auto;
 		padding: 0 @sp-24 @sp-24;
 		margin-right: @sp-04;
 	}
diff --git a/packages/pelagos/src/components/HeaderIcon.less b/packages/pelagos/src/components/HeaderIcon.less
index 807d7db1..ee2c8310 100644
--- a/packages/pelagos/src/components/HeaderIcon.less
+++ b/packages/pelagos/src/components/HeaderIcon.less
@@ -12,7 +12,7 @@
 	}
 
 	.HeaderIcon__label {
-		@font-12-600();
+		@label-01();
 		margin-top: @sp-02;
 		white-space: nowrap;
 	}
diff --git a/packages/pelagos/src/components/IconButton.stories.less b/packages/pelagos/src/components/IconButton.stories.less
index 9de6db5b..539ea813 100644
--- a/packages/pelagos/src/components/IconButton.stories.less
+++ b/packages/pelagos/src/components/IconButton.stories.less
@@ -2,7 +2,7 @@
 @import '../../less/spacing';
 
 .IconButtonStory__overlay {
-	@font-10-400();
+	@helper-text-01();
 	position: absolute;
 	right: -8px;
 	top: -8px;
diff --git a/packages/pelagos/src/components/InlineNotification.less b/packages/pelagos/src/components/InlineNotification.less
index 76210e75..2c4ab532 100644
--- a/packages/pelagos/src/components/InlineNotification.less
+++ b/packages/pelagos/src/components/InlineNotification.less
@@ -32,7 +32,7 @@
 		}
 
 		&__title {
-			@font-14-600();
+			@heading-compact-01();
 			margin-right: @sp-04;
 		}
 
diff --git a/packages/pelagos/src/components/Label.less b/packages/pelagos/src/components/Label.less
index 6cc1ff9e..26ee63b5 100644
--- a/packages/pelagos/src/components/Label.less
+++ b/packages/pelagos/src/components/Label.less
@@ -2,7 +2,7 @@
 
 @layer pelagos {
 	.Label {
-		@font-12-400();
+		@label-01();
 		color: var(--text-secondary);
 
 		@media print {
diff --git a/packages/pelagos/src/components/LabelLine.less b/packages/pelagos/src/components/LabelLine.less
index e213ce13..b8ef06e5 100644
--- a/packages/pelagos/src/components/LabelLine.less
+++ b/packages/pelagos/src/components/LabelLine.less
@@ -10,7 +10,7 @@
 		}
 
 		&__required {
-			@font-12-600();
+			@helper-text-01();
 			color: var(--text-helper);
 			margin-left: @sp-02;
 		}
diff --git a/packages/pelagos/src/components/MultiColumn.less b/packages/pelagos/src/components/MultiColumn.less
index fe698a9a..0c4263af 100644
--- a/packages/pelagos/src/components/MultiColumn.less
+++ b/packages/pelagos/src/components/MultiColumn.less
@@ -5,15 +5,13 @@
 @layer pelagos {
 	.MultiColumn {
 		flex-direction: row;
-		overflow-x: auto;
-		overflow-y: hidden;
+		overflow: auto hidden;
 	}
 
 	.MultiColumn__column {
 		position: relative;
 		padding: @sp-02;
-		overflow-x: hidden;
-		overflow-y: auto;
+		overflow: hidden auto;
 		outline: none;
 
 		&:not(:first-child) {
@@ -61,7 +59,7 @@
 	}
 
 	.MultiColumn__empty {
-		@font-16-400();
+		@helper-text-02();
 		color: var(--text-helper);
 		white-space: pre-line;
 		justify-content: center;
diff --git a/packages/pelagos/src/components/Select.less b/packages/pelagos/src/components/Select.less
index 8d877488..ac5d7540 100644
--- a/packages/pelagos/src/components/Select.less
+++ b/packages/pelagos/src/components/Select.less
@@ -28,7 +28,7 @@
 		}
 
 		&--empty::before {
-			@font-12-400();
+			@body-compact-01();
 			color: var(--text-placeholder);
 			content: attr(data-placeholder);
 		}
diff --git a/packages/pelagos/src/components/Tabs.less b/packages/pelagos/src/components/Tabs.less
index 93837524..e50180a7 100644
--- a/packages/pelagos/src/components/Tabs.less
+++ b/packages/pelagos/src/components/Tabs.less
@@ -29,7 +29,7 @@
 		}
 
 		&[aria-selected='true'] {
-			@font-14-600();
+			@heading-compact-01();
 			color: var(--text-primary);
 			border-bottom-color: var(--interactive);
 		}
@@ -63,7 +63,7 @@
 		}
 
 		&[aria-selected='true'] {
-			@font-14-600();
+			@heading-compact-01();
 			color: var(--text-primary);
 			background-color: var(--layer);
 			border-top-color: var(--border-interactive);
diff --git a/packages/pelagos/src/components/Tag.less b/packages/pelagos/src/components/Tag.less
index 5256f24a..ea109859 100644
--- a/packages/pelagos/src/components/Tag.less
+++ b/packages/pelagos/src/components/Tag.less
@@ -16,7 +16,7 @@
 
 @layer pelagos {
 	.Tag {
-		@font-12-400();
+		@label-01();
 		flex-direction: row;
 		align-items: center;
 		padding: 0 @sp-08;
diff --git a/packages/pelagos/src/components/Toast.less b/packages/pelagos/src/components/Toast.less
index 30d79ab2..29c2e9e8 100644
--- a/packages/pelagos/src/components/Toast.less
+++ b/packages/pelagos/src/components/Toast.less
@@ -4,7 +4,6 @@
 
 @layer pelagos {
 	.Toast__messages {
-		@font-16-400();
 		position: fixed;
 		z-index: @zindex-toast;
 		top: @sp-16;
diff --git a/packages/pelagos/src/components/ToastMessage.less b/packages/pelagos/src/components/ToastMessage.less
index 90810006..f3a79569 100644
--- a/packages/pelagos/src/components/ToastMessage.less
+++ b/packages/pelagos/src/components/ToastMessage.less
@@ -4,7 +4,6 @@
 
 @layer pelagos {
 	.ToastMessage {
-		@font-14-400();
 		position: relative;
 		overflow: hidden;
 		flex-direction: row;
diff --git a/packages/pelagos/src/fileUploader/FileUploader.less b/packages/pelagos/src/fileUploader/FileUploader.less
index b9fcea86..bc99f6a8 100644
--- a/packages/pelagos/src/fileUploader/FileUploader.less
+++ b/packages/pelagos/src/fileUploader/FileUploader.less
@@ -87,7 +87,7 @@
 		}
 
 		&__fileError {
-			@font-12-400();
+			@label-01();
 			color: var(--text-error);
 			border-top: 1px solid var(--border-subtle);
 			padding-top: @sp-12;
diff --git a/packages/pelagos/src/filters/CheckBoxFilterEditor.less b/packages/pelagos/src/filters/CheckBoxFilterEditor.less
index a3903e4b..7ae5f4c1 100644
--- a/packages/pelagos/src/filters/CheckBoxFilterEditor.less
+++ b/packages/pelagos/src/filters/CheckBoxFilterEditor.less
@@ -10,7 +10,7 @@
 		padding: 0;
 
 		&__legend {
-			@font-12-400();
+			@label-01();
 			color: var(--text-secondary);
 			margin: 0 0 @sp-08;
 			padding: 0;
diff --git a/packages/pelagos/src/formFields/FieldError.less b/packages/pelagos/src/formFields/FieldError.less
index e3de1634..54f6fd95 100644
--- a/packages/pelagos/src/formFields/FieldError.less
+++ b/packages/pelagos/src/formFields/FieldError.less
@@ -3,7 +3,7 @@
 
 @layer pelagos {
 	.FieldError {
-		@font-12-400();
+		@label-01();
 		color: var(--text-error);
 		margin-top: @sp-04;
 	}
diff --git a/packages/pelagos/src/formFields/FieldHelper.less b/packages/pelagos/src/formFields/FieldHelper.less
index 7b0ece3b..a154a91a 100644
--- a/packages/pelagos/src/formFields/FieldHelper.less
+++ b/packages/pelagos/src/formFields/FieldHelper.less
@@ -3,7 +3,7 @@
 
 @layer pelagos {
 	.FieldHelper {
-		@font-12-400();
+		@helper-text-01();
 		color: var(--text-helper);
 		margin-top: @sp-04;
 	}
diff --git a/packages/pelagos/src/formFields/OutputField.less b/packages/pelagos/src/formFields/OutputField.less
index 6b2c6415..f90e7d62 100644
--- a/packages/pelagos/src/formFields/OutputField.less
+++ b/packages/pelagos/src/formFields/OutputField.less
@@ -11,7 +11,6 @@
 	}
 
 	.OutputField__value {
-		@font-14-400();
 		color: var(--text-secondary);
 		// stylelint-disable-next-line @bluecateng/property-strict-value
 		padding: 5px 0; // to match height of text field
diff --git a/packages/pelagos/src/hooks/Tooltip.less b/packages/pelagos/src/hooks/Tooltip.less
index f768d666..c8549837 100644
--- a/packages/pelagos/src/hooks/Tooltip.less
+++ b/packages/pelagos/src/hooks/Tooltip.less
@@ -8,7 +8,7 @@
 
 @layer pelagos {
 	.Tooltip {
-		@font-12-400();
+		@body-01();
 		position: absolute;
 		opacity: 0;
 		z-index: @zindex-tooltip;
diff --git a/packages/pelagos/src/listInput/ListInput.less b/packages/pelagos/src/listInput/ListInput.less
index 50f13ffc..834b91b1 100644
--- a/packages/pelagos/src/listInput/ListInput.less
+++ b/packages/pelagos/src/listInput/ListInput.less
@@ -7,7 +7,7 @@
 	}
 
 	.ListInput__empty {
-		@font-16-400();
+		@helper-text-02();
 		color: var(--text-helper);
 		white-space: pre-line;
 		height: 145px;
diff --git a/packages/pelagos/src/sideNav/SideNav.less b/packages/pelagos/src/sideNav/SideNav.less
index 0c7786c0..ce6f43ca 100644
--- a/packages/pelagos/src/sideNav/SideNav.less
+++ b/packages/pelagos/src/sideNav/SideNav.less
@@ -15,12 +15,11 @@
 			padding: @sp-16 0 0;
 			margin: 0;
 			list-style: none;
-			overflow-x: hidden;
-			overflow-y: auto;
+			overflow: hidden auto;
 		}
 
 		&__submenu {
-			@font-14-600();
+			@heading-compact-01();
 			@focus-visible();
 			position: relative;
 			display: flex;
@@ -88,7 +87,7 @@
 		}
 
 		&__link {
-			@font-14-600();
+			@heading-compact-01();
 			position: relative;
 			display: flex;
 			align-items: center;
@@ -133,12 +132,12 @@
 			}
 
 			.SideNav__menu & {
-				@font-14-400();
+				@body-compact-01();
 				padding-left: @sp-32;
 			}
 
 			.SideNav__menu &[aria-current] {
-				@font-14-600();
+				@heading-compact-01();
 			}
 		}
 
diff --git a/packages/pelagos/src/table/Table.less b/packages/pelagos/src/table/Table.less
index e116be32..5980ec92 100644
--- a/packages/pelagos/src/table/Table.less
+++ b/packages/pelagos/src/table/Table.less
@@ -86,7 +86,7 @@
 		}
 
 		& > thead {
-			@font-12-600();
+			@heading-compact-01();
 			color: var(--text-secondary);
 			background-color: var(--layer-accent);
 
@@ -191,10 +191,14 @@
 			}
 		}
 
-		&__title {
+		&__header {
 			margin: @sp-16 @sp-16 @sp-24 @sp-16;
 		}
 
+		&__title {
+			@heading-03();
+		}
+
 		&__description {
 			color: var(--text-secondary);
 		}
diff --git a/packages/pelagos/src/table/TableTitle.js b/packages/pelagos/src/table/TableTitle.js
index 40b2d22f..8ff32f12 100644
--- a/packages/pelagos/src/table/TableTitle.js
+++ b/packages/pelagos/src/table/TableTitle.js
@@ -5,8 +5,10 @@ import './Table.less';
 
 /** Title for a table. */
 const TableTitle = forwardRef(({id, title, description}, ref) => (
-	<div className="Table__title" ref={ref}>
-		<h2 id={id}>{title}</h2>
+	<div className="Table__header" ref={ref}>
+		<h2 id={id} className="Table__title">
+			{title}
+		</h2>
 		<div className="Table__description">{description}</div>
 	</div>
 ));
diff --git a/packages/pelagos/src/tabs/TabList.less b/packages/pelagos/src/tabs/TabList.less
index 8c2509a0..a79d399c 100644
--- a/packages/pelagos/src/tabs/TabList.less
+++ b/packages/pelagos/src/tabs/TabList.less
@@ -54,7 +54,7 @@
 			}
 
 			&[aria-selected='true'] {
-				@font-14-600();
+				@heading-compact-01();
 				color: var(--text-primary);
 				border-bottom-color: var(--border-interactive);
 			}
@@ -86,11 +86,12 @@
 
 		&__label {
 			flex-direction: row;
+			align-items: center;
 			gap: @sp-08;
 		}
 
 		&__secondaryLabel {
-			@font-12-400();
+			@label-01();
 		}
 
 		&__remove {
diff --git a/packages/pelagos/templates/WithLayers.less b/packages/pelagos/templates/WithLayers.less
index 62d286cc..afe4ca65 100644
--- a/packages/pelagos/templates/WithLayers.less
+++ b/packages/pelagos/templates/WithLayers.less
@@ -13,7 +13,7 @@
 	}
 
 	&__label {
-		@font-12-400();
+		@label-01();
 		flex-direction: row;
 		align-items: center;
 		align-self: flex-start;