diff --git a/index.html b/index.html
index 31435e882..02f5ea5a2 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,66 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radicle</title>
+    <link
+      rel="preload"
+      href="/fonts/Inter-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/Inter-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/Inter-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/Inter-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radicle</title>
+    <link rel="stylesheet" type="text/css" href="/index.css" />
+    <link rel="stylesheet" type="text/css" href="/typography.css" />
+    <link rel="stylesheet" type="text/css" href="/colors.css" />
+  </head>
 
-  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-  <link rel="preload" href="/fonts/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-  <link rel="preload" href="/fonts/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-  <link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-
-  <link rel="stylesheet" href="/index.css">
-  <link rel="stylesheet" href="/colors.css">
-  <link rel="stylesheet" href="/typography.css">
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/public/colors.css b/public/colors.css
index 02d143200..c49ac9ebc 100644
--- a/public/colors.css
+++ b/public/colors.css
@@ -1,9 +1,121 @@
 :root {
+  --color-background-default: #f5f5ff;
+  --color-background-float: #fafaff;
+  --color-background-dip: #f5f5ff;
+  --color-foreground-contrast: #232563;
+  --color-foreground-dim: #6a6a81;
+  --color-foreground-emphasized: #8585ff;
+  --color-foreground-emphasized-hover: #7070ff;
+  --color-foreground-match-background: #f5f5ff;
+  --color-foreground-white: #ffffff;
+  --color-foreground-black: #000000;
+  --color-foreground-primary: #ff55ff;
+  --color-foreground-primary-hover: #ff8fff;
+  --color-foreground-success: #4fa877;
+  --color-foreground-red: #aa5078;
+  --color-foreground-yellow: #b29401;
+  --color-foreground-disabled: #9b9bb1;
+  --color-border-hint: #dbdbff;
+  --color-border-default: #dbdbff;
+  --color-border-focus: #7070ff;
+  --color-border-contrast: #24252d;
+  --color-border-error: #ce97af;
+  --color-border-merged: #ffe5ff;
+  --color-border-match-background: #f5f5ff;
+  --color-border-primary: #ff1aff;
+  --color-border-primary-hover: #ff55ff;
+  --color-border-selected: #dbdbff;
+  --color-border-warning: #ffe609;
+  --color-border-success: #97ceb0;
+  --color-fill-secondary: #7070ff;
+  --color-fill-secondary-hover: #8585ff;
+  --color-fill-ghost: #ebebff;
+  --color-fill-ghost-hover: #f5f5ff;
+  --color-fill-separator: #dbdbff;
+  --color-fill-primary: #ff55ff;
+  --color-fill-primary-hover: #ff70ff;
+  --color-fill-primary-shade: #ff1aff;
+  --color-fill-danger: #be7495;
+  --color-fill-yellow: #ffe609;
+  --color-fill-yellow-iconic: #ffff55;
+  --color-fill-gray: #9b9bb1;
+  --color-fill-secondary-shade: #5555ff;
+  --color-fill-diff-red: #efdce4;
+  --color-fill-diff-red-light: #f7eef2;
+  --color-fill-success: #4fa877;
+  --color-fill-diff-green: #badeca;
+  --color-fill-diff-green-light: #dcefe5;
+  --color-fill-float: #fafaff;
+  --color-fill-float-hover: #dbdbff;
+  --color-fill-merged: #ffeeff;
+  --color-fill-selected: #ebebff;
+  --color-fill-warning: #ffffe5;
+  --color-fill-counter: #fafaff;
+  --color-fill-counter-emphasized: #dbdbff;
+  --color-fill-delegate: #ffe5ff;
+  --color-fill-private: #fff5d6;
+  --color-fill-secondary-counter: #9497ff;
+  --color-fill-primary-counter: #ff8fff;
+  --color-fill-ghost-shade: #dbdbff;
+}
+
+:root[data-theme="dark"] {
   --color-background-default: #0a0d10;
+  --color-background-float: #14151a;
+  --color-background-dip: #000000;
   --color-foreground-contrast: #f9f9fb;
+  --color-foreground-dim: #9b9bb1;
+  --color-foreground-emphasized: #7070ff;
+  --color-foreground-emphasized-hover: #8585ff;
+  --color-foreground-match-background: #0a0d10;
+  --color-foreground-white: #ffffff;
+  --color-foreground-black: #000000;
+  --color-foreground-primary: #ff55ff;
+  --color-foreground-primary-hover: #ff8fff;
+  --color-foreground-success: #4fa877;
+  --color-foreground-red: #aa5078;
+  --color-foreground-yellow: #e5c001;
   --color-foreground-disabled: #6a6a81;
+  --color-border-hint: #24252d;
   --color-border-default: #2e2f38;
-  --color-background-float: #14151a;
+  --color-border-focus: #7070ff;
+  --color-border-contrast: #ebebff;
+  --color-border-error: #6b2b42;
+  --color-border-merged: #6b006b;
+  --color-border-match-background: #0a0d10;
+  --color-border-primary: #ff1aff;
+  --color-border-primary-hover: #ff55ff;
+  --color-border-selected: #232563;
+  --color-border-warning: #4c4000;
+  --color-border-success: #2a5a40;
+  --color-fill-secondary: #7070ff;
+  --color-fill-secondary-hover: #8585ff;
+  --color-fill-secondary-shade: #5555ff;
+  --color-fill-ghost: #24252d;
+  --color-fill-ghost-hover: #2e2f38;
+  --color-fill-separator: #24252d;
+  --color-fill-primary: #ff1aff;
+  --color-fill-primary-hover: #ff4dff;
+  --color-fill-primary-shade: #e500e5;
+  --color-fill-danger: #aa5078;
+  --color-fill-yellow: #ffe609;
+  --color-fill-yellow-iconic: #ffff55;
+  --color-fill-gray: #9b9bb1;
+  --color-fill-diff-red: #4d1929;
+  --color-fill-diff-red-light: #2d060d;
+  --color-fill-success: #4fa877;
+  --color-fill-diff-green: #183425;
+  --color-fill-diff-green-light: #142a1d;
+  --color-fill-float: #14151a;
   --color-fill-float-hover: #1b1c22;
-  --color-fill-ghost: #24252d;
+  --color-fill-merged: #1a001a;
+  --color-fill-selected: #16173d;
+  --color-fill-warning: #191500;
+  --color-fill-counter: #393a46;
+  --color-fill-counter-emphasized: #16173d;
+  --color-fill-delegate: #3d003d;
+  --color-fill-private: #4c4000;
+  --color-fill-secondary-counter: #9497ff;
+  --color-fill-primary-counter: #ff8fff;
+  --color-fill-ghost-shade: #1b1c22;
 }
diff --git a/public/typography.css b/public/typography.css
index a2ead623b..a771557bd 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -5,18 +5,21 @@
   font-display: swap;
   src: url("fonts/Inter-Regular.woff2");
 }
+
 @font-face {
   font-family: "Inter";
   font-weight: 500;
   font-display: swap;
   src: url("fonts/Inter-Medium.woff2");
 }
+
 @font-face {
   font-family: "Inter";
   font-weight: 600;
   font-display: swap;
   src: url("fonts/Inter-SemiBold.woff2");
 }
+
 @font-face {
   font-family: "Inter";
   font-weight: 700;
@@ -24,20 +27,79 @@
   src: url("fonts/Inter-Bold.woff2");
 }
 
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/JetBrainsMono-Regular.woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/JetBrainsMono-Medium.woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 600;
+  font-display: swap;
+  src: url("fonts/JetBrainsMono-SemiBold.woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/JetBrainsMono-Bold.woff2");
+}
+
 :root {
   --font-family-sans-serif: Inter, sans-serif;
+  --font-family-monospace: monospace;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-size-tiny: 0.75rem; /* 12px */
   --font-size-small: 0.875rem; /* 14px */
   --font-size-regular: 1rem; /* 16px */
   --font-size-medium: 1.25rem; /* 20px */
-  --font-weight-semibold: 600;
+  --font-size-large: 1.5rem; /* 24px */
+  --font-size-x-large: 2rem; /* 32px */
+  --font-size-xx-large: 3rem; /* 48px */
+}
+
+[data-codefont="system"] {
+  --font-family-monospace: monospace;
+}
+
+[data-codefont="jetbrains"] {
+  --font-family-monospace: "JetBrains Mono";
 }
 
 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: "zero";
+  /* The root element font size has to be set in px,
+   * otherwise Safari breaks. */
   font-size: 16px;
   font-weight: var(--font-weight-regular);
+  line-height: 1.5;
 }
 
+p {
+  margin: 1rem 0;
+}
+.txt-tiny {
+  font-size: var(--font-size-tiny);
+}
 .txt-small {
   font-size: var(--font-size-small);
 }
@@ -47,7 +109,36 @@ html {
 .txt-medium {
   font-size: var(--font-size-medium);
 }
+.txt-large {
+  font-size: var(--font-size-large);
+}
+.txt-huge {
+  font-size: var(--font-size-x-large);
+}
+.txt-humongous {
+  font-size: var(--font-size-xx-large);
+}
 
+.txt-monospace {
+  font-family: var(--font-family-monospace);
+}
+.txt-bold {
+  font-weight: var(--font-weight-bold) !important;
+}
 .txt-semibold {
   font-weight: var(--font-weight-semibold) !important;
 }
+.txt-missing {
+  color: var(--color-foreground-dim);
+}
+.txt-emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}
+.txt-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}