diff --git a/index.html b/index.html
index 843e53982..31435e882 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,15 @@
   <meta charset="UTF-8" />
   <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="stylesheet" href="/index.css">
+  <link rel="stylesheet" href="/colors.css">
+  <link rel="stylesheet" href="/typography.css">
 </head>
 
 <body>
diff --git a/public/colors.css b/public/colors.css
new file mode 100644
index 000000000..06cd02e0c
--- /dev/null
+++ b/public/colors.css
@@ -0,0 +1,4 @@
+:root {
+  --color-background-default: #0a0d10;
+  --color-foreground-contrast: #f9f9fb;
+}
diff --git a/public/index.css b/public/index.css
new file mode 100644
index 000000000..9a9151472
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color: var(--color-foreground-contrast);
+  background-color: var(--color-background-default);
+}
diff --git a/public/typography.css b/public/typography.css
new file mode 100644
index 000000000..a9dc7e84a
--- /dev/null
+++ b/public/typography.css
@@ -0,0 +1,48 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  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;
+  font-display: swap;
+  src: url("fonts/Inter-Bold.woff2");
+}
+
+:root {
+  --font-family-sans-serif: Inter, sans-serif;
+  --font-size-small: 0.875rem; /* 14px */
+  --font-size-regular: 1rem; /* 16px */
+  --font-size-medium: 1.25rem; /* 20px */
+}
+
+html {
+  font-family: var(--font-family-sans-serif);
+  font-size: 16px;
+  font-weight: var(--font-weight-regular);
+}
+
+.txt-small {
+  font-size: var(--font-size-small);
+}
+.txt-regular {
+  font-size: var(--font-size-regular);
+}
+.txt-medium {
+  font-size: var(--font-size-medium);
+}