diff --git a/.changelog/16577.txt b/.changelog/16577.txt
new file mode 100644
index 000000000..3e8fdbece
--- /dev/null
+++ b/.changelog/16577.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: update typography to styles from hds
+```
\ No newline at end of file
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/components.scss b/ui/packages/consul-peerings/app/components/consul/peer/components.scss
index 6f4532f23..1e20d8b23 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/components.scss
+++ b/ui/packages/consul-peerings/app/components/consul/peer/components.scss
@@ -18,8 +18,8 @@
 %pill-failing,
 %pill-terminated,
 %pill-deleting {
-  font-weight: var(--typo-weight-medium);
-  font-size: var(--typo-size-700);
+  @extend .hds-font-weight-medium;
+  font-size: var(--token-typography-body-200-font-size);
 }
 
 %pill-pending::before {
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
index 9d3a71308..217818abd 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
@@ -18,7 +18,7 @@
 
         <fsm.State @matches={{array "idle" "error"}}>
           <fsm.State @matches={{"error"}}>
-            <Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
+            <Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
               <A.Title>Error</A.Title>
               <A.Description>{{fsm.state.context.error.message}}</A.Description>
             </Hds::Alert>
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
index 72997f4ce..bca9acedd 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
@@ -48,11 +48,10 @@
     z-index: 2;
   }
   li::after {
+    @extend %body-200-semibold;
     content: counter(hexagonal-counter);
     position: absolute;
     top: 0px;
-    font-size: 14px;
-    font-weight: var(--typo-weight-bold);
     background-color: var(--token-color-palette-neutral-0);
     z-index: 1;
     text-align: center;
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
index 4e36952fc..1a8f534ec 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
@@ -19,7 +19,7 @@
     as |writer|
   >
     <BlockSlot @name="error" as |after error|>
-      <Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
+      <Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
         <A.Title>Error</A.Title>
         <A.Description>{{error.message}}</A.Description>
       </Hds::Alert>
diff --git a/ui/packages/consul-ui/app/components/app-view/skin.scss b/ui/packages/consul-ui/app/components/app-view/skin.scss
index 11a7133af..b88b2ec96 100644
--- a/ui/packages/consul-ui/app/components/app-view/skin.scss
+++ b/ui/packages/consul-ui/app/components/app-view/skin.scss
@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-%app-view-title-left-container > *:first-child {
-  @extend %h100;
-}
 %app-view-title {
   border-bottom: var(--decor-border-100);
 }
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 2de98d11c..73d266bdb 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -78,12 +78,11 @@ main {
   @extend %transition-pushover;
 }
 %footer {
+  @extend %body-100-regular;
   position: fixed;
   z-index: 50;
 
   color: var(--token-color-foreground-disabled);
-  font-size: var(--typo-size-800);
-
   width: 250px;
   padding-left: 25px;
 }
diff --git a/ui/packages/consul-ui/app/components/auth-form/skin.scss b/ui/packages/consul-ui/app/components/auth-form/skin.scss
index 79d6ede05..18ff35fea 100644
--- a/ui/packages/consul-ui/app/components/auth-form/skin.scss
+++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss
@@ -4,7 +4,7 @@
  */
 
 %auth-form em {
-  @extend %p3;
+  @extend %body-100-regular;
   color: var(--token-color-foreground-faint);
   font-style: normal;
 }
diff --git a/ui/packages/consul-ui/app/components/auth-profile/index.scss b/ui/packages/consul-ui/app/components/auth-profile/index.scss
index cc0a6e8a7..cc749d474 100644
--- a/ui/packages/consul-ui/app/components/auth-profile/index.scss
+++ b/ui/packages/consul-ui/app/components/auth-profile/index.scss
@@ -7,13 +7,13 @@
   padding: 0.9em 1em;
 }
 .auth-profile {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 .auth-profile dt span {
-  font-weight: var(--typo-weight-normal);
+  font-weight: var(--token-typography-font-weight-regular);
 }
 .auth-profile dt {
-  font-weight: var(--typo-weight-bold);
+  font-weight: var(--token-typography-font-weight-bold);
 }
 .auth-profile dt,
 .auth-profile dd {
diff --git a/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs
index 54376aad2..98caaba5e 100644
--- a/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs
+++ b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs
@@ -1,7 +1,2 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
 <path data-enterprise-logo d="M322.099,18.0445001 C319.225,18.0223001 316.427,18.9609001 314.148,20.7112001 L314.016,20.8179001 L313.68,18.5368001 L310.332,18.5368001 L310.332,53.0000001 L314.312,52.4338001 L314.312,42.3164001 L314.435,42.3164001 C316.705,42.7693001 319.012,43.0165001 321.327,43.0549001 C326.554,43.0549001 329.098,40.5029001 329.098,35.2432001 L329.098,25.3802001 C329.073,20.4569001 326.809,18.0445001 322.099,18.0445001 Z M264.971,11.9722001 L260.991,12.5466001 L260.991,18.5284001 L256.708,18.5284001 L256.708,21.8106001 L260.991,21.8106001 L260.991,37.6883001 L260.99344,37.9365729 C261.066744,41.6122056 262.7975,43.1124033 266.915,43.1124033 C268.591,43.1170001 270.255,42.8396001 271.839,42.2915001 L271.363,39.1817001 L270.896229,39.3066643 C269.803094,39.5806719 268.682875,39.7315001 267.555,39.7560001 C265.526625,39.7560001 265.081547,38.9674128 264.991981,37.7056542 L264.97743,37.4176027 L264.97159,37.1147428 L264.971,21.8188001 L271.494,21.8188001 L271.83,18.5366001 L264.971,18.5366001 L264.971,11.9722001 Z M283.556,18.0770001 C277.312,18.0770001 274.144,21.0884001 274.144,27.0374001 L274.144,34.3075001 C274.144,40.3140001 277.164,43.1124894 283.655,43.1124894 C286.526,43.1192001 289.38,42.6620001 292.106,41.7581001 L291.589,38.6154001 C289.116,39.3030001 286.566,39.6779001 283.999,39.7314001 C279.785843,39.7314001 278.500803,38.4772648 278.201322,35.860808 L278.165734,35.4868687 L278.141767,35.0951811 C278.138675,35.0284172 278.136019,34.9609111 278.133774,34.8926614 L278.125037,34.474229 L278.124,32.0756001 L292.582,32.0756001 L292.582,27.1031001 C292.582,21.0064001 289.636,18.0770001 283.556,18.0770001 Z M384.631,18.0768001 C378.412,18.0440001 375.22,21.0554001 375.22,27.0208001 L375.22,34.2909001 C375.22,40.2973001 378.239,43.0955988 384.73,43.0955988 C387.599,43.1033001 390.45,42.6460001 393.173,41.7415001 L392.665,38.5988001 C390.188,39.2815001 387.635,39.6509001 385.066,39.6983001 C380.852843,39.6983001 379.567803,38.4442359 379.268322,35.8278014 L379.232734,35.4538649 L379.208767,35.0621794 C379.205675,34.9954158 379.203019,34.9279099 379.200774,34.8596604 L379.192037,34.4412289 L379.191,32.0754001 L393.657,32.0754001 L393.657,27.1029001 C393.657,21.0062001 390.712,18.0768001 384.631,18.0768001 Z M364.634,18.0441001 C363.881125,18.0441001 363.18736,18.0712813 362.54969,18.1279834 L362.016783,18.1838695 C357.948857,18.6791301 356.371,20.5353768 356.371,24.4608001 L356.371522,24.7155013 L356.376145,25.2052033 L356.386527,25.669464 L356.403852,26.1092746 C356.407384,26.1805939 356.411254,26.2509357 356.415488,26.3203208 L356.445451,26.7253144 L356.485319,27.1083357 C356.756619,29.3425283 357.626845,30.4437319 360.247859,31.3753061 L360.701103,31.529163 C360.779411,31.5545991 360.85912,31.5799457 360.940253,31.6052232 L361.444353,31.7562266 L361.983836,31.9065664 L362.55989,32.0572338 L363.430663,32.2724269 L364.440153,32.5299129 L364.884369,32.6506971 L365.29049,32.7679922 L365.660213,32.8831607 L365.99523,32.9975651 C367.26815,33.4554713 367.748817,33.9277406 367.925217,34.806783 L367.963261,35.0352452 C367.974017,35.1143754 367.982943,35.1965576 367.990321,35.2820187 L368.008092,35.5484662 L368.018269,35.8359502 L368.023,36.3096001 C368.023,36.3683432 368.022674,36.4261667 368.021989,36.4830819 L368.013333,36.8137655 C368.008847,36.9204214 368.002676,37.0235359 367.994568,37.1232009 L367.964177,37.4119383 C367.774513,38.8512264 367.058626,39.4837671 364.875404,39.6510671 L364.43427,39.67773 L363.954974,39.6933243 C363.78868,39.6967387 363.615773,39.6984001 363.436,39.6984001 C361.126,39.6638001 358.83,39.3385001 356.601,38.7302001 L356.051,41.7908001 L356.619468,41.9710684 C358.900888,42.6645722 361.270923,43.0269154 363.658,43.0463001 C369.59355,43.0463001 371.402903,41.3625861 371.812159,38.0405419 L371.854011,37.6421573 C371.859965,37.574501 371.865421,37.5062155 371.870401,37.4373012 L371.894725,37.0162715 L371.908596,36.5801656 C371.911587,36.4322862 371.913,36.2818967 371.913,36.1290001 L371.914417,35.5317322 C371.901583,33.4289389 371.677,32.2649251 370.797,31.3698001 C370.053077,30.6022731 368.787947,30.0494771 366.870096,29.4840145 L366.242608,29.3047611 C366.13436,29.2747269 366.024265,29.2445914 365.912304,29.2143213 L365.218,29.0308209 L364.216102,28.7784328 L363.495981,28.593015 L363.068145,28.4733265 L362.67987,28.3551624 C361.018765,27.8247783 360.501056,27.2986662 360.340522,26.2094051 L360.310407,25.9578465 C360.306262,25.9142982 360.302526,25.8699197 360.29916,25.8246823 L360.283089,25.5427193 L360.273984,25.2387571 L360.269927,24.911412 L360.270221,24.3885398 L360.280627,24.0635689 C360.366727,22.3885604 360.966747,21.6370879 363.248047,21.4645754 L363.695778,21.4389299 L364.184625,21.426349 L364.445,21.4248001 C366.684,21.4608001 368.916,21.6859001 371.117,22.0976001 L371.396,18.8646001 L370.730951,18.7059457 C368.73071,18.2553391 366.686,18.0331201 364.634,18.0441001 Z M351.301,18.5363001 L347.321,18.5363001 L347.321,42.6112001 L351.301,42.6112001 L351.301,18.5363001 Z M307.335,18.0850001 L306.70097,18.3638937 C304.598769,19.3169298 302.610091,20.5031364 300.771,21.9005001 L300.623,22.0236001 L300.369,18.5363001 L296.931,18.5363001 L296.931,42.6112001 L300.91,42.6112001 L300.91,25.9048001 L301.641825,25.3925123 C303.604371,24.0427531 305.654445,22.8240667 307.778,21.7446001 L307.335,18.0850001 Z M344.318,18.0850001 L343.683947,18.3638937 C341.581595,19.3169298 339.592091,20.5031364 337.753,21.9005001 L337.606,22.0236001 L337.351,18.5363001 L333.946,18.5363001 L333.946,42.6112001 L337.926,42.6112001 L337.926,25.9048001 L337.967,25.9048001 L338.701162,25.3884311 C340.669963,24.0279284 342.726556,22.7996223 344.859,21.7118001 L344.318,18.0850001 Z M230.384,9.62500005 L211.109,9.62500005 L211.109,42.6112001 L230.466,42.6112001 L230.466,38.9597001 L215.146,38.9597001 L215.146,27.4720001 L229.293,27.4720001 L229.293,23.8698001 L215.146,23.8698001 L215.146,13.2600001 L230.384,13.2600001 L230.384,9.62500005 Z M248.763,18.0441001 C245.899,18.0441001 241.706,19.3323001 239.047,20.6124001 L238.924,20.6698001 L238.522,18.5282001 L235.322,18.5282001 L235.322,42.5704001 L239.302,42.5704001 L239.302,24.2885001 L239.359,24.2885001 C241.919,22.9674001 245.661,21.8268001 247.524,21.8268001 C249.165,21.8268001 249.985,22.5735001 249.985,24.1736001 L249.985,42.5868001 L253.965,42.5868001 L253.965,24.1161001 C253.932,20.0380001 252.25,18.0523001 248.763,18.0441001 Z M321.229,21.5564001 C323.526,21.5564001 325.061,22.2046001 325.061,25.3966001 L325.094,35.2760001 C325.094,38.3121001 323.887,39.6085001 321.057,39.6085001 C318.81,39.5533001 316.572,39.3035001 314.369,38.8618001 L314.287,38.8618001 L314.287,24.4694001 C316.198,22.7311001 318.649,21.7027001 321.229,21.5564001 Z M283.581,21.3264001 C287.372,21.3264001 288.758,22.8855001 288.758,26.7010001 L288.758,28.7934001 L278.149,28.7934001 L278.149,26.7010001 C278.149,22.9839001 279.79,21.3264001 283.581,21.3264001 Z M384.648,21.3262001 C388.431,21.3262001 389.834,22.8852001 389.834,26.7008001 L389.834,28.7932001 L379.224,28.7932001 L379.224,26.7008001 C379.224,22.9837001 380.865,21.3262001 384.648,21.3262001 Z M351.301,8.63220005 L347.321,8.63220005 L347.321,14.4499001 L351.301,14.4499001 L351.301,8.63220005 Z" fill-rule="nonzero"></path>
 
diff --git a/ui/packages/consul-ui/app/components/brand-loader/index.hbs b/ui/packages/consul-ui/app/components/brand-loader/index.hbs
index a02a5c8c3..e00f7dd30 100644
--- a/ui/packages/consul-ui/app/components/brand-loader/index.hbs
+++ b/ui/packages/consul-ui/app/components/brand-loader/index.hbs
@@ -1,8 +1,3 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
 <div
   class="brand-loader"
   style="margin-left: calc(-{{@width}}px / 2)"
diff --git a/ui/packages/consul-ui/app/components/code-editor/index.hbs b/ui/packages/consul-ui/app/components/code-editor/index.hbs
index 6d39e6798..0ba860e6d 100644
--- a/ui/packages/consul-ui/app/components/code-editor/index.hbs
+++ b/ui/packages/consul-ui/app/components/code-editor/index.hbs
@@ -39,4 +39,4 @@
   @options={{options}}
   @valueUpdated={{action onkeyup}}
 />
-<pre><code>{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}</code></pre>
+<pre><code>{{#if (has-block 'content')}}{{yield to='content'}}{{else}}{{value}}{{/if}}</code></pre>
diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss
index 9fdc1283b..db0f52bc0 100644
--- a/ui/packages/consul-ui/app/components/code-editor/skin.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss
@@ -39,12 +39,11 @@ $syntax-dark-gray: #535f73;
   overflow-x: hidden !important;
 }
 .CodeMirror-lint-tooltip {
+  @extend %code-100-regular;
   background-color: #f9f9fa;
   border: 1px solid var(--syntax-light-gray);
   border-radius: 0;
   color: lighten(#000, 13%);
-  font-family: var(--typo-family-mono);
-  font-size: 13px;
   padding: 7px 8px 9px;
 }
 
@@ -54,7 +53,7 @@ $syntax-dark-gray: #535f73;
     background-color: var(--token-color-hashicorp-brand) !important;
     color: #cfd2d1 !important;
     border: none;
-    font-family: var(--typo-family-mono);
+    font-family: var(--token-typography-font-stack-code);
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
@@ -210,9 +209,8 @@ $syntax-dark-gray: #535f73;
 
     .toolbar {
       .title {
+        @extend %body-200-semibold;
         color: var(--token-color-foreground-strong);
-        font-size: 14px;
-        font-weight: 700;
       }
       .toolbar-separator {
         border-right: 1px solid var(--token-color-palette-neutral-300);
diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss
index debfe17c3..255a2a67c 100644
--- a/ui/packages/consul-ui/app/components/composite-row/index.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/index.scss
@@ -74,6 +74,9 @@
 %composite-row .copy-button {
   display: inline-flex;
 }
+%composite-row .copy-button button {
+  @extend %body-100-medium;
+}
 %composite-row-header .copy-button {
   margin-left: 4px;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
index d247fa2bd..266174687 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@@ -15,23 +15,21 @@
 .consul-auth-method-view {
   margin-bottom: 32px;
   section {
-    @extend %p1;
+    @extend %body-200-regular;
     width: 100%;
     position: relative;
     overflow-y: auto;
     h2 {
-      @extend %h200;
+      @extend %display-400-semibold;
       padding-bottom: 12px;
     }
     table {
       thead td {
+        @extend %body-200-semibold;
         color: var(--token-color-foreground-faint);
-        font-weight: var(--typo-weight-semibold);
-        font-size: var(--typo-size-700);
       }
       tbody {
         td {
-          font-size: var(--typo-size-600);
           color: var(--token-color-hashicorp-brand);
         }
         tr {
@@ -61,7 +59,7 @@
     margin-bottom: 4px !important;
   }
   h2 {
-    @extend %h200;
+    @extend %display-400-semibold;
     padding-bottom: 12px;
   }
   dl {
@@ -77,14 +75,12 @@
 .consul-auth-method-nspace-list {
   thead {
     td {
+      @extend %body-200-semibold;
       color: var(--token-color-foreground-faint) !important;
-      font-weight: var(--typo-weight-semibold) !important;
-      font-size: var(--typo-size-700) !important;
     }
   }
   tbody {
     td {
-      font-size: var(--typo-size-600);
       color: var(--token-color-hashicorp-brand);
     }
     tr {
diff --git a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss b/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss
index d1e6673a7..710f6a359 100644
--- a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss
@@ -20,7 +20,7 @@
     @extend %with-network-alt-mask, %as-pseudo;
   }
   .service + dd {
-    font-weight: var(--typo-weight-semibold);
+    @extend .hds-font-weight-semibold;
   }
   /* potential for some sort of %composite-kv thing here */
   dd:not(:last-child)::after {
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index 1d62df461..cac17f506 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -57,7 +57,7 @@
 }
 %chain-group > header > * {
   text-transform: uppercase;
-  @extend %p3;
+  @extend %body-100-regular;
 }
 %chain-group > header span::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
index ede34f71f..4c0b07e38 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
@@ -4,7 +4,7 @@
  */
 
 .consul-external-source {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 
 .consul-external-source::before {
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
index 3bbee2d70..99f01729d 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
@@ -20,7 +20,7 @@
   }
 }
 %healthcheck-output header > * {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %healthcheck-output dd em {
   @extend %pill;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/components.scss b/ui/packages/consul-ui/app/components/consul/intention/components.scss
index e26778e1a..0bcef73f3 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/components.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss
@@ -11,9 +11,9 @@
 %pill-allow,
 %pill-deny,
 %pill-l7 {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
   display: inline-block;
-  font-weight: var(--typo-weight-normal);
-  font-size: var(--typo-size-600);
 }
 %pill-allow {
   color: var(--token-color-foreground-success-on-surface);
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
index 15ee20edd..b1b253998 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
@@ -17,7 +17,7 @@
     display: inline;
   }
   .permissions > button {
-    @extend %anchor, %p2;
+    @extend %anchor, %body-100-regular;
     float: right;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
index 6b5c812d0..e6a2e3f8b 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
@@ -7,9 +7,6 @@
   .modal-dialog-window {
     max-width: 450px;
   }
-  .modal-dialog-body p {
-    font-size: var(--typo-size-600);
-  }
   button.dangerous {
     @extend %dangerous-button;
   }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
index 2764906e2..f2559a377 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
@@ -20,4 +20,7 @@
   td.intent- strong {
     @extend %pill-l7;
   }
+  td.permissions {
+    @extend %body-100-regular;
+  }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
index 170779ee7..ea2872261 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
@@ -6,7 +6,7 @@
 .consul-intention-permission-form {
   h2 {
     border-top: 1px solid var(--token-color-foreground-action);
-    @extend %h200;
+    @extend %display-400-semibold;
   }
   button.type-submit {
     @extend %frame-blue-300;
@@ -22,6 +22,6 @@
 
 .consul-intention-view {
   h2 {
-    @extend %h200;
+    @extend %display-400-semibold;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.scss b/ui/packages/consul-ui/app/components/consul/kind/index.scss
index cd77b74ec..173ffac92 100644
--- a/ui/packages/consul-ui/app/components/consul/kind/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/kind/index.scss
@@ -4,7 +4,7 @@
  */
 
 .consul-kind {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 .consul-kind::before {
   @extend %with-gateway-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
index 4e204de8d..125d3b9d6 100644
--- a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
@@ -10,13 +10,13 @@
   @extend %with-leader-tile;
 }
 %consul-server-card .name + dd {
-  @extend %h300;
+  @extend %display-200-semibold;
   color: var(--token-color-hashicorp-brand);
   animation-name: typo-truncate;
 }
 %consul-server-card .health-status + dd {
   @extend %pill-200;
-  font-size: var(--typo-size-700);
+  @extend %body-100-regular;
 }
 %consul-server-card.voting-status-non-voter .health-status + dd {
   background-color: var(--token-color-surface-strong);
diff --git a/ui/packages/consul-ui/app/components/consul/source/index.scss b/ui/packages/consul-ui/app/components/consul/source/index.scss
index 56a43fe60..0590740aa 100644
--- a/ui/packages/consul-ui/app/components/consul/source/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/source/index.scss
@@ -4,5 +4,5 @@
  */
 
 .consul-source {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
index e1c2181a4..51ca74694 100644
--- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
@@ -34,7 +34,6 @@
     stroke: var(--token-color-palette-neutral-300);
   }
   .tick text {
-    font-size: var(--typo-size-600);
     text-anchor: start;
     color: var(--token-color-foreground-strong);
   }
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
index b0e8098a3..412d78ed6 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
@@ -26,7 +26,7 @@
   dl.local-bind-socket-mode dt {
     @extend %horizontal-kv-list-visible-title;
     text-transform: lowercase;
-    font-weight: var(--typo-weight-semibold);
+    font-weight: var(--token-typography-font-weight-semibold);
   }
 }
 .consul-upstream-instance-list {
diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss
index 102d948b7..a60638368 100644
--- a/ui/packages/consul-ui/app/components/empty-state/skin.scss
+++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss
@@ -11,7 +11,7 @@
   border-bottom: none;
 }
 %empty-state-header {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 /* Icons */
 %empty-state header::before {
@@ -22,8 +22,8 @@
   margin-right: 10px;
 }
 %empty-state-anchor::before {
+  @extend %body-200-regular;
   margin-right: 0.5em;
-  font-size: 0.9em;
 }
 %empty-state[class*='status-'] header::before {
   @extend %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/form-elements/index.scss b/ui/packages/consul-ui/app/components/form-elements/index.scss
index ece0fd0af..67b2339d6 100644
--- a/ui/packages/consul-ui/app/components/form-elements/index.scss
+++ b/ui/packages/consul-ui/app/components/form-elements/index.scss
@@ -7,7 +7,7 @@
 @import './layout';
 %form h2,
 .modal-dialog-body h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 /* TODO: This is positioning the element */
 /* probably should be in a special %form class*/
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index f1aca983c..3424f79cb 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -23,7 +23,7 @@
   nav .dcs .dc-name {
     color: var(--token-color-foreground-faint);
     padding: 3.25px 0px;
-    font-weight: var(--typo-weight-semibold);
+    font-weight: var(--token-typography-font-weight-semibold);
   }
   nav .dcs .dc-name span {
     @extend %pill-200;
diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss
index f1f0325e6..837459d56 100644
--- a/ui/packages/consul-ui/app/components/informed-action/skin.scss
+++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss
@@ -16,13 +16,13 @@
     cursor: default;
   }
   header {
-    @extend %h400;
+    @extend %display-100-semibold;
   }
   header > * {
     @extend %typo-inherit;
   }
   p {
-    @extend %p2;
+    @extend %body-100-regular;
     color: var(--token-color-hashicorp-brand);
   }
   > ul {
diff --git a/ui/packages/consul-ui/app/components/inline-alert/skin.scss b/ui/packages/consul-ui/app/components/inline-alert/skin.scss
index 5789f61e5..8534bdf52 100644
--- a/ui/packages/consul-ui/app/components/inline-alert/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-alert/skin.scss
@@ -5,7 +5,7 @@
 
 %inline-alert {
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--token-typography-font-weight-regular);
 }
 %inline-alert-success,
 %inline-alert-info,
@@ -20,7 +20,7 @@
   color: var(--token-color-foreground-critical);
 }
 %inline-alert::before {
-  font-size: 14px;
+  @extend %body-200-regular;
 }
 %inline-alert::before {
   @extend %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/list-row/layout.scss b/ui/packages/consul-ui/app/components/list-row/layout.scss
index 3b9a81f4d..11e46544b 100644
--- a/ui/packages/consul-ui/app/components/list-row/layout.scss
+++ b/ui/packages/consul-ui/app/components/list-row/layout.scss
@@ -60,5 +60,5 @@
   top: 30px;
 }
 %list-row-200 dd {
-  @extend %p2;
+  @extend %body-100-regular;
 }
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
index 372ca2f62..57a402b49 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@@ -4,7 +4,7 @@
  */
 
 %main-nav-vertical-action {
-  @extend %p1;
+  @extend %body-200-medium;
   cursor: pointer;
   border-right: var(--decor-border-400);
   border-color: transparent;
@@ -14,9 +14,8 @@
   font-size: inherit;
 }
 %main-nav-vertical [role='separator'] {
-  @extend %p3;
+  @extend %body-100-medium;
   text-transform: uppercase;
-  font-weight: var(--typo-weight-medium);
 }
 %main-nav-vertical-action-intent {
   text-decoration: underline;
diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
index c4690293c..8d3b26e6f 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@@ -7,7 +7,7 @@
   @extend %with-check-plain-mask, %as-pseudo;
 }
 %menu-panel-header {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 %menu-panel-header + ul {
   border-top: var(--decor-border-100);
@@ -19,9 +19,8 @@
   border: none;
 }
 %menu-panel-separator {
-  @extend %p3;
+  @extend %body-100-medium;
   text-transform: uppercase;
-  font-weight: var(--typo-weight-medium);
   color: var(--token-color-foreground-faint);
 }
 %menu-panel-item {
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index a011fb989..32185dbfb 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -9,8 +9,7 @@
   color: var(--token-color-vault-foreground);
 }
 %modal-dialog.warning header > *:not(label) {
-  font-size: var(--typo-size-500);
-  font-weight: var(--typo-weight-semibold);
+  @extend %display-300-semibold;
 }
 %modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
@@ -35,7 +34,7 @@
   @extend %frame-gray-800;
 }
 %modal-window > header > *:not(button) {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 
 .modal-dialog-body,
diff --git a/ui/packages/consul-ui/app/components/oidc-select/index.scss b/ui/packages/consul-ui/app/components/oidc-select/index.scss
index 4b18eeb52..a844e6f16 100644
--- a/ui/packages/consul-ui/app/components/oidc-select/index.scss
+++ b/ui/packages/consul-ui/app/components/oidc-select/index.scss
@@ -11,7 +11,7 @@
 
 %oidc-select button.reset {
   @extend %anchor;
-  @extend %p3;
+  @extend %body-100-regular;
 }
 .oidc-select {
   @extend %oidc-select;
diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.scss b/ui/packages/consul-ui/app/components/peerings/badge/index.scss
index f85364fa3..677f5e620 100644
--- a/ui/packages/consul-ui/app/components/peerings/badge/index.scss
+++ b/ui/packages/consul-ui/app/components/peerings/badge/index.scss
@@ -41,7 +41,6 @@
   }
 
   .peerings-badge__text {
-    font-weight: 500;
-    font-size: 13px;
+    @extend %body-100-medium;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/table/layout.scss b/ui/packages/consul-ui/app/components/table/layout.scss
index a928eae86..18204d15b 100644
--- a/ui/packages/consul-ui/app/components/table/layout.scss
+++ b/ui/packages/consul-ui/app/components/table/layout.scss
@@ -61,7 +61,7 @@
 %table tbody td em {
   display: block;
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--token-typography-font-weight-regular);
 }
 %table tbody td em {
   color: var(--token-color-foreground-faint);
diff --git a/ui/packages/consul-ui/app/components/table/skin.scss b/ui/packages/consul-ui/app/components/table/skin.scss
index 8d2e6f581..c8b03fe31 100644
--- a/ui/packages/consul-ui/app/components/table/skin.scss
+++ b/ui/packages/consul-ui/app/components/table/skin.scss
@@ -7,11 +7,12 @@
 %table td {
   border-bottom: var(--decor-border-100);
 }
-%table th {
+%table th,
+%tbody-th {
   border-color: var(--token-color-palette-neutral-300);
 }
 %table td {
-  border-color: var(--token-color-surface-interactive-active);
+  border-color: var(--token-color-palette-neutral-300);
   color: var(--token-color-foreground-faint);
 }
 %table th,
@@ -22,10 +23,9 @@
  * current th's to `thead th` and changing the templates
  * at whichpoint we can probably remove the %table a selector from here
  */
-%table a,
-%tbody-th {
+%table a {
   color: var(--token-color-foreground-strong);
 }
-%table td:first-child {
+%table th {
   @extend %tbody-th;
 }
diff --git a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
index 04bec1b79..9bd4ac16d 100644
--- a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
+++ b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
@@ -14,7 +14,7 @@
     color: var(--token-color-hashicorp-brand) !important;
   }
   dt {
-    font-weight: var(--typo-weight-bold);
+    font-weight: var(--token-typography-font-weight-bold);
   }
   dd .copy-button button::before {
     background-color: var(--token-color-hashicorp-brand);
diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss
index 7d3bf425b..53d1ced3e 100644
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@@ -27,7 +27,7 @@
   }
 }
 %tooltip-content {
-  @extend %p3;
+  @extend %body-100-regular;
   padding: 12px;
   max-width: 224px;
   position: relative;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index a36466aaf..bc2e4dc21 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -19,9 +19,8 @@
   /* border property then the compressor removes the color */
   border-color: var(--token-color-surface-interactive-active);
   p {
+    @extend %display-300-semibold;
     padding: 12px 12px 0 12px;
-    font-size: var(--typo-size-500);
-    font-weight: var(--typo-weight-semibold);
     margin-bottom: 0 !important;
   }
   p.empty {
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
index 6e0b2be2a..4f4c8e00f 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
@@ -61,10 +61,9 @@
   grid-area: metrics;
 
   div:first-child {
+    @extend %body-300-semibold;
     padding: 12px;
     border: none;
-    font-size: 16px;
-    font-weight: bold;
   }
   .link {
     padding: 18px;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
index f23727a4f..14b20e868 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
@@ -9,10 +9,8 @@
   }
 
   .tooltip {
+    @extend %body-200-regular;
     padding: 0 0 10px;
-    font-size: 0.875em;
-    line-height: 1.5em;
-    font-weight: normal;
     border: 1px solid var(--token-color-palette-neutral-300);
     background: #fff;
     border-radius: 2px;
@@ -20,9 +18,8 @@
     box-shadow: var(--token-elevation-higher-box-shadow);
 
     .sparkline-time {
+      @extend %body-200-semibold;
       padding: 8px 10px;
-      font-weight: bold;
-      font-size: 14px;
       color: #000;
       border-bottom: 1px solid var(--token-color-surface-interactive-active);
       margin-bottom: 4px;
@@ -76,17 +73,17 @@
   h3::before {
     @extend %with-info-circle-fill-mask, %as-pseudo;
     margin: 2px 3px 0 0;
-    font-size: 14px;
+    font-size: var(--token-typography-body-200-font-size);
   }
 
   h3 {
+    @extend %display-300-semibold;
     color: var(--token-color-foreground-strong);
-    font-size: 16px;
   }
 
   .sparkline-key-content {
     dt {
-      font-weight: 600;
+      font-weight: var(--token-typography-font-weight-semibold);
     }
     dd {
       color: var(--token-color-foreground-faint);
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
index db3ceeecb..9f9e25db8 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@@ -5,8 +5,7 @@
 
 .topology-metrics-status-error,
 .topology-metrics-status-loader {
-  font-weight: normal;
-  font-size: 0.875rem;
+  @extend %body-200-regular;
   color: var(--token-color-foreground-faint);
   text-align: center;
   margin: 0 auto !important;
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
index 09a82bdf8..dc5fd5fae 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
@@ -4,7 +4,7 @@
  */
 
 %with-glyph-icon {
-  font-weight: var(--typo-weight-normal);
+  font-weight: var(--token-typography-font-weight-regular);
   background-color: var(--token-color-surface-strong);
   visibility: visible;
   padding: 0 4px;
diff --git a/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss b/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss
index 7a226c784..c05ca231f 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/base-variables.scss
@@ -10,10 +10,6 @@
   margin: 0;
   padding: 0;
 }
-%reset-typo {
-  font-size: 100%;
-  font-weight: normal;
-}
 
 %reset-list {
   list-style: none;
diff --git a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
index c6d70f714..a0438a027 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
@@ -17,25 +17,10 @@ figure,
 fieldset,
 legend,
 textarea,
-pre,
 iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+hr {
   @extend %reset-box;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @extend %reset-typo;
-}
 
 ul {
   @extend %reset-list;
diff --git a/ui/packages/consul-ui/app/styles/base/reset/system.scss b/ui/packages/consul-ui/app/styles/base/reset/system.scss
index 24ecceb95..7a40b2c8f 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/system.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/system.scss
@@ -27,25 +27,22 @@ hr {
   background-color: var(--token-color-surface-interactive-active);
 }
 html {
-  font-size: var(--typo-size-000);
-}
-/* %typo-body */
-body {
-  line-height: 1.5;
+  font-size: 16px;
 }
+
 body,
 input,
 select,
 textarea {
-  font-family: var(--typo-family-sans);
+  font-family: var(--token-typography-font-stack-text);
 }
 code,
 pre {
-  font-family: var(--typo-family-mono);
+  font-family: var(--token-typography-font-stack-code);
 }
 strong {
   font-style: inherit;
-  font-weight: var(--typo-weight-bold);
+  @extend %body-200-semibold;
 }
 html {
   text-rendering: optimizeLegibility;
diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
index b1c84cc88..9b7fa8c5d 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
@@ -3,81 +3,73 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+%display-500-bold {
+  @extend .hds-typography-display-500;
+  @extend .hds-font-weight-bold;
+}
+%display-400-bold {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-bold;
+}
+%display-400-semibold {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-semibold;
+}
+%display-400-medium {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-medium;
+}
+%display-300-bold {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-bold;
+}
+%display-300-semibold {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-semibold;
+}
+%display-300-medium {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-medium;
+}
+%display-200-semibold {
+  @extend .hds-typography-display-200;
+  @extend .hds-font-weight-semibold;
+}
+%display-100-medium {
+  @extend .hds-typography-display-100;
+  @extend .hds-font-weight-medium;
+}
+%display-100-semibold {
+  @extend .hds-typography-display-100;
+  @extend .hds-font-weight-semibold;
+}
+
+$sizes: 100, 200, 300;
+@each $size in $sizes {
+  %body-#{$size}-regular {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-regular;
+  }
+  %body-#{$size}-medium {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-medium;
+  }
+  %body-#{$size}-semibold {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-semibold;
+  }
+
+  %code-#{$size}-regular {
+    font-family: var(--token-typography-font-stack-code);
+    font-size: var(--token-typography-code-#{$size}-font-size);
+    line-height: var(--token-typography-code-#{$size}-line-height);
+    font-weight: var(--token-typography-font-weight-regular);
+  }
+}
+
 %typo-inherit {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   font-style: inherit;
 }
-%typo-body {
-  font-size: var(--typo-size-600);
-  font-family: var(--typo-family-sans);
-  line-height: var(--typo-lead-700);
-}
-%typo-header {
-  line-height: var(--typo-lead-200);
-}
-%h000,
-%h100,
-%h200,
-%h300,
-%h400,
-%h500,
-%h600,
-%h400,
-%h500,
-%h600 {
-  @extend %typo-header;
-}
-%h100 {
-  font-weight: var(--typo-weight-bold);
-}
-%h200,
-%h300,
-%h400 {
-  font-weight: var(--typo-weight-semibold);
-}
-%h500,
-%h600 {
-  font-weight: var(--typo-weight-medium);
-}
-%h000 {
-  font-size: var(--typo-size-100);
-}
-%h100 {
-  font-size: var(--typo-size-200);
-}
-%h200 {
-  font-size: var(--typo-size-300);
-}
-%h300 {
-  font-size: var(--typo-size-500);
-}
-/*p1 strong, differing weights */
-%h400,
-%h500 {
-  font-size: var(--typo-size-600);
-}
-/*p2 strong */
-%h600 {
-  font-size: var(--typo-size-700);
-}
-%typo-p {
-  line-height: inherit;
-  font-size: inherit;
-}
-%p,
-%p1,
-%p2,
-%p3 {
-  @extend %typo-p;
-}
-%p1 {
-  font-size: var(--typo-size-600);
-}
-%p2 {
-  font-size: var(--typo-size-700);
-}
-%p3 {
-  font-size: var(--typo-size-800);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
deleted file mode 100644
index b71499a8f..000000000
--- a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-:root {
-  /* families */
-  /* -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
-  --typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  --typo-family-mono: monospace;
-
-  /* sizes */
-  /* --typo-size-inherit: inherit; worthwhile? */
-  --typo-size-000: 16px;
-  /* TODO: Numbering of these should possibly be reversed, more likely to add bigger*/
-  /* also maybe use 100, 200 etc like colors */
-  --typo-size-100: 3.5rem;
-  --typo-size-200: 1.8rem;
-  --typo-size-250: 1.750rem; /* 28px */
-  --typo-size-300: 1.3rem;
-  /* mktg only ^ */
-  --typo-size-400: 1.2rem; /* $size-large? 24 */
-  --typo-size-450: 1.125rem;
-  --typo-size-500: 1rem; /* $size-medium? // 18 */
-  --typo-size-600: 0.875rem; /* $size-normal? // 14 */
-  --typo-size-700: 0.8125rem; /* $size-small? // 13 */
-  --typo-size-800: 0.75rem; /* $size-small? // 12 */
-
-  /* weights */
-  --typo-weight-light: 300;
-  --typo-weight-normal: 400;
-  --typo-weight-medium: 500;
-  --typo-weight-semibold: 600;
-  --typo-weight-bold: 700;
-
-  /* line-heights. lead/leading is easier to write */
-  /* is this worthwhile? Should we use font-size relative?*/
-  /* DS uses ~ 1.3 */
-  --typo-lead-000: 0;
-  --typo-lead-050: 1;
-  --typo-lead-100: 1.2;
-  --typo-lead-200: 1.25;
-  --typo-lead-300: 1.28;
-  --typo-lead-500: 1.33;
-  --typo-lead-600: 1.4;
-  --typo-lead-700: 1.5;
-  --typo-lead-800: 1.7;
-
-  /* letter-spacing. kern is easier to write*/
-  /* --typo-kern-000: normal; */
-  /* --typo-kern-100: 1px; */
-}
diff --git a/ui/packages/consul-ui/app/styles/base/typography/index.scss b/ui/packages/consul-ui/app/styles/base/typography/index.scss
index e7d398189..261f3ce9f 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/index.scss
@@ -3,6 +3,5 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@import './base-variables';
 @import './base-keyframes';
 @import './base-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index 37862067f..2e7ec816f 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -33,7 +33,7 @@
   width: 140px;
 }
 %debug-grid figcaption {
-  @extend %p3;
+  @extend %body-100-regular;
   text-align: center;
 }
 [id^='docfy-demo-preview-color'] ul,
@@ -64,38 +64,36 @@
 }
 
 [id^='docfy-demo-preview-typography'] {
-  .debug-h000 {
-    @extend %h000;
-  }
+  .debug-h000,
   .debug-h100 {
-    @extend %h100;
+    @extend %display-500-bold;
   }
   .debug-h200 {
-    @extend %h200;
+    @extend %display-400-semibold;
   }
   .debug-h300 {
-    @extend %h300;
+    @extend %display-300-semibold;
   }
   .debug-h400 {
-    @extend %h400;
+    @extend %display-100-semibold;
   }
   .debug-h500 {
-    @extend %h500;
+    @extend %display-100-medium;
   }
   .debug-h600 {
-    @extend %h600;
+    @extend %display-100-medium;
   }
   .debug-p {
-    @extend %p;
+    @extend %body-200-regular;
   }
   .debug-p1 {
-    @extend %p1;
+    @extend %body-200-regular;
   }
   .debug-p2 {
-    @extend %p2;
+    @extend %body-100-regular;
   }
   .debug-p3 {
-    @extend %p3;
+    @extend %body-100-regular;
   }
 }
 
@@ -120,7 +118,7 @@ html:not(.with-data-source) .data-source-debug {
 }
 html.with-href-to [href^='console://']::before
 {
-  @extend %p3;
+  @extend %body-100-regular;
   @extend %debug-box;
   content: attr(href);
   display: inline;
@@ -192,25 +190,25 @@ html.with-route-announcer .route-title {
     }
     > h1 {
       padding-top: 20px;
-      @extend %h100;
+      @extend %display-500-bold;
     }
     > h2 {
-      @extend %h200;
+      @extend %display-400-semibold;
     }
     > h3 {
-      @extend %h300;
+      @extend %display-300-semibold;
     }
     > h4 {
-      @extend %h400;
+      @extend %display-100-semibold;
     }
     > p {
-      @extend %p1;
+      @extend %body-200-regular;
     }
     > table {
       margin-bottom: 3em;
     }
     > table td {
-      font-weight: normal !important;
+      font-weight: var(--token-typography-font-weight-regular) !important;
       cursor: default !important;
     }
     > table td code {
diff --git a/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss b/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss
index 3ae00cf9f..e61ac5f2b 100644
--- a/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss
+++ b/ui/packages/consul-ui/app/styles/prism-coldark-cold.scss
@@ -15,7 +15,7 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: #111b27;
   background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--token-typography-font-stack-code);
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -147,7 +147,7 @@ pre[class*='language-'] {
 .token.keyword-this,
 .token.this,
 .token.bold {
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .token.delimiter.important {
@@ -165,7 +165,7 @@ pre[class*='language-'] {
 .language-markdown .token.title,
 .language-markdown .token.title .token.punctuation {
   color: #005a8e;
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .language-markdown .token.blockquote.punctuation {
diff --git a/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss b/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss
index 5c86eae4d..e4b8d569f 100644
--- a/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss
+++ b/ui/packages/consul-ui/app/styles/prism-coldark-dark.scss
@@ -15,7 +15,7 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: #e3eaf2;
   background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--token-typography-font-stack-code);
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -147,7 +147,7 @@ pre[class*='language-'] {
 .token.keyword-this,
 .token.this,
 .token.bold {
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .token.delimiter.important {
@@ -165,7 +165,7 @@ pre[class*='language-'] {
 .language-markdown .token.title,
 .language-markdown .token.title .token.punctuation {
   color: #6cb8e6;
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .language-markdown .token.blockquote.punctuation {
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
index 6b288942a..2a85b0e3d 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
@@ -8,7 +8,7 @@ html[data-route^='dc.kv'] .type-toggle {
   margin-bottom: 0 !important;
 }
 html[data-route^='dc.kv.edit'] h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
   border-bottom: var(--decor-border-200);
   border-color: var(--token-color-surface-interactive-active);
   padding-bottom: 0.2em;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
index 2f034dc05..73ac353ad 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
@@ -14,7 +14,7 @@ section[data-route='dc.show.license'] {
 }
 
 %license-route h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 
 %license-validity p {
@@ -22,7 +22,7 @@ section[data-route='dc.show.license'] {
 }
 %license-validity dl {
   @extend %horizontal-kv-list;
-  font-size: var(--typo-size-400);
+  @extend %body-300-regular;
 }
 %license-validity dl .expired + dd {
   @extend %visually-hidden;
@@ -53,7 +53,7 @@ section[data-route='dc.show.license'] {
   margin-top: 1rem; /* 16px */
 }
 %license-route-learn-more header > :first-child {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %license-route-learn-more header {
   margin-bottom: 1rem; /* 16px */
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
index f97ec416c..38e0519c6 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
@@ -20,7 +20,7 @@ section[data-route='dc.show.serverstatus'] {
 
 %serverstatus-route h2,
 %serverstatus-route h3 {
-  @extend %h200;
+  @extend %display-300-semibold;
 }
 
 %server-failure-tolerance {
@@ -45,7 +45,7 @@ section[data-route='dc.show.serverstatus'] {
 
 %server-failure-tolerance header em {
   @extend %pill-200;
-  font-size: 0.812rem; /* 13px */
+  @extend %body-100-regular;
   background-color: var(--token-color-surface-interactive-active);
 
   text-transform: uppercase;
@@ -78,11 +78,11 @@ section[data-route='dc.show.serverstatus'] {
   padding-right: 1.5rem; /* 24px */
 }
 %server-failure-tolerance dt {
-  @extend %p2;
+  @extend %body-100-regular;
   color: var(--token-color-foreground-faint);
 }
 %server-failure-tolerance dd {
-  font-size: var(--typo-size-250);
+  @extend %display-300-semibold;
   color: var(--token-color-hashicorp-brand);
 }
 %server-failure-tolerance header span::before {
@@ -103,7 +103,7 @@ section[data-route='dc.show.serverstatus'] {
 }
 
 %redundancy-zones h3 {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %redundancy-zone header {
   display: flow-root;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
index 8750b43d6..80828acd3 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
@@ -19,7 +19,7 @@ html[data-route^='dc.services.instance'] .app-view > header dl {
   margin-right: 50px;
 }
 html[data-route^='dc.services.instance'] .app-view > header dt {
-  font-weight: var(--typo-weight-bold);
+  font-weight: var(--token-typography-font-weight-bold);
 }
 html[data-route^='dc.services.instance'] .tab-nav {
   border-top: var(--decor-border-100);
@@ -35,6 +35,6 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
   padding-bottom: 24px;
 }
 html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
-  @extend %h300;
+  @extend %display-300-semibold;
   margin: 24px 0 12px 0;
 }
diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss
index 5b725336e..f1e5a47d0 100644
--- a/ui/packages/consul-ui/app/styles/typography.scss
+++ b/ui/packages/consul-ui/app/styles/typography.scss
@@ -5,79 +5,73 @@
 
 body,
 %form-element-text-input {
-  @extend %typo-body;
+  @extend %body-200-regular;
 }
 %radio-card header,
 fieldset > header,
-%main-nav-horizontal-action,
 %definition-table dt,
 %table caption,
 %tbody-th,
 %form-element > span {
-  @extend %h400;
+  @extend %display-100-semibold;
+}
+%main-nav-horizontal-action {
+  @extend %body-200-medium;
 }
 %definition-table dt {
-  line-height: var(--typo-lead-700);
+  line-height: var(--token-typography-body-300-line-height);
 }
 %internal-button,
 %breadcrumbs li > *,
 %tab-nav {
-  @extend %h500;
+  @extend %body-200-medium;
 }
-%healthcheck-output dt,
-%table th,
-%table td strong,
-%sliding-toggle label span {
-  @extend %h600;
+%table td p,
+%table td {
+  @extend %body-200-regular;
+}
+
+%healthcheck-output dt,
+%table td:first-child p,
+%table td:first-child,
+%sliding-toggle label span {
+  @extend %body-200-semibold;
 }
 
-pre code,
-%notice,
-%notice p,
-%flash-message p,
 %filter-bar input,
 %tab-section p {
-  @extend %p1;
+  @extend %body-200-regular;
 }
 %empty-state-anchor,
-%table td p,
-%table td,
-%healthcheck-output dl > dd,
 %form-element-label,
 %stats-card header a span,
 %footer,
 %app-view h1 span.kind-proxy {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 %empty-state-subheader,
 %empty-state p,
-%button,
 %main-content p,
 %form-element-note,
 %form-element-error > strong {
-  @extend %p3;
+  @extend %body-100-regular;
 }
 %main-content p code {
   @extend %inline-code;
 }
 
 %radio-group label {
-  line-height: var(--typo-lead-200);
-}
-%tab-nav {
-  letter-spacing: 0.03em;
+  line-height: var(--token-typography-body-100-line-height);
 }
 
-/*TODO: See if we can collapse these into a */
-/* strong %p3 */
 %form-element-label,
 %button {
-  font-weight: var(--typo-weight-semibold);
+  @extend %body-100-semibold;
 }
 %route-card section dt,
 %route-card header:not(.short) dd,
 %splitter-card > header {
-  font-weight: var(--typo-weight-bold);
+  @extend .hds-font-weight-bold;
 }
 /**/
 
@@ -87,9 +81,8 @@ pre code,
 %pill,
 %form-element > strong,
 %tbody-th em,
-%app-view h1 em,
 %route-card header dt {
-  font-weight: var(--typo-weight-normal);
+  @extend .hds-font-weight-regular;
 }
 
 %form-element-note,
@@ -101,8 +94,7 @@ pre code,
 
 /* composite row */
 %composite-row-header {
-  font-size: var(--typo-size-450);
-  font-weight: var(--typo-weight-medium);
+  @extend %display-300-medium;
 }
 %composite-row-header *:not(button) {
   font-size: inherit;
@@ -110,14 +102,31 @@ pre code,
 }
 /**/
 
-/* TODO: We have nothing else with a 500 */
-/* either make this the biggest %p or don't use it */
 %app-view h1 em {
-  font-size: var(--typo-size-500);
+  @extend %body-200-medium;
 }
 /*TODO: This should go in reset, and probably needs select etc adding  */
 @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
   input {
-    font-size: 16px !important;
+    font-size: var(--token-typography-body-300-font-size) !important;
   }
 }
+%healthcheck-output dl > dd {
+  @extend %body-200-regular;
+}
+
+h1 {
+  @extend %display-500-bold;
+}
+
+%healthcheck-output pre code,
+pre code,
+pre,
+code {
+  @extend %code-200-regular;
+}
+
+dd code,
+dd pre code {
+  @extend %code-100-regular;
+}
diff --git a/ui/packages/consul-ui/app/templates/dc/show/license.hbs b/ui/packages/consul-ui/app/templates/dc/show/license.hbs
index b2f81a208..88d5dc7a1 100644
--- a/ui/packages/consul-ui/app/templates/dc/show/license.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/show/license.hbs
@@ -120,16 +120,19 @@ as |item|}}
                 @text={{compute (fn route.t 'documentation.links.license-expiration.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.license-expiration.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
               <Hds::Link::Standalone
                 @text={{compute (fn route.t 'documentation.links.renewing-license.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.renewing-license.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
               <Hds::Link::Standalone
                 @text={{compute (fn route.t 'documentation.links.applying-new-license.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.applying-new-license.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
             </div>
           </aside>
diff --git a/ui/packages/consul-ui/blueprints/route-test/index.js b/ui/packages/consul-ui/blueprints/route-test/index.js
index 25bf4df27..3af54990c 100644
--- a/ui/packages/consul-ui/blueprints/route-test/index.js
+++ b/ui/packages/consul-ui/blueprints/route-test/index.js
@@ -2,4 +2,3 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
diff --git a/ui/packages/consul-ui/lib/commands/bin/list.js b/ui/packages/consul-ui/lib/commands/bin/list.js
index 358986acc..5d81554b3 100755
--- a/ui/packages/consul-ui/lib/commands/bin/list.js
+++ b/ui/packages/consul-ui/lib/commands/bin/list.js
@@ -4,5 +4,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-
 require('../lib/list.js')(`${process.cwd()}/tests/steps.js`);