diff --git a/src/app.postcss b/src/app.postcss
index efde9f23a..528bc50c0 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -84,7 +84,7 @@ textarea {
 
 /* CARD STYLING */
 .card {
-	@apply rounded border-[0.5px] border-dark-200 bg-card-default shadow;
+	@apply rounded border-[0.5px] border-gb-700 bg-card-default shadow;
 	/* background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=212121ff&noise=4d4d4d&density=40&opacity=100"); */
 	/* background-opacity: 0.1; */
 	/* background-image: url(data:image/png;base64,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);  */
@@ -135,55 +135,5 @@ button.active {
 }
 
 .button.active {
-	@apply gb-bg-3;
-}
-
-/* The following are used to reduce repetition of common light/dark mode styles */
-
-.gb-bg-1 {
-	@apply bg-white dark:bg-black;
-}
-
-.gb-bg-2 {
-	@apply bg-light-100 dark:bg-dark-100;
-}
-
-.gb-bg-3 {
-	@apply bg-light-200 dark:bg-dark-200;
-}
-
-.gb-border-1 {
-	@apply border-light-200 dark:border-dark-500;
-}
-
-.gb-border-2 {
-	@apply border-light-300 dark:border-dark-600;
-}
-
-.gb-border-3 {
-	@apply border-light-400 dark:border-dark-700;
-}
-
-.gb-border-4 {
-	@apply border-light-500 dark:border-dark-800;
-}
-
-.gb-border-5 {
-	@apply border-light-600 dark:border-dark-800;
-}
-
-.gb-text-1 {
-	@apply text-black dark:text-white;
-}
-
-.gb-text-2 {
-	@apply text-dark-700 dark:text-light-300;
-}
-
-.gb-text-3 {
-	@apply text-dark-800 dark:text-light-500;
-}
-
-.gb-text-4 {
-	@apply text-dark-800 dark:text-light-800;
+	@apply bg-light-300 dark:bg-dark-300;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index feadcc6d9..f5b34ec36 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -63,7 +63,7 @@
 <div class="flex h-full flex-col">
 	<header
 		data-tauri-drag-region
-		class="gb-bg-1 gb-text-2 flex h-11 flex-row items-center gap-x-4 pt-1"
+		class="flex h-11 flex-row items-center gap-x-4 bg-light-400 pt-1 text-dark-400 dark:bg-dark-600 dark:text-light-400"
 		style="z-index: 9999;"
 	>
 		<div class="breadcrumb-project-container ml-24">
diff --git a/src/routes/Breadcrumbs.svelte b/src/routes/Breadcrumbs.svelte
index bdbba9672..78d1e05b7 100644
--- a/src/routes/Breadcrumbs.svelte
+++ b/src/routes/Breadcrumbs.svelte
@@ -11,7 +11,7 @@
 	<Button icon={IconHome} kind="plain" on:click={() => goto('/')} />
 	{#if project}
 		<a
-			class="button gb-bg-2 flex items-center px-2"
+			class="button flex items-center bg-light-700 px-3 dark:bg-dark-500"
 			class:active={window.location.pathname.includes(`/projects/${project.id}`)}
 			href="/projects/{project.id}"
 			title="{project.title} home"
diff --git a/src/routes/projects_new/[projectId]/+page.svelte b/src/routes/projects_new/[projectId]/+page.svelte
index 03129877e..638d9aa28 100644
--- a/src/routes/projects_new/[projectId]/+page.svelte
+++ b/src/routes/projects_new/[projectId]/+page.svelte
@@ -36,12 +36,12 @@
 {:else}
 	<div class="m-auto flex flex-col space-y-2">
 		<h1 class="text-2xl font-bold">Set your target</h1>
-		<p class="gb-text-3">
+		<p class="text-gray-500">
 			You need to set your target before you can start working on your project.
 		</p>
 		<!-- select menu of remoteBranches -->
 		{#if remoteBranches.length === 0}
-			<p class="gb-text-3">You don't have any remote branches.</p>
+			<p class="text-gray-500">You don't have any remote branches.</p>
 		{:else}
 			<select bind:value={targetChoice}>
 				{#each remoteBranches as branch}
diff --git a/src/routes/projects_new/[projectId]/Board.svelte b/src/routes/projects_new/[projectId]/Board.svelte
index 42eb1e4f6..148589f76 100644
--- a/src/routes/projects_new/[projectId]/Board.svelte
+++ b/src/routes/projects_new/[projectId]/Board.svelte
@@ -30,7 +30,7 @@
 
 <div
 	id="branch-lanes"
-	class="gb-bg-2 flex max-w-full flex-shrink flex-grow items-start gap-x-4 overflow-x-auto overflow-y-hidden p-4"
+	class="flex max-w-full flex-shrink flex-grow items-start gap-x-4 overflow-x-auto overflow-y-hidden bg-light-800 p-4 dark:bg-dark-700"
 	use:dndzone={{
 		items: branches,
 		types: ['branch'],
diff --git a/src/routes/projects_new/[projectId]/BranchLane.svelte b/src/routes/projects_new/[projectId]/BranchLane.svelte
index ab54962e6..7bc7c8779 100644
--- a/src/routes/projects_new/[projectId]/BranchLane.svelte
+++ b/src/routes/projects_new/[projectId]/BranchLane.svelte
@@ -91,17 +91,19 @@
 </script>
 
 <div
-	class="gb-bg-1 gb-border-1 flex max-h-full w-96 shrink-0 flex-col overflow-y-hidden rounded-xl border px-2 pb-2 shadow"
+	class="flex max-h-full w-96 shrink-0 flex-col overflow-y-hidden rounded-xl bg-white px-2 shadow dark:bg-black"
 >
 	<div class="flex h-16 shrink-0 items-center px-3 text-lg font-bold">
 		<IconBranch class="mr-3 text-[#A1A1AA]" />
 		{name}
 	</div>
-	<div class="gb-bg-2 gb-border-3 flex flex-col overflow-y-hidden rounded-lg border p-2">
+	<div
+		class="flex flex-col overflow-y-hidden rounded-lg border border-light-700 bg-light-800 p-2 dark:border-dark-700 dark:bg-dark-800"
+	>
 		<div>
 			<textarea
 				bind:this={textArea}
-				class="gb-bg-2 gb-text-2 mb-5 h-14 w-full shrink-0 resize-none rounded border-0 py-0 focus-within:h-36"
+				class="mb-5 h-14 w-full shrink-0 resize-none rounded border-0 bg-light-800 py-0 text-dark-400 focus-within:h-36 dark:bg-dark-800 dark:text-light-400"
 				style="height: {descriptionHeight}px"
 				value={commitMessage ? commitMessage.trim() : ''}
 				placeholder="Your commit message here..."
diff --git a/src/routes/projects_new/[projectId]/FileCard.svelte b/src/routes/projects_new/[projectId]/FileCard.svelte
index 9b861c1b4..2da6a9b99 100644
--- a/src/routes/projects_new/[projectId]/FileCard.svelte
+++ b/src/routes/projects_new/[projectId]/FileCard.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <div
-	class="changed-file gb-border-2 gb-bg-1 gb-text-2 flex w-full flex-col justify-center gap-2 rounded-lg border p-2"
+	class="changed-file flex w-full flex-col justify-center gap-2 rounded-lg border border-light-700 bg-white p-2 text-dark-600 dark:border-dark-700 dark:bg-black dark:text-light-300"
 >
 	<div class="flex items-center gap-2">
 		<div class="flex-grow overflow-hidden text-ellipsis whitespace-nowrap" title={filepath}>
@@ -74,13 +74,17 @@
 	>
 		{#if expanded}
 			{#each hunks || [] as hunk (hunk.id)}
-				<div class="changed-hunk gb-border-2 flex w-full flex-col gap-1 rounded-sm border">
+				<div
+					class="changed-hunk flex w-full flex-col gap-1 rounded-sm border border-light-500 dark:border-dark-500"
+				>
 					<div class="w-full text-ellipsis p-2">
 						{#await summarizeHunk(hunk.diff) then description}
 							{description}
 						{/await}
 					</div>
-					<div class="gb-border-2 cursor-pointer border-t border-b text-sm">
+					<div
+						class="cursor-pointer border-t border-b border-light-700 text-sm dark:border-dark-800"
+					>
 						<!-- Disabling syntax highlighting for perormance reasons -->
 						<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={2} />
 					</div>
diff --git a/src/routes/projects_new/[projectId]/HunkDiffViewer.svelte b/src/routes/projects_new/[projectId]/HunkDiffViewer.svelte
index 2bdfc92a1..cf131db46 100644
--- a/src/routes/projects_new/[projectId]/HunkDiffViewer.svelte
+++ b/src/routes/projects_new/[projectId]/HunkDiffViewer.svelte
@@ -103,13 +103,17 @@
 			row.type === RowType.Equal || row.type === RowType.Addition
 				? String(row.currentLineNumber + currentLineNumber - 1)
 				: ''}
-		<span class="gb-bg-3 gb-border-3 gb-text-3 select-none border-r">
+		<span
+			class="select-none border-r border-light-200  bg-light-800 text-dark-300 dark:border-dark-800 dark:bg-dark-800 dark:text-light-300"
+		>
 			<div class="mx-0.5 text-right">
 				{baseNumber}
 			</div>
 		</span>
 
-		<span class="gb-bg-3 gb-border-3 gb-text-3 mr-1 select-none border-r">
+		<span
+			class="mr-1 select-none border-r border-light-200 bg-light-800 text-dark-300 dark:border-dark-800 dark:bg-dark-800 dark:text-light-300"
+		>
 			<div class="mx-0.5 text-right">
 				{curNumber}
 			</div>
diff --git a/src/routes/projects_new/[projectId]/NewBranchDropZone.svelte b/src/routes/projects_new/[projectId]/NewBranchDropZone.svelte
index 06d5b1118..b56e8a7c1 100644
--- a/src/routes/projects_new/[projectId]/NewBranchDropZone.svelte
+++ b/src/routes/projects_new/[projectId]/NewBranchDropZone.svelte
@@ -46,7 +46,7 @@
 	on:finalize={handleDndFinalize}
 >
 	<div
-		class="gb-border-5 gb-bg-2 gb-text-4 flex h-full w-64 items-center self-center rounded-lg border border-dashed p-8 text-center text-xl font-bold "
+		class="flex h-full w-64 items-center self-center rounded-lg border border-dashed border-dark-100 bg-light-300 p-8 text-center text-xl font-bold dark:bg-dark-400"
 	>
 		drop here to create a new branch
 	</div>
diff --git a/src/routes/projects_new/[projectId]/Tray.svelte b/src/routes/projects_new/[projectId]/Tray.svelte
index af9095904..4339bb877 100644
--- a/src/routes/projects_new/[projectId]/Tray.svelte
+++ b/src/routes/projects_new/[projectId]/Tray.svelte
@@ -7,8 +7,8 @@
 	export let remoteBranches: BranchData[];
 </script>
 
-<div class="gb-text-2 w-80 shrink-0 px-2">
-	<div class="py-4 text-lg font-bold">Your Branches</div>
+<div class="w-80 shrink-0 px-2 dark:bg-dark-300 dark:text-light-800">
+	<div class="py-4">Your Branches</div>
 	<div class="flex flex-col gap-y-2">
 		{#each branches as branch (branch.id)}
 			<div class="rounded-lg p-2" title={branch.name}>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 88816bb5b..1625f7aaa 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -58,25 +58,25 @@ const config = {
 				500: '#6B7280'
 			},
 			dark: {
-				100: '#1F1F1F',
-				200: '#1E1E1E',
-				300: '#212121',
-				400: '#252525',
-				500: '#27272A',
-				600: '#2C2C2C',
-				700: '#3C3C3C',
-				800: '#4C4C4C'
+				100: '#4C4C4C',
+				200: '#3C3C3C',
+				300: '#2C2C2C',
+				400: '#27272A',
+				500: '#252525',
+				600: '#212121',
+				700: '#1E1E1E',
+				800: '#1F1F1F'
 			},
 			light: {
-				100: '#F9FAFB',
-				200: '#F1F1F1',
-				300: '#E4E4E7',
-				400: '#DEDEDE',
+				100: '#B3B3B3',
+				200: '#C3C3C3',
+				300: '#D3D3D3',
+				400: '#D8D8D5',
 				500: '#DADADA',
-				600: '#D8D8D5',
-				700: '#D3D3D3',
-				800: '#C3C3C3',
-				900: '#B3B3B3'
+				600: '#DEDEDE',
+				700: '#E4E4E7',
+				800: '#F9FAFB',
+				900: '#F1F1F1'
 			},
 			blue: {
 				200: '#bfdbfe',