diff --git a/design-system/base.css b/design-system/base.css
index 4d229de..2b74f61 100644
--- a/design-system/base.css
+++ b/design-system/base.css
@@ -7,7 +7,11 @@
   --color-border: #e2e8f0;
   --color-border-strong: #cbd5e1;
   --color-surface: #ffffff;
+  --color-surface-muted: #f8fafc;
+  --color-surface-muted-hover: #f1f5f9;
+  --color-surface-selected: #eff6ff;
   --color-primary: #162033;
+  --color-primary-hover: #24324a;
   --color-primary-ink: #ffffff;
   --color-focus: #2563eb;
   --color-valid: #10b981;
diff --git a/styles.css b/styles.css
index 75bde79..7a2a9d6 100644
--- a/styles.css
+++ b/styles.css
@@ -57,7 +57,7 @@
     gap: 24px;
     padding: 18px var(--space-page);
     border-bottom: 1px solid var(--color-border);
-    background: color-mix(in srgb, white 88%, transparent);
+    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
     backdrop-filter: blur(14px);
   }
 
@@ -131,7 +131,7 @@
     padding: clamp(20px, 4vw, 34px);
     background:
       linear-gradient(135deg, rgba(22, 32, 51, 0.04), transparent 42%),
-      white;
+      var(--color-surface);
     box-shadow: var(--shadow-card);
   }
 
@@ -154,7 +154,7 @@
   }
 
   button:hover {
-    background: #24324a;
+    background: var(--color-primary-hover);
     box-shadow: 0 10px 24px rgb(15 23 42 / 12%);
   }
 
@@ -163,7 +163,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-frame);
     padding: 10px;
-    background: white;
+    background: var(--color-surface);
     box-shadow: var(--shadow-popover);
   }
 
@@ -174,7 +174,7 @@
   }
 
   .menu a:hover {
-    background: #eff6ff;
+    background: var(--color-surface-selected);
   }
 
   @supports (anchor-name: --profile-menu-trigger) {
@@ -221,7 +221,7 @@
     border: 1px solid var(--color-border-strong);
     border-radius: var(--radius-frame);
     padding: 0 12px;
-    background: white;
+    background: var(--color-surface);
   }
 
   input[type='color'] {
@@ -266,7 +266,7 @@
     border: 1px solid transparent;
     border-radius: var(--radius-frame);
     padding: 8px 10px;
-    background: #f8fafc;
+    background: var(--color-surface-muted);
     cursor: pointer;
     font-weight: 600;
     transition:
@@ -276,13 +276,13 @@
   }
 
   .choice-line:hover {
-    background: #f1f5f9;
+    background: var(--color-surface-muted-hover);
   }
 
   @supports selector(.choice-line:has(input:checked)) {
     .choice-line:has(input:checked) {
       border-color: color-mix(in srgb, var(--color-focus) 42%, var(--color-border));
-      background: #eff6ff;
+      background: var(--color-surface-selected);
       box-shadow: inset 0 0 0 1px rgb(37 99 235 / 8%);
     }