diff --git a/frontend/package.json b/frontend/package.json
index 3c7f9d1..da02724 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,5 +16,8 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-svelte": "^7.1.5",
     "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "@fontsource-variable/open-sans": "^5.0.6"
   }
 }
diff --git a/frontend/rollup.config.mjs b/frontend/rollup.config.mjs
index 60e103a..70824f7 100644
--- a/frontend/rollup.config.mjs
+++ b/frontend/rollup.config.mjs
@@ -45,6 +45,7 @@ export default {
 		copy({
 			targets: [
 				{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
+				{ src: "node_modules/@fontsource-variable/open-sans/files/open-sans-latin-wght-*", dest: "public/build/files" },
 			]
 		}),
 
diff --git a/frontend/src/components/ChipBar.svelte b/frontend/src/components/ChipBar.svelte
index 3bbff22..fb67cb6 100644
--- a/frontend/src/components/ChipBar.svelte
+++ b/frontend/src/components/ChipBar.svelte
@@ -22,10 +22,11 @@
         align-items: center;
         color: var(--foreground-color-2);
         background-color: var(--background-color-2);
-        padding: 0.35em;
+        padding: 0.5em;
         margin-top: var(--space-xs);
         margin-right: var(--space-sm);
-        border-radius: 0.5em;
+        border-radius: 0.65em;
+        font-weight: 500;
     }
 
     button:hover {
diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 0031bdf..d5d9372 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -31,16 +31,16 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
 
     .avatar-container {
         margin-top: 5px;
-        margin-left: var(--space-sm);
-        margin-right: var(--space-sm);
-        width: 32px;
+        margin-left: var(--space-smplus);
+        margin-right: var(--space-smplus);
+        width: 40px;
         flex-shrink: 0;
     }
 
     .avatar {
         border-radius: 50%;
-        width: 32px;
-        height: 32px;
+        width: 40px;
+        height: 40px;
     }
 
     .message:hover, .message.pinged {
@@ -61,7 +61,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-        font-weight: bold;
+        font-weight: 600;
         color: var(--foreground-color-2);
     }
 
@@ -118,7 +118,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
     <div class="avatar-container">
         {#if !message._clumped}
             {#if message.author_avatar}
-                <img class="avatar" src={avatarUrl(message.author_avatar, 32)} alt=" ">
+                <img class="avatar" src={avatarUrl(message.author_avatar, 64)} alt=" ">
             {:else}
                 <span class="material-icons-outlined circled-icon">alternate_email</span>
             {/if}
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 9d3061b..fc97b05 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -117,7 +117,6 @@
         border-radius: var(--radius-md);
         padding: var(--space-sm);
         font-size: inherit;
-        line-height: 24px;
         resize: none;
         contain: strict;
     }
@@ -128,11 +127,11 @@
 
     .message-input::placeholder {
         color: var(--foreground-color-4);
-        font-weight: 300;
+        font-weight: 400;
     }
 
     .send-button {
-        margin-left: var(--space-sm);
+        margin-left: var(--space-xsplus);
         border-radius: 50%;
         background-color: var(--purple-1);
         padding: 12px;
diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index bec197a..76ea5bc 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -95,8 +95,8 @@
         border-top: thin solid var(--background-color-3);
         padding: 0;
         margin: var(--space-md);
-        margin-bottom: var(--space-lg);
-        margin-top: var(--space-lg);
+        margin-bottom: var(--space-md);
+        margin-top: var(--space-md);
     }
     
     .time-separator-text {
@@ -106,8 +106,9 @@
         padding-left: var(--space-xs);
         padding-right: var(--space-xs);
         background-color: var(--background-color-2);
-        color: var(--foreground-color-2);
-        font-size: 0.75em;
+        color: var(--foreground-color-3);
+        font-size: 0.75rem;
+        font-weight: 500;
     }
 </style>
 
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index cc827ba..90be95c 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -99,14 +99,17 @@
         display: flex;
         justify-content: left;
         flex-direction: row;
-        padding: var(--space-md);
+        padding: var(--space-smplus);
     }
     .switch-option-card .info {
         display: flex;
         flex-direction: column;
     }
+    .switch-option-card .info .info-heading {
+        font-weight: 500;
+    }
     .switch-option-card .option-switch {
-        padding-left: var(--space-xs);
+        padding-left: var(--space-sm);
         margin-left: auto;
         justify-self: flex-end;
     }
@@ -172,7 +175,7 @@
             {:else if selectedTab == "PRIVACY"}
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Let others know when I'm typing</span>
+                        <span class="info-heading">Let others know when I'm typing</span>
                         <span class="text-fg-3 text-small">If this is enabled, other users will see an indicator while you're typing a message.</span>
                     </div>
                     <div class="option-switch">
@@ -181,7 +184,7 @@
                 </div>
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Make Waffle work</span>
+                        <span class="info-heading">Make Waffle work</span>
                         <span class="text-fg-3 text-small">Waffle needs to store data such as your messages, created channels, your username, your profile picture and more in order to work. If you'd like to stop this, you can delete your account.</span>
                     </div>
                 </div>
@@ -192,9 +195,11 @@
                     <button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
                 </div>
 
+                <div class="separator" />
+
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Reduce animations</span>
+                        <span class="info-heading">Reduce animations</span>
                         <span class="text-fg-3 text-small">Reduce the amount of animations and visual effects.</span>
                     </div>
                     <div class="option-switch">
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index d3b7443..2709a4c 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -20,6 +20,11 @@
         border-radius: var(--radius-md);
         box-shadow: 0px 4px 16px rgba(17,17,26,0.2), 0px 8px 32px rgba(17,17,26,0.2);
     }
+
+    button {
+        margin-left: var(--space-xxs);
+        color: var(--foreground-color-2);
+    }
 </style>
 
 <div class="toast" transition:maybeModalScale>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index a668d24..7e35c87 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,6 +1,26 @@
 /* fonts */
 /* FIXME: fonts greatly increase payload size */
 
+/* open-sans-latin-ext-wght-normal */
+@font-face {
+	font-family: 'Open Sans Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 300 800;
+	src: url(./files/open-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
+	unicode-range: U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  }
+  
+  /* open-sans-latin-wght-normal */
+  @font-face {
+	font-family: 'Open Sans Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 300 800;
+	src: url(./files/open-sans-latin-wght-normal.woff2) format('woff2-variations');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  }
+
 @font-face {
 	font-family: "Iosevka Waffle Web";
 	font-display: swap;
@@ -34,13 +54,13 @@
 /* top-level */
 
 :root {
-	--purple-1: hsl(280, 78%, 50%);
+	--purple-1: hsl(273, 67%, 53%);
 	--blue-1: hsl(200, 78%, 50%);
 	--green-1: hsl(140, 78%, 50%);
 	--yellow-1: hsl(50, 78%, 50%);
 	--red-1: hsl(2, 78%, 65%);
 
-	--purple-2: hsl(280, 78%, 45%);
+	--purple-2: hsl(273, 64%, 48%);
 	--blue-2: hsl(200, 78%, 45%);
 	--green-2: hsl(140, 78%, 40%);
 	--yellow-2: hsl(50, 78%, 60%);
@@ -52,6 +72,7 @@
 	--space-xs: calc(0.5 * var(--space-unit));
 	--space-xsplus: calc(0.65 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
+	--space-smplus: calc(0.80 * var(--space-unit));
 	--space-norm: var(--space-unit);
 	--space-normplus: calc(var(--space-unit) + var(--space-sm));
 	--space-md: calc(1.25 * var(--space-unit));
@@ -94,7 +115,7 @@
 	--foreground-color-2: hsl(63, 10%, 82%);
 	--foreground-color-3: hsl(63, 2%, 60%);
 	--foreground-color-4: hsl(63, 2%, 49%);
-	--foreground-special-color-1: hsl(180, 2%, 70%);
+	--foreground-special-color-1: hsl(180, 2%, 60%);
 	--colored-element-text-color: var(--foreground-color-1);
 }
 
@@ -125,8 +146,9 @@ body {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-1);
 	font-size: 100%;
-	font-family: "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-	line-height: 1.75;
+	font-family: "Open Sans Variable", "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	line-height: 26px;
+	letter-spacing: 0.01em;
 
 	display: flex;
 	flex-direction: row;
@@ -167,7 +189,7 @@ body {
 }
 
 .top-bar-heading.accent {
-	font-weight: bold;
+	font-weight: 600;
 }
 
 .info-bar {
@@ -220,7 +242,7 @@ body {
 }
 
 .modal-header {
-	font-weight: bold;
+	font-weight: 650;
 	padding: var(--space-md);
 }
 
@@ -231,7 +253,7 @@ body {
 
 .modal-footer {
 	margin-top: auto;
-	padding: var(--space-md);
+	padding: var(--space-norm);
 	background-color: var(--background-color-1);
 	border-bottom-right-radius: var(--radius-lg);
 	border-bottom-left-radius: var(--radius-lg);
@@ -281,7 +303,7 @@ body {
 	text-transform: uppercase;
 	color: var(--foreground-color-2);
 	user-select: none;
-	font-weight: 300;
+	font-size: var(--h6);
 }
 
 .input {
@@ -305,10 +327,11 @@ body {
 	background: none;
 	text-align: center;
 	border: none;
-	padding: 0.6em;
+	padding: 0.7em;
 	border-radius: 1em;
 	font: inherit;
 	user-select: none;
+	font-weight: 550;
 }
 
 .button:hover {
@@ -489,7 +512,7 @@ body {
 	font: inherit;
 	border-radius: var(--radius-md);
 	width: 100%;
-	font-weight: 300;
+	font-weight: 500;
 	font-size: var(--h6);
 }
 
@@ -516,7 +539,6 @@ body {
 .sidebar-button.selected {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-2);
-	font-weight: 400;
 }
 
 .sidebar-button.selected .icon-button {
@@ -581,7 +603,6 @@ body {
 }
 
 html {
-	line-height: 1.15;
 	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
 }
 
@@ -601,7 +622,7 @@ small {
 button, input, optgroup, select, textarea {
 	font-family: inherit;
 	font-size: 100%;
-	line-height: 1.15;
+	line-height: inherit;
 	margin: 0;
 }
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e8a7588..561cf15 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -10,6 +10,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@fontsource-variable/open-sans@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/open-sans/-/open-sans-5.0.6.tgz#d92c5de9843b999d914e444afda54c39a752d949"
+  integrity sha512-ZEbqIsXo84fQeQwU2CPyI3W+8QMdbTVBS+CRbWBDA8nPbV9pyRCBy3UceyPrA7l1MJx4qaz5wv5hHQXDadgCzg==
+
 "@fontsource/material-icons-outlined@^4.5.4":
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"