diff --git a/cypress/e2e/projectCommits.spec.ts b/cypress/e2e/projectCommits.spec.ts
index ee806e122..97315f9ca 100644
--- a/cypress/e2e/projectCommits.spec.ts
+++ b/cypress/e2e/projectCommits.spec.ts
@@ -150,10 +150,7 @@ describe("project commits", () => {
         "/seeds/willow.radicle.garden/rad:git:hnrk8mbpirp7ua7sy66o4t9soasbq4y8uwgoy/commits/cbf5df499ab4f4a908f1756fbe2c236a4530516a",
       );
     });
-    cy.get("header .summary .text-medium").should(
-      "have.text",
-      "initial commit",
-    );
+    cy.get("header .summary .txt-medium").should("have.text", "initial commit");
     cy.get(".commit pre.description").should(
       "have.text",
       "this is the first commit of many",
@@ -163,7 +160,7 @@ describe("project commits", () => {
       "have.text",
       "1 file(s) changed, 1 file(s) created, 1 file(s) deleted\n  with\n  0 addition(s)\n  and\n  0 deletion(s)",
     );
-    cy.get("header.file-header:nth-child(1) p.file-path")
+    cy.get("header.file-header:nth-child(1) p")
       .first()
       .should("have.text", "test.md")
       .next()
diff --git a/index.html b/index.html
index 161647320..d6559be2f 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     <meta property="og:image:width" content="240" />
     <meta property="og:image:height" content="240" />
     <meta property="og:type" content="website" />
+    <link rel="stylesheet" type="text/css" href="/typography.css" />
     <link rel="stylesheet" type="text/css" href="/index.css" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/favicon.ico" />
diff --git a/public/fonts/SourceCodePro-Bold.otf b/public/fonts/SourceCodePro-Bold.otf
deleted file mode 100644
index 0b273d987..000000000
Binary files a/public/fonts/SourceCodePro-Bold.otf and /dev/null differ
diff --git a/public/fonts/SourceCodePro-Semibold.otf b/public/fonts/SourceCodePro-Semibold.otf
deleted file mode 100644
index a61686cca..000000000
Binary files a/public/fonts/SourceCodePro-Semibold.otf and /dev/null differ
diff --git a/public/index.css b/public/index.css
index abef65cd7..809334478 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,5 +1,3 @@
-@import url(./typography.css);
-
 * {
   outline: none !important;
   box-sizing: border-box;
@@ -70,10 +68,6 @@
   --color-glow-error: #ff555522;
   --color-scrollbar: var(--color-foreground-subtler);
 
-  --font-family-sans-serif: Inter, sans-serif;
-  --font-family-monospace: monospace;
-  --font-weight-medium: 600;
-  --font-weight-bold: 700;
   --border-radius: 0.75rem;
   --border-radius-small: 0.5rem;
   --border-radius-round: 10rem;
@@ -89,10 +83,14 @@
   --button-tiny-height: 1.5rem;
 }
 
+html {
+  height: 100%;
+  overflow-y: scroll;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
 body {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
   min-width: var(--content-min-width);
   height: 100%;
   margin: 0;
@@ -100,7 +98,6 @@ body {
   color: white;
   text-align: left;
   background-color: var(--color-background);
-  -webkit-font-smoothing: antialiased;
   scrollbar-width: thin;
   scrollbar-height: thin;
   scrollbar-color: var(--color-scrollbar) transparent;
@@ -112,15 +109,6 @@ body {
   }
 }
 
-html {
-  height: 100%;
-  overflow-y: scroll;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-}
-
 ::-moz-selection {
   background: var(--color-primary);
   color: var(--color-background);
@@ -155,23 +143,11 @@ body::-webkit-scrollbar-thumb {
   background: var(--color-negative);
 }
 
-code {
-  font-family: monospace;
-  font-size: 0.95rem;
-}
-
 main,
 section {
   display: block;
 }
 
-body,
-input,
-textarea {
-  font-family: var(--font-family-sans-serif);
-  font-feature-settings: "ss01", "ss02", "cv01", "cv03";
-}
-
 a {
   color: inherit;
   text-decoration: none;
@@ -198,12 +174,13 @@ a.address {
 }
 
 input[type="text"] {
+  font-family: var(--font-family-sans-serif);
   line-height: 1.6;
 }
 input[type="text"] {
   outline: none;
   border: none;
-  font-size: 1rem;
+  font-size: var(--font-size-regular);
   color: var(--color-foreground);
   background: transparent;
   border: 1px solid var(--color-secondary);
@@ -217,7 +194,7 @@ input[type="text"]::placeholder {
   opacity: 1 !important;
 }
 input[type="text"].small {
-  font-size: 0.875rem;
+  font-size: var(--font-size-small);
 }
 input.wide {
   width: 44ch;
@@ -245,16 +222,9 @@ label.input {
 .label {
   color: var(--color-secondary);
 }
-.subtle {
-  color: var(--color-foreground-faded);
-  font-style: italic;
-}
 .faded {
   color: var(--color-foreground-faded);
 }
-.bold {
-  font-weight: bold !important;
-}
 .yellow {
   color: var(--color-yellow);
   background: var(--color-yellow-background-solid);
@@ -269,10 +239,6 @@ label.input {
   align-items: center;
 }
 
-.font-mono {
-  font-family: var(--font-family-monospace);
-}
-
 .mobile,
 .mobile-inline {
   display: none !important;
@@ -302,28 +268,6 @@ span.align {
   align-items: center;
   justify-content: flex-start;
 }
-span.small,
-.text-xsmall {
-  font-size: 0.75rem;
-}
-.text-small {
-  font-size: 0.875rem;
-}
-.text-medium {
-  font-size: 1.25rem;
-}
-.text-big {
-  font-size: 1.5rem;
-}
-.text-truncate {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-}
-.text-faded {
-  color: var(--color-foreground-faded);
-}
-
 button.error:hover {
   color: var(--color-background);
   background-color: var(--color-negative);
@@ -339,30 +283,5 @@ td {
   text-overflow: ellipsis;
 }
 td strong {
-  font-weight: 600;
-}
-
-h1,
-.title {
-  font-size: 1.75rem;
-  font-weight: normal;
-  color: var(--color-secondary);
-  text-align: left;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-}
-h1 {
-  margin-bottom: 2rem;
-}
-
-h2 {
-  margin: 1.5rem 0;
-}
-
-h3 {
-  margin: 1rem 0;
-}
-
-p {
-  margin: 1rem 0;
+  font-weight: var(--font-weight-medium);
 }
diff --git a/public/typography.css b/public/typography.css
index b186db7be..7bb984eb8 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -8,7 +8,6 @@
 
 @font-face {
   font-family: "Inter";
-  font-style: bold;
   font-weight: 600;
   font-display: swap;
   src: url("fonts/Inter-SemiBold.otf");
@@ -16,22 +15,78 @@
 
 @font-face {
   font-family: "Inter";
-  font-style: bolder;
   font-weight: 700;
   font-display: swap;
   src: url("fonts/Inter-Bold.otf");
 }
 
-@font-face {
-  font-family: "Source Code Pro";
-  font-style: bold;
-  font-weight: 600;
-  src: url("fonts/SourceCodePro-Semibold.otf");
+:root {
+  --font-family-sans-serif: Inter, sans-serif;
+  --font-family-monospace: monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 600;
+  --font-weight-bold: 700;
+  --font-size-tiny: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-regular: 1rem;
+  --font-size-medium: 1.25rem;
+  --font-size-large: 1.75rem;
+  --font-size-huge: 2rem;
 }
 
-@font-face {
-  font-family: "Source Code Pro";
-  font-style: bold;
-  font-weight: 700;
-  src: url("fonts/SourceCodePro-Bold.otf");
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  font-family: var(--font-family-sans-serif);
+  font-feature-settings: "ss01", "ss02", "cv01", "cv03";
+  /* The root element font size has to be set in px,
+   * otherwise Safari breaks. */
+  font-size: 16px;
+  font-weight: var(--font-weight-normal);
+  line-height: 1.5;
+}
+
+p {
+  margin: 1rem 0;
+}
+
+.txt-title {
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-secondary);
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+.txt-missing {
+  color: var(--color-foreground-faded);
+  font-style: italic;
+}
+
+.txt-tiny {
+  font-size: var(--font-size-tiny);
+}
+.txt-small {
+  font-size: var(--font-size-small);
+}
+.txt-regular {
+  font-size: var(--font-size-regular);
+}
+.txt-medium {
+  font-size: var(--font-size-medium);
+}
+.txt-large {
+  font-size: var(--font-size-large);
+}
+.txt-huge {
+  font-size: var(--font-size-huge);
+}
+
+.txt-monospace {
+  font-family: var(--font-family-monospace);
+}
+.txt-bold {
+  font-weight: var(--font-weight-bold) !important;
 }
diff --git a/src/Address.svelte b/src/Address.svelte
index 935df4c84..21953deac 100644
--- a/src/Address.svelte
+++ b/src/Address.svelte
@@ -22,7 +22,7 @@
   export let noAvatar = false;
   export let compact = false;
   export let small = false;
-  export let xsmall = false;
+  export let tiny = false;
   export let highlight = false;
   // This property allows components eg. Header.svelte to pass a resolved profile object.
   export let profile: Profile | null = null;
@@ -72,7 +72,7 @@
   }
   .highlight {
     color: var(--color-foreground-90);
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
   .wrapper {
     gap: 0.5rem;
@@ -84,8 +84,8 @@
 <div
   class="address"
   title={address}
-  class:text-small={small}
-  class:text-xsmall={xsmall}
+  class:txt-small={small}
+  class:txt-tiny={tiny}
   class:highlight>
   {#if !noAvatar}
     {#if resolve && profile?.avatar}
diff --git a/src/App.svelte b/src/App.svelte
index 1a11e692f..cfe01422a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -59,6 +59,9 @@
     flex-direction: column;
     height: 100%;
   }
+  .emoji {
+    margin: 1rem 0;
+  }
 </style>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -104,7 +107,7 @@
     <div class="wrapper">
       <Modal error subtle>
         <span slot="title">
-          <h3>👻</h3>
+          <div class="emoji">👻</div>
           <div>Error connecting to network</div>
         </span>
 
diff --git a/src/Async.svelte b/src/Async.svelte
index 7535bb44d..a5235ae2e 100644
--- a/src/Async.svelte
+++ b/src/Async.svelte
@@ -10,9 +10,9 @@
   <slot {result} />
 {:catch err}
   <div class="commit">
-    <div class="error error-message text-xsmall">
+    <div class="error error-message txt-tiny">
       <div>
-        API request to <code class="text-xsmall">{err.url}</code>
+        API request to <span class="txt-monospace">{err.url}</span>
         failed.
       </div>
     </div>
diff --git a/src/Authorship.svelte b/src/Authorship.svelte
index cb1b351dc..9f3e10c77 100644
--- a/src/Authorship.svelte
+++ b/src/Authorship.svelte
@@ -36,17 +36,17 @@
   }
   .highlight {
     color: var(--color-foreground-90);
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
   .date {
     color: var(--color-foreground-80);
   }
 </style>
 
-<span class="authorship text-xsmall">
+<span class="authorship txt-tiny">
   {#if profile}
     <Address
-      xsmall
+      tiny
       highlight
       resolve
       noBadge
@@ -65,7 +65,7 @@
     </span>
   {/if}
   <span class="caption">&nbsp;{caption}&nbsp;</span>
-  <span class="text-xsmall date">
+  <span class="txt-tiny date">
     {formatTimestamp(timestamp)}
   </span>
 </span>
diff --git a/src/Badge.svelte b/src/Badge.svelte
index b178a37aa..03256be2f 100644
--- a/src/Badge.svelte
+++ b/src/Badge.svelte
@@ -12,7 +12,7 @@
   .badge {
     border-radius: var(--border-radius);
     padding: 0.125rem 0.5rem;
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     line-height: 1.6;
     height: var(--button-tiny-height);
     display: flex;
diff --git a/src/Button.svelte b/src/Button.svelte
index 97367f83f..1fd920c1e 100644
--- a/src/Button.svelte
+++ b/src/Button.svelte
@@ -21,7 +21,7 @@
     cursor: pointer;
     font-family: var(--font-family-sans-serif);
     font-feature-settings: "ss01", "ss02", "cv01", "cv03";
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     line-height: 1.6rem;
     display: inline-flex;
     justify-content: center;
@@ -92,12 +92,12 @@
   }
 
   .tiny {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     height: var(--button-small-tiny);
     padding: 0 0.6rem;
   }
   .small {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     height: var(--button-small-height);
     padding: 0 0.75rem;
   }
diff --git a/src/Card.svelte b/src/Card.svelte
index c2f09653c..62bd94b2d 100644
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -55,7 +55,7 @@
     overflow-x: hidden;
   }
   .card-members {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     color: var(--color-foreground-faded);
   }
 
diff --git a/src/Comment.svelte b/src/Comment.svelte
index 878b01213..67080c7eb 100644
--- a/src/Comment.svelte
+++ b/src/Comment.svelte
@@ -66,7 +66,7 @@
     padding: 0.5rem 1rem;
   }
   .card-body {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     padding: 0rem 1rem 1rem 1rem;
   }
   .reactions {
@@ -92,7 +92,7 @@
     </div>
     <div class="card-body">
       {#if comment.body === ""}
-        <span class="subtle">No description.</span>
+        <span class="txt-missing">No description.</span>
       {:else}
         <Markdown content={comment.body} {getImage} />
       {/if}
diff --git a/src/Error.svelte b/src/Error.svelte
index 09b26d1cc..928ee4c3e 100644
--- a/src/Error.svelte
+++ b/src/Error.svelte
@@ -33,7 +33,7 @@
 
   <span slot="body">
     <slot>
-      <strong>Error:</strong>
+      <span class="txt-bold">Error:</span>
       {body}
     </slot>
   </span>
diff --git a/src/Form.svelte b/src/Form.svelte
index c995f15da..f9030c414 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -244,12 +244,12 @@
               {field.value}
             {/if}
           {:else}
-            <span class="subtle not-set">&cross; Not set</span>
+            <span class="txt-missing not-set">&cross; Not set</span>
           {/if}
         </span>
       {/if}
       {#if field.error}
-        <div class="description invalid text-small faded">
+        <div class="description invalid txt-small faded">
           {#if field.example}
             {field.error}, eg.
             <em>{field.example}</em>
@@ -258,7 +258,7 @@
           {/if}
         </div>
       {:else}
-        <div class="description text-small faded">
+        <div class="description txt-small faded">
           {@html marked(field.description)}
         </div>
       {/if}
diff --git a/src/Header.svelte b/src/Header.svelte
index 8c4c4bf9e..a95735d18 100644
--- a/src/Header.svelte
+++ b/src/Header.svelte
@@ -56,7 +56,6 @@
     display: inline-block;
     padding: 0.5rem 0.5rem;
     margin-right: 1.5rem;
-    font-weight: 500;
     cursor: pointer;
     user-select: none;
     color: var(--color-foreground-6);
@@ -147,10 +146,10 @@
   {#if $error.type === Failure.TransactionFailed}
     <div class="error">
       {#if $error.message}
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         {$error.message}
       {:else if $error.txHash}
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         Transaction
         <a href="https://etherscan.io/tx/{$error.txHash}">{$error.txHash}</a>
         failed.
@@ -194,7 +193,7 @@
       <span class="balance">
         {#if tokenBalance}
           {formatBalance(tokenBalance)}
-          <strong>RAD</strong>
+          <span class="txt-bold">RAD</span>
         {:else}
           <Loading small />
         {/if}
diff --git a/src/Input.svelte b/src/Input.svelte
index 8813a2029..d19f7bd08 100644
--- a/src/Input.svelte
+++ b/src/Input.svelte
@@ -24,7 +24,7 @@
     border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   }
   input {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     padding: 0.5rem;
     border: none;
diff --git a/src/Markdown.svelte b/src/Markdown.svelte
index 46ff80865..252759a2b 100644
--- a/src/Markdown.svelte
+++ b/src/Markdown.svelte
@@ -64,7 +64,7 @@
 
 <style>
   .front-matter {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     color: var(--color-foreground-90);
     border: 1px dashed var(--color-foreground-subtle);
@@ -96,8 +96,7 @@
   }
 
   .markdown :global(h1) {
-    font-family: var(--typeface-medium);
-    font-size: 1.5rem;
+    font-size: calc(var(--font-size-huge) * 0.75);
     font-weight: var(--font-weight-medium);
     padding: 1rem 0 0.5rem 0;
     margin: 0 0 0.75rem;
@@ -105,15 +104,15 @@
   }
 
   .markdown :global(h2) {
-    font-size: 1.25rem;
-    font-weight: normal;
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-normal);
     padding: 0.25rem 0;
     margin: 2rem 0 0.5rem;
     border-bottom: 1px dashed var(--color-foreground-subtle);
   }
 
   .markdown :global(h3) {
-    font-size: 1.125rem;
+    font-size: calc(var(--font-size-medium) * 0.9);
     font-weight: var(--font-weight-medium);
     padding: 0.5rem 0;
     margin: 1rem 0 0.25rem;
@@ -121,21 +120,21 @@
 
   .markdown :global(h4) {
     font-weight: var(--font-weight-medium);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     padding: 0.5rem 0;
     margin: 1rem 0 0.125rem;
   }
 
   .markdown :global(h5) {
     font-weight: var(--font-weight-medium);
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     padding: 0.35rem 0;
     margin: 1rem 0 0.125rem;
   }
 
   .markdown :global(h6) {
     font-weight: var(--font-weight-medium);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     padding: 0.25rem 0;
     margin: 1rem 0 0.125rem;
   }
@@ -167,7 +166,7 @@
 
   .markdown :global(code) {
     font-family: var(--font-family-monospace);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     color: var(--color-light);
   }
 
@@ -178,7 +177,7 @@
 
   .markdown :global(pre) {
     font-family: var(--font-family-monospace);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     background-color: var(--color-foreground-background);
     padding: 1rem !important;
     border-radius: var(--border-radius-small);
@@ -233,7 +232,7 @@
       <table>
         {#each frontMatter as [key, val]}
           <tr>
-            <td><strong>{key}</strong></td>
+            <td><span class="txt-bold">{key}</span></td>
             <td>{val}</td>
           </tr>
         {/each}
diff --git a/src/MobileNavbar.svelte b/src/MobileNavbar.svelte
index 3547d8067..92e7d24d8 100644
--- a/src/MobileNavbar.svelte
+++ b/src/MobileNavbar.svelte
@@ -41,7 +41,7 @@
   }
   .modal-title {
     color: var(--color-foreground);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     line-height: 2rem;
     text-align: left;
     text-overflow: ellipsis;
diff --git a/src/Modal.svelte b/src/Modal.svelte
index bdfa8e265..78f963547 100644
--- a/src/Modal.svelte
+++ b/src/Modal.svelte
@@ -56,8 +56,8 @@
   }
   .modal-title {
     color: var(--color-foreground);
-    font-size: 1.25rem;
-    font-weight: bold;
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-bold);
     line-height: 2.625rem;
     margin-bottom: 0.5rem;
     text-align: center;
@@ -66,14 +66,14 @@
   }
   .modal-subtitle {
     color: var(--color-secondary);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     max-width: 90%;
     margin: 0 auto;
     line-height: 1.5;
   }
   .modal-body {
     color: var(--color-foreground);
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     overflow-x: hidden;
     text-overflow: ellipsis;
     margin: 3rem 0;
diff --git a/src/NotFound.svelte b/src/NotFound.svelte
index 4cc1825ae..7088e82fa 100644
--- a/src/NotFound.svelte
+++ b/src/NotFound.svelte
@@ -11,7 +11,7 @@
 <Modal subtle>
   <span slot="title">🏜️</span>
   <span slot="body">
-    <p class="highlight text-medium"><strong>{title}</strong></p>
+    <p class="highlight txt-medium"><span class="txt-bold">{title}</span></p>
     <p>{subtitle}</p>
   </span>
   <span slot="actions">
diff --git a/src/Options.svelte b/src/Options.svelte
index 21f66571a..5675d0316 100644
--- a/src/Options.svelte
+++ b/src/Options.svelte
@@ -43,7 +43,7 @@
   }
   .options .description {
     color: var(--color-secondary);
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     margin-bottom: 2rem;
   }
   .options .description:last-child {
diff --git a/src/Placeholder.svelte b/src/Placeholder.svelte
index 50864c201..e08287e79 100644
--- a/src/Placeholder.svelte
+++ b/src/Placeholder.svelte
@@ -12,17 +12,16 @@
   }
   .placeholder header {
     padding: 1rem 0;
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
   .placeholder .icon {
-    font-size: 1.5rem;
     margin-bottom: 1rem;
   }
 </style>
 
 <div class="error error-message placeholder">
   <header>
-    <div class="icon">{icon}</div>
+    <div class="icon txt-large">{icon}</div>
     <slot name="title" />
   </header>
   <slot name="body" />
diff --git a/src/Profile.svelte b/src/Profile.svelte
index 16a90059f..fe875afa1 100644
--- a/src/Profile.svelte
+++ b/src/Profile.svelte
@@ -201,13 +201,13 @@
           title={profile.address} />
       </div>
       <div class="info">
-        <span class="title">
-          <span class="bold desktop">
+        <span class="title txt-title">
+          <span class="txt-bold desktop">
             {profile.name
               ? utils.formatName(profile.name, config)
               : profile.address}
           </span>
-          <span class="bold mobile">
+          <span class="txt-bold mobile">
             {profile.name
               ? utils.formatName(profile.name, config)
               : utils.formatAddress(profile.address)}
@@ -317,7 +317,7 @@
             {#if profile.name}
               <a href={profile.registry(config)} class="link">{profile.name}</a>
             {:else}
-              <span class="subtle">Not set</span>
+              <span class="txt-missing">Not set</span>
             {/if}
           </div>
           <div class="desktop">
@@ -350,7 +350,7 @@
           {#if profile.name}
             <a href={profile.registry(config)} class="link">{profile.name}</a>
           {:else}
-            <span class="subtle">Not set</span>
+            <span class="txt-missing">Not set</span>
           {/if}
         </div>
         <div class="desktop">
@@ -401,7 +401,7 @@
         {/if}
       {:catch err}
         <Message error>
-          <strong>Error:</strong>
+          <span class="txt-bold">Error:</span>
           failed to load org members: {err.message}.
         </Message>
       {/await}
@@ -441,7 +441,7 @@
         {/if}
       {:catch err}
         <Message error>
-          <strong>Error:</strong>
+          <span class="txt-bold">Error:</span>
           failed to load orgs: {err.message}.
         </Message>
       {/await}
diff --git a/src/RadicleUrn.svelte b/src/RadicleUrn.svelte
index 67383a5ef..8cc5963ab 100644
--- a/src/RadicleUrn.svelte
+++ b/src/RadicleUrn.svelte
@@ -19,7 +19,7 @@
 <style>
   .urn {
     display: inline-flex;
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     line-height: 2rem;
     color: var(--color-foreground-90);
     vertical-align: middle;
diff --git a/src/Search.svelte b/src/Search.svelte
index 8eb567773..b3b049473 100644
--- a/src/Search.svelte
+++ b/src/Search.svelte
@@ -19,7 +19,7 @@
   input {
     height: 100%;
     width: 100%;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     text-overflow: ellipsis;
     margin: 0;
     padding: 0.5rem 1.25rem;
diff --git a/src/SeedAddress.svelte b/src/SeedAddress.svelte
index 955366d2c..dd02b37cb 100644
--- a/src/SeedAddress.svelte
+++ b/src/SeedAddress.svelte
@@ -16,7 +16,7 @@
   }
   .seed-address {
     display: inline-flex;
-    font-size: 1rem;
+    font-size: var(--font-size-regular);
     line-height: 2rem;
     color: var(--color-foreground-90);
     vertical-align: middle;
diff --git a/src/ToggleButton.svelte b/src/ToggleButton.svelte
index 010848d57..eaba787ad 100644
--- a/src/ToggleButton.svelte
+++ b/src/ToggleButton.svelte
@@ -35,7 +35,7 @@
     color: var(--color-foreground-80);
     cursor: pointer;
     font-family: var(--font-family-monospace);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     height: var(--button-tiny-height);
     padding: 0.25rem 0.5rem;
     border: none;
diff --git a/src/base/faucet/Index.svelte b/src/base/faucet/Index.svelte
index aa9b2ada2..733cc6494 100644
--- a/src/base/faucet/Index.svelte
+++ b/src/base/faucet/Index.svelte
@@ -80,7 +80,7 @@
 
 <style>
   div.input-caption {
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     text-align: left;
     margin-left: 1.5rem;
     padding-left: 1.5rem;
@@ -124,17 +124,23 @@
   <div>
     {#if config.network.name === "homestead"}
       <div class="input-caption">
-        To get RAD tokens on <strong>{config.network.name}</strong>
+        To get RAD tokens on <span class="txt-bold">
+          {config.network.name}
+        </span>
         , please check the known exchanges.
       </div>
     {:else if !$session}
       <div class="input-caption">
-        To get RAD tokens on <strong>{config.network.name}</strong>
+        To get RAD tokens on <span class="txt-bold">
+          {config.network.name}
+        </span>
         , please connect your wallet.
       </div>
     {:else}
       <div class="input-caption">
-        Obtain RAD tokens on <strong>{config.network.name}</strong>
+        Obtain RAD tokens on <span class="txt-bold">
+          {config.network.name}
+        </span>
       </div>
       <div class="input-main">
         <div class="name">
@@ -146,7 +152,7 @@
           <Button variant="primary" on:click={withdraw}>Withdraw</Button>
         </div>
         {#if error}
-          <div class="error description invalid text-small faded">
+          <div class="error description invalid txt-small faded">
             {error}
           </div>
         {/if}
diff --git a/src/base/home/Index.svelte b/src/base/home/Index.svelte
index e9d2fe806..a383cf2ce 100644
--- a/src/base/home/Index.svelte
+++ b/src/base/home/Index.svelte
@@ -44,7 +44,7 @@
     color: var(--color-foreground-90);
     padding: 0rem;
     max-width: 70%;
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     text-align: left;
     border-radius: var(--border-radius);
     margin-bottom: 1.5rem;
@@ -62,7 +62,7 @@
   .heading {
     color: var(--color-secondary);
     padding: 1rem 0rem;
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     margin-bottom: 1rem;
   }
   .loading {
@@ -71,10 +71,10 @@
   @media (max-width: 720px) {
     .blurb {
       max-width: none;
-      font-size: 1rem;
+      font-size: var(--font-size-regular);
     }
     .heading {
-      font-size: 1rem;
+      font-size: var(--font-size-regular);
     }
   }
 </style>
@@ -98,7 +98,7 @@
   {:then results}
     {#if results.length}
       <div class="heading">
-        Explore <strong>projects</strong>
+        Explore <span class="txt-bold">projects</span>
         on the Radicle network.
       </div>
 
@@ -117,7 +117,7 @@
   {:catch}
     <div class="padding">
       <Message error>
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         failed to load projects.
       </Message>
     </div>
diff --git a/src/base/orgs/Create.svelte b/src/base/orgs/Create.svelte
index 4959fba4d..07410b917 100644
--- a/src/base/orgs/Create.svelte
+++ b/src/base/orgs/Create.svelte
@@ -111,7 +111,7 @@
   }
   label[for="address"] {
     margin-left: 1.5rem;
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     color: var(--color-secondary);
   }
   input[name="address"] {
@@ -119,7 +119,7 @@
     width: 100%;
   }
   .notice {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     border-radius: var(--border-radius);
     color: var(--color-yellow);
     background-color: var(--color-yellow-background);
@@ -136,7 +136,7 @@
     <span slot="title">🎉</span>
 
     <span slot="subtitle">
-      <strong>Your org was successfully created.</strong>
+      <span class="txt-bold">Your org was successfully created.</span>
     </span>
 
     <span slot="body">
@@ -181,7 +181,7 @@
       {#if state === State.Idle}
         <div class="configuration">
           <div class="notice">
-            <strong>Notice:</strong>
+            <span class="txt-bold">Notice:</span>
             Orgs V1 are being deprecated. It is recommended not to create new orgs
             at this point.
           </div>
diff --git a/src/base/orgs/Index.svelte b/src/base/orgs/Index.svelte
index bb04962f4..fb40eba0e 100644
--- a/src/base/orgs/Index.svelte
+++ b/src/base/orgs/Index.svelte
@@ -34,7 +34,7 @@
   }
   main header {
     color: var(--color-secondary);
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     display: flex;
     align-items: center;
     padding: 1rem 0;
@@ -46,8 +46,6 @@
   }
   .orgs-empty {
     padding: 2rem 0 1rem 0;
-    font-style: italic;
-    color: var(--color-foreground-faded);
   }
 
   .loading {
@@ -64,7 +62,7 @@
     <div class="my-orgs">
       <header>
         <span>
-          My <strong>Orgs</strong>
+          My <span class="txt-bold">Orgs</span>
         </span>
         <Button variant="secondary" on:click={onCreate} disabled={!account}>
           Create
@@ -77,12 +75,14 @@
         </div>
       {:then orgs}
         <Cards {config} {orgs}>
-          <div class="orgs-empty">Orgs you are a member of show up here.</div>
+          <div class="orgs-empty txt-missing">
+            Orgs you are a member of show up here.
+          </div>
         </Cards>
       {:catch}
         <div>
           <Message error>
-            <strong>Error:</strong>
+            <span class="txt-bold">Error:</span>
             failed to load orgs.
           </Message>
         </div>
@@ -92,7 +92,7 @@
 
   <header>
     <span>
-      <strong>Orgs</strong>
+      <span class="txt-bold">Orgs</span>
       of the Radicle network
     </span>
   </header>
@@ -108,7 +108,7 @@
   {:catch}
     <div>
       <Message error>
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         failed to load orgs.
       </Message>
     </div>
diff --git a/src/base/orgs/TransferOwnership.svelte b/src/base/orgs/TransferOwnership.svelte
index 6cc5a3125..37d17113c 100644
--- a/src/base/orgs/TransferOwnership.svelte
+++ b/src/base/orgs/TransferOwnership.svelte
@@ -78,9 +78,11 @@
     <div slot="title">✅</div>
 
     <div slot="subtitle">
-      The ownership of <strong>{formatAddress(org.address)}</strong>
+      The ownership of <span class="txt-bold">
+        {formatAddress(org.address)}
+      </span>
       was successfully transfered to
-      <strong>{newOwner}</strong>
+      <span class="txt-bold">{newOwner}</span>
       .
     </div>
 
@@ -96,11 +98,11 @@
 
     <div slot="subtitle">
       <p>
-        The transaction to set the owner of <strong>
+        The transaction to set the owner of <span class="txt-bold">
           {formatAddress(org.address)}
-        </strong>
+        </span>
         to
-        <strong>{newOwner}</strong>
+        <span class="txt-bold">{newOwner}</span>
         was proposed to:
       </p>
       <p><Address address={org.owner} {config} compact /></p>
@@ -126,12 +128,12 @@
         Waiting for transaction to be processed...
       {:else if state === State.Proposing && org}
         Proposal is being submitted to the safe
-        <strong>{formatAddress(org.owner)}</strong>
+        <span class="txt-bold">{formatAddress(org.owner)}</span>
         , please sign the transaction in your wallet.
       {:else if state === State.Idle}
-        Transfer the ownership of Org <strong>
+        Transfer the ownership of Org <span class="txt-bold">
           {formatAddress(org.address)}
-        </strong>
+        </span>
         to a new address.
       {:else if state === State.Failed}
         <div class="error">
diff --git a/src/base/profiles/AnchorActions.svelte b/src/base/profiles/AnchorActions.svelte
index 7dad20943..354a67506 100644
--- a/src/base/profiles/AnchorActions.svelte
+++ b/src/base/profiles/AnchorActions.svelte
@@ -114,7 +114,7 @@
 
 <span class="confirmations">
   {#if pending > 0}
-    <strong>{pending}</strong>
+    <span class="txt-bold">{pending}</span>
     signature(s) pending
   {/if}
 </span>
@@ -177,9 +177,9 @@
       {#if state === State.Confirm}
         <div class="table">
           <div>Project</div>
-          <code>{anchor.id}</code>
+          <span class="txt-monospace">{anchor.id}</span>
           <div>Hash</div>
-          <code>{anchor.anchor.stateHash}</code>
+          <span class="txt-monospace">{anchor.anchor.stateHash}</span>
         </div>
       {:else if state === State.Failed}
         <div>{error}</div>
@@ -231,9 +231,13 @@
       {#if state === State.Confirm}
         <div class="table">
           <div>TxHash</div>
-          <code>{utils.formatHash(anchor.safeTxHash)}</code>
+          <span class="txt-monospace">
+            {utils.formatHash(anchor.safeTxHash)}
+          </span>
           <div>Quorum</div>
-          <code>{anchor.confirmations.length} of {safe.threshold}</code>
+          <span class="txt-monospace">
+            {anchor.confirmations.length} of {safe.threshold}
+          </span>
         </div>
       {:else if state === State.Failed}
         <div>{error}</div>
diff --git a/src/base/projects/Blob.svelte b/src/base/projects/Blob.svelte
index 1eb5d7e37..798e52aa5 100644
--- a/src/base/projects/Blob.svelte
+++ b/src/base/projects/Blob.svelte
@@ -38,7 +38,7 @@
   }
 
   header .file-name {
-    font-weight: normal;
+    font-weight: var(--font-weight-normal);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -49,14 +49,14 @@
     padding: 0.5rem;
     color: var(--color-secondary);
     background-color: var(--color-secondary-background);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     border-radius: var(--border-radius-small);
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .last-commit .hash {
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
     font-family: var(--font-family-monospace);
     margin-right: 0.25rem;
   }
@@ -124,7 +124,7 @@
   @media (max-width: 960px) {
     .code,
     .line-numbers {
-      font-size: 0.875rem;
+      font-size: var(--font-size-small);
     }
     .highlight {
       display: none;
@@ -150,7 +150,7 @@
       {#if blob.binary}
         <div class="binary">
           <div>👀</div>
-          <span class="small">Binary content</span>
+          <span class="txt-tiny">Binary content</span>
         </div>
       {:else}
         {#if line}
diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte
index 359130b9f..1e4d0cef4 100644
--- a/src/base/projects/Browser.svelte
+++ b/src/base/projects/Browser.svelte
@@ -187,7 +187,7 @@
           <Placeholder icon="🍂">
             <span slot="title">
               {#if path !== "/"}
-                <div><code>{path}</code></div>
+                <div class="txt-monospace">{path}</div>
               {/if}
             </span>
             <span slot="body">
diff --git a/src/base/projects/CloneButton.svelte b/src/base/projects/CloneButton.svelte
index 0d14a7560..1a1f8a518 100644
--- a/src/base/projects/CloneButton.svelte
+++ b/src/base/projects/CloneButton.svelte
@@ -42,7 +42,7 @@
   label {
     color: var(--color-foreground-faded);
     display: block;
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     padding: 0.5rem 0.5rem 0 0.25rem;
   }
 </style>
diff --git a/src/base/projects/Commit.svelte b/src/base/projects/Commit.svelte
index 99d84ed7d..74b151e93 100644
--- a/src/base/projects/Commit.svelte
+++ b/src/base/projects/Commit.svelte
@@ -40,7 +40,7 @@
   }
   .sha1 {
     color: var(--color-foreground-80);
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
   }
   .authorship {
     display: flex;
@@ -58,15 +58,15 @@
 <div class="commit">
   <header>
     <div class="summary">
-      <div class="text-medium">{commit.header.summary}</div>
-      <div class="desktop font-mono sha1">
+      <div class="txt-medium">{commit.header.summary}</div>
+      <div class="desktop txt-monospace sha1">
         <span>{commit.header.sha1}</span>
       </div>
-      <div class="mobile font-mono sha1 text-small">
+      <div class="mobile txt-monospace sha1 txt-small">
         {formatCommit(commit.header.sha1)}
       </div>
     </div>
-    <pre class="description text-small">{commit.header.description}</pre>
+    <pre class="description txt-small">{commit.header.description}</pre>
     <div class="authorship">
       <CommitAuthorship {commit} />
       {#if commit.context?.committer}
diff --git a/src/base/projects/Commit/CommitAuthorship.svelte b/src/base/projects/Commit/CommitAuthorship.svelte
index 3d84c1956..87f9b6365 100644
--- a/src/base/projects/Commit/CommitAuthorship.svelte
+++ b/src/base/projects/Commit/CommitAuthorship.svelte
@@ -36,14 +36,14 @@
   }
 </style>
 
-<span class="authorship text-xsmall">
+<span class="authorship txt-tiny">
   {#if commit.header.author.email === commit.header.committer.email}
     <img
       class="avatar"
       alt="avatar"
       src={gravatarURL(commit.header.committer.email)} />
     {#if commit.context?.committer}
-      <span class="bold committer verified-committer">
+      <span class="txt-bold committer verified-committer">
         {commit.context?.committer.peer.person.name}
       </span>
       <span>&nbsp;committed</span>
@@ -67,7 +67,7 @@
       alt="avatar"
       src={gravatarURL(commit.header.committer.email)} />
     {#if commit.context?.committer}
-      <span class="bold committer verified-committer">
+      <span class="txt-bold committer verified-committer">
         {commit.context?.committer.peer.person.name}
       </span>
       <span>&nbsp;committed</span>
@@ -80,7 +80,7 @@
   {/if}
   {#if showTime}
     <span>&nbsp;</span>
-    <span class="desktop-inline text-xsmall time">
+    <span class="desktop-inline txt-tiny time">
       {formatTimestamp(commit.header.committerTime)}
     </span>
   {/if}
diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index e045ece37..2034d3f60 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -19,7 +19,7 @@
 <style>
   .hash {
     font-family: var(--font-family-monospace);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     padding: 0 1.5rem;
   }
   .commit-teaser {
diff --git a/src/base/projects/Commit/CommitVerifiedBadge.svelte b/src/base/projects/Commit/CommitVerifiedBadge.svelte
index a6c353c25..bfc62317c 100644
--- a/src/base/projects/Commit/CommitVerifiedBadge.svelte
+++ b/src/base/projects/Commit/CommitVerifiedBadge.svelte
@@ -28,7 +28,7 @@
     border-radius: var(--border-radius-small);
     box-shadow: 16px 16px 32px 32px var(--color-shadow);
     color: var(--color-foreground);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     left: -10rem;
     margin-top: 0.5rem;
     padding: 0.5rem 0;
@@ -75,7 +75,7 @@
           <CommitAuthorship {commit} showAuthor={false} showTime={false} />
           {#if commit.context.committer}
             <div class="peer">
-              <span class="text-faded">{commit.context.committer.peer.id}</span>
+              <span class="faded">{commit.context.committer.peer.id}</span>
             </div>
           {/if}
         </div>
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index 58fefc8c9..1090add32 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -41,7 +41,7 @@
 
 <style>
   header {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     padding: 0 2rem 0 8rem;
     margin-bottom: 2rem;
     display: flex;
@@ -131,7 +131,7 @@
     class="stat commit-count clickable widget"
     class:active={content === ProjectContent.History}
     on:click={() => toggleContent(ProjectContent.History, true)}>
-    <strong>{tree.stats.commits}</strong>
+    <span class="txt-bold">{tree.stats.commits}</span>
     commit(s)
   </div>
   {#if project.issues}
@@ -141,7 +141,7 @@
       class:not-allowed={project.issues === 0}
       class:clickable={project.issues > 0}
       on:click={() => toggleContent(ProjectContent.Issues, false)}>
-      <strong>{project.issues}</strong>
+      <span class="txt-bold">{project.issues}</span>
       issue(s)
     </div>
   {/if}
@@ -152,12 +152,12 @@
       class:not-allowed={project.patches === 0}
       class:clickable={project.patches > 0}
       on:click={() => toggleContent(ProjectContent.Patches, false)}>
-      <strong>{project.patches}</strong>
+      <span class="txt-bold">{project.patches}</span>
       patch(es)
     </div>
   {/if}
   <div class="stat contributor-count widget">
-    <strong>{tree.stats.contributors}</strong>
+    <span class="txt-bold">{tree.stats.contributors}</span>
     contributor(s)
   </div>
 </header>
diff --git a/src/base/projects/History.svelte b/src/base/projects/History.svelte
index fd80a2843..1ebeb9fc4 100644
--- a/src/base/projects/History.svelte
+++ b/src/base/projects/History.svelte
@@ -41,7 +41,7 @@
 <style>
   .history {
     padding: 0 2rem 0 8rem;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
   }
   .commit-group header {
     color: var(--color-foreground-faded);
diff --git a/src/base/projects/Issue.svelte b/src/base/projects/Issue.svelte
index 22fa89a50..340493237 100644
--- a/src/base/projects/Issue.svelte
+++ b/src/base/projects/Issue.svelte
@@ -39,7 +39,7 @@
     flex-basis: 18rem;
     margin-left: 1rem;
     border-radius: var(--border-radius);
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     padding-left: 1rem;
   }
   .metadata-section {
@@ -47,7 +47,7 @@
     border-bottom: 1px dashed var(--color-foreground-subtle);
   }
   .metadata-section-header {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     margin-bottom: 0.75rem;
     color: var(--color-foreground-faded);
   }
@@ -63,7 +63,7 @@
     background-color: var(--color-tertiary-background);
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     line-height: 1.6;
   }
 
@@ -82,7 +82,7 @@
     display: flex;
   }
   .id {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     margin-left: 0.75rem;
     color: var(--color-foreground-faded);
   }
@@ -112,11 +112,11 @@
   <header>
     <div class="summary">
       <div class="summary-left">
-        <span class="summary-title text-medium">
+        <span class="summary-title txt-medium">
           {issue.title}
         </span>
-        <span class="font-mono id desktop">{issue.id}</span>
-        <span class="font-mono id mobile">{formatObjectId(issue.id)}</span>
+        <span class="txt-monospace id desktop">{issue.id}</span>
+        <span class="txt-monospace id mobile">{formatObjectId(issue.id)}</span>
       </div>
       <div
         class="summary-state"
diff --git a/src/base/projects/Issue/IssueTeaser.svelte b/src/base/projects/Issue/IssueTeaser.svelte
index 1c7976fbf..ea6cab5e7 100644
--- a/src/base/projects/Issue/IssueTeaser.svelte
+++ b/src/base/projects/Issue/IssueTeaser.svelte
@@ -39,7 +39,7 @@
   }
   .issue-id {
     color: var(--color-foreground-faded);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     margin-left: 0.5rem;
   }
@@ -56,7 +56,7 @@
   }
   .comment-count {
     color: var(--color-foreground-70);
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
   .comment-count .emoji {
     margin-right: 0.25rem;
@@ -122,7 +122,7 @@
   {#if commentCount > 0}
     <div class="column-right">
       <div class="comment-count">
-        <span class="text-xsmall emoji">💬</span>
+        <span class="txt-tiny emoji">💬</span>
         <span>{commentCount}</span>
       </div>
     </div>
diff --git a/src/base/projects/Issues.svelte b/src/base/projects/Issues.svelte
index f2c361492..f57785c29 100644
--- a/src/base/projects/Issues.svelte
+++ b/src/base/projects/Issues.svelte
@@ -44,7 +44,7 @@
 <style>
   .issues {
     padding: 0 2rem 0 8rem;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
   }
   .issues-list {
     border-radius: var(--border-radius);
diff --git a/src/base/projects/Patch.svelte b/src/base/projects/Patch.svelte
index 1555d0297..77d3c43d3 100644
--- a/src/base/projects/Patch.svelte
+++ b/src/base/projects/Patch.svelte
@@ -64,7 +64,7 @@
     margin-right: 0.75rem;
   }
   .id {
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     color: var(--color-foreground-faded);
   }
   .summary-state {
@@ -97,11 +97,11 @@
   <header>
     <div class="summary">
       <div class="summary-left">
-        <span class="summary-title text-medium">
+        <span class="summary-title txt-medium">
           {patch.title}
         </span>
-        <span class="font-mono id desktop">{patch.id}</span>
-        <span class="font-mono id mobile">{formatObjectId(patch.id)}</span>
+        <span class="txt-monospace id desktop">{patch.id}</span>
+        <span class="txt-monospace id mobile">{formatObjectId(patch.id)}</span>
       </div>
       <div
         class="summary-state"
diff --git a/src/base/projects/Patch/PatchSideBar.svelte b/src/base/projects/Patch/PatchSideBar.svelte
index b1f7a9531..1c2acb22c 100644
--- a/src/base/projects/Patch/PatchSideBar.svelte
+++ b/src/base/projects/Patch/PatchSideBar.svelte
@@ -9,7 +9,7 @@
     flex-basis: 18rem;
     margin-left: 1rem;
     border-radius: var(--border-radius-medium);
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     padding-left: 1rem;
   }
   .metadata-section {
@@ -17,7 +17,7 @@
     border-bottom: 1px dashed var(--color-foreground-subtle);
   }
   .metadata-section-header {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     margin-bottom: 0.75rem;
     color: var(--color-foreground-faded);
   }
@@ -33,7 +33,7 @@
     background-color: var(--color-tertiary-background);
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
     line-height: 1.6;
   }
 </style>
diff --git a/src/base/projects/Patch/PatchTabBar.svelte b/src/base/projects/Patch/PatchTabBar.svelte
index 284dfc9f0..16cbe6bbb 100644
--- a/src/base/projects/Patch/PatchTabBar.svelte
+++ b/src/base/projects/Patch/PatchTabBar.svelte
@@ -57,7 +57,7 @@
     border: none;
     color: var(--color-foreground-80);
     font-family: var(--font-family-monospace);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     height: var(--button-tiny-height);
     padding: 0.25rem 0.5rem;
     background-color: var(--color-background);
@@ -72,7 +72,7 @@
   }
 </style>
 
-<div class="bar text-small">
+<div class="bar txt-small">
   <ToggleButton
     {options}
     on:select={e => {
@@ -83,7 +83,7 @@
   <Floating disabled={revisions.length <= 1}>
     <button
       slot="toggle"
-      class="text-small revision-toggle"
+      class="txt-small revision-toggle"
       disabled={revisions.length <= 1}>
       {formatRevisionName(revisions[revisionNumber], revisionNumber)}
     </button>
diff --git a/src/base/projects/Patch/PatchTeaser.svelte b/src/base/projects/Patch/PatchTeaser.svelte
index c76324109..130a059e8 100644
--- a/src/base/projects/Patch/PatchTeaser.svelte
+++ b/src/base/projects/Patch/PatchTeaser.svelte
@@ -39,7 +39,7 @@
   }
   .patch-id {
     color: var(--color-foreground-faded);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     margin-left: 0.5rem;
   }
@@ -56,7 +56,7 @@
   }
   .comment-count {
     color: var(--color-foreground-70);
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
   .comment-count .emoji {
     margin-right: 0.25rem;
@@ -122,7 +122,7 @@
   {#if commentCount > 0}
     <div class="column-right">
       <div class="comment-count">
-        <span class="text-xsmall emoji">💬</span>
+        <span class="txt-tiny emoji">💬</span>
         <span>{commentCount}</span>
       </div>
     </div>
diff --git a/src/base/projects/Patches.svelte b/src/base/projects/Patches.svelte
index 72a7bd150..f22f7d431 100644
--- a/src/base/projects/Patches.svelte
+++ b/src/base/projects/Patches.svelte
@@ -41,7 +41,7 @@
 <style>
   .patches {
     padding: 0 2rem 0 8rem;
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
   }
   .patches-list {
     border-radius: var(--border-radius-small);
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte
index 2a64fb078..e54ba2cca 100644
--- a/src/base/projects/PeerSelector.svelte
+++ b/src/base/projects/PeerSelector.svelte
@@ -33,7 +33,7 @@
         console.debug("Not able to resolve peer identity for: ", p.id);
       }
       const key = p.person?.name
-        ? `<strong>${p.person.name}</strong> ${p.id}`
+        ? `<span class="txt-bold">${p.person.name}</span> ${p.id}`
         : p.id;
 
       return {
diff --git a/src/base/projects/Project.svelte b/src/base/projects/Project.svelte
index 45d4423e2..649f2a94e 100644
--- a/src/base/projects/Project.svelte
+++ b/src/base/projects/Project.svelte
@@ -94,11 +94,11 @@
     {/if}
   {:catch err}
     <div class="container center-content">
-      <div class="error error-message text-xsmall">
+      <div class="error error-message txt-tiny">
         <!-- TODO: Differentiate between (1) commit doesn't exist and (2) failed
              to fetch - this needs a change to the backend. -->
         API request to
-        <code class="text-xsmall">{err.url}</code>
+        <span class="txt-monospace">{err.url}</span>
         failed
       </div>
     </div>
@@ -141,7 +141,9 @@
   <div class="content">
     {#if peer}
       <Placeholder icon="🍂">
-        <span slot="title"><code>{formatSeedId(peer)}</code></span>
+        <span slot="title">
+          <span class="txt-monospace">{formatSeedId(peer)}</span>
+        </span>
         <span slot="body">Couldn't load remote source tree.</span>
       </Placeholder>
     {:else}
diff --git a/src/base/projects/ProjectMeta.svelte b/src/base/projects/ProjectMeta.svelte
index 7c2d197fe..b7d4c74e9 100644
--- a/src/base/projects/ProjectMeta.svelte
+++ b/src/base/projects/ProjectMeta.svelte
@@ -26,17 +26,17 @@
     display: flex;
     align-items: center;
     justify-content: left;
-    font-size: 2rem;
+    font-size: var(--font-size-huge);
     margin-bottom: 0.5rem;
   }
   .title .divider {
     color: var(--color-foreground-subtle);
     margin: 0 0.5rem;
-    font-weight: normal;
+    font-weight: var(--font-weight-normal);
   }
   .title .peer-id {
     color: var(--color-foreground-subtle);
-    font-weight: normal;
+    font-weight: var(--font-weight-normal);
     display: flex;
     align-items: center;
   }
@@ -47,7 +47,7 @@
   }
   .urn {
     font-family: var(--font-family-monospace);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     color: var(--color-foreground-faded);
     overflow-wrap: anywhere;
     display: flex;
@@ -66,6 +66,12 @@
     padding: 0 2rem 0 8rem;
   }
 
+  .truncate {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+
   @media (max-width: 960px) {
     .content {
       padding-left: 2rem;
@@ -74,7 +80,7 @@
 </style>
 
 <header class="content">
-  <div class="title bold">
+  <div class="title txt-bold txt-title">
     {#if project.profile}
       <a
         class="org-avatar"
@@ -86,7 +92,7 @@
       </a>
       <span class="divider">/</span>
     {/if}
-    <span class="text-truncate">
+    <span class="truncate">
       <Link to={rootPath()}>{project.name}</Link>
     </span>
     {#if peer}
@@ -98,7 +104,7 @@
     {/if}
   </div>
   <div class="urn">
-    <span class="text-truncate">{project.urn}</span>
+    <span class="truncate">{project.urn}</span>
     <Clipboard small text={project.urn} />
   </div>
   {#if !noDescription}
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index b859e2750..c08c69689 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -108,9 +108,6 @@
   td.diff-line-number {
     color: var(--color-foreground-4);
   }
-  .file-path {
-    font-size: 1rem;
-  }
   .browse {
     display: flex;
   }
@@ -119,7 +116,7 @@
 <article id={file.path} class="changeset-file">
   <header class="file-header" on:click={collapse}>
     <div class="actions">
-      <p class="file-path">{file.path}</p>
+      <p class="txt-regular">{file.path}</p>
       {#if mode === "created"}
         <Badge variant="positive">created</Badge>
       {:else if mode === "deleted"}
diff --git a/src/base/projects/Widget.svelte b/src/base/projects/Widget.svelte
index 200fa3b40..cd555e159 100644
--- a/src/base/projects/Widget.svelte
+++ b/src/base/projects/Widget.svelte
@@ -79,17 +79,17 @@
     border-color: var(--color-foreground-faded);
   }
   article .id {
-    font-size: 1rem;
-    font-weight: 600;
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-medium);
     margin-bottom: 0.5rem;
   }
   article .description {
     margin-bottom: 0.25rem;
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
   }
   article .stateHash {
     color: var(--color-secondary);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     min-height: 2rem;
     display: flex;
     align-items: center;
@@ -116,9 +116,9 @@
   article .id .urn {
     visibility: hidden;
     color: var(--color-foreground-faded);
-    font-weight: normal;
+    font-weight: var(--font-weight-normal);
     font-family: var(--font-family-monospace);
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
   }
   article .anchor-badge {
     display: none;
@@ -152,7 +152,7 @@
               {project.head}
             {/if}
           {:else}
-            <span class="subtle">✗ No head</span>
+            <span class="txt-missing">✗ No head</span>
           {/if}
         </slot>
       </span>
diff --git a/src/base/registrations/Index.svelte b/src/base/registrations/Index.svelte
index 37bd52ea8..f0d51f844 100644
--- a/src/base/registrations/Index.svelte
+++ b/src/base/registrations/Index.svelte
@@ -35,7 +35,7 @@
 
 <style>
   div.input-caption {
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     text-align: left;
     margin-left: 1.5rem;
     padding-left: 1.5rem;
@@ -69,12 +69,13 @@
 <main class="off-centered">
   <div>
     <div class="input-caption">
-      Register a <strong>{config.registrar.domain}</strong>
+      Register a <span class="txt-bold">{config.registrar.domain}</span>
       name
-      <div class="text-small explainer">
-        Register a unique name with our ENS registrar, under the <strong>
+      <div class="txt-small explainer">
+        Register a unique name with our ENS registrar, under the <span
+          class="txt-bold">
           radicle.eth
-        </strong>
+        </span>
         domain (e.g. cloudhead.radicle.eth). Radicle names never expire and free
         to register.
       </div>
diff --git a/src/base/registrations/New.svelte b/src/base/registrations/New.svelte
index 2a57c5b55..04e6fc013 100644
--- a/src/base/registrations/New.svelte
+++ b/src/base/registrations/New.svelte
@@ -82,22 +82,22 @@
   <span slot="body">
     {#if state === State.NameAvailable}
       {#if registrationOwner}
-        The name <strong>{name}</strong>
+        The name <span class="txt-bold">{name}</span>
         is available for registration under account
-        <strong>{formatAddress(registrationOwner)}</strong>
+        <span class="txt-bold">{formatAddress(registrationOwner)}</span>
         .
       {:else}
-        The name <strong>{name}</strong>
+        The name <span class="txt-bold">{name}</span>
         is available.
       {/if}
     {:else if state === State.NameUnavailable}
-      This name is <strong>not available</strong>
+      This name is <span class="txt-bold">not available</span>
       for registration.
     {:else if state === State.CheckingAvailability}
       <Loading small center />
     {:else if state === State.CheckingFailed && error}
       <Message error>
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         {error}
       </Message>
     {/if}
diff --git a/src/base/registrations/Submit.svelte b/src/base/registrations/Submit.svelte
index 9d7743315..11efe7751 100644
--- a/src/base/registrations/Submit.svelte
+++ b/src/base/registrations/Submit.svelte
@@ -70,17 +70,17 @@
       {:else if $state.connection === State.SigningPermit}
         Approving registration fee. Please confirm in your wallet.
       {:else if $state.connection === State.SigningCommit}
-        Committing to <strong>{name}</strong>
+        Committing to <span class="txt-bold">{name}</span>
         . Please confirm transaction in your wallet.
       {:else if $state.connection === State.Committing}
-        Waiting for <strong>commit</strong>
+        Waiting for <span class="txt-bold">commit</span>
         transaction to be processed&hellip;
       {:else if $state.connection === State.WaitingToRegister && $state.commitmentBlock}
         Waiting for commitment to mature. This may take a moment.
       {:else if $state.connection === State.SigningRegister}
         Proceeding with registration. Please confirm transaction in your wallet.
       {:else if $state.connection === State.Registering}
-        Waiting for <strong>register</strong>
+        Waiting for <span class="txt-bold">register</span>
         transaction to be processed&hellip;
       {/if}
     </span>
diff --git a/src/base/registrations/Update.svelte b/src/base/registrations/Update.svelte
index 16dbcedd5..6cea2b8c0 100644
--- a/src/base/registrations/Update.svelte
+++ b/src/base/registrations/Update.svelte
@@ -63,7 +63,7 @@
       <p>Your registration was successfully updated.</p>
     {:else if state.status === Status.Failed}
       <p class="error">
-        <strong>Error:</strong>
+        <span class="txt-bold">Error:</span>
         {state.error}
       </p>
     {/if}
diff --git a/src/base/registrations/View.svelte b/src/base/registrations/View.svelte
index b35553f15..7870567e4 100644
--- a/src/base/registrations/View.svelte
+++ b/src/base/registrations/View.svelte
@@ -226,6 +226,9 @@
       padding-right: 1rem;
     }
   }
+  .domain {
+    margin-bottom: 2rem;
+  }
 </style>
 
 <svelte:head>
@@ -249,7 +252,7 @@
 
     <span slot="body">
       <p>
-        The name <strong>{domain}</strong>
+        The name <span class="txt-bold">{domain}</span>
         is not registered.
       </p>
     </span>
@@ -261,7 +264,7 @@
 {:else if state.status === Status.Found}
   <main>
     <header>
-      <h1 class="bold">{domain}</h1>
+      <div class="domain txt-title txt-bold">{domain}</div>
       <div style="width: 4rem;">
         {#if !editable}
           <Button
diff --git a/src/base/resolver/List.svelte b/src/base/resolver/List.svelte
index e007a722a..25e644335 100644
--- a/src/base/resolver/List.svelte
+++ b/src/base/resolver/List.svelte
@@ -23,8 +23,8 @@
 <Modal subtle>
   <span slot="title">️🔍</span>
   <span slot="subtitle">
-    <p class="highlight text-medium">
-      <strong>Multiple names found for {query}</strong>
+    <p class="highlight txt-medium">
+      <span class="txt-bold">Multiple names found for {query}</span>
     </p>
   </span>
   <span slot="body">
diff --git a/src/base/seeds/View.svelte b/src/base/seeds/View.svelte
index e7721b0b5..57deae8f3 100644
--- a/src/base/seeds/View.svelte
+++ b/src/base/seeds/View.svelte
@@ -107,8 +107,8 @@
 {:then seed}
   <main>
     <header>
-      <span class="title">
-        <span class="bold">
+      <span class="title txt-title">
+        <span class="txt-bold">
           {hostName}
           <span class="desktop inline">{seed.emoji}</span>
         </span>
@@ -118,7 +118,7 @@
         {#if session?.signer}
           {#if siweSession}
             <div class="session-info">
-              <span class="signed-in text-small">Signed in as</span>
+              <span class="signed-in txt-small">Signed in as</span>
               <Address
                 address={siweSession.address}
                 {config}
diff --git a/src/base/vesting/Index.svelte b/src/base/vesting/Index.svelte
index dc9e1aaf2..62d99736f 100644
--- a/src/base/vesting/Index.svelte
+++ b/src/base/vesting/Index.svelte
@@ -39,7 +39,7 @@
 
 <style>
   div.input-caption {
-    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
     text-align: left;
     margin-left: 1.5rem;
     padding-left: 1.5rem;
@@ -85,21 +85,21 @@
                 <td class="label">Allocation</td>
                 <td>
                   {info.totalVesting}
-                  <strong>{info.symbol}</strong>
+                  <span class="txt-bold">{info.symbol}</span>
                 </td>
               </tr>
               <tr>
                 <td class="label">Withdrawn</td>
                 <td>
                   {info.withdrawn}
-                  <strong>{info.symbol}</strong>
+                  <span class="txt-bold">{info.symbol}</span>
                 </td>
               </tr>
               <tr>
                 <td class="label">Withdrawable</td>
                 <td>
                   {info.withdrawableBalance}
-                  <strong>{info.symbol}</strong>
+                  <span class="txt-bold">{info.symbol}</span>
                 </td>
               </tr>
             </table>
@@ -128,7 +128,7 @@
       </Modal>
     {:else}
       <div class="input-caption">
-        Enter your Radicle <strong>vesting contract</strong>
+        Enter your Radicle <span class="txt-bold">vesting contract</span>
         address
       </div>
       <div class="input-main">
diff --git a/src/components/Modal/ConnectWallet.svelte b/src/components/Modal/ConnectWallet.svelte
index cbc76d045..913723d4f 100644
--- a/src/components/Modal/ConnectWallet.svelte
+++ b/src/components/Modal/ConnectWallet.svelte
@@ -62,10 +62,10 @@
     </div>
 
     <div slot="subtitle">
-      <div class="text-small">
-        Scan the QR code with <strong>WalletConnect</strong>
+      <div class="txt-small">
+        Scan the QR code with <span class="txt-bold">WalletConnect</span>
         or use
-        <strong>Metamask</strong>
+        <span class="txt-bold">Metamask</span>
         .
       </div>
     </div>
diff --git a/src/ens/SetName.svelte b/src/ens/SetName.svelte
index 7c79f06fc..f604eed66 100644
--- a/src/ens/SetName.svelte
+++ b/src/ens/SetName.svelte
@@ -79,7 +79,7 @@
 
     <div slot="subtitle">
       The ENS name for {entity.address} was set to
-      <strong>{name}.{config.registrar.domain}</strong>
+      <span class="txt-bold">{name}.{config.registrar.domain}</span>
       .
     </div>
 
@@ -95,11 +95,11 @@
 
     <div slot="subtitle">
       <p>
-        The transaction to set the ENS name for <strong>
+        The transaction to set the ENS name for <span class="txt-bold">
           {formatAddress(entity.address)}
-        </strong>
+        </span>
         to
-        <strong>{name}.{config.registrar.domain}</strong>
+        <span class="txt-bold">{name}.{config.registrar.domain}</span>
         was proposed to:
       </p>
       <p><Address address={org.owner} {config} compact /></p>
@@ -113,9 +113,9 @@
   </Modal>
 {:else if state === State.Mismatch}
   <Error floating title="🧣" on:close>
-    The name <strong>{name}.{config.registrar.domain}</strong>
+    The name <span class="txt-bold">{name}.{config.registrar.domain}</span>
     does not resolve to
-    <strong>{entity.address}</strong>
+    <span class="txt-bold">{entity.address}</span>
     . Please update the ENS record for {name}.{config.registrar.domain} to point
     to the correct address and try again.
 
@@ -146,10 +146,12 @@
         Waiting for transaction to be processed...
       {:else if state === State.Proposing && org}
         Proposal is being submitted
-        <strong>{formatAddress(org.owner)}</strong>
+        <span class="txt-bold">{formatAddress(org.owner)}</span>
         , please sign the transaction in your wallet.
       {:else}
-        Set an ENS name for <strong>{formatAddress(entity.address)}</strong>
+        Set an ENS name for <span class="txt-bold">
+          {formatAddress(entity.address)}
+        </span>
         to associate a profile. ENS profiles provide human-identifiable data to your
         {label}, such as a unique name, avatar and URL, and help make your {label}
         more discoverable.