diff --git a/src/lib/ModulesDetail.svelte b/src/lib/ModulesDetail.svelte
index 8d10b57b..37bcfb46 100644
--- a/src/lib/ModulesDetail.svelte
+++ b/src/lib/ModulesDetail.svelte
@@ -121,29 +121,29 @@
 		font-size: var(--font_size_lg);
 		position: sticky;
 		top: 0;
-		background-color: var(--bg);
+		background-color: var(--shade_00);
 	}
 	.modules {
 		padding: var(--space_sm);
 	}
 	.module {
 		margin-bottom: var(--space_lg);
-		--link_color: var(--text_color_3);
+		--link_color: var(--text_70);
 	}
 	.module_file {
 		margin-bottom: var(--space_xs);
 	}
 	.ts {
-		--link_color: var(--color_a_5);
+		--link_color: var(--color_a_50);
 	}
 	.svelte {
-		--link_color: var(--color_e_5);
+		--link_color: var(--color_e_50);
 	}
 	.css {
-		--link_color: var(--color_b_5);
+		--link_color: var(--color_b_50);
 	}
 	.json {
-		--link_color: var(--color_f_5);
+		--link_color: var(--color_f_50);
 	}
 	/* TODO extract */
 	.declarations {
@@ -160,16 +160,16 @@
 		font-size: var(--font_size_sm);
 	}
 	.variable_declaration {
-		color: var(--color_d_5);
+		color: var(--color_d_50);
 	}
 	.function_declaration {
-		color: var(--color_c_5);
+		color: var(--color_c_50);
 	}
 	.type_declaration {
-		color: var(--color_g_5);
+		color: var(--color_g_50);
 	}
 	.class_declaration {
-		color: var(--color_f_5);
+		color: var(--color_f_50);
 	}
 	/* TODO extract  */
 	.nav_wrapper {
diff --git a/src/lib/ReposTable.svelte b/src/lib/ReposTable.svelte
index 90fec235..72d96f74 100644
--- a/src/lib/ReposTable.svelte
+++ b/src/lib/ReposTable.svelte
@@ -180,11 +180,11 @@
 		padding: 0 var(--space_xs);
 	}
 	tr:hover {
-		background-color: var(--bg_5);
+		background-color: var(--shade_50);
 	}
 	.latest {
 		/* TODO even lighter, add `--text_color_7` to Fuz probably, or change the scaling of `--text_color_3` and `--text_color_5` */
-		color: var(--text_color_5);
+		color: var(--text_50);
 		opacity: var(--disabled_opacity);
 	}
 </style>
diff --git a/src/lib/ReposTreeNav.svelte b/src/lib/ReposTreeNav.svelte
index c34b435b..ff2367cb 100644
--- a/src/lib/ReposTreeNav.svelte
+++ b/src/lib/ReposTreeNav.svelte
@@ -49,9 +49,9 @@
 	}
 	/* TODO should be a CSS class or variable, probably add :focus behavior */
 	.names a:hover {
-		background-color: var(--bg_5);
+		background-color: var(--shade_50);
 	}
 	.names a:is(:active, .selected) {
-		background-color: var(--bg_7);
+		background-color: var(--shade_70);
 	}
 </style>
diff --git a/src/routes/MainHeader.svelte b/src/routes/MainHeader.svelte
index b312f628..9a719ac3 100644
--- a/src/routes/MainHeader.svelte
+++ b/src/routes/MainHeader.svelte
@@ -4,12 +4,12 @@
 </script>
 
 <header class="pane p_lg">
-	<div class="box bg mb_lg">
+	<div class="box shade_00 mb_lg">
 		<h1 class="mb_lg font_size_xl2 font-weight:400">fuz_gitops</h1>
 		<!-- TODO FuzGitopsLogo -->
 		<Svg
 			data={logo_fuz}
-			fill="var(--color_a_5)"
+			fill="var(--color_a_50)"
 			size="var(--icon_size_xl2)"
 			label="a friendly blue spider facing you"
 		/>