diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte
index 32a3143..12140a7 100644
--- a/src/lib/components/ChatSidebar.svelte
+++ b/src/lib/components/ChatSidebar.svelte
@@ -144,7 +144,7 @@
     <span class="text-[1.5rem] text-brand leading-7">Chat</span>
     <button
       onclick={onToggle}
-      class="rounded bg-gray-100 hover:bg-gray-200 transition-colors"
+      class="rounded bg-neutral-100 hover:bg-neutral-200 transition-colors"
       aria-label={expanded ? "Collapse chat" : "Expand chat"}
     >
       <svg
@@ -174,7 +174,7 @@
     class="flex-1 overflow-y-auto flex flex-col"
   >
     {#if messages.length === 0}
-      <div class="m-auto text-center text-sm text-gray-400 py-8">
+      <div class="m-auto text-center text-sm text-neutral-400 py-8">
         No messages yet.
       </div>
     {:else}
@@ -193,20 +193,20 @@
                 />
               {:else}
                 <span
-                  class="h-6 w-6 shrink-0 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500"
+                  class="h-6 w-6 shrink-0 rounded-full bg-neutral-200 flex items-center justify-center text-xs font-semibold text-neutral-500"
                 >
                   {author.name[0].toUpperCase()}
                 </span>
               {/if}
-              <span class="font-medium text-gray-600">{author.name}</span>
-              <span class="ml-auto text-xs text-gray-400"
+              <span class="font-medium text-neutral-600">{author.name}</span>
+              <span class="ml-auto text-xs text-neutral-400"
                 >{formatTime(msg.createdAt)}</span
               >
             </div>
             <div class="mt-0.5">
               {#if msg.replyToId}
                 <div
-                  class="mb-1 border-l-2 border-gray-300 pl-2 text-xs text-gray-500"
+                  class="mb-1 border-l-2 border-neutral-300 pl-2 text-xs text-neutral-500"
                 >
                   {#if parent}
                     <span class="font-medium">{parentAuthor?.name}</span>:
@@ -217,7 +217,7 @@
                 </div>
               {/if}
               <p
-                class="text-gray-700 leading-5 whitespace-pre-wrap break-words"
+                class="text-neutral-700 leading-5 whitespace-pre-wrap break-words"
               >
                 {msg.content}
               </p>
@@ -228,7 +228,7 @@
                       e.stopPropagation();
                       openMenuId = openMenuId === msg.id ? null : msg.id;
                     }}
-                    class="flex items-center justify-center rounded p-0.5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-colors"
+                    class="flex items-center justify-center rounded p-0.5 text-neutral-300 hover:text-neutral-500 hover:bg-neutral-100 transition-colors"
                     aria-label="Message actions"
                   >
                     <svg
@@ -244,16 +244,16 @@
                   </button>
                   {#if openMenuId === msg.id}
                     <div
-                      class="absolute right-0 bottom-6 z-20 w-36 rounded-lg border border-gray-100 bg-white py-1 shadow-lg text-sm"
+                      class="absolute right-0 bottom-6 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 shadow-lg text-sm"
                     >
                       <button
                         disabled
-                        class="w-full px-3 py-1.5 text-left text-gray-400 cursor-not-allowed"
+                        class="w-full px-3 py-1.5 text-left text-neutral-400 cursor-not-allowed"
                         aria-disabled="true">React</button
                       >
                       <button
                         disabled
-                        class="w-full px-3 py-1.5 text-left text-gray-400 cursor-not-allowed"
+                        class="w-full px-3 py-1.5 text-left text-neutral-400 cursor-not-allowed"
                         aria-disabled="true">Zap</button
                       >
                       <button
@@ -261,7 +261,7 @@
                           e.stopPropagation();
                           startReply(msg);
                         }}
-                        class="w-full px-3 py-1.5 text-left hover:bg-gray-50"
+                        class="w-full px-3 py-1.5 text-left hover:bg-neutral-50"
                         >Reply</button
                       >
                     </div>
@@ -275,20 +275,22 @@
     {/if}
   </div>
 
-  <div class="border-t border-gray-200 pt-4">
+  <div class="border-t border-neutral-200 pt-4">
     {#if replyTarget}
       {@const replyAuthor = resolveAuthor(replyTarget.pubkey)}
       <div
-        class="mb-2 flex items-start gap-2 rounded bg-gray-50 px-2 py-1.5 text-xs text-gray-600"
+        class="mb-2 flex items-start gap-2 rounded bg-neutral-50 px-2 py-1.5 text-xs text-neutral-600"
       >
         <div class="flex-1 min-w-0">
-          <span class="text-gray-400">↳ Reply to </span>
+          <span class="text-neutral-400">↳ Reply to </span>
           <span class="font-medium">{replyAuthor.name}</span>:
-          <span class="text-gray-500">{truncate(replyTarget.content, 80)}</span>
+          <span class="text-neutral-500"
+            >{truncate(replyTarget.content, 80)}</span
+          >
         </div>
         <button
           onclick={cancelReply}
-          class="shrink-0 text-gray-400 hover:text-gray-600"
+          class="shrink-0 text-neutral-400 hover:text-neutral-600"
           aria-label="Cancel reply"
         >
           ✕
@@ -309,7 +311,7 @@
       rows="1"
       disabled={sending}
       placeholder={auth.user ? "Message..." : "Login to send messages"}
-      class="w-full resize-none rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+      class="w-full resize-none rounded border border-neutral-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
     ></textarea>
   </div>
 </aside>
diff --git a/src/lib/components/JoinModal.svelte b/src/lib/components/JoinModal.svelte
index d8c0fb3..64531f8 100644
--- a/src/lib/components/JoinModal.svelte
+++ b/src/lib/components/JoinModal.svelte
@@ -47,15 +47,15 @@
         onclick={onClose}
         aria-label="Close"
         disabled={joinState.busy}
-        class="absolute right-3 top-3 text-2xl leading-none text-gray-400 hover:text-gray-700 disabled:opacity-50"
+        class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700 disabled:opacity-50"
       >
         ×
       </button>
 
-      <h2 id="join-title" class="mb-2 text-lg font-semibold text-gray-900">
+      <h2 id="join-title" class="mb-2 text-lg font-semibold text-neutral-900">
         Join this group
       </h2>
-      <p class="mb-4 text-sm text-gray-600">
+      <p class="mb-4 text-sm text-neutral-600">
         {#if joinState.codeRequired}
           This community requires an invite code. Enter your code below to
           request access. If you don't have one, contact the admin.
@@ -87,7 +87,7 @@
           autocapitalize="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && onRetry()}
-          class="mb-3 w-full rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="mb-3 w-full rounded border border-neutral-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
         />
       {/if}
 
@@ -96,15 +96,14 @@
           type="button"
           onclick={onClose}
           disabled={joinState.busy}
-          class="rounded px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+          class="rounded px-3 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-100 disabled:opacity-50"
         >
           Close
         </button>
         <button
           type="button"
           onclick={onRetry}
-          disabled={joinState.busy ||
-            (joinState.codeRequired && !code.trim())}
+          disabled={joinState.busy || (joinState.codeRequired && !code.trim())}
           class="rounded bg-brand px-3 py-2 text-sm font-medium text-white hover:bg-brand-hover disabled:cursor-not-allowed disabled:opacity-50"
         >
           {joinState.busy ? "Trying…" : "Retry"}
diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 4f19706..bb2e75a 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -20,29 +20,29 @@
   <div>
     <a
       href="/"
-      class="flex items-center gap-2 py-1 hover:bg-gray-100 text-gray-700}"
+      class="flex items-center gap-2 py-1 hover:bg-neutral-100 text-neutral-700}"
     >
       Home
     </a>
 
     {#if mode === "simple"}
       <div class="flex mt-6">
-        <p class="text-sm text-gray-500">{groupStore.data?.about ?? ""}</p>
+        <p class="text-sm text-neutral-500">{groupStore.data?.about ?? ""}</p>
       </div>
     {:else}
       <nav class="flex-auto mt-6">
         {#each groups as group}
           <div class="mb-8">
             <p
-              class="pb-1 text-xs font-semibold uppercase tracking-wider text-gray-400"
+              class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
             >
               {group}
             </p>
             {#each rooms.filter((r) => r.group === group) as room}
               <a
                 href="/room/{room.slug}"
-                class="flex items-center gap-2 py-1 hover:bg-gray-100
-								{activeRoom === room.slug ? ' text-brand' : 'text-gray-700'}"
+                class="flex items-center gap-2 py-1 hover:bg-neutral-100
+								{activeRoom === room.slug ? ' text-brand' : 'text-neutral-700'}"
               >
                 {room.name}
               </a>
@@ -55,61 +55,63 @@
     <nav class="flex-auto mt-6">
       <div class="">
         <p
-          class="pb-1 text-xs font-semibold uppercase tracking-wider text-gray-400"
+          class="pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400"
         >
           More
         </p>
-        <a href="/settings" class="block py-1 text-gray-500 hover:text-gray-900"
-          >Settings</a
+        <a
+          href="/settings"
+          class="block py-1 text-neutral-500 hover:text-neutral-900">Settings</a
         >
-        <a href="/contacts" class="block py-1 text-gray-500 hover:text-gray-900"
-          >Contacts</a
+        <a
+          href="/contacts"
+          class="block py-1 text-neutral-500 hover:text-neutral-900">Contacts</a
         >
       </div>
     </nav>
   </div>
 
   <div class="flex flex-col gap-2">
-  {#if draftState.iconized}
-    <button
-      type="button"
-      onclick={resumeDraft}
-      class="w-full rounded bg-brand px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-hover"
-    >
-      Resume draft
-    </button>
-  {/if}
-  {#if auth.user}
-    <button
-      onclick={() => {
-        if (confirm("Log out?")) logout();
-      }}
-      class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-200"
-      aria-label="Account options"
-    >
-      {#if auth.user.metadata.picture}
-        <img
-          src={auth.user.metadata.picture}
-          alt=""
-          class="h-7 w-7 rounded-full object-cover"
-        />
-      {:else}
-        <span
-          class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-semibold text-gray-600"
-          aria-hidden="true"
-        >
-          {auth.user.shortName.slice(0, 1).toUpperCase()}
-        </span>
-      {/if}
-      <span class="truncate font-medium">{auth.user.shortName}</span>
-    </button>
-  {:else}
-    <button
-      onclick={openLogin}
-      class="mt-3 w-full rounded bg-brand px-3 py-1.5 font-medium text-sm text-white hover:bg-brand-hover"
-    >
-      Login
-    </button>
-  {/if}
+    {#if draftState.iconized}
+      <button
+        type="button"
+        onclick={resumeDraft}
+        class="w-full rounded bg-brand px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-hover"
+      >
+        Resume draft
+      </button>
+    {/if}
+    {#if auth.user}
+      <button
+        onclick={() => {
+          if (confirm("Log out?")) logout();
+        }}
+        class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-200"
+        aria-label="Account options"
+      >
+        {#if auth.user.metadata.picture}
+          <img
+            src={auth.user.metadata.picture}
+            alt=""
+            class="h-7 w-7 rounded-full object-cover"
+          />
+        {:else}
+          <span
+            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-xs font-semibold text-neutral-600"
+            aria-hidden="true"
+          >
+            {auth.user.shortName.slice(0, 1).toUpperCase()}
+          </span>
+        {/if}
+        <span class="truncate font-medium">{auth.user.shortName}</span>
+      </button>
+    {:else}
+      <button
+        onclick={openLogin}
+        class="mt-3 w-full rounded bg-brand px-3 py-1.5 font-medium text-sm text-white hover:bg-brand-hover"
+      >
+        Login
+      </button>
+    {/if}
   </div>
 </aside>
diff --git a/src/lib/components/LoginModal.svelte b/src/lib/components/LoginModal.svelte
index d7b457e..6f07fe9 100644
--- a/src/lib/components/LoginModal.svelte
+++ b/src/lib/components/LoginModal.svelte
@@ -97,12 +97,12 @@
         type="button"
         onclick={onClose}
         aria-label="Close"
-        class="absolute right-3 top-3 text-2xl leading-none text-gray-400 hover:text-gray-700"
+        class="absolute right-3 top-3 text-2xl leading-none text-neutral-400 hover:text-neutral-700"
       >
         ×
       </button>
 
-      <h2 id="login-title" class="mb-4 text-lg font-semibold text-gray-900">
+      <h2 id="login-title" class="mb-4 text-lg font-semibold text-neutral-900">
         {view === "extension" ? "Log in" : "Log in with nsec"}
       </h2>
 
@@ -124,7 +124,7 @@
           {busy ? "Connecting…" : "Log in with extension"}
         </button>
         {#if !hasExtension}
-          <p class="mt-2 text-xs text-gray-500">
+          <p class="mt-2 text-xs text-neutral-500">
             No Nostr extension detected in this browser.
           </p>
         {/if}
@@ -149,7 +149,7 @@
           autocorrect="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && handleNsec()}
-          class="w-full rounded border border-gray-200 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="w-full rounded border border-neutral-200 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
         />
         <button
           onclick={handleNsec}
@@ -158,7 +158,7 @@
         >
           {busy ? "Logging in…" : "Log in"}
         </button>
-        <p class="mt-2 text-xs text-gray-500">
+        <p class="mt-2 text-xs text-neutral-500">
           Your key is kept in this browser. Use only for testing.
         </p>
         <button
diff --git a/src/lib/components/MessageEditor.svelte b/src/lib/components/MessageEditor.svelte
index c069af3..fb304e5 100644
--- a/src/lib/components/MessageEditor.svelte
+++ b/src/lib/components/MessageEditor.svelte
@@ -332,13 +332,13 @@
 <div class="flex flex-col {previewing ? 'flex-1 min-h-0' : ''}">
   {#if previewing}
     <div
-      class="w-full rounded-t border border-gray-200 px-3 py-2 overflow-auto flex-1 min-h-0 max-h-[70vh] {minHeightClass}"
+      class="w-full rounded-t border border-neutral-200 px-3 py-2 overflow-auto flex-1 min-h-0 max-h-[70vh] {minHeightClass}"
       aria-label="Preview"
     >
       {#if value.trim()}
         <PostContent content={value} {threadEventAuthors} />
       {:else}
-        <p class="text-gray-400 italic">Nothing to preview</p>
+        <p class="text-neutral-400 italic">Nothing to preview</p>
       {/if}
     </div>
   {:else}
@@ -357,13 +357,13 @@
         onblur={onTextareaBlur}
         aria-autocomplete="list"
         aria-controls={mentionOpen ? "mention-listbox" : undefined}
-        class="block w-full rounded-t border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}"
+        class="block w-full rounded-t border border-neutral-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}"
       ></textarea>
       {#if mentionOpen}
         <div
           id="mention-listbox"
           bind:this={listboxEl}
-          class="absolute z-30 left-0 right-0 max-h-72 overflow-auto rounded border border-gray-200 bg-white shadow-lg"
+          class="absolute z-30 left-0 right-0 max-h-72 overflow-auto rounded border border-neutral-200 bg-white shadow-lg"
           class:bottom-full={anchorAbove}
           class:mb-1={anchorAbove}
           class:top-full={!anchorAbove}
@@ -371,29 +371,31 @@
         >
           {#if mentionQuery === ""}
             <div
-              class="px-3 py-1.5 text-xs text-gray-400"
+              class="px-3 py-1.5 text-xs text-neutral-400"
               class:border-b={mergedResults.length > 0}
-              class:border-gray-100={mergedResults.length > 0}
+              class:border-neutral-100={mergedResults.length > 0}
             >
               Type to search
             </div>
           {:else if remoteSearching && mergedResults.length > 0}
             <div
-              class="px-3 py-1.5 text-xs text-gray-400 flex items-center gap-2 border-b border-gray-100"
+              class="px-3 py-1.5 text-xs text-neutral-400 flex items-center gap-2 border-b border-neutral-100"
               aria-live="polite"
             >
               <span
-                class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin"
+                class="h-3 w-3 inline-block rounded-full border border-neutral-300 border-t-neutral-600 animate-spin"
                 aria-hidden="true"
               ></span>
               <span>Searching…</span>
             </div>
           {/if}
           {#if mergedResults.length === 0 && mentionQuery !== ""}
-            <div class="px-3 py-2 text-xs text-gray-400 flex items-center gap-2">
+            <div
+              class="px-3 py-2 text-xs text-neutral-400 flex items-center gap-2"
+            >
               {#if remoteSearching}
                 <span
-                  class="h-3 w-3 inline-block rounded-full border border-gray-300 border-t-gray-600 animate-spin"
+                  class="h-3 w-3 inline-block rounded-full border border-neutral-300 border-t-neutral-600 animate-spin"
                   aria-hidden="true"
                 ></span>
                 <span>Searching…</span>
@@ -408,7 +410,7 @@
                   role="option"
                   aria-selected={i === safeMentionIndex}
                   class="flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm"
-                  class:bg-gray-100={i === safeMentionIndex}
+                  class:bg-neutral-100={i === safeMentionIndex}
                   onmousedown={(e) => {
                     e.preventDefault();
                     selectMention(entry);
@@ -426,17 +428,17 @@
                     />
                   {:else}
                     <span
-                      class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 flex-shrink-0"
+                      class="h-6 w-6 rounded-full bg-neutral-200 flex items-center justify-center text-xs text-neutral-500 flex-shrink-0"
                       aria-hidden="true"
                     >
                       {profileLabel(entry)[0]?.toUpperCase() ?? "?"}
                     </span>
                   {/if}
-                  <span class="font-medium text-gray-700 truncate">
+                  <span class="font-medium text-neutral-700 truncate">
                     {profileLabel(entry)}
                   </span>
                   {#if profileSubLabel(entry)}
-                    <span class="text-xs text-gray-400 truncate">
+                    <span class="text-xs text-neutral-400 truncate">
                       {profileSubLabel(entry)}
                     </span>
                   {/if}
@@ -449,14 +451,14 @@
     </div>
   {/if}
   <div
-    class="flex flex-shrink-0 items-center gap-4 rounded-b border border-t-0 border-gray-200 bg-gray-50 px-3 py-2 text-sm"
+    class="flex flex-shrink-0 items-center gap-4 rounded-b border border-t-0 border-neutral-200 bg-neutral-50 px-3 py-2 text-sm"
   >
     <button
       type="button"
       onclick={onUploadClick}
       disabled={uploading || disabled || previewing || !BLOSSOM_URL}
       title={!BLOSSOM_URL ? "Blossom server not configured" : ""}
-      class="inline-flex items-center gap-1.5 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="inline-flex items-center gap-1.5 text-neutral-600 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
     >
       <svg
         width="16"
@@ -483,7 +485,7 @@
       onclick={togglePreview}
       disabled={disabled || uploading}
       aria-pressed={previewing}
-      class="ml-auto inline-flex items-center gap-1.5 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="ml-auto inline-flex items-center gap-1.5 text-neutral-600 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
     >
       <svg
         width="16"
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index ee78487..d761a58 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -20,9 +20,9 @@
         {name[0].toUpperCase()}
       </div>
     {/if}
-    <span class="text-[1.7rem] font-medium text-gray-900">{name}</span>
+    <span class="text-[1.7rem] font-medium text-neutral-900">{name}</span>
   </div>
-  <button class="text-sm text-gray-500 hover:text-gray-900"
+  <button class="text-sm text-neutral-500 hover:text-neutral-900"
     >Create your own community</button
   >
 </header>
diff --git a/src/lib/components/NewDiscussionModal.svelte b/src/lib/components/NewDiscussionModal.svelte
index 3f44c03..ceb4f5e 100644
--- a/src/lib/components/NewDiscussionModal.svelte
+++ b/src/lib/components/NewDiscussionModal.svelte
@@ -139,7 +139,7 @@
       <div class="flex items-start justify-between">
         <div>
           {#if groupStore.data?.name}
-            <p class="text-sm text-gray-700">{groupStore.data.name}</p>
+            <p class="text-sm text-neutral-700">{groupStore.data.name}</p>
           {/if}
           <h2 id="newdisc-title" class="text-2xl text-brand">New discussion</h2>
         </div>
@@ -147,7 +147,7 @@
           type="button"
           onclick={iconizeDraft}
           aria-label="Minimize draft"
-          class="rounded bg-gray-50 p-1.5 text-gray-700 hover:bg-gray-100"
+          class="rounded bg-neutral-50 p-1.5 text-neutral-700 hover:bg-neutral-100"
         >
           <svg
             width="20"
@@ -169,7 +169,7 @@
       <div>
         <label
           for="newdisc-title-input"
-          class="block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1"
+          class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
         >
           Title
         </label>
@@ -180,7 +180,7 @@
           bind:value={draftState.title}
           disabled={draftState.publishing}
           maxlength="72"
-          class="w-full rounded border border-gray-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+          class="w-full rounded border border-neutral-200 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
         />
       </div>
 
@@ -189,12 +189,12 @@
         <div class="relative">
           <label
             for="newdisc-labels-input"
-            class="block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1"
+            class="block text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-1"
           >
             Labels
           </label>
           <div
-            class="flex flex-wrap gap-1.5 items-center rounded border border-gray-200 px-3 py-1.5 min-h-[2.5rem] focus-within:ring-1 focus-within:ring-brand"
+            class="flex flex-wrap gap-1.5 items-center rounded border border-neutral-200 px-3 py-1.5 min-h-[2.5rem] focus-within:ring-1 focus-within:ring-brand"
           >
             {#each draftState.labels as l}
               <span
@@ -228,7 +228,7 @@
               />
               {#if suggestion}
                 <span
-                  class="pointer-events-none absolute inset-0 flex items-center text-sm text-gray-400"
+                  class="pointer-events-none absolute inset-0 flex items-center text-sm text-neutral-400"
                   aria-hidden="true"
                 >
                   <span class="invisible">{labelInput}</span><span
@@ -240,7 +240,7 @@
           </div>
           {#if suggestOpen && filtered.length > 0}
             <div
-              class="absolute left-0 right-0 z-20 mt-1 rounded border border-gray-200 bg-white shadow-lg p-3 flex flex-wrap gap-1.5"
+              class="absolute left-0 right-0 z-20 mt-1 rounded border border-neutral-200 bg-white shadow-lg p-3 flex flex-wrap gap-1.5"
             >
               {#each filtered as l}
                 <button
@@ -255,7 +255,7 @@
             </div>
           {/if}
           {#if suggestion}
-            <p class="mt-1 text-xs text-gray-400">
+            <p class="mt-1 text-xs text-neutral-400">
               Press Tab or Enter to add “{suggestion}”
             </p>
           {/if}
@@ -284,7 +284,7 @@
           type="button"
           onclick={onDiscard}
           disabled={draftState.publishing}
-          class="rounded bg-gray-700 px-5 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-50"
+          class="rounded bg-neutral-700 px-5 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
         >
           Discard
         </button>
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index 3873551..4b6e6e8 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -405,7 +405,7 @@
       />
     {:else if block.type === "blockquote"}
       <blockquote
-        class="my-3 pb-1 mb-0 border-l-3 border-gray-200 pl-3 text-gray-500"
+        class="my-3 pb-1 mb-0 border-l-3 border-neutral-200 pl-3 text-neutral-500"
       >
         {@render renderBlocks(block.blocks)}
       </blockquote>
@@ -416,7 +416,7 @@
 {/snippet}
 
 <div
-  class="prose leading-5 max-w-none text-gray-700 [&_p]:my-3 [&_img]:my-5 [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none"
+  class="prose leading-5 max-w-none text-neutral-700 [&_p]:my-3 [&_img]:my-5 [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none"
 >
   {#each paragraphs as blocks}
     {@render renderBlocks(blocks)}
diff --git a/src/lib/components/Reactions.svelte b/src/lib/components/Reactions.svelte
index c554e2c..0e0d68b 100644
--- a/src/lib/components/Reactions.svelte
+++ b/src/lib/components/Reactions.svelte
@@ -12,10 +12,10 @@
 <div class="flex flex-wrap items-center gap-1.5">
   {#each reactions as r}
     <button
-      class="flex items-center gap-1 rounded-full border border-gray-200 px-2 py-0.5 text-xs hover:bg-gray-50"
+      class="flex items-center gap-1 rounded-full border border-neutral-200 px-2 py-0.5 text-xs hover:bg-neutral-50"
     >
       <span>{r.emoji}</span>
-      <span class="text-gray-600">{r.count}</span>
+      <span class="text-neutral-600">{r.count}</span>
     </button>
   {/each}
   {#if zaps > 0}
diff --git a/src/lib/components/ThreadItem.svelte b/src/lib/components/ThreadItem.svelte
index 77d8aaa..a3500c1 100644
--- a/src/lib/components/ThreadItem.svelte
+++ b/src/lib/components/ThreadItem.svelte
@@ -28,7 +28,7 @@
     <img src={a.picture} alt="" class={cls} />
   {:else}
     <span
-      class="{cls} flex items-center justify-center rounded-full bg-gray-200 text-[10px] font-semibold text-gray-500"
+      class="{cls} flex items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500"
     >
       {a.name[0].toUpperCase()}
     </span>
@@ -37,20 +37,26 @@
 
 <a
   href="/thread/{thread.id}"
-  class="flex items-center gap-6 border-b border-gray-100 py-4 hover:bg-gray-50"
+  class="flex items-center gap-6 border-b border-neutral-100 py-4 hover:bg-neutral-50"
 >
   <!-- Col 1: title + byline -->
   <div class="flex-1 min-w-0">
-    <div class="text-lg mb-1.5 text-gray-900 leading-6">{thread.title}</div>
-    <div class="flex items-center gap-1.5 text-sm text-gray-500">
+    <div class="text-lg mb-1.5 text-neutral-900 leading-6">{thread.title}</div>
+    <div class="flex items-center gap-1.5 text-sm text-neutral-500">
       <span>by</span>
       {@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
       {#if thread.repliers.length > 0}
         <span>and</span>
         <div class="flex -space-x-1.5">
           {#each thread.repliers as r, i}
-            <span class="relative" style="z-index: {thread.repliers.length - i}">
-              {@render avatar(r, "h-5 w-5 rounded-full object-cover ring-1 ring-white")}
+            <span
+              class="relative"
+              style="z-index: {thread.repliers.length - i}"
+            >
+              {@render avatar(
+                r,
+                "h-5 w-5 rounded-full object-cover ring-1 ring-white",
+              )}
             </span>
           {/each}
         </div>
@@ -68,21 +74,24 @@
   <!-- Col 3: replies | score | activity -->
   <div class="flex shrink-0 items-center gap-6">
     <div class="flex flex-col items-center gap-0.5">
-      <span class="text-gray-800">{thread.replyCount}</span>
-      <span class="text-sm text-gray-400">replies</span>
+      <span class="text-neutral-800">{thread.replyCount}</span>
+      <span class="text-sm text-neutral-400">replies</span>
     </div>
 
     <div class="flex flex-col items-center gap-0.5">
       <span class="text-accent">{thread.score}</span>
-      <span class="text-sm text-gray-400">score</span>
+      <span class="text-sm text-neutral-400">score</span>
     </div>
 
     <div class="flex flex-col items-center gap-0.5">
       <div class="flex items-center gap-1">
-        {@render avatar(thread.lastActiveAuthor, "h-5 w-5 rounded-full object-cover")}
-        <span class="text-gray-800">{thread.lastActivity}</span>
+        {@render avatar(
+          thread.lastActiveAuthor,
+          "h-5 w-5 rounded-full object-cover",
+        )}
+        <span class="text-neutral-800">{thread.lastActivity}</span>
       </div>
-      <span class="text-sm text-gray-400">activity</span>
+      <span class="text-sm text-neutral-400">activity</span>
     </div>
   </div>
 </a>
diff --git a/src/lib/components/ThreadScrubber.svelte b/src/lib/components/ThreadScrubber.svelte
index 55a4d01..421eab2 100644
--- a/src/lib/components/ThreadScrubber.svelte
+++ b/src/lib/components/ThreadScrubber.svelte
@@ -149,7 +149,7 @@
 >
   <!-- First post date -->
   <div
-    class="text-xs text-gray-300 mb-1 text-right leading-tight whitespace-pre"
+    class="text-xs text-neutral-300 mb-1 text-right leading-tight whitespace-pre"
   >
     {firstPost ? formatDate(firstPost.createdAt) : ""}
   </div>
@@ -169,7 +169,7 @@
 
     <!-- Thumb -->
     <div
-      class="absolute rounded-full bg-brand hover:bg-gray-800 transition-colors cursor-grab active:cursor-grabbing touch-none"
+      class="absolute rounded-full bg-brand hover:bg-neutral-800 transition-colors cursor-grab active:cursor-grabbing touch-none"
       style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;"
       onpointerdown={onThumbPointerDown}
       onpointermove={onThumbPointerMove}
@@ -190,7 +190,7 @@
 
   <!-- Last post date -->
   <div
-    class="text-xs text-gray-300 mt-1 text-right leading-tight whitespace-pre"
+    class="text-xs text-neutral-300 mt-1 text-right leading-tight whitespace-pre"
   >
     {lastPost ? formatDate(lastPost.createdAt) : ""}
   </div>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index b2b1b28..81997b9 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -7,7 +7,7 @@ html {
 }
 
 body {
-  background-color: var(--color-gray-100);
+  background-color: var(--color-neutral-100);
 }
 
 .no-scrollbar {
diff --git a/src/routes/thread/[id]/+page.svelte b/src/routes/thread/[id]/+page.svelte
index b4d8a55..47025b1 100644
--- a/src/routes/thread/[id]/+page.svelte
+++ b/src/routes/thread/[id]/+page.svelte
@@ -206,7 +206,7 @@
     />
   {:else}
     <span
-      class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-200 text-lg font-semibold text-gray-500"
+      class="w-12 h-12 flex items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
     >
       {author.name[0].toUpperCase()}
     </span>
@@ -225,8 +225,8 @@
     </div>
     <div class="flex-1 min-w-0">
       <div class="flex items-baseline justify-between mb-2">
-        <span class="font-medium text-gray-600">{author.name}</span>
-        <span class="text-sm text-gray-400 ml-4 flex-shrink-0"
+        <span class="font-medium text-neutral-600">{author.name}</span>
+        <span class="text-sm text-neutral-400 ml-4 flex-shrink-0"
           >{formatDate(p.createdAt)}</span
         >
       </div>
@@ -236,7 +236,7 @@
       <div class="flex items-center justify-between mt-3">
         <Reactions reactions={[]} zaps={0} />
         <div
-          class="flex items-center gap-4 text-sm text-gray-400 flex-shrink-0"
+          class="flex items-center gap-4 text-sm text-neutral-400 flex-shrink-0"
         >
           <button
             onclick={() => quotePost(p)}
@@ -280,7 +280,7 @@
       </div>
 
       {#if detail.replies.length > 0}
-        <div class="divide-y divide-gray-100 border-t border-gray-100">
+        <div class="divide-y divide-neutral-100 border-t border-neutral-100">
           {#each detail.replies as reply, i}
             <div class="py-6" bind:this={replyEls[i]}>
               {@render post(reply, i + 1, () => {})}
@@ -289,7 +289,7 @@
         </div>
       {/if}
 
-      <div class="mt-8 border-t border-gray-200 pt-6 pl-18">
+      <div class="mt-8 border-t border-neutral-200 pt-6 pl-18">
         {#if auth.user}
           {#if replyError}
             <div
@@ -318,7 +318,7 @@
             </button>
           </div>
         {:else}
-          <p class=" text-gray-500 text-center">
+          <p class=" text-neutral-500 text-center">
             To participate and reply, please
             <button onclick={openLogin} class="text-brand hover:underline"
               >login now</button
@@ -336,7 +336,7 @@
     />
   </div>
 {:else}
-  <div class="py-12 text-center text-gray-400">Loading…</div>
+  <div class="py-12 text-center text-neutral-400">Loading…</div>
 {/if}
 
 {#if selectionTarget && auth.user}
@@ -345,7 +345,7 @@
     onmousedown={(e) => e.preventDefault()}
     onclick={quoteFromSelection}
     style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
-    class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-gray-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-gray-700"
+    class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
   >
     Quote
   </button>