diff --git a/ui/app/components/ui/alert/index.scss b/ui/app/components/ui/alert/index.scss
index 0e58f2aac..737244a2c 100644
--- a/ui/app/components/ui/alert/index.scss
+++ b/ui/app/components/ui/alert/index.scss
@@ -4,10 +4,11 @@
   background-color: #33a4e7;
 
   .msg {
+    @include H7;
+
     width: 100%;
     display: block;
     color: white;
-    font-size: 12px;
     text-align: center;
   }
 }
diff --git a/ui/app/components/ui/button-group/index.scss b/ui/app/components/ui/button-group/index.scss
index b82ae60e0..84e652968 100644
--- a/ui/app/components/ui/button-group/index.scss
+++ b/ui/app/components/ui/button-group/index.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   &__button {
-    font-size: 1rem;
+    font-size: $font-size-h5;
     color: $tundora;
     border-style: solid;
     border-color: $alto;
diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss
index a8364ca65..ed28645c6 100644
--- a/ui/app/components/ui/button/buttons.scss
+++ b/ui/app/components/ui/button/buttons.scss
@@ -14,7 +14,6 @@ $warning-light-orange: #f8b588;
   @include H6;
 
   font-weight: 500;
-  line-height: 1.25rem;
   padding: 0.75rem 1rem;
   display: flex;
   justify-content: center;
@@ -170,7 +169,6 @@ $warning-light-orange: #f8b588;
   @include H4;
 
   color: $Blue-500;
-  line-height: 1.25rem;
   cursor: pointer;
   background-color: transparent;
 
@@ -211,11 +209,12 @@ $warning-light-orange: #f8b588;
 }
 
 .btn--first-time {
+  @include H4;
+
   height: 54px;
   width: 198px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
   color: $white;
-  font-size: 1.25rem;
   font-weight: 500;
   transition: 200ms ease-in-out;
   background-color: rgba(247, 134, 28, 0.9);
@@ -228,15 +227,6 @@ input[type="submit"][disabled] {
   opacity: 0.5;
 }
 
-button.primary {
-  padding: 8px 12px;
-  background: #f7861c;
-  box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36);
-  color: $white;
-  font-size: 1.1em;
-  text-transform: uppercase;
-}
-
 .btn--rounded {
   border-radius: 100px;
   will-change: box-shadow;
diff --git a/ui/app/components/ui/currency-input/index.scss b/ui/app/components/ui/currency-input/index.scss
index b240ed097..c374e06ae 100644
--- a/ui/app/components/ui/currency-input/index.scss
+++ b/ui/app/components/ui/currency-input/index.scss
@@ -1,7 +1,7 @@
 .currency-input {
   &__conversion-component {
-    font-size: 12px;
-    line-height: 12px;
+    @include H7;
+
     padding-left: 1px;
   }
 
diff --git a/ui/app/components/ui/dialog/dialog.scss b/ui/app/components/ui/dialog/dialog.scss
index d113947ad..72d3b8655 100644
--- a/ui/app/components/ui/dialog/dialog.scss
+++ b/ui/app/components/ui/dialog/dialog.scss
@@ -1,6 +1,6 @@
 .dialog {
-  font-size: 0.75rem;
-  line-height: 1rem;
+  @include H7;
+
   padding: 1rem;
   border: 1px solid $black;
   box-sizing: border-box;
diff --git a/ui/app/components/ui/dropdown/dropdown.scss b/ui/app/components/ui/dropdown/dropdown.scss
index 49a684bb7..e5d555ef9 100644
--- a/ui/app/components/ui/dropdown/dropdown.scss
+++ b/ui/app/components/ui/dropdown/dropdown.scss
@@ -1,4 +1,6 @@
 .dropdown {
+  @include H6;
+
   appearance: none;
 
   // TODO: remove these after getting autoprefixer working in Storybook
@@ -11,7 +13,6 @@
   background-position: right 18px top 50%;
   background-color: white;
   padding: 8px 32px 8px 16px;
-  font-size: 14px;
 
   [dir='rtl'] & {
     background-position: left 18px top 50%;
diff --git a/ui/app/components/ui/editable-label/index.scss b/ui/app/components/ui/editable-label/index.scss
index c69ea1428..fdb430c7d 100644
--- a/ui/app/components/ui/editable-label/index.scss
+++ b/ui/app/components/ui/editable-label/index.scss
@@ -12,8 +12,9 @@
   }
 
   &__input {
+    @include H6;
+
     width: 250px;
-    font-size: 14px;
     text-align: center;
     border: 1px solid $alto;
 
diff --git a/ui/app/components/ui/error-message/index.scss b/ui/app/components/ui/error-message/index.scss
index 8b3860c37..eba500931 100644
--- a/ui/app/components/ui/error-message/index.scss
+++ b/ui/app/components/ui/error-message/index.scss
@@ -1,10 +1,11 @@
 .error-message {
+  @include H7;
+
   min-height: 32px;
   border: 1px solid $monzo;
   color: $monzo;
   background: lighten($monzo, 56%);
   border-radius: 4px;
-  font-size: 0.75rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
diff --git a/ui/app/components/ui/export-text-container/index.scss b/ui/app/components/ui/export-text-container/index.scss
index c3e32895f..ee225e5db 100644
--- a/ui/app/components/ui/export-text-container/index.scss
+++ b/ui/app/components/ui/export-text-container/index.scss
@@ -17,10 +17,11 @@
   }
 
   &__text {
+    @include H4;
+
     resize: none;
     border: none;
     background: $alabaster;
-    font-size: 20px;
     text-align: center;
   }
 
@@ -32,12 +33,13 @@
   }
 
   &__button {
+    @include H7;
+
     padding: 10px;
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 12px;
     cursor: pointer;
     color: $primary-blue;
 
diff --git a/ui/app/components/ui/icon-with-label/index.scss b/ui/app/components/ui/icon-with-label/index.scss
index 628a54272..ecf28efca 100644
--- a/ui/app/components/ui/icon-with-label/index.scss
+++ b/ui/app/components/ui/icon-with-label/index.scss
@@ -3,7 +3,8 @@
   align-items: center;
 
   &__label {
-    font-size: 10px;
+    @include H8;
+
     margin-left: 4px;
     color: $Grey-500;
   }
diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss
index 0838521ec..670d25748 100644
--- a/ui/app/components/ui/list-item/index.scss
+++ b/ui/app/components/ui/list-item/index.scss
@@ -37,9 +37,9 @@
   }
 
   &__heading {
+    @include H5;
+
     grid-area: head;
-    font-size: 16px;
-    line-height: 160%;
     position: relative;
     display: flex;
     align-items: center;
@@ -57,9 +57,9 @@
   }
 
   &__subheading {
+    @include H7;
+
     grid-area: sub;
-    font-size: 12px;
-    line-height: 14px;
     color: $Grey-500;
     margin-top: 4px;
     // all direct descendants should be truncated with ellipses
@@ -76,8 +76,9 @@
   }
 
   &__mid-content {
+    @include H7;
+
     grid-area: mid;
-    font-size: 12px;
     color: $Grey-500;
   }
 
diff --git a/ui/app/components/ui/loading-screen/index.scss b/ui/app/components/ui/loading-screen/index.scss
index d05286cee..dd3f40d58 100644
--- a/ui/app/components/ui/loading-screen/index.scss
+++ b/ui/app/components/ui/loading-screen/index.scss
@@ -26,13 +26,6 @@
     align-items: center;
   }
 
-  &__message {
-    margin-top: 32px;
-    font-weight: 400;
-    font-size: 20px;
-    color: $manatee;
-  }
-
   &__error-screen {
     display: flex;
     flex-direction: column;
diff --git a/ui/app/components/ui/menu/menu.scss b/ui/app/components/ui/menu/menu.scss
index a34deda53..4f89b44f5 100644
--- a/ui/app/components/ui/menu/menu.scss
+++ b/ui/app/components/ui/menu/menu.scss
@@ -1,5 +1,7 @@
 .menu {
   &__container {
+    @include H6;
+
     background: $white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214);
     border-radius: 8px;
@@ -9,9 +11,6 @@
     flex-direction: column;
     align-items: center;
     padding: 0 16px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 20px;
     z-index: 1050;
   }
 
diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss
index 4c4969a2b..df4f9067a 100644
--- a/ui/app/components/ui/page-container/index.scss
+++ b/ui/app/components/ui/page-container/index.scss
@@ -73,9 +73,10 @@
 
       a,
       a:hover {
+        @include H7;
+
         text-decoration: none;
         cursor: pointer;
-        font-size: 0.75rem;
         text-transform: uppercase;
         color: #2f9ae0;
       }
@@ -91,24 +92,24 @@
   }
 
   &__back-button {
+    @include Paragraph;
+
     color: #2f9ae0;
-    font-size: 1rem;
     cursor: pointer;
-    font-weight: 400;
   }
 
   &__title {
+    @include H2;
+
     color: $black;
-    font-size: 2rem;
     font-weight: 500;
-    line-height: 2rem;
     margin-right: 1.5rem;
   }
 
   &__subtitle {
+    @include H6;
+
     padding-top: 0.5rem;
-    line-height: initial;
-    font-size: 0.9rem;
     color: $gray;
   }
 
@@ -118,9 +119,10 @@
   }
 
   &__tab {
+    @include Paragraph;
+
     min-width: 5rem;
     color: $dusty-gray;
-    font-size: 1rem;
     border-bottom: none;
     margin-right: 16px;
 
diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss
index d5072ccc3..d2869b484 100644
--- a/ui/app/components/ui/popover/index.scss
+++ b/ui/app/components/ui/popover/index.scss
@@ -36,7 +36,7 @@
       @include H4;
 
       font-weight: bold;
-      line-height: 25px;
+      padding-bottom: 8px;
 
       h2 {
         white-space: nowrap;
@@ -51,9 +51,6 @@
 
     &__subtitle {
       @include H6;
-
-      padding-top: 8px;
-      line-height: 20px;
     }
 
     &__button {
diff --git a/ui/app/components/ui/qr-code/index.scss b/ui/app/components/ui/qr-code/index.scss
index 86bd5af43..521075f64 100644
--- a/ui/app/components/ui/qr-code/index.scss
+++ b/ui/app/components/ui/qr-code/index.scss
@@ -5,13 +5,15 @@
   align-items: center;
 
   &__message-container > div:first-child {
+    @include Paragraph;
+
     margin-top: 18px;
-    font-size: 15px;
     color: #4d4d4d;
   }
 
   &__message {
-    font-size: 12px;
+    @include H7;
+
     color: #f7861c;
   }
 
diff --git a/ui/app/components/ui/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss
index 3c0f7af2d..5c2c3cf5e 100644
--- a/ui/app/components/ui/sender-to-recipient/index.scss
+++ b/ui/app/components/ui/sender-to-recipient/index.scss
@@ -69,11 +69,12 @@
       }
 
       &__name {
+        @include H6;
+
         padding-left: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 0.875rem;
 
         [dir='rtl'] & {
           /*rtl:ignore*/
@@ -117,10 +118,11 @@
       }
 
       &__name {
+        @include H9;
+
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 0.5rem;
 
         [dir='rtl'] & {
           /*rtl:ignore*/
@@ -171,10 +173,11 @@
       }
 
       &__name {
+        @include H8;
+
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 0.6875rem;
 
         [dir='rtl'] & {
           /*rtl:ignore*/
diff --git a/ui/app/components/ui/snackbar/index.scss b/ui/app/components/ui/snackbar/index.scss
index d2aac4879..d3f185e7b 100644
--- a/ui/app/components/ui/snackbar/index.scss
+++ b/ui/app/components/ui/snackbar/index.scss
@@ -1,6 +1,7 @@
 .snackbar {
+  @include H7;
+
   padding: 0.75rem 1rem;
-  font-size: 0.75rem;
   color: $Blue-600;
   min-width: 360px;
   width: fit-content;
diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss
index 09827888c..e37833c1c 100644
--- a/ui/app/components/ui/toggle-button/index.scss
+++ b/ui/app/components/ui/toggle-button/index.scss
@@ -3,10 +3,8 @@
   $self: &;
 
   &__status {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 23px;
+    @include Paragraph;
+
     display: flex;
     align-items: center;
     text-transform: uppercase;
diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss
index c86f487b5..c6da6198f 100644
--- a/ui/app/components/ui/unit-input/index.scss
+++ b/ui/app/components/ui/unit-input/index.scss
@@ -1,4 +1,6 @@
 .unit-input {
+  @include Paragraph;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -7,7 +9,6 @@
   border-radius: 4px;
   background-color: #fff;
   color: #4d4d4d;
-  font-size: 16px;
   padding: 8px 10px;
   position: relative;
 
@@ -34,12 +35,12 @@
   }
 
   &__input {
+    @include Paragraph;
+
     color: #4d4d4d;
-    font-size: 1rem;
     border: none;
     max-width: 22ch;
     height: 16px;
-    line-height: 18px;
 
     &__disabled {
       background-color: rgb(222, 222, 222);
@@ -48,14 +49,14 @@
 
   &__input-container {
     display: flex;
-    align-items: flex-start;
-    padding-bottom: 4px;
+    align-items: center;
+    padding-bottom: 2px;
   }
 
   &__suffix {
+    @include Paragraph;
+
     margin-left: 3px;
-    font-size: 1rem;
-    line-height: 1rem;
   }
 
   &--error {