diff --git a/frontend/src/components/Status/index.tsx b/frontend/src/components/Status/index.tsx
index f1d37f4..438f4c9 100644
--- a/frontend/src/components/Status/index.tsx
+++ b/frontend/src/components/Status/index.tsx
@@ -22,7 +22,7 @@ export default component$((props: Props) => {
 	const handleContentClick = $(() => nav(statusUrl))
 
 	return (
-		<div class="p-4 border-t border-slate-600 pointer">
+		<div class="p-4 border-t border-wildebeest-600 pointer">
 			<div onClick$={handleContentClick}>
 				<div class="flex justify-between mb-3">
 					<div class="flex">
@@ -32,11 +32,11 @@ export default component$((props: Props) => {
 								{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
 								<a class="no-underline">{status.account.display_name}</a>
 							</div>
-							<div class="text-slate-500">@{status.account.username}</div>
+							<div class="text-wildebeest-500">@{status.account.username}</div>
 						</div>
 					</div>
 					<Link class="no-underline" href={statusUrl}>
-						<div class="text-slate-500 flex items-center">
+						<div class="text-wildebeest-500 flex items-center">
 							<i class="fa fa-xs fa-globe" />
 							<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
 						</div>
@@ -49,11 +49,11 @@ export default component$((props: Props) => {
 
 			{status.card && status.media_attachments.length == 0 && (
 				<a class="no-underline" href={status.card.url}>
-					<div class="rounded flex border border-slate-600">
+					<div class="rounded flex border border-wildebeest-600">
 						<img class="preview-image" src={status.card.image} />
 						<div class="p-3 overflow-hidden">
-							<div class="overflow-ellipsis text-sm text-bold text-slate-400">{status.card.title}</div>
-							<div class="overflow-ellipsis mt-2 text-sm text-slate-500">{status.card.provider_name}</div>
+							<div class="overflow-ellipsis text-sm text-bold text-wildebeest-400">{status.card.title}</div>
+							<div class="overflow-ellipsis mt-2 text-sm text-wildebeest-500">{status.card.provider_name}</div>
 						</div>
 					</div>
 				</a>
diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx
index 97b1e3a..7c0c254 100644
--- a/frontend/src/components/StickyHeader/StickyHeader.tsx
+++ b/frontend/src/components/StickyHeader/StickyHeader.tsx
@@ -2,7 +2,7 @@ import { component$, Slot } from '@builder.io/qwik'
 
 export default component$(() => {
 	return (
-		<header class="bg-slate-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
+		<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
 			<Slot />
 		</header>
 	)
diff --git a/frontend/src/components/TagDetailsCard/index.tsx b/frontend/src/components/TagDetailsCard/index.tsx
index 1ce4751..647aabc 100644
--- a/frontend/src/components/TagDetailsCard/index.tsx
+++ b/frontend/src/components/TagDetailsCard/index.tsx
@@ -17,8 +17,8 @@ export default component$((props: Props) => {
 	return (
 		<div class="flex justify-between items-center">
 			<div class="">
-				<div class="text-sm text-bold text-slate-400">#{props.tagDetails.name}</div>
-				<div class="text-xs text-slate-500">{formatHistory(history)}</div>
+				<div class="text-sm text-bold text-wildebeest-400">#{props.tagDetails.name}</div>
+				<div class="text-xs text-wildebeest-500">{formatHistory(history)}</div>
 			</div>
 			<Sparkline data={data} />
 		</div>
diff --git a/frontend/src/components/layout/LeftColumn/LeftColumn.tsx b/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
index b32b6d7..281046c 100644
--- a/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
+++ b/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
@@ -8,7 +8,7 @@ export default component$(() => {
 
 	return (
 		<div class="hidden xl:block text-sm">
-			<p class="text-slate-400">
+			<p class="text-wildebeest-400">
 				<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
 				<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.
 			</p>
diff --git a/frontend/src/components/layout/RightColumn/RightColumn.tsx b/frontend/src/components/layout/RightColumn/RightColumn.tsx
index e65da27..23b8b1a 100644
--- a/frontend/src/components/layout/RightColumn/RightColumn.tsx
+++ b/frontend/src/components/layout/RightColumn/RightColumn.tsx
@@ -18,7 +18,7 @@ export default component$(() => {
 		let classList = 'mx-4 my-5 block no-underline text-semi max-w-max ' + location.pathname
 
 		if (linkActiveRegex.test(location.pathname)) {
-			classList += ' text-indigo-400'
+			classList += ' text-wildebeest-vibrant-400'
 		} else {
 			classList += ' hover:text-white focus:text-white'
 		}
@@ -40,17 +40,17 @@ export default component$(() => {
 	const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
 
 	return (
-		<div class="bg-slate-800 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-slate-400">
+		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200">
 			<div>
 				<div class="xl:p-4">
 					<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
 						<WildebeestLogo size="medium" />
 					</a>
 				</div>
-				<hr class="hidden xl:block border-t border-slate-700 my-3" />
+				<hr class="hidden xl:block border-t border-wildebeest-700 my-3" />
 				{links.map((link) => renderNavLink(link))}
 				<div class="xl:hidden">
-					<hr class="border-t border-slate-700 my-3" />
+					<hr class="border-t border-wildebeest-700 my-3" />
 					{renderNavLink(aboutLink)}
 				</div>
 			</div>
diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
index 782d483..8db88fa 100644
--- a/frontend/src/root.tsx
+++ b/frontend/src/root.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
 				<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
 				<RouterHead />
 			</head>
-			<body lang="en" class="bg-slate-900 text-white min-w-min">
+			<body lang="en" class="bg-wildebeest-900 text-white min-w-min">
 				<RouterOutlet />
 				<ServiceWorkerRegister />
 			</body>
diff --git a/frontend/src/routes/[accountId]/[statusId]/index.tsx b/frontend/src/routes/[accountId]/[statusId]/index.tsx
index c165a61..b97ab91 100644
--- a/frontend/src/routes/[accountId]/[statusId]/index.tsx
+++ b/frontend/src/routes/[accountId]/[statusId]/index.tsx
@@ -25,15 +25,15 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="flex justify-between items-center xl:rounded-t header bg-slate-700">
-					<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
+				<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
+					<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
 						<i class="fa fa-chevron-left mr-2" />
 						<span class="hover:underline">Back</span>
 					</Link>
-					<i class="fa fa-eye mr-4 text-slate-400" />
+					<i class="fa fa-eye mr-4 text-wildebeest-400" />
 				</div>
 			</StickyHeader>
-			<div class="bg-slate-700 p-4">
+			<div class="bg-wildebeest-700 p-4">
 				{/* Account Card */}
 				<div class="flex">
 					<Avatar src={status.account.avatar} />
@@ -42,7 +42,7 @@ export default component$(() => {
 							{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
 							<a class="no-underline">{status.account.display_name}</a>
 						</div>
-						<div class="p-1 text-slate-400">@{status.account.acct}</div>
+						<div class="p-1 text-wildebeest-400">@{status.account.acct}</div>
 					</div>
 				</div>
 				{/* Content */}
@@ -54,7 +54,7 @@ export default component$(() => {
 					</div>
 				)}
 				{/* Info Tray */}
-				<div class="text-slate-500 mt-4 text-sm">
+				<div class="text-wildebeest-500 mt-4 text-sm">
 					<a href={status.url} class="no-underline">
 						<span>{formatDateTime(status.created_at)}</span>
 					</a>
diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss
index 689fe6b..a669e47 100644
--- a/frontend/src/routes/explore/layout.scss
+++ b/frontend/src/routes/explore/layout.scss
@@ -32,6 +32,6 @@
 
   &::after {
     bottom: -1px;
-    border-color: transparent transparent #282c37;
+    border-color: transparent transparent var(--wildebeest-color-700);
   }
 }
\ No newline at end of file
diff --git a/frontend/src/routes/explore/layout.tsx b/frontend/src/routes/explore/layout.tsx
index f426a62..56c8f6a 100644
--- a/frontend/src/routes/explore/layout.tsx
+++ b/frontend/src/routes/explore/layout.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
 
 		return (
 			<div class={`py-4 ${isActive ? 'active' : ''}`}>
-				<Link href={linkTarget} class="no-underline text-bold text-slate-200 py-4">
+				<Link href={linkTarget} class="no-underline text-bold text-wildebeest-200 py-4">
 					{linkText}
 				</Link>
 			</div>
@@ -42,12 +42,12 @@ export default component$(() => {
 	return (
 		<div class="explore-wrapper flex flex-col">
 			<StickyHeader>
-				<h2 class="text-reg text-md m-0 p-4 bg-slate-700 xl:rounded-t">
+				<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
 					<i class="fa fa-hashtag fa-fw mr-3" />
 					<span>Explore</span>
 				</h2>
 			</StickyHeader>
-			<div class="bg-slate-900 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
+			<div class="bg-wildebeest-800 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
 			<div class="flex-auto">
 				<Slot />
 			</div>
diff --git a/frontend/src/routes/explore/links/index.tsx b/frontend/src/routes/explore/links/index.tsx
index a3ade26..5fe2356 100644
--- a/frontend/src/routes/explore/links/index.tsx
+++ b/frontend/src/routes/explore/links/index.tsx
@@ -21,11 +21,11 @@ export default component$(() => {
 					<>
 						{links.map((link) => (
 							<a href={link.url} class="no-underline" target="_blank">
-								<div class="p-4 flex justify-between border-b border-slate-600 hover:bg-slate-700">
+								<div class="p-4 flex justify-between border-b border-wildebeest-600 hover:bg-wildebeest-700">
 									<div class="mr-6">
-										<div class="my-2 text-sm text-slate-400">{link.provider_name}</div>
+										<div class="my-2 text-sm text-wildebeest-400">{link.provider_name}</div>
 										<div class="mb-2 text-lg text-bold leading-normal">{link.title}</div>
-										<div class="text-sm text-slate-400">{formatHistory(link.history)}</div>
+										<div class="text-sm text-wildebeest-400">{formatHistory(link.history)}</div>
 									</div>
 									<div>
 										<img class="thumbnail" src={link.image} />
diff --git a/frontend/src/routes/explore/tags/index.tsx b/frontend/src/routes/explore/tags/index.tsx
index b2e864e..c1e0323 100644
--- a/frontend/src/routes/explore/tags/index.tsx
+++ b/frontend/src/routes/explore/tags/index.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
 				return (
 					<div class="mb-4">
 						{tags.map((tagDetails) => (
-							<div key={tagDetails.name} class="p-4 border-t border-slate-600">
+							<div key={tagDetails.name} class="p-4 border-t border-wildebeest-600">
 								<TagDetailsCard tagDetails={tagDetails} />
 							</div>
 						))}
diff --git a/frontend/src/routes/first-login/index.tsx b/frontend/src/routes/first-login/index.tsx
index 17a162c..4906381 100644
--- a/frontend/src/routes/first-login/index.tsx
+++ b/frontend/src/routes/first-login/index.tsx
@@ -20,7 +20,7 @@ export default component$(() => {
 							id="login-username"
 							name="username"
 							pattern="[^@]+"
-							class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
+							class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-500 flex-1 w-full"
 						/>
 						<span>@{domain}</span>
 					</div>
@@ -32,12 +32,12 @@ export default component$(() => {
 					<input
 						id="login-name"
 						name="name"
-						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400"
+						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
 					/>
 				</div>
 				<button
 					type="submit"
-					class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
+					class="mb-9 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
 				>
 					Register
 				</button>
diff --git a/frontend/src/routes/layout.tsx b/frontend/src/routes/layout.tsx
index d3a26d9..9764aee 100644
--- a/frontend/src/routes/layout.tsx
+++ b/frontend/src/routes/layout.tsx
@@ -32,7 +32,7 @@ export default component$(() => {
 	return (
 		<>
 			{showHeaderAndColumns && (
-				<header class="h-[3.9rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
+				<header class="h-[3.9rem] z-50 sticky top-0 bg-wildebeest-600 p-3 w-full border-b border-wildebeest-700 xl:hidden">
 					<a class="no-underline flex items-center w-max" href="https://mastodon.social">
 						<WildebeestLogo size="small" />
 					</a>
@@ -47,12 +47,12 @@ export default component$(() => {
 					</div>
 				)}
 				<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
-					<div class={`bg-slate-800 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
+					<div class={`bg-wildebeest-600 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
 						<Slot />
 					</div>
 				</div>
 				{showHeaderAndColumns && (
-					<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
+					<div class="w-fit md:w-72 border-l xl:border-l-0 border-wildebeest-700 xl:mx-[10px]">
 						<div class="sticky top-[3.9rem] xl:top-[10px]">
 							<RightColumn />
 						</div>
diff --git a/frontend/src/routes/public/index.tsx b/frontend/src/routes/public/index.tsx
index 2851800..abab5bc 100644
--- a/frontend/src/routes/public/index.tsx
+++ b/frontend/src/routes/public/index.tsx
@@ -21,8 +21,8 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
-					<i class="fa fa-globe fa-fw mr-3 text-slate-100" />
+				<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center text-white">
+					<i class="fa fa-globe fa-fw mr-3" />
 					<span>Federated timeline</span>
 				</div>
 			</StickyHeader>
diff --git a/frontend/src/routes/public/local/index.tsx b/frontend/src/routes/public/local/index.tsx
index 667cd04..4f7c9d4 100644
--- a/frontend/src/routes/public/local/index.tsx
+++ b/frontend/src/routes/public/local/index.tsx
@@ -20,8 +20,8 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
-					<i class="fa fa-users fa-fw mr-3 text-slate-100" />
+				<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center">
+					<i class="fa fa-users fa-fw mr-3" />
 					<span>Local timeline</span>
 				</div>
 			</StickyHeader>
diff --git a/frontend/src/routes/start-instance/step-1.tsx b/frontend/src/routes/start-instance/step-1.tsx
index 50a8430..454c14d 100644
--- a/frontend/src/routes/start-instance/step-1.tsx
+++ b/frontend/src/routes/start-instance/step-1.tsx
@@ -20,7 +20,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
 					<input
 						id="start-instance-title"
 						name="title"
-						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
+						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
 						value={instanceConfig.title}
 						onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
 					/>
@@ -36,7 +36,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
 						id="start-instance-email"
 						name="email"
 						type="email"
-						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
+						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
 						value={instanceConfig.email}
 						onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
 					/>
@@ -51,7 +51,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
 					<input
 						id="start-instance-description"
 						name="description"
-						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
+						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
 						value={instanceConfig.description}
 						onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
 					/>
@@ -60,7 +60,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
 
 			<button
 				type="submit"
-				class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
+				class="mb-9 bg-wildebeest-vibrant-400 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-400 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
 				preventdefault:click
 				onClick$={async () => {
 					setLoading(true)
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 847b53b..081633d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+	--wildebeest-color-200: #d9e1e8;
+	--wildebeest-color-400: #9baec8;
+	--wildebeest-color-500: #606984;
+	--wildebeest-color-700: #313543;
+	--wildebeest-color-600: #282c37;
+	--wildebeest-color-800: #1f232b;
+	--wildebeest-color-900: #191b22;
+	--wildebeest-vibrant-color-400: #8c8dff;
+	--wildebeest-vibrant-color-500: #6364ff;
+	--wildebeest-vibrant-color-600: #595aff;
+}
+
 body {
 	font-family: ui-sans-serif, sans-serif, ui-sans-serif;
 	line-height: 1.25rem;
@@ -20,4 +33,4 @@ button {
 
 .pointer {
 	cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a5a0b69..b5c7859 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -2,7 +2,20 @@
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'wildebeest-200': 'var(--wildebeest-color-200)',
+        'wildebeest-400': 'var(--wildebeest-color-400)',
+        'wildebeest-500': 'var(--wildebeest-color-500)',
+        'wildebeest-600': 'var(--wildebeest-color-600)',
+        'wildebeest-700': 'var(--wildebeest-color-700)',
+        'wildebeest-800': 'var(--wildebeest-color-800)',
+        'wildebeest-900': 'var(--wildebeest-color-900)',
+        'wildebeest-vibrant-400': 'var(--wildebeest-vibrant-color-400)',
+        'wildebeest-vibrant-500': 'var(--wildebeest-vibrant-color-500)',
+        'wildebeest-vibrant-600': 'var(--wildebeest-vibrant-color-600)',
+      }
+    },
   },
   plugins: [],
 };