diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss
index a05bb236289..13c2a604423 100644
--- a/src/components/ActionList/ActionList.scss
+++ b/src/components/ActionList/ActionList.scss
@@ -4,7 +4,7 @@
   --pc-action-list-image-size: 20px;
   --pc-action-list-item-min-height: var(--p-space-10);
   --pc-action-list-item-vertical-padding: calc(
-    (var(--pc-action-list-item-min-height) - #{line-height(body)}) / 2
+    (var(--pc-action-list-item-min-height) - var(--p-line-height-2)) / 2
   );
   outline: none;
   list-style: none;
diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss
index d244029edd4..19bbd2baeb1 100644
--- a/src/components/Autocomplete/components/MappedAction/MappedAction.scss
+++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -4,7 +4,7 @@
   --pc-mapped-actions-image-size: 20px;
   --pc-mapped-actions-item-min-height: var(--p-space-10);
   --pc-mapped-actions-item-vertical-padding: calc(
-    (var(--pc-mapped-actions-item-min-height) - #{line-height(body)}) / 2
+    (var(--pc-mapped-actions-item-min-height) - var(--p-line-height-2)) / 2
   );
   margin-bottom: var(--p-space-3);
 }
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index 3001445aa5b..fd2a1d9ac50 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -12,7 +12,7 @@
   background-color: var(--p-surface-neutral);
   border-radius: var(--p-border-radius-5);
   font-size: font-size(caption);
-  line-height: line-height(caption, large-screen);
+  line-height: var(--p-line-height-1);
   color: var(--p-text);
   font-weight: var(--p-font-weight-regular);
 
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 3d83c274ee7..6f2c005a40b 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -52,8 +52,9 @@
 .Banner {
   --pc-banner-rgb-text: 33, 43, 54;
   --pc-banner-secondary-action-horizontal-padding: var(--p-space-3);
-  --pc-banner-secondary-action-vertical-padding: 0.5 *
-    (#{control-height() - line-height(body)});
+  --pc-banner-secondary-action-vertical-padding: calc(
+    0.5 * (var(--pc-control-height) - var(--p-line-height-2))
+  );
   position: relative;
   display: flex;
 
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 34c6c6a5e1b..988594234de 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -1,14 +1,19 @@
 @import '../../styles/common';
 
-$min-height: control-height();
-$vertical-padding: ($min-height - line-height(body) - 2px) / 2;
-$slim-min-height: 28px;
-$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2;
-$large-min-height: 44px;
-$large-vertical-padding: ($large-min-height - line-height(body) - 2px) / 2;
-$spinner-size: 20px;
-
 .Button {
+  --pc-button-min-height: var(--pc-control-height);
+  --pc-button-slim-min-height: var(--p-line-height-4);
+  --pc-button-large-min-height: var(--p-line-height-7);
+  --pc-button-vertical-padding: calc(
+    (var(--pc-button-min-height) - var(--p-line-height-2) - 2px) / 2
+  );
+  --pc-button-slim-vertical-padding: calc(
+    (var(--pc-button-slim-min-height) - var(--p-line-height-2) - 2px) / 2
+  );
+  --pc-button-large-vertical-padding: calc(
+    (var(--pc-button-large-min-height) - var(--p-line-height-2) - 2px) / 2
+  );
+  --pc-button-spinner-size: 20px;
   --pc-button-segment: 10;
   --pc-button-focused: 20;
   @include button-base;
@@ -101,8 +106,8 @@ $spinner-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
-  margin-top: -($spinner-size / 2);
-  margin-left: -($spinner-size / 2);
+  margin-top: calc(-1 * (var(--pc-button-spinner-size) / 2));
+  margin-left: calc(-1 * (var(--pc-button-spinner-size) / 2));
 }
 
 .primary,
@@ -187,7 +192,8 @@ $spinner-size: 20px;
 // stylelint-disable selector-max-specificity, selector-max-class
 .plain {
   @include recolor-icon(var(--p-interactive));
-  margin: (-1 * $vertical-padding) calc(-1 * var(--p-space-2));
+  margin: calc(-1 * var(--pc-button-vertical-padding))
+    calc(-1 * var(--p-space-2));
   padding-left: var(--p-space-2);
   padding-right: var(--p-space-2);
   background: transparent;
@@ -274,17 +280,18 @@ $spinner-size: 20px;
   }
 
   &.sizeSlim {
-    margin-top: (-1 * $slim-vertical-padding);
-    margin-bottom: (-1 * $slim-vertical-padding);
+    margin-top: calc(-1 * var(--pc-button-slim-vertical-padding));
+    margin-bottom: calc(-1 * var(--pc-button-slim-vertical-padding));
   }
 
   &.sizeLarge {
-    margin: (-1 * $large-vertical-padding) calc(-1 * var(--p-space-5));
+    margin: calc(-1 * var(--pc-button-large-vertical-padding))
+      calc(-1 * var(--p-space-5));
   }
 
   &.iconOnly {
     @include recolor-icon(var(--p-icon));
-    margin: -0.5 * ($min-height - icon-size());
+    margin: calc(-0.5 * (var(--pc-button-min-height) - #{icon-size()}));
 
     &:hover {
       @include recolor-icon(var(--p-icon-hovered));
@@ -351,14 +358,14 @@ $spinner-size: 20px;
 }
 
 .sizeSlim {
-  min-height: $slim-min-height;
-  padding: $slim-vertical-padding var(--p-space-3);
+  min-height: var(--pc-button-slim-min-height);
+  padding: var(--pc-button-slim-vertical-padding) var(--p-space-3);
 }
 
 .sizeLarge {
-  min-height: $large-min-height;
-  min-width: $large-min-height;
-  padding: $large-vertical-padding var(--p-space-6);
+  min-height: var(--pc-button-large-min-height);
+  min-width: var(--pc-button-large-min-height);
+  padding: var(--pc-button-large-vertical-padding) var(--p-space-6);
 
   .Content {
     @include text-style-button-large;
diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss
index 7c3920b7d76..8a42df1e6d3 100644
--- a/src/components/CheckableButton/CheckableButton.scss
+++ b/src/components/CheckableButton/CheckableButton.scss
@@ -1,16 +1,16 @@
 @import '../../styles/common';
 
-$button-min-height: control-height();
-
-$button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2;
+$button-vertical-padding: calc(
+  (var(--p-line-height-6) - var(--p-line-height-2) - 2px) / 2
+);
 
 .CheckableButton {
   @include text-style-button;
   @include recolor-icon(var(--p-icon-on-interactive));
   display: flex;
   align-items: center;
-  min-height: $button-min-height;
-  min-width: $button-min-height;
+  min-height: var(--p-line-height-6);
+  min-width: var(--p-line-height-6);
   margin: 0;
   padding: $button-vertical-padding var(--p-space-4);
   line-height: 1;
diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
index 87c99a7c2b8..f5f46a3981b 100644
--- a/src/components/CustomProperties/tests/CustomProperties.test.tsx
+++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -40,6 +40,7 @@ const mockTokens: Tokens = {
   // Note: We don't need to assign mock values to the remaining static tokens.
   depth: {},
   legacyTokens: {},
+  lineHeight: {},
   shape: {},
   spacing: {},
   typography: {},
diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss
index 0637954391c..b72f4b8f525 100755
--- a/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -1,11 +1,7 @@
 @import '../../../../styles/common';
 
-$fileupload-padding: var(--p-space-4);
-$slim-min-height: 30px;
-$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2;
-
 .FileUpload {
-  padding: $fileupload-padding;
+  padding: var(--p-space-4);
   text-align: center;
   display: flex;
   align-items: center;
diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index 316eaaeeb4b..dc9248206db 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 $navigation-elements-height: 36px;
-$title-height: line-height(display-large, large-screen);
+$title-height: var(--p-line-height-5);
 $stacking-order: (
   title: 10,
   breadcrumbs: 20,
diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
index 39834b5c94e..692310fc65f 100644
--- a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
+++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
@@ -2,32 +2,42 @@
 
 $skeleton-display-text-max-width: 120px;
 
-@mixin skeleton-display-text-height($size) {
-  height: line-height($size);
+@mixin skeleton-display-text-height {
+  height: var(--pc-skeleton-display-text-height);
 
   @include when-typography-not-condensed {
-    height: line-height($size, large-screen);
+    height: var(--pc-skeleton-display-text-height-not-condensed);
   }
 }
 
 .DisplayText {
+  --pc-skeleton-display-text-height: var(--p-line-height-2);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-2);
   max-width: $skeleton-display-text-max-width;
 
   @include skeleton-content;
 }
 
 .sizeSmall {
-  @include skeleton-display-text-height('display-small');
+  --pc-skeleton-display-text-height: var(--p-line-height-3);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4);
+  @include skeleton-display-text-height;
 }
 
 .sizeMedium {
-  @include skeleton-display-text-height('display-medium');
+  --pc-skeleton-display-text-height: var(--p-line-height-4);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5);
+  @include skeleton-display-text-height;
 }
 
 .sizeLarge {
-  @include skeleton-display-text-height('display-large');
+  --pc-skeleton-display-text-height: var(--p-line-height-4);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5);
+  @include skeleton-display-text-height;
 }
 
 .sizeExtraLarge {
-  @include skeleton-display-text-height('display-x-large');
+  --pc-skeleton-display-text-height: var(--p-line-height-6);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-7);
+  @include skeleton-display-text-height;
 }
diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss
index 1e4e4151cc0..26d859037f1 100644
--- a/src/components/TopBar/components/UserMenu/UserMenu.scss
+++ b/src/components/TopBar/components/UserMenu/UserMenu.scss
@@ -13,7 +13,7 @@
   @include truncate;
   @include text-style-body;
   font-weight: var(--p-font-weight-medium);
-  line-height: line-height(subheading);
+  line-height: var(--p-line-height-1);
   color: var(--p-text);
   text-align: left;
 }
diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss
index 5dd77e6e7e1..941ea0c74da 100644
--- a/src/styles/foundation/_typography.scss
+++ b/src/styles/foundation/_typography.scss
@@ -17,47 +17,6 @@ $font-family-data: (
   monospace},
 );
 
-$line-height-data: (
-  caption: (
-    base: 20px,
-    large-screen: 16px,
-  ),
-  heading: (
-    base: 24px,
-  ),
-  subheading: (
-    base: 16px,
-  ),
-  input: (
-    base: 24px,
-  ),
-  body: (
-    base: 20px,
-  ),
-  button: (
-    base: 16px,
-  ),
-  button-large: (
-    base: 20px,
-  ),
-  display-x-large: (
-    base: 36px,
-    large-screen: 44px,
-  ),
-  display-large: (
-    base: 28px,
-    large-screen: 32px,
-  ),
-  display-medium: (
-    base: 28px,
-    large-screen: 32px,
-  ),
-  display-small: (
-    base: 24px,
-    large-screen: 28px,
-  ),
-);
-
 $font-size-data: (
   caption: (
     base: 13px,
@@ -120,22 +79,6 @@ $font-size-data: (
   }
 }
 
-/// Returns the line height for a given text style and variant.
-///
-/// @param {String} $style - The font style.
-/// @param {String} $variant [base] - The variant on the font-size.
-/// @return {Number} The line-height for the text-style.
-
-@function line-height($style, $variant: base) {
-  $fetched-line-height: map-get(map-get($line-height-data, $style), $variant);
-
-  @if type-of($fetched-line-height) {
-    @return $fetched-line-height;
-  } @else {
-    @error 'Line height `#{$style} - #{$variant}` not found. Available line heights: #{available-names($line-height-data)}';
-  }
-}
-
 /// Returns the font size for a given text style and variant.
 ///
 /// @param {String} $style - The font style.
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
index e28b3dd37f0..a1133e01b32 100644
--- a/src/styles/shared/_buttons.scss
+++ b/src/styles/shared/_buttons.scss
@@ -5,8 +5,9 @@
 }
 
 @mixin button-base {
-  $min-height: control-height();
-  $vertical-padding: ($min-height - line-height(body) - 2px) / 2;
+  $vertical-padding: calc(
+    (var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05)) / 2
+  );
 
   @include recolor-icon(var(--p-icon));
   @include focus-ring($border-width: border-width('base'));
@@ -14,8 +15,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: $min-height;
-  min-width: $min-height;
+  min-height: var(--p-line-height-6);
+  min-width: var(--p-line-height-6);
   margin: 0;
   padding: $vertical-padding var(--p-space-4);
   background: var(--p-surface);
diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss
index 631f63b7251..70d741ec5c8 100644
--- a/src/styles/shared/_controls.scss
+++ b/src/styles/shared/_controls.scss
@@ -2,12 +2,18 @@
   @return 36px;
 }
 
+:root {
+  --pc-control-height: var(--p-line-height-6);
+}
+
 @function control-slim-height() {
   @return 28px;
 }
 
 @function control-vertical-padding() {
-  @return (control-height() - line-height(input) - 2px) / 2;
+  @return calc(
+    (var(--pc-control-height) - var(--p-line-height-3) - var(--p-space-05)) / 2
+  );
 }
 
 @function control-icon-transition() {
diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss
index a8dfdcdb99e..7b46d26be41 100644
--- a/src/styles/shared/_typography.scss
+++ b/src/styles/shared/_typography.scss
@@ -15,18 +15,18 @@ $typography-condensed: em(640px);
 @mixin text-style-caption {
   font-size: font-size(caption);
   font-weight: var(--p-font-weight-regular);
-  line-height: line-height(caption);
+  line-height: var(--p-line-height-2);
 
   @include when-typography-not-condensed {
     font-size: font-size(caption, large-screen);
-    line-height: line-height(caption, large-screen);
+    line-height: var(--p-line-height-1);
   }
 }
 
 @mixin text-style-heading {
   font-size: font-size(heading);
   font-weight: var(--p-font-weight-semibold);
-  line-height: line-height(heading);
+  line-height: var(--p-line-height-3);
 
   @include when-typography-not-condensed {
     font-size: font-size(heading, large-screen);
@@ -36,7 +36,7 @@ $typography-condensed: em(640px);
 @mixin text-style-subheading {
   font-size: font-size(subheading);
   font-weight: var(--p-font-weight-semibold);
-  line-height: line-height(subheading);
+  line-height: var(--p-line-height-1);
   text-transform: uppercase;
 
   @include when-typography-not-condensed {
@@ -47,7 +47,7 @@ $typography-condensed: em(640px);
 @mixin text-style-input {
   font-size: font-size(input);
   font-weight: var(--p-font-weight-regular);
-  line-height: line-height(input);
+  line-height: var(--p-line-height-3);
   border: none;
 
   text-transform: initial;
@@ -61,7 +61,7 @@ $typography-condensed: em(640px);
 @mixin text-style-body {
   font-size: font-size(body);
   font-weight: var(--p-font-weight-regular);
-  line-height: line-height(body);
+  line-height: var(--p-line-height-2);
 
   text-transform: initial;
   letter-spacing: initial;
@@ -74,7 +74,7 @@ $typography-condensed: em(640px);
 @mixin text-style-button {
   font-size: font-size(button);
   font-weight: var(--p-font-weight-medium);
-  line-height: line-height(button);
+  line-height: var(--p-line-height-1);
 
   text-transform: initial;
   letter-spacing: initial;
@@ -87,7 +87,7 @@ $typography-condensed: em(640px);
 @mixin text-style-button-large {
   font-size: font-size(button-large);
   font-weight: var(--p-font-weight-medium);
-  line-height: line-height(button-large);
+  line-height: var(--p-line-height-2);
 
   text-transform: initial;
   letter-spacing: initial;
@@ -100,44 +100,44 @@ $typography-condensed: em(640px);
 @mixin text-style-display-x-large {
   font-size: font-size(display-x-large);
   font-weight: var(--p-font-weight-semibold);
-  line-height: line-height(display-x-large);
+  line-height: var(--p-line-height-6);
 
   @include when-typography-not-condensed {
     font-size: font-size(display-x-large, large-screen);
-    line-height: line-height(display-x-large, large-screen);
+    line-height: var(--p-line-height-7);
   }
 }
 
 @mixin text-style-display-large {
   font-size: font-size(display-large);
   font-weight: var(--p-font-weight-semibold);
-  line-height: line-height(display-large);
+  line-height: var(--p-line-height-4);
 
   @include when-typography-not-condensed {
     font-size: font-size(display-large, large-screen);
-    line-height: line-height(display-large, large-screen);
+    line-height: var(--p-line-height-5);
   }
 }
 
 @mixin text-style-display-medium {
   font-size: font-size(display-medium);
   font-weight: var(--p-font-weight-regular);
-  line-height: line-height(display-medium);
+  line-height: var(--p-line-height-4);
 
   @include when-typography-not-condensed {
     font-size: font-size(display-medium, large-screen);
-    line-height: line-height(display-medium, large-screen);
+    line-height: var(--p-line-height-5);
   }
 }
 
 @mixin text-style-display-small {
   font-size: font-size(display-small);
   font-weight: var(--p-font-weight-regular);
-  line-height: line-height(display-small);
+  line-height: var(--p-line-height-3);
 
   @include when-typography-not-condensed {
     font-size: font-size(display-small, large-screen);
-    line-height: line-height(display-small, large-screen);
+    line-height: var(--p-line-height-4);
   }
 }
 
diff --git a/src/tokens/token-groups/line-height.json b/src/tokens/token-groups/line-height.json
new file mode 100644
index 00000000000..15623d86db5
--- /dev/null
+++ b/src/tokens/token-groups/line-height.json
@@ -0,0 +1,9 @@
+{
+  "line-height-1": "16px",
+  "line-height-2": "20px",
+  "line-height-3": "24px",
+  "line-height-4": "28px",
+  "line-height-5": "32px",
+  "line-height-6": "36px",
+  "line-height-7": "44px"
+}
diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
index 8630b72e380..42bf6e6c0c8 100644
--- a/src/tokens/tokens.ts
+++ b/src/tokens/tokens.ts
@@ -2,6 +2,7 @@ import depth from './token-groups/depth.json';
 import legacyTokens from './token-groups/legacy-tokens.json';
 import darkColorScheme from './token-groups/color.dark.json';
 import lightColorScheme from './token-groups/color.light.json';
+import lineHeight from './token-groups/line-height.json';
 import motion from './token-groups/motion.json';
 import shape from './token-groups/shape.json';
 import spacing from './token-groups/spacing.json';
@@ -50,6 +51,7 @@ export interface Tokens {
   depth: TokenGroup;
   colorSchemes: ColorSchemes;
   legacyTokens: TokenGroup;
+  lineHeight: TokenGroup;
   motion: TokenGroup;
   shape: TokenGroup;
   spacing: TokenGroup;
@@ -61,6 +63,7 @@ export const tokens: Tokens = {
   colorSchemes,
   depth,
   legacyTokens: tokensToRems(legacyTokens),
+  lineHeight: tokensToRems(lineHeight),
   motion,
   shape: tokensToRems(shape),
   spacing: tokensToRems(spacing),