Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Refactor typography styles
Rūdolfs Ošiņš committed 3 years ago
commit 591c19a25628b969c6bafe3a4432bc0a530250b4
parent ff657efa9343dc3e232e8759f20a0c8e66378d89
67 files changed +309 -314
modified 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()
modified 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" />
deleted public/fonts/SourceCodePro-Bold.otf
deleted public/fonts/SourceCodePro-Semibold.otf
modified 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);

}
modified 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;

}
modified 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}
modified 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>
modified 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>
modified 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>
modified 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;
modified 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;

  }
modified 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);

  }
modified 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}
modified src/Error.svelte
@@ -33,7 +33,7 @@


  <span slot="body">

    <slot>
- 
      <strong>Error:</strong>
+ 
      <span class="txt-bold">Error:</span>

      {body}

    </slot>

  </span>
modified 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}
modified 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}
modified 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;
modified 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}
modified 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;
modified 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;
modified 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">
modified 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 {
modified 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" />
modified 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}
modified 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;
modified 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;
modified 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;
modified 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;
modified 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}
modified 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>
modified 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>
modified 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>
modified 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">
modified 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>
modified 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}
modified 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">
modified 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>
modified 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}
modified 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}
modified 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 {
modified 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>
modified 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>
modified 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);
modified 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"
modified 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>
modified 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);
modified 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"
modified 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>
modified 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>
modified 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>
modified 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);
modified 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 {
modified 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}
modified 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}
modified 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"}
modified 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>
modified 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>
modified 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}
modified 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>
modified 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}
modified 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
modified 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">
modified 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}
modified 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">
modified 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>
modified 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.