diff --git a/input.css b/input.css
index 0363007..7041f3a 100644
--- a/input.css
+++ b/input.css
@@ -2,10 +2,9 @@
 @import "./internal/ui/views/shelf/shelf.css";
 
 @theme {
-    --color-ink: #000;
-    --color-paper: #fff;
-    --color-muted: #eee;
-    --color-mid: #888;
+    --color-primary: #1a1a1a;
+    --color-secondary: #757575;
+    --color-neutral: #fdfbf7;
 }
 
 .container {
@@ -24,7 +23,7 @@
         padding: theme(spacing.1) theme(spacing.2);
 
         &:hover {
-            background-color: var(--color-muted);
+            background-color: var(--color-secondary);
         }
 
         &:disabled {
diff --git a/internal/ui/components/header/header.templ b/internal/ui/components/header/header.templ
index 07232ef..5ee05f6 100644
--- a/internal/ui/components/header/header.templ
+++ b/internal/ui/components/header/header.templ
@@ -10,12 +10,12 @@ templ Header(params HeaderParams) {
 				if params.User != nil {
 					<details class="relative inline-block text-left">
 						<summary class="cursor-pointer list-none flex gap-2 items-center">
-							<div class="flex items-center justify-center w-7 h-7 rounded-full bg-gray-100">
+							<div class="flex items-center justify-center w-7 h-7 rounded-full bg-secondary">
 								<i class="w-4 h-4" data-lucide="user"></i>
 							</div>
 							<span class="text-sm">{ params.User.Account.Handle }</span>
 						</summary>
-						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
+						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-neutral drop-shadow-sm">
 							<a
 								href={ templ.SafeURL(fmt.Sprintf("/%s/shelf", params.User.Account.Did)) }
 								class="button border-none text-sm w-full"
@@ -33,7 +33,7 @@ templ Header(params HeaderParams) {
 						<summary class="cursor-pointer list-none flex gap-2 items-center">
 							<span>🇰🇷</span>
 						</summary>
-						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
+						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-neutral drop-shadow-sm">
 							<button
 								type="button"
 								@click="localStorage.setItem('shlf-language', 'ko');"
diff --git a/internal/ui/views/shelf/shelf.css b/internal/ui/views/shelf/shelf.css
index 15b6de9..0abb955 100644
--- a/internal/ui/views/shelf/shelf.css
+++ b/internal/ui/views/shelf/shelf.css
@@ -4,15 +4,15 @@
 
     > :first-child,
     > :last-child {
-        background: var(--color-ink);
+        background: var(--color-primary);
     }
 }
 
 .shelf-base {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
-    background: var(--color-ink);
-    border-block: 2px solid var(--color-ink);
+    background: var(--color-primary);
+    border-block: 2px solid var(--color-primary);
     row-gap: 8px;
     min-height: 25rem;
 }
@@ -39,8 +39,8 @@
 
 @layer components {
     .item-slot {
-        background: var(--color-paper);
-        border: 1px dashed var(--color-muted);
+        background: var(--color-neutral);
+        border: 1px dashed var(--color-secondary);
         border-bottom: none;
         display: flex;
         align-items: flex-end;
@@ -50,7 +50,7 @@
         padding-top: 1rem;
 
         &:hover {
-            background: var(--color-muted);
+            background: var(--color-secondary);
         }
 
         &.slot-occupied {
@@ -58,14 +58,14 @@
         }
 
         &.slot-drag-over {
-            background: var(--color-muted);
-            border: 2px solid var(--color-ink);
+            background: var(--color-secondary);
+            border: 2px solid var(--color-primary);
             border-bottom: none;
         }
     }
 
     .book {
-        background: var(--color-paper);
+        background: var(--color-neutral);
         width: 2rem;
         cursor: grab;
         flex-shrink: 0;
@@ -88,8 +88,8 @@
         gap: 0.625rem;
         position: fixed;
         width: 17.5rem;
-        background: var(--color-paper);
-        border: 1px solid var(--color-ink);
+        background: var(--color-neutral);
+        border: 1px solid var(--color-primary);
         padding: theme(spacing.3);
         z-index: 100;
         pointer-events: none;
@@ -125,12 +125,12 @@
         inset: 0;
         background: repeating-linear-gradient(
             45deg,
-            var(--color-muted),
-            var(--color-muted) 2px,
-            var(--color-paper) 2px,
-            var(--color-paper) 8px
+            var(--color-secondary),
+            var(--color-secondary) 2px,
+            var(--color-neutral) 2px,
+            var(--color-neutral) 8px
         );
-        border: 1px dashed var(--color-mid);
+        border: 1px dashed var(--color-secondary);
         cursor: grab;
     }