diff --git a/src/lib/theme.css b/src/lib/theme.css
index 6cba23de..23aa63b2 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -2,7 +2,7 @@
 .token_doctype,
 .token_cdata,
 .token_punctuation {
-	color: var(--text_color_5);
+	color: var(--text_50);
 }
 
 .token_tag,
@@ -16,7 +16,7 @@
 .token_heading,
 .token_heading_punctuation,
 .token_tag_punctuation {
-	color: var(--color_a_5);
+	color: var(--color_a_50);
 }
 
 .token_comment,
@@ -24,13 +24,13 @@
 .token_inserted,
 .token_blockquote,
 .token_blockquote_punctuation {
-	color: var(--color_b_5);
+	color: var(--color_b_50);
 }
 
 .token_builtin,
 .token_class_name,
 .token_number {
-	color: var(--color_j_5);
+	color: var(--color_j_50);
 }
 
 .token_attr_value,
@@ -39,12 +39,12 @@
 .token_template_punctuation,
 .token_inline_code,
 .token_code_punctuation {
-	color: var(--color_h_5);
+	color: var(--color_h_50);
 }
 
 /* attr_equals must be after attr_value */
 .token_attr_equals {
-	color: var(--text_color_5);
+	color: var(--text_50);
 }
 
 .token_selector,
@@ -52,11 +52,11 @@
 .token_regex,
 .token_important,
 .token_variable {
-	color: var(--color_e_5);
+	color: var(--color_e_50);
 }
 
 .token_atrule {
-	color: var(--color_f_5);
+	color: var(--color_f_50);
 }
 
 .token_attr_name,
@@ -66,18 +66,18 @@
 .token_link_text_wrapper,
 .token_link_text,
 .token_link_punctuation {
-	color: var(--color_i_5);
+	color: var(--color_i_50);
 }
 
 .token_special_keyword,
 .token_namespace,
 .token_rule {
-	color: var(--color_g_5);
+	color: var(--color_g_50);
 }
 
 .token_at_keyword,
 .token_url {
-	color: var(--color_d_5);
+	color: var(--color_d_50);
 }
 
 .token_url {
diff --git a/src/lib/theme_highlight.css b/src/lib/theme_highlight.css
index 266ea02c..778ad85c 100644
--- a/src/lib/theme_highlight.css
+++ b/src/lib/theme_highlight.css
@@ -6,7 +6,7 @@
 ::highlight(token_cdata),
 .token_punctuation,
 ::highlight(token_punctuation) {
-	color: var(--text_color_5);
+	color: var(--text_50);
 }
 
 .token_tag,
@@ -31,7 +31,7 @@
 ::highlight(token_heading_punctuation),
 .token_tag_punctuation,
 ::highlight(token_tag_punctuation) {
-	color: var(--color_a_5);
+	color: var(--color_a_50);
 }
 
 .token_comment,
@@ -44,7 +44,7 @@
 ::highlight(token_blockquote),
 .token_blockquote_punctuation,
 ::highlight(token_blockquote_punctuation) {
-	color: var(--color_b_5);
+	color: var(--color_b_50);
 }
 
 .token_builtin,
@@ -53,7 +53,7 @@
 ::highlight(token_class_name),
 .token_number,
 ::highlight(token_number) {
-	color: var(--color_j_5);
+	color: var(--color_j_50);
 }
 
 .token_attr_value,
@@ -68,13 +68,13 @@
 ::highlight(token_inline_code),
 .token_code_punctuation,
 ::highlight(token_code_punctuation) {
-	color: var(--color_h_5);
+	color: var(--color_h_50);
 }
 
 /* attr_equals must be after attr_value */
 .token_attr_equals,
 ::highlight(token_attr_equals) {
-	color: var(--text_color_5);
+	color: var(--text_50);
 }
 
 .token_selector,
@@ -87,12 +87,12 @@
 ::highlight(token_important),
 .token_variable,
 ::highlight(token_variable) {
-	color: var(--color_e_5);
+	color: var(--color_e_50);
 }
 
 .token_atrule,
 ::highlight(token_atrule) {
-	color: var(--color_f_5);
+	color: var(--color_f_50);
 }
 
 .token_attr_name,
@@ -109,7 +109,7 @@
 ::highlight(token_link_text),
 .token_link_punctuation,
 ::highlight(token_link_punctuation) {
-	color: var(--color_i_5);
+	color: var(--color_i_50);
 }
 
 .token_special_keyword,
@@ -118,14 +118,14 @@
 ::highlight(token_namespace),
 .token_rule,
 ::highlight(token_rule) {
-	color: var(--color_g_5);
+	color: var(--color_g_50);
 }
 
 .token_at_keyword,
 ::highlight(token_at_keyword),
 .token_url,
 ::highlight(token_url) {
-	color: var(--color_d_5);
+	color: var(--color_d_50);
 }
 
 .token_url,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 31514b6a..edb30f82 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,7 +31,7 @@
 			</div>
 		</section>
 		<section class="panel">
-			<div class="bg shadow_sm border_radius_xs p_xl2">
+			<div class="shade_00 shadow_sm border_radius_xs p_xl2">
 				<CodeTome />
 			</div>
 		</section>