From ca50b94e4e71fbc85410bdce17815dbb7b562bee Mon Sep 17 00:00:00 2001
From: josh <josh@afterima.ge>
Date: Thu, 29 Jan 2026 06:32:05 +0000
Subject: [PATCH 1/3] fix: design system cleanup

- replace old orange accent (#FF6B00) with gold (#d4b08c)
- convert gray-* colors to white/* opacity variants
- fix vault modal from light to dark theme
- update ui components to match dark design system
---
 apps/web/app/[locale]/[code]/page.tsx         | 18 +++---
 apps/web/app/[locale]/share/page.tsx          | 34 +++++-----
 apps/web/app/[locale]/vault/vault/modal.tsx   | 50 +++++++--------
 .../web/app/[locale]/vault/vault/password.tsx |  2 +-
 apps/web/app/[locale]/vault/vault/tags.tsx    | 63 +++++++++++++++++++
 apps/web/components/beams.tsx                 |  8 +--
 apps/web/components/command.tsx               |  2 +-
 apps/web/components/generator.tsx             |  4 +-
 apps/web/components/icons.tsx                 |  6 +-
 apps/web/components/import.tsx                |  4 +-
 apps/web/components/language.tsx              |  2 +-
 apps/web/components/share.tsx                 | 16 ++---
 apps/web/components/tags.tsx                  |  4 +-
 apps/web/components/totp.tsx                  |  4 +-
 apps/web/components/ui/button.tsx             |  6 +-
 apps/web/components/ui/card.tsx               | 10 +--
 apps/web/components/ui/checkbox.tsx           |  4 +-
 apps/web/components/ui/input.tsx              |  2 +-
 apps/web/components/ui/modal.tsx              |  4 +-
 apps/web/components/ui/select.tsx             |  2 +-
 apps/web/components/ui/textarea.tsx           |  2 +-
 apps/web/components/ui/toggle.tsx             |  4 +-
 22 files changed, 157 insertions(+), 94 deletions(-)

diff --git a/apps/web/app/[locale]/[code]/page.tsx b/apps/web/app/[locale]/[code]/page.tsx
index 8e8ab0d..b660366 100644
--- a/apps/web/app/[locale]/[code]/page.tsx
+++ b/apps/web/app/[locale]/[code]/page.tsx
@@ -134,7 +134,7 @@ export default function ClaimPage({
   const highlighted = secret?.type === "text" ? highlight(secret.value) : null;
 
   return (
-    <div className="min-h-screen bg-black text-white selection:bg-[#FF6B00] selection:text-black">
+    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-[#d4b08c] selection:text-black">
       <LanguageToggle />
       <Link
         href="/"
@@ -146,7 +146,7 @@ export default function ClaimPage({
       <section className="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 pb-32">
         <div className="w-full max-w-md">
           <div className="mb-8 sm:mb-16">
-            <h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#FF6B00] inline-block">
+            <h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#d4b08c] inline-block">
               {titles(status)}
             </h1>
             <p className="mt-4 text-white/40 text-sm invisible">placeholder</p>
@@ -177,7 +177,7 @@ export default function ClaimPage({
               <button
                 type="button"
                 onClick={handleReveal}
-                className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity"
+                className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity"
               >
                 {t("confirmButton")}
               </button>
@@ -207,7 +207,7 @@ export default function ClaimPage({
               </div>
               <Link
                 href="/share"
-                className="block w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity text-center"
+                className="block w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity text-center"
               >
                 {t("create")}
               </Link>
@@ -226,7 +226,7 @@ export default function ClaimPage({
                     {secret.label && (
                       <>
                         <p className="text-xs tracking-widest text-white/40 mb-2">{t("label")}</p>
-                        <p className="text-[#FF6B00] font-mono text-sm">{secret.label}</p>
+                        <p className="text-[#d4b08c] font-mono text-sm">{secret.label}</p>
                       </>
                     )}
                   </div>
@@ -270,7 +270,7 @@ export default function ClaimPage({
                   <button
                     type="button"
                     onClick={handleCopy}
-                    className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
+                    className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
                   >
                     {copied ? t("copied") : t("copy")}
                   </button>
@@ -279,13 +279,13 @@ export default function ClaimPage({
                 <>
                   <div className="mb-6">
                     <p className="text-xs tracking-widest text-white/40 mb-2">{t("filename")}</p>
-                    <p className="text-[#FF6B00] font-mono text-sm">{secret.filename}</p>
+                    <p className="text-[#d4b08c] font-mono text-sm">{secret.filename}</p>
                   </div>
 
                   <button
                     type="button"
                     onClick={handleDownload}
-                    className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
+                    className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-6"
                   >
                     {t("download")}
                   </button>
@@ -293,7 +293,7 @@ export default function ClaimPage({
               ) : null}
 
               {secret && secret.remaining > 0 && (
-                <p className="text-xs text-[#FF6B00] text-center mb-6">
+                <p className="text-xs text-[#d4b08c] text-center mb-6">
                   {secret.remaining} {t("remaining")}
                 </p>
               )}
diff --git a/apps/web/app/[locale]/share/page.tsx b/apps/web/app/[locale]/share/page.tsx
index 8d4cf6c..2aec2e2 100644
--- a/apps/web/app/[locale]/share/page.tsx
+++ b/apps/web/app/[locale]/share/page.tsx
@@ -119,7 +119,7 @@ export default function SharePage() {
   const canSubmit = mode === "text" ? !!secret : !!file;
 
   return (
-    <div className="min-h-screen bg-black text-white selection:bg-[#FF6B00] selection:text-black">
+    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-[#d4b08c] selection:text-black">
       <LanguageToggle />
       <Link
         href="/"
@@ -131,7 +131,7 @@ export default function SharePage() {
       <section className="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 pb-32">
         <div className="w-full max-w-md">
           <div className="mb-8 sm:mb-16">
-            <h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#FF6B00] inline-block">
+            <h1 className="text-3xl sm:text-4xl font-bold tracking-tighter border-b-4 border-[#d4b08c] inline-block">
               {t("title")}
             </h1>
             <p className="mt-4 text-white/40 text-sm">{t("subtitle")}</p>
@@ -152,7 +152,7 @@ export default function SharePage() {
                   onClick={() => setMode("text")}
                   className={`px-4 py-2 text-xs tracking-widest transition-colors border ${
                     mode === "text"
-                      ? "bg-[#FF6B00] text-black border-[#FF6B00]"
+                      ? "bg-[#d4b08c] text-black border-[#d4b08c]"
                       : "border-white/10 text-white/40 hover:text-white hover:border-white/30"
                   }`}
                 >
@@ -163,7 +163,7 @@ export default function SharePage() {
                   onClick={() => setMode("file")}
                   className={`px-4 py-2 text-xs tracking-widest transition-colors border ${
                     mode === "file"
-                      ? "bg-[#FF6B00] text-black border-[#FF6B00]"
+                      ? "bg-[#d4b08c] text-black border-[#d4b08c]"
                       : "border-white/10 text-white/40 hover:text-white hover:border-white/30"
                   }`}
                 >
@@ -180,7 +180,7 @@ export default function SharePage() {
                   value={label}
                   onChange={(e) => setLabel(e.target.value)}
                   placeholder={t("labelPlaceholder")}
-                  className="w-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#FF6B00] transition-colors font-mono text-sm"
+                  className="w-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#d4b08c] transition-colors font-mono text-sm"
                 />
               </div>
 
@@ -194,7 +194,7 @@ export default function SharePage() {
                       value={secret}
                       onChange={(e) => setSecret(e.target.value)}
                       placeholder={t("secretPlaceholder")}
-                      className="w-full h-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#FF6B00] transition-colors resize-none font-mono text-sm"
+                      className="w-full h-full bg-transparent border border-white/10 px-4 py-3 text-white placeholder:text-white/20 focus:outline-none focus:border-[#d4b08c] transition-colors resize-none font-mono text-sm"
                     />
                   ) : (
                     <div
@@ -207,9 +207,9 @@ export default function SharePage() {
                       onDrop={handleFileDrop}
                       className={`w-full h-full border px-4 flex items-center justify-center text-center cursor-pointer transition-colors ${
                         dragover
-                          ? "border-[#FF6B00] bg-[#FF6B00]/5"
+                          ? "border-[#d4b08c] bg-[#d4b08c]/5"
                           : file
-                            ? "border-[#FF6B00]/50 bg-[#FF6B00]/5"
+                            ? "border-[#d4b08c]/50 bg-[#d4b08c]/5"
                             : "border-white/10 hover:border-white/30"
                       }`}
                     >
@@ -221,7 +221,7 @@ export default function SharePage() {
                       />
                       <div>
                         {file ? (
-                          <p className="text-[#FF6B00] font-mono text-sm">{file.name}</p>
+                          <p className="text-[#d4b08c] font-mono text-sm">{file.name}</p>
                         ) : (
                           <>
                             <p className="text-white/40 text-sm mb-1">{t("dropzone")}</p>
@@ -247,7 +247,7 @@ export default function SharePage() {
                         onClick={() => setViews(n)}
                         className={`flex-1 h-9 text-sm transition-colors ${
                           views === n
-                            ? "bg-[#FF6B00] text-black"
+                            ? "bg-[#d4b08c] text-black"
                             : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"
                         }`}
                       >
@@ -268,7 +268,7 @@ export default function SharePage() {
                         onClick={() => setTtl(v)}
                         className={`flex-1 h-9 text-sm transition-colors ${
                           ttl === v
-                            ? "bg-[#FF6B00] text-black"
+                            ? "bg-[#d4b08c] text-black"
                             : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"
                         }`}
                       >
@@ -281,15 +281,15 @@ export default function SharePage() {
 
               <ul className="space-y-1">
                 <li className="text-xs text-white/30 flex items-center gap-2">
-                  <span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
+                  <span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
                   {t("security.encrypted")}
                 </li>
                 <li className="text-xs text-white/30 flex items-center gap-2">
-                  <span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
+                  <span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
                   {t("security.server")}
                 </li>
                 <li className="text-xs text-white/30 flex items-center gap-2">
-                  <span className="w-1 h-1 bg-[#FF6B00] rounded-full" />
+                  <span className="w-1 h-1 bg-[#d4b08c] rounded-full" />
                   {t("security.destruct")}
                 </li>
               </ul>
@@ -297,7 +297,7 @@ export default function SharePage() {
               <button
                 type="submit"
                 disabled={!canSubmit || isGenerating}
-                className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed"
+                className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 {isGenerating ? t("generating") : t("button")}
               </button>
@@ -311,7 +311,7 @@ export default function SharePage() {
               }}
             >
               <div className="h-[38px] mb-6">
-                <p className="text-[#FF6B00] text-sm">{t("success")}</p>
+                <p className="text-[#d4b08c] text-sm">{t("success")}</p>
               </div>
 
               <div className="mb-6">
@@ -333,7 +333,7 @@ export default function SharePage() {
               <button
                 type="button"
                 onClick={handleCopy}
-                className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-2"
+                className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity mb-2"
               >
                 {copied ? t("copied") : t("copy")}
               </button>
diff --git a/apps/web/app/[locale]/vault/vault/modal.tsx b/apps/web/app/[locale]/vault/vault/modal.tsx
index 8f98249..a97878c 100644
--- a/apps/web/app/[locale]/vault/vault/modal.tsx
+++ b/apps/web/app/[locale]/vault/vault/modal.tsx
@@ -5,8 +5,8 @@ import type { ItemType } from "@/lib/generated/prisma/enums";
 import type { VaultItem } from "./store";
 import { fieldConfigs } from "./fields";
 import { typeIcons, typeIconsLarge, typeLabels, typeColors } from "./icons";
-import { PasswordFieldLight } from "./password";
-import { TagInputLight } from "./tags";
+import { PasswordField } from "./password";
+import { TagInput } from "./tags";
 
 interface Props {
 	item?: VaultItem | null;
@@ -83,11 +83,11 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 	}
 
 	function renderField(field: (typeof fields)[0]) {
-		const inputClass = "w-full bg-white border border-stone-200 rounded-xl px-4 py-3 text-base text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-orange-500/40 focus:border-orange-500 transition-all read-only:bg-stone-50 read-only:text-stone-500";
+		const inputClass = "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-base text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/40 focus:border-[#d4b08c] transition-all read-only:bg-white/[0.02] read-only:text-white/50";
 
 		return (
 			<div>
-				<label className="block text-sm font-medium text-stone-600 mb-2">{field.label}</label>
+				<label className="block text-sm font-medium text-white/50 mb-2">{field.label}</label>
 				{field.type === "textarea" ? (
 					<textarea
 						value={(data[field.name] as string) || ""}
@@ -98,7 +98,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 						className={`${inputClass} resize-none font-mono`}
 					/>
 				) : field.type === "password" ? (
-					<PasswordFieldLight
+					<PasswordField
 						value={(data[field.name] as string) || ""}
 						onChange={(v) => setData({ ...data, [field.name]: v })}
 						required={field.required}
@@ -128,24 +128,24 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 			onClick={handleBackdrop}
 		>
 			<div
-				className={`bg-white rounded-t-3xl sm:rounded-2xl w-full sm:max-w-lg max-h-[90vh] sm:max-h-[85vh] flex flex-col shadow-2xl transition-all duration-200 ease-out ${isVisible ? "translate-y-0 opacity-100 sm:scale-100" : "translate-y-full sm:translate-y-0 sm:scale-95 opacity-0"}`}
+				className={`bg-[#161616] rounded-t-3xl sm:rounded-2xl w-full sm:max-w-lg max-h-[90vh] sm:max-h-[85vh] flex flex-col shadow-2xl transition-all duration-200 ease-out ${isVisible ? "translate-y-0 opacity-100 sm:scale-100" : "translate-y-full sm:translate-y-0 sm:scale-95 opacity-0"}`}
 			>
-				<div className="flex items-center justify-between px-6 py-5 border-b border-stone-100">
+				<div className="flex items-center justify-between px-6 py-5 border-b border-white/10">
 					<div className="flex items-center gap-4">
 						<div className={`w-11 h-11 rounded-xl flex items-center justify-center ${typeColors[type]}`}>
 							{typeIconsLarge[type]}
 						</div>
 						<div>
-							<h2 className="text-lg font-semibold text-stone-900">
+							<h2 className="text-lg font-semibold text-white">
 								{isTrash ? "view item" : item ? "edit item" : "new item"}
 							</h2>
-							<p className="text-sm text-stone-500">{typeLabels[type]}</p>
+							<p className="text-sm text-white/50">{typeLabels[type]}</p>
 						</div>
 					</div>
 					<button
 						type="button"
 						onClick={handleClose}
-						className="w-10 h-10 -mr-2 flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 rounded-xl transition-colors"
+						className="w-10 h-10 -mr-2 flex items-center justify-center text-white/40 hover:text-white hover:bg-white/5 rounded-xl transition-colors"
 						aria-label="close"
 					>
 						<svg aria-hidden="true" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -158,8 +158,8 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 					<div className="p-6 space-y-5">
 						{!item && (
 							<div>
-								<label className="block text-sm font-medium text-stone-600 mb-2">type</label>
-								<div className="flex flex-wrap gap-1.5 p-1.5 bg-stone-100 rounded-xl">
+								<label className="block text-sm font-medium text-white/50 mb-2">type</label>
+								<div className="flex flex-wrap gap-1.5 p-1.5 bg-white/5 rounded-xl">
 									{types.map((t) => (
 										<button
 											key={t}
@@ -167,8 +167,8 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 											onClick={() => setType(t)}
 											className={`flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
 												type === t
-													? "bg-white text-stone-900 shadow-sm"
-													: "text-stone-500 hover:text-stone-700 hover:bg-stone-50"
+													? "bg-white/10 text-white shadow-sm"
+													: "text-white/50 hover:text-white hover:bg-white/5"
 											}`}
 										>
 											{typeIcons[t]}
@@ -180,7 +180,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 						)}
 
 						<div>
-							<label className="block text-sm font-medium text-stone-600 mb-2">title</label>
+							<label className="block text-sm font-medium text-white/50 mb-2">title</label>
 							<input
 								ref={titleRef}
 								type="text"
@@ -189,27 +189,27 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 								placeholder={typeLabels[type]}
 								required
 								readOnly={!!readOnly}
-								className="w-full bg-white border border-stone-200 rounded-xl px-4 py-3 text-base text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-orange-500/40 focus:border-orange-500 transition-all read-only:bg-stone-50 read-only:text-stone-500"
+								className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-base text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/40 focus:border-[#d4b08c] transition-all read-only:bg-white/[0.02] read-only:text-white/50"
 							/>
 						</div>
 
 						{renderFields()}
 
 						<div>
-							<label className="block text-sm font-medium text-stone-600 mb-2">tags</label>
-							<TagInputLight tags={tags} onChange={setTags} readOnly={!!readOnly} />
+							<label className="block text-sm font-medium text-white/50 mb-2">tags</label>
+							<TagInput tags={tags} onChange={setTags} readOnly={!!readOnly} />
 						</div>
 					</div>
 				</form>
 
-				<div className="px-6 py-4 pb-safe bg-stone-50 border-t border-stone-100 flex flex-col-reverse sm:flex-row gap-3 rounded-b-3xl sm:rounded-b-2xl">
+				<div className="px-6 py-4 pb-safe bg-white/[0.02] border-t border-white/10 flex flex-col-reverse sm:flex-row gap-3 rounded-b-3xl sm:rounded-b-2xl">
 					{isTrash && item ? (
 						<>
 							<button
 								type="button"
 								onClick={handleClose}
 								disabled={saving}
-								className="flex-1 px-4 py-3 text-stone-600 font-medium rounded-xl border border-stone-200 hover:bg-stone-100 active:bg-stone-200 transition-colors disabled:opacity-50"
+								className="flex-1 px-4 py-3 text-white/50 font-medium rounded-xl border border-white/10 hover:bg-white/5 active:bg-white/10 transition-colors disabled:opacity-50"
 							>
 								close
 							</button>
@@ -218,7 +218,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 									type="button"
 									onClick={onRestore}
 									disabled={saving}
-									className="flex-1 px-4 py-3 bg-orange-500 text-white font-medium rounded-xl hover:bg-orange-600 active:bg-orange-700 transition-colors disabled:opacity-50"
+									className="flex-1 px-4 py-3 bg-[#d4b08c] text-[#0a0a0a] font-medium rounded-xl hover:bg-[#c9a57f] active:bg-[#be9a74] transition-colors disabled:opacity-50"
 								>
 									{saving ? "restoring..." : "restore"}
 								</button>
@@ -228,7 +228,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 									type="button"
 									onClick={onDelete}
 									disabled={saving}
-									className="px-4 py-3 text-red-600 font-medium rounded-xl border border-red-200 bg-red-50 hover:bg-red-100 active:bg-red-200 transition-colors disabled:opacity-50"
+									className="px-4 py-3 text-red-400 font-medium rounded-xl border border-red-500/20 bg-red-500/10 hover:bg-red-500/20 active:bg-red-500/30 transition-colors disabled:opacity-50"
 								>
 									{saving ? "deleting..." : "delete forever"}
 								</button>
@@ -241,7 +241,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 									type="button"
 									onClick={onDelete}
 									disabled={saving}
-									className="sm:mr-auto px-4 py-3 text-red-500 font-medium rounded-xl hover:bg-red-50 active:bg-red-100 transition-colors disabled:opacity-50"
+									className="sm:mr-auto px-4 py-3 text-red-400 font-medium rounded-xl hover:bg-red-500/10 active:bg-red-500/20 transition-colors disabled:opacity-50"
 								>
 									{saving ? "deleting..." : "delete"}
 								</button>
@@ -250,7 +250,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 								type="button"
 								onClick={handleClose}
 								disabled={saving}
-								className="flex-1 sm:flex-initial px-5 py-3 text-stone-600 font-medium rounded-xl border border-stone-200 hover:bg-stone-100 active:bg-stone-200 transition-colors disabled:opacity-50"
+								className="flex-1 sm:flex-initial px-5 py-3 text-white/50 font-medium rounded-xl border border-white/10 hover:bg-white/5 active:bg-white/10 transition-colors disabled:opacity-50"
 							>
 								cancel
 							</button>
@@ -258,7 +258,7 @@ export function ItemModal({ item, defaulttype, onSave, onDelete, onRestore, onCl
 								type="submit"
 								onClick={handleSubmit}
 								disabled={saving}
-								className="flex-1 sm:flex-initial px-6 py-3 bg-orange-500 text-white font-medium rounded-xl hover:bg-orange-600 active:bg-orange-700 transition-colors disabled:opacity-50"
+								className="flex-1 sm:flex-initial px-6 py-3 bg-[#d4b08c] text-[#0a0a0a] font-medium rounded-xl hover:bg-[#c9a57f] active:bg-[#be9a74] transition-colors disabled:opacity-50"
 							>
 								{saving ? "saving..." : "save"}
 							</button>
diff --git a/apps/web/app/[locale]/vault/vault/password.tsx b/apps/web/app/[locale]/vault/vault/password.tsx
index 0d72cef..f6a1e30 100644
--- a/apps/web/app/[locale]/vault/vault/password.tsx
+++ b/apps/web/app/[locale]/vault/vault/password.tsx
@@ -42,7 +42,7 @@ export function PasswordField({ value, onChange, required, readOnly, showGenerat
 					onChange={(e) => onChange(e.target.value)}
 					required={required}
 					readOnly={readOnly}
-					className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 min-h-[48px] pr-28 focus:outline-none focus:border-[#FF6B00] transition-colors font-mono text-base read-only:opacity-60"
+					className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 min-h-[48px] pr-28 focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/40 focus:border-[#d4b08c] transition-colors font-mono text-base text-white read-only:bg-white/[0.02] read-only:text-white/50"
 				/>
 				<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
 					{showGenerator && !readOnly && (
diff --git a/apps/web/app/[locale]/vault/vault/tags.tsx b/apps/web/app/[locale]/vault/vault/tags.tsx
index 06dc8f8..b64743b 100644
--- a/apps/web/app/[locale]/vault/vault/tags.tsx
+++ b/apps/web/app/[locale]/vault/vault/tags.tsx
@@ -51,6 +51,69 @@ interface TagInputProps {
 	readOnly?: boolean;
 }
 
+export function TagInput({ tags, onChange, readOnly }: TagInputProps) {
+	const [input, setInput] = useState("");
+
+	function addTag(value: string) {
+		const tag = value.trim().toLowerCase();
+		if (tag && !tags.includes(tag)) {
+			onChange([...tags, tag]);
+		}
+		setInput("");
+	}
+
+	function removeTag(tag: string) {
+		onChange(tags.filter((t) => t !== tag));
+	}
+
+	function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+		if (e.key === "Enter" || e.key === ",") {
+			e.preventDefault();
+			addTag(input);
+		} else if (e.key === "Backspace" && !input && tags.length > 0) {
+			removeTag(tags[tags.length - 1]);
+		}
+	}
+
+	return (
+		<div className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2.5 min-h-[48px] focus-within:ring-2 focus-within:ring-[#d4b08c]/40 focus-within:border-[#d4b08c] transition-all">
+			<div className="flex flex-wrap gap-2 items-center">
+				{tags.map((tag) => (
+					<span
+						key={tag}
+						className="inline-flex items-center gap-1 px-3 py-1.5 bg-white/10 rounded-full text-sm text-white/70"
+					>
+						{tag}
+						{!readOnly && (
+							<button
+								type="button"
+								onClick={() => removeTag(tag)}
+								className="w-5 h-5 flex items-center justify-center text-white/40 hover:text-white transition-colors rounded"
+								aria-label={`remove ${tag}`}
+							>
+								<svg aria-hidden="true" className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						)}
+					</span>
+				))}
+				{!readOnly && (
+					<input
+						type="text"
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						onKeyDown={handleKeyDown}
+						onBlur={() => input && addTag(input)}
+						placeholder={tags.length === 0 ? "add tags..." : ""}
+						className="flex-1 min-w-[100px] bg-transparent outline-none text-base text-white placeholder:text-white/40 py-1"
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
 export function TagInputLight({ tags, onChange, readOnly }: TagInputProps) {
 	const [input, setInput] = useState("");
 
diff --git a/apps/web/components/beams.tsx b/apps/web/components/beams.tsx
index c0f377f..7745267 100644
--- a/apps/web/components/beams.tsx
+++ b/apps/web/components/beams.tsx
@@ -52,7 +52,7 @@ export const BackgroundBeams = ({
     <div
       ref={parentRef}
       className={cn(
-        "h-dvh bg-black relative flex items-center w-full justify-center overflow-hidden",
+        "h-dvh bg-[#0a0a0a] relative flex items-center w-full justify-center overflow-hidden",
         className,
       )}
     >
@@ -173,7 +173,7 @@ const CollisionMechanism = React.forwardRef<
           repeatDelay: beamOptions.repeatDelay || 0,
         }}
         className={cn(
-          "absolute left-0 top-20 m-auto h-14 w-px rounded-full bg-gradient-to-t from-[#FF6B00] via-[#FF6B00]/50 to-transparent",
+          "absolute left-0 top-20 m-auto h-14 w-px rounded-full bg-gradient-to-t from-[#d4b08c] via-[#d4b08c]/50 to-transparent",
           beamOptions.className,
         )}
       />
@@ -211,7 +211,7 @@ const Explosion = ({ ...props }: React.HTMLProps<HTMLDivElement>) => {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 1.5, ease: "easeOut" }}
-        className="absolute -inset-x-10 top-0 m-auto h-2 w-10 rounded-full bg-gradient-to-r from-transparent via-[#FF6B00] to-transparent blur-sm"
+        className="absolute -inset-x-10 top-0 m-auto h-2 w-10 rounded-full bg-gradient-to-r from-transparent via-[#d4b08c] to-transparent blur-sm"
       />
       {spans.map((span) => (
         <motion.span
@@ -223,7 +223,7 @@ const Explosion = ({ ...props }: React.HTMLProps<HTMLDivElement>) => {
             opacity: 0,
           }}
           transition={{ duration: Math.random() * 1.5 + 0.5, ease: "easeOut" }}
-          className="absolute h-1 w-1 rounded-full bg-gradient-to-b from-[#FF6B00] to-[#FF6B00]/50"
+          className="absolute h-1 w-1 rounded-full bg-gradient-to-b from-[#d4b08c] to-[#d4b08c]/50"
         />
       ))}
     </div>
diff --git a/apps/web/components/command.tsx b/apps/web/components/command.tsx
index 4b2c935..afa25d5 100644
--- a/apps/web/components/command.tsx
+++ b/apps/web/components/command.tsx
@@ -110,7 +110,7 @@ export function Command({ onnewitem, onexport, onlock }: Props) {
 	return (
 		<div className="fixed inset-0 z-[200] flex items-start justify-center pt-[15vh]">
 			<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setOpen(false)} />
-			<div className="relative bg-stone-900 border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
+			<div className="relative bg-[#161616] border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
 				<div className="flex items-center gap-3 px-4 py-3 border-b border-white/10">
 					<svg aria-hidden="true" className="w-5 h-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d={navicons.search} />
diff --git a/apps/web/components/generator.tsx b/apps/web/components/generator.tsx
index 8ad1512..f959d0c 100644
--- a/apps/web/components/generator.tsx
+++ b/apps/web/components/generator.tsx
@@ -78,7 +78,7 @@ export function Generator({ onSelect, compact }: Props) {
           {onSelect && (
             <button
               onClick={select}
-              className="px-4 py-2 bg-[#FF6B00] text-black rounded-lg hover:bg-[#FF6B00]/90 transition-colors text-sm font-medium"
+              className="px-4 py-2 bg-[#d4b08c] text-black rounded-lg hover:bg-[#d4b08c]/90 transition-colors text-sm font-medium"
             >
               use
             </button>
@@ -97,7 +97,7 @@ export function Generator({ onSelect, compact }: Props) {
             max={128}
             value={length}
             onChange={(e) => setLength(Number(e.target.value))}
-            className="w-full accent-[#FF6B00]"
+            className="w-full accent-[#d4b08c]"
           />
         </div>
 
diff --git a/apps/web/components/icons.tsx b/apps/web/components/icons.tsx
index 1539e2a..28c23d6 100644
--- a/apps/web/components/icons.tsx
+++ b/apps/web/components/icons.tsx
@@ -45,7 +45,7 @@ export function Icon({ name, className }: Props) {
 
 export function LockIcon() {
 	return (
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d4b08c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 			<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
 			<path d="M7 11V7a5 5 0 0 1 10 0v4" />
 		</svg>
@@ -54,7 +54,7 @@ export function LockIcon() {
 
 export function ClockIcon() {
 	return (
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d4b08c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 			<circle cx="12" cy="12" r="10" />
 			<polyline points="12 6 12 12 16 14" />
 		</svg>
@@ -63,7 +63,7 @@ export function ClockIcon() {
 
 export function ShieldIcon() {
 	return (
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d4b08c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 			<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
 		</svg>
 	);
diff --git a/apps/web/components/import.tsx b/apps/web/components/import.tsx
index c5ee667..8a6d8ae 100644
--- a/apps/web/components/import.tsx
+++ b/apps/web/components/import.tsx
@@ -156,7 +156,7 @@ export function Import({ open, onclose, onimport }: Props) {
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
 								placeholder="encryption password"
-								className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#FF6B00]/50"
+								className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#d4b08c]/50"
 							/>
 							<button
 								type="button"
@@ -201,7 +201,7 @@ export function Import({ open, onclose, onimport }: Props) {
 					type="button"
 					onClick={handleimport}
 					disabled={!preview.length}
-					className="flex-1 px-4 py-2.5 bg-[#FF6B00] text-black rounded-lg hover:bg-[#FF6B00]/90 transition-colors font-medium disabled:opacity-50"
+					className="flex-1 px-4 py-2.5 bg-[#d4b08c] text-black rounded-lg hover:bg-[#d4b08c]/90 transition-colors font-medium disabled:opacity-50"
 				>
 					import {preview.length} items
 				</button>
diff --git a/apps/web/components/language.tsx b/apps/web/components/language.tsx
index 19570f0..69f2f4d 100644
--- a/apps/web/components/language.tsx
+++ b/apps/web/components/language.tsx
@@ -15,7 +15,7 @@ export function LanguageToggle() {
   return (
     <nav className="fixed top-0 right-0 p-4 sm:p-8 z-50">
       <div className="flex items-center gap-2 text-xs tracking-widest">
-        <span className="text-[#FF6B00]">{labels[locale]}</span>
+        <span className="text-[#d4b08c]">{labels[locale]}</span>
         <span className="text-white/20">/</span>
         <Link
           href={pathname}
diff --git a/apps/web/components/share.tsx b/apps/web/components/share.tsx
index 197b70d..2703408 100644
--- a/apps/web/components/share.tsx
+++ b/apps/web/components/share.tsx
@@ -80,7 +80,7 @@ export function ShareDialog({ item, open, onClose }: ShareDialogProps) {
 
   return (
     <dialog ref={dialogRef} onClick={handlebackdrop} onCancel={onClose} className="bg-transparent p-0 backdrop:bg-black/80">
-      <div className="bg-black border border-white/10 p-6 w-[400px] max-w-[90vw]">
+      <div className="bg-[#0a0a0a] border border-white/10 p-6 w-[400px] max-w-[90vw]">
         <div className="flex items-center justify-between mb-6">
           <h2 className="text-lg font-bold text-white">share item</h2>
           <button onClick={onClose} className="text-white/40 hover:text-white transition-colors">
@@ -99,7 +99,7 @@ export function ShareDialog({ item, open, onClose }: ShareDialogProps) {
               <label className="text-xs tracking-widest text-white/40 block mb-2">views</label>
               <div className="flex gap-1.5">
                 {viewoptions.map((n) => (
-                  <button key={n} type="button" onClick={() => setViews(n)} className={`flex-1 h-9 text-sm transition-colors ${views === n ? "bg-[#FF6B00] text-black" : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"}`}>{n}</button>
+                  <button key={n} type="button" onClick={() => setViews(n)} className={`flex-1 h-9 text-sm transition-colors ${views === n ? "bg-[#d4b08c] text-black" : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"}`}>{n}</button>
                 ))}
               </div>
             </div>
@@ -107,16 +107,16 @@ export function ShareDialog({ item, open, onClose }: ShareDialogProps) {
               <label className="text-xs tracking-widest text-white/40 block mb-2">expires</label>
               <div className="flex gap-1.5 flex-wrap">
                 {ttloptions.map((opt) => (
-                  <button key={opt.value} type="button" onClick={() => setTtl(opt.value)} className={`px-3 h-9 text-sm transition-colors ${ttl === opt.value ? "bg-[#FF6B00] text-black" : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"}`}>{opt.label}</button>
+                  <button key={opt.value} type="button" onClick={() => setTtl(opt.value)} className={`px-3 h-9 text-sm transition-colors ${ttl === opt.value ? "bg-[#d4b08c] text-black" : "border border-white/10 text-white/40 hover:text-white hover:border-white/30"}`}>{opt.label}</button>
                 ))}
               </div>
             </div>
             <ul className="space-y-1">
-              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#FF6B00] rounded-full" />encrypted with a unique key</li>
-              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#FF6B00] rounded-full" />key never sent to server</li>
-              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#FF6B00] rounded-full" />self-destructs after viewing</li>
+              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#d4b08c] rounded-full" />encrypted with a unique key</li>
+              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#d4b08c] rounded-full" />key never sent to server</li>
+              <li className="text-xs text-white/30 flex items-center gap-2"><span className="w-1 h-1 bg-[#d4b08c] rounded-full" />self-destructs after viewing</li>
             </ul>
-            <button onClick={handleshare} disabled={loading} className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed">{loading ? "creating..." : "create share link"}</button>
+            <button onClick={handleshare} disabled={loading} className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed">{loading ? "creating..." : "create share link"}</button>
           </div>
         ) : (
           <div className="space-y-6">
@@ -127,7 +127,7 @@ export function ShareDialog({ item, open, onClose }: ShareDialogProps) {
                 <button type="button" onClick={() => setRevealed(!revealed)} className="text-white/40 hover:text-white text-xs tracking-widest shrink-0">{revealed ? "hide" : "show"}</button>
               </div>
             </div>
-            <button onClick={handlecopy} className="w-full bg-[#FF6B00] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity">{copied ? "copied" : "copy link"}</button>
+            <button onClick={handlecopy} className="w-full bg-[#d4b08c] text-black py-3 text-sm tracking-widest font-bold hover:opacity-80 transition-opacity">{copied ? "copied" : "copy link"}</button>
             <p className="text-xs text-white/30 text-center">{copied ? "link will be cleared from clipboard in 30s" : `link expires after ${views} view${views > 1 ? "s" : ""}`}</p>
             <button onClick={reset} className="w-full border border-white/10 py-3 text-sm tracking-widest text-white/40 hover:text-white hover:border-white/30 transition-colors">create another link</button>
           </div>
diff --git a/apps/web/components/tags.tsx b/apps/web/components/tags.tsx
index 833824a..652bf40 100644
--- a/apps/web/components/tags.tsx
+++ b/apps/web/components/tags.tsx
@@ -33,7 +33,7 @@ export function TagInput({ tags, onChange, readOnly }: TagInputProps) {
 	}
 
 	return (
-		<div className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 focus-within:border-[#FF6B00] transition-colors">
+		<div className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 focus-within:border-[#d4b08c] transition-colors">
 			<div className="flex flex-wrap gap-2">
 				{tags.map((tag) => (
 					<span
@@ -139,7 +139,7 @@ export function TagFilter({ tags, selected, onSelect }: TagFilterProps) {
 					onClick={() => onSelect(selected === tag ? null : tag)}
 					className={`px-3 py-2 min-h-[36px] rounded-full text-xs transition-colors ${
 						selected === tag
-							? "bg-[#FF6B00] text-black"
+							? "bg-[#d4b08c] text-black"
 							: "bg-white/10 text-white/60 hover:bg-white/20 hover:text-white active:bg-white/20"
 					}`}
 				>
diff --git a/apps/web/components/totp.tsx b/apps/web/components/totp.tsx
index 581f797..44ff365 100644
--- a/apps/web/components/totp.tsx
+++ b/apps/web/components/totp.tsx
@@ -122,7 +122,7 @@ export function Totp({ secret: initial, oncode }: Props) {
 					value={secret}
 					onChange={(e) => setSecret(e.target.value)}
 					placeholder="JBSWY3DPEHPK3PXP"
-					className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#FF6B00]/50 font-mono"
+					className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#d4b08c]/50 font-mono"
 				/>
 			</div>
 
@@ -142,7 +142,7 @@ export function Totp({ secret: initial, oncode }: Props) {
 
 					<div className="relative h-1 bg-white/10 rounded-full overflow-hidden">
 						<div
-							className="absolute inset-y-0 left-0 bg-[#FF6B00] transition-all duration-1000"
+							className="absolute inset-y-0 left-0 bg-[#d4b08c] transition-all duration-1000"
 							style={{ width: `${(remaining / 30) * 100}%` }}
 						/>
 					</div>
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 6a24ff3..b8ac152 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -14,8 +14,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const variants: Record<Variant, string> = {
-  primary: "bg-[#FF6B00] text-black hover:bg-[#E65F00] active:bg-[#CC5500]",
-  secondary: "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+  primary: "bg-[#d4b08c] text-black hover:bg-[#c9a57e] active:bg-[#be9a70]",
+  secondary: "bg-white/10 text-white border border-white/20 hover:bg-white/15 active:bg-white/20",
   ghost: "text-white/70 hover:bg-white/10 active:bg-white/15",
   danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
   icon: "text-white/70 hover:bg-white/10 active:bg-white/15",
@@ -36,7 +36,7 @@ const iconsizes: Record<Size, string> = {
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primary", size = "md", loading = false, disabled, className = "", children, ...props }, ref) => {
     const isicon = variant === "icon";
-    const base = "inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[#FF6B00]/50 disabled:opacity-50 disabled:pointer-events-none";
+    const base = "inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/50 disabled:opacity-50 disabled:pointer-events-none";
     const variantclass = variants[variant];
     const sizeclass = isicon ? iconsizes[size] : sizes[size];
 
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
index bf81367..eb79900 100644
--- a/apps/web/components/ui/card.tsx
+++ b/apps/web/components/ui/card.tsx
@@ -7,9 +7,9 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const variants: Record<Variant, string> = {
-	default: "bg-white border border-gray-200",
-	bordered: "bg-white border-2 border-gray-200",
-	elevated: "bg-white border border-gray-200 shadow-lg",
+	default: "bg-[#161616] border border-white/10",
+	bordered: "bg-[#161616] border-2 border-white/10",
+	elevated: "bg-[#161616] border border-white/10 shadow-lg",
 };
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
@@ -42,7 +42,7 @@ export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
 	({ className = "", ...props }, ref) => (
 		<h3
 			ref={ref}
-			className={`text-lg font-semibold text-gray-900 ${className}`}
+			className={`text-lg font-semibold text-white ${className}`}
 			{...props}
 		/>
 	)
@@ -55,7 +55,7 @@ export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionP
 	({ className = "", ...props }, ref) => (
 		<p
 			ref={ref}
-			className={`text-sm text-gray-500 ${className}`}
+			className={`text-sm text-white/50 ${className}`}
 			{...props}
 		/>
 	)
diff --git a/apps/web/components/ui/checkbox.tsx b/apps/web/components/ui/checkbox.tsx
index 44c20aa..886b610 100644
--- a/apps/web/components/ui/checkbox.tsx
+++ b/apps/web/components/ui/checkbox.tsx
@@ -33,8 +33,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               className={`
                 w-5 h-5 rounded border bg-white/5
                 transition-all duration-150
-                peer-checked:bg-[#FF6B00] peer-checked:border-[#FF6B00]
-                peer-focus-visible:ring-2 peer-focus-visible:ring-[#FF6B00]/20
+                peer-checked:bg-[#d4b08c] peer-checked:border-[#d4b08c]
+                peer-focus-visible:ring-2 peer-focus-visible:ring-[#d4b08c]/20
                 ${error ? "border-red-500" : "border-white/20"}
                 ${className}
               `}
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
index d267b1f..35501a4 100644
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@@ -22,7 +22,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           className={`
             flex items-center gap-2 px-3 py-2.5 rounded-lg border bg-white/5
             transition-all duration-150
-            ${error ? "border-red-500 focus-within:ring-2 focus-within:ring-red-500/30" : "border-white/10 focus-within:border-[#FF6B00] focus-within:ring-2 focus-within:ring-[#FF6B00]/20"}
+            ${error ? "border-red-500 focus-within:ring-2 focus-within:ring-red-500/30" : "border-white/10 focus-within:border-[#d4b08c] focus-within:ring-2 focus-within:ring-[#d4b08c]/20"}
             ${disabled ? "opacity-50 cursor-not-allowed" : ""}
           `}
         >
diff --git a/apps/web/components/ui/modal.tsx b/apps/web/components/ui/modal.tsx
index 1c38852..c51dd8f 100644
--- a/apps/web/components/ui/modal.tsx
+++ b/apps/web/components/ui/modal.tsx
@@ -71,7 +71,7 @@ export function Modal({ open, onClose, children, closeOnBackdrop = true }: Modal
 				ref={contentref}
 				role="dialog"
 				aria-modal="true"
-				className="relative bg-stone-900 border border-white/10 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden animate-in zoom-in-95 duration-200"
+				className="relative bg-[#161616] border border-white/10 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden animate-in zoom-in-95 duration-200"
 			>
 				{children}
 			</div>
@@ -166,7 +166,7 @@ export function ConfirmDialog({
 	loading = false,
 }: ConfirmDialogProps) {
 	const styles = {
-		default: "bg-[#FF6B00] text-black hover:opacity-80",
+		default: "bg-[#d4b08c] text-black hover:opacity-80",
 		danger: "bg-red-500 text-white hover:bg-red-600",
 	};
 
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
index 06c9d1b..304baff 100644
--- a/apps/web/components/ui/select.tsx
+++ b/apps/web/components/ui/select.tsx
@@ -74,7 +74,7 @@ export function Select({ label, error, options, placeholder, value, onChange, di
 								type="button"
 								onClick={() => { onChange?.(opt.value); setOpen(false); }}
 								className={`w-full px-3 py-2 text-left text-sm transition-colors ${
-									opt.value === value ? "bg-[#FF6B00] text-white" : "text-white/80 hover:bg-white/5"
+									opt.value === value ? "bg-[#d4b08c] text-white" : "text-white/80 hover:bg-white/5"
 								}`}
 							>
 								{opt.label}
diff --git a/apps/web/components/ui/textarea.tsx b/apps/web/components/ui/textarea.tsx
index 6764191..2fbcdf7 100644
--- a/apps/web/components/ui/textarea.tsx
+++ b/apps/web/components/ui/textarea.tsx
@@ -23,7 +23,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             w-full px-3 py-2.5 rounded-lg border bg-white/5
             outline-none text-sm text-white placeholder:text-white/30
             transition-all duration-150 resize-none
-            ${error ? "border-red-500 focus:ring-2 focus:ring-red-500/30" : "border-white/10 focus:border-[#FF6B00] focus:ring-2 focus:ring-[#FF6B00]/20"}
+            ${error ? "border-red-500 focus:ring-2 focus:ring-red-500/30" : "border-white/10 focus:border-[#d4b08c] focus:ring-2 focus:ring-[#d4b08c]/20"}
             ${disabled ? "opacity-50 cursor-not-allowed" : ""}
             ${className}
           `}
diff --git a/apps/web/components/ui/toggle.tsx b/apps/web/components/ui/toggle.tsx
index a6b1c44..1258dff 100644
--- a/apps/web/components/ui/toggle.tsx
+++ b/apps/web/components/ui/toggle.tsx
@@ -32,8 +32,8 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
             className={`
               w-11 h-6 rounded-full bg-white/20
               transition-colors duration-150
-              peer-checked:bg-[#FF6B00]
-              peer-focus-visible:ring-2 peer-focus-visible:ring-[#FF6B00]/20
+              peer-checked:bg-[#d4b08c]
+              peer-focus-visible:ring-2 peer-focus-visible:ring-[#d4b08c]/20
               ${className}
             `}
           />

From 064ec5229d84a2320e36d91a1f7b0ca55247c719 Mon Sep 17 00:00:00 2001
From: josh <josh@afterima.ge>
Date: Thu, 29 Jan 2026 06:36:34 +0000
Subject: [PATCH 2/3] fix: complete design system cleanup

- replace all #FF6B00 with #d4b08c across vault components
- convert zinc-* and stone-* colors to white/* opacity variants
- fix light theme components (TagInputLight, PasswordGenerator, settings modals) to dark theme
- update icon.svg and manifest.ts with gold accent
- fix remaining dropdowns, menus, and forms
---
 .../app/[locale]/vault/settings/delete.tsx    | 14 ++++----
 .../app/[locale]/vault/settings/password.tsx  | 16 +++++-----
 apps/web/app/[locale]/vault/vault/filters.tsx | 14 ++++----
 apps/web/app/[locale]/vault/vault/item.tsx    |  4 +--
 .../web/app/[locale]/vault/vault/password.tsx | 24 +++++++-------
 apps/web/app/[locale]/vault/vault/search.tsx  |  6 ++--
 apps/web/app/[locale]/vault/vault/table.tsx   | 20 ++++++------
 apps/web/app/[locale]/vault/vault/tags.tsx    | 16 +++++-----
 apps/web/app/icon.svg                         |  2 +-
 apps/web/app/manifest.ts                      |  2 +-
 apps/web/components/breach.tsx                |  4 +--
 apps/web/components/dock.tsx                  |  4 +--
 apps/web/components/export.tsx                |  6 ++--
 apps/web/components/ui/divider.tsx            |  2 +-
 apps/web/components/ui/toast.tsx              |  2 +-
 apps/web/components/vault/contextmenu.tsx     |  4 +--
 apps/web/components/vault/foldernode.tsx      |  8 ++---
 apps/web/components/vault/foldertree.tsx      |  8 ++---
 apps/web/components/vault/item.tsx            |  4 +--
 apps/web/components/vault/itemform.tsx        | 12 +++----
 apps/web/components/vault/itemlist.tsx        | 12 +++----
 apps/web/components/vault/sidebar.tsx         | 32 +++++++++----------
 apps/web/components/vault/toolbar.tsx         | 10 +++---
 apps/web/lib/highlight.ts                     |  2 +-
 24 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/apps/web/app/[locale]/vault/settings/delete.tsx b/apps/web/app/[locale]/vault/settings/delete.tsx
index edebf37..6e48f80 100644
--- a/apps/web/app/[locale]/vault/settings/delete.tsx
+++ b/apps/web/app/[locale]/vault/settings/delete.tsx
@@ -37,31 +37,31 @@ export function DeleteModal({ open, onClose }: Props) {
 
 	return (
 		<Modal open={open} onClose={handleClose} title="delete account">
-			<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
-				<p className="text-red-700 text-sm font-medium">this action cannot be undone</p>
-				<p className="text-red-600 text-sm mt-1">
+			<div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
+				<p className="text-red-400 text-sm font-medium">this action cannot be undone</p>
+				<p className="text-red-400/80 text-sm mt-1">
 					all your vault items, api keys, and data will be permanently deleted.
 				</p>
 			</div>
-			<p className="text-stone-500 text-sm mb-4">
+			<p className="text-white/40 text-sm mb-4">
 				we recommend exporting your data before deleting your account.
 			</p>
 			<div className="mb-4">
-				<label className="block text-sm font-medium text-stone-700 mb-1.5">
+				<label className="block text-sm font-medium text-white/70 mb-1.5">
 					type &quot;delete my account&quot; to confirm
 				</label>
 				<input
 					type="text"
 					value={confirm}
 					onChange={(e) => setConfirm(e.target.value)}
-					className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-colors"
+					className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-colors"
 					placeholder="delete my account"
 				/>
 			</div>
 			<div className="flex flex-col-reverse sm:flex-row gap-3">
 				<button
 					onClick={handleClose}
-					className="flex-1 py-2.5 bg-stone-100 text-stone-700 font-medium rounded-lg hover:bg-stone-200 transition-colors"
+					className="flex-1 py-2.5 bg-white/10 text-white/70 font-medium rounded-lg hover:bg-white/20 transition-colors"
 				>
 					cancel
 				</button>
diff --git a/apps/web/app/[locale]/vault/settings/password.tsx b/apps/web/app/[locale]/vault/settings/password.tsx
index d4c0ad1..172ed55 100644
--- a/apps/web/app/[locale]/vault/settings/password.tsx
+++ b/apps/web/app/[locale]/vault/settings/password.tsx
@@ -63,44 +63,44 @@ export function PasswordModal({ open, onClose }: Props) {
 		<Modal open={open} onClose={handleClose} title="change password">
 			<div className="space-y-4">
 				<div>
-					<label className="block text-sm font-medium text-stone-700 mb-1.5">current password</label>
+					<label className="block text-sm font-medium text-white/70 mb-1.5">current password</label>
 					<input
 						type="password"
 						value={current}
 						onChange={(e) => setCurrent(e.target.value)}
-						className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
+						className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
 					/>
 				</div>
 				<div>
-					<label className="block text-sm font-medium text-stone-700 mb-1.5">new password</label>
+					<label className="block text-sm font-medium text-white/70 mb-1.5">new password</label>
 					<input
 						type="password"
 						value={newPass}
 						onChange={(e) => setNewPass(e.target.value)}
-						className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
+						className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
 					/>
 				</div>
 				<div>
-					<label className="block text-sm font-medium text-stone-700 mb-1.5">confirm new password</label>
+					<label className="block text-sm font-medium text-white/70 mb-1.5">confirm new password</label>
 					<input
 						type="password"
 						value={confirm}
 						onChange={(e) => setConfirm(e.target.value)}
-						className="w-full px-3 py-2.5 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-colors"
+						className="w-full px-3 py-2.5 bg-[#161616] border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/20 focus:border-[#d4b08c] transition-colors"
 					/>
 				</div>
 				{error && <p className="text-red-500 text-sm">{error}</p>}
 				<div className="flex flex-col-reverse sm:flex-row gap-3 pt-2">
 					<button
 						onClick={handleClose}
-						className="flex-1 py-2.5 bg-stone-100 text-stone-700 font-medium rounded-lg hover:bg-stone-200 transition-colors"
+						className="flex-1 py-2.5 bg-white/10 text-white/70 font-medium rounded-lg hover:bg-white/20 transition-colors"
 					>
 						cancel
 					</button>
 					<button
 						onClick={handleSubmit}
 						disabled={loading || !current || !newPass || !confirm}
-						className="flex-1 py-2.5 bg-emerald-500 text-white font-medium rounded-lg hover:bg-emerald-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+						className="flex-1 py-2.5 bg-[#d4b08c] text-[#0a0a0a] font-medium rounded-lg hover:bg-[#d4b08c]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 					>
 						{loading ? "updating..." : "update password"}
 					</button>
diff --git a/apps/web/app/[locale]/vault/vault/filters.tsx b/apps/web/app/[locale]/vault/vault/filters.tsx
index 6a30a6c..19de6af 100644
--- a/apps/web/app/[locale]/vault/vault/filters.tsx
+++ b/apps/web/app/[locale]/vault/vault/filters.tsx
@@ -20,12 +20,12 @@ export function TypeFilters({ selected, onSelect, counts }: Props) {
 				onClick={() => onSelect(null)}
 				className={`px-3 py-1.5 rounded-md text-xs font-medium flex items-center gap-1.5 transition-all ${
 					selected === null
-						? "bg-orange-500/10 text-orange-500 border border-orange-500/20"
-						: "bg-zinc-800 text-zinc-400 border border-transparent hover:text-zinc-300"
+						? "bg-[#d4b08c]/10 text-[#d4b08c] border border-[#d4b08c]/20"
+						: "bg-white/10 text-white/50 border border-transparent hover:text-white/60"
 				}`}
 			>
 				all
-				<span className={`${selected === null ? "text-orange-500/70" : "text-zinc-500"}`}>{total}</span>
+				<span className={`${selected === null ? "text-[#d4b08c]/70" : "text-white/40"}`}>{total}</span>
 			</button>
 			{types.map((type) => {
 				const count = counts[type] || 0;
@@ -37,13 +37,13 @@ export function TypeFilters({ selected, onSelect, counts }: Props) {
 						onClick={() => onSelect(isActive ? null : type)}
 						className={`px-3 py-1.5 rounded-md text-xs font-medium flex items-center gap-1.5 transition-all ${
 							isActive
-								? "bg-orange-500/10 text-orange-500 border border-orange-500/20"
-								: "bg-zinc-800 text-zinc-400 border border-transparent hover:text-zinc-300"
+								? "bg-[#d4b08c]/10 text-[#d4b08c] border border-[#d4b08c]/20"
+								: "bg-white/10 text-white/50 border border-transparent hover:text-white/60"
 						}`}
 					>
-						<span className={`w-3.5 h-3.5 ${isActive ? "text-orange-500" : "text-zinc-500"}`}>{typeIcons[type]}</span>
+						<span className={`w-3.5 h-3.5 ${isActive ? "text-[#d4b08c]" : "text-white/40"}`}>{typeIcons[type]}</span>
 						{typeLabels[type]}
-						<span className={`${isActive ? "text-orange-500/70" : "text-zinc-500"}`}>{count}</span>
+						<span className={`${isActive ? "text-[#d4b08c]/70" : "text-white/40"}`}>{count}</span>
 					</button>
 				);
 			})}
diff --git a/apps/web/app/[locale]/vault/vault/item.tsx b/apps/web/app/[locale]/vault/vault/item.tsx
index c318c49..3fff1e1 100644
--- a/apps/web/app/[locale]/vault/vault/item.tsx
+++ b/apps/web/app/[locale]/vault/vault/item.tsx
@@ -52,7 +52,7 @@ export function VaultListItem({ item, onClick, onFavorite, onTagClick }: Props)
 		<div
 			onClick={handleClick}
 			className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer group transition-all duration-150 ${
-				isSelected ? "bg-white/10 ring-1 ring-[#FF6B00]/50" : "hover:bg-white/5"
+				isSelected ? "bg-white/10 ring-1 ring-[#d4b08c]/50" : "hover:bg-white/5"
 			}`}
 		>
 			<span className="text-white/40 shrink-0 w-5 h-5 flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4">
@@ -81,7 +81,7 @@ export function VaultListItem({ item, onClick, onFavorite, onTagClick }: Props)
 				}}
 				className={`w-8 h-8 flex items-center justify-center rounded transition-all duration-150 shrink-0 ${
 					item.favorite
-						? "text-[#FF6B00]"
+						? "text-[#d4b08c]"
 						: "text-white/20 hover:text-white/40 opacity-0 group-hover:opacity-100"
 				}`}
 				aria-label={item.favorite ? "remove from favorites" : "add to favorites"}
diff --git a/apps/web/app/[locale]/vault/vault/password.tsx b/apps/web/app/[locale]/vault/vault/password.tsx
index f6a1e30..467c703 100644
--- a/apps/web/app/[locale]/vault/vault/password.tsx
+++ b/apps/web/app/[locale]/vault/vault/password.tsx
@@ -68,7 +68,7 @@ export function PasswordField({ value, onChange, required, readOnly, showGenerat
 				</div>
 			</div>
 			{generatorOpen && (
-				<div className="absolute z-50 mt-2 left-0 right-0 bg-stone-800 border border-white/10 rounded-lg p-4 shadow-xl">
+				<div className="absolute z-50 mt-2 left-0 right-0 bg-[#161616] border border-white/10 rounded-lg p-4 shadow-xl">
 					<Generator onSelect={handleSelect} compact />
 				</div>
 			)}
@@ -107,14 +107,14 @@ export function PasswordFieldLight({ value, onChange, required, readOnly, showGe
 					onChange={(e) => onChange(e.target.value)}
 					required={required}
 					readOnly={readOnly}
-					className="w-full bg-white border border-stone-200 rounded-xl px-4 py-3 pr-28 text-base text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-orange-500/40 focus:border-orange-500 transition-all font-mono read-only:bg-stone-50 read-only:text-stone-500"
+					className="w-full bg-[#161616] border border-white/10 rounded-xl px-4 py-3 pr-28 text-base text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-[#d4b08c]/40 focus:border-[#d4b08c] transition-all font-mono read-only:bg-white/5 read-only:text-white/40"
 				/>
 				<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
 					{showGenerator && !readOnly && (
 						<button
 							type="button"
 							onClick={() => setGeneratorOpen(!generatorOpen)}
-							className="w-9 h-9 flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 rounded-lg transition-colors"
+							className="w-9 h-9 flex items-center justify-center text-white/30 hover:text-white/50 hover:bg-white/10 rounded-lg transition-colors"
 							title="generate password"
 							aria-label="generate password"
 						>
@@ -126,14 +126,14 @@ export function PasswordFieldLight({ value, onChange, required, readOnly, showGe
 					<button
 						type="button"
 						onClick={() => setShow(!show)}
-						className="px-2 h-9 flex items-center text-xs font-medium text-stone-500 hover:text-stone-700 transition-colors rounded-lg"
+						className="px-2 h-9 flex items-center text-xs font-medium text-white/40 hover:text-white/70 transition-colors rounded-lg"
 					>
 						{show ? "hide" : "show"}
 					</button>
 				</div>
 			</div>
 			{generatorOpen && (
-				<div className="absolute z-50 mt-2 left-0 right-0 bg-white border border-stone-200 rounded-xl p-4 shadow-lg">
+				<div className="absolute z-50 mt-2 left-0 right-0 bg-[#161616] border border-white/10 rounded-xl p-4 shadow-lg">
 					<GeneratorLight onSelect={handleSelect} />
 				</div>
 			)}
@@ -189,22 +189,22 @@ function GeneratorLight({ onSelect }: GeneratorProps) {
 
 	return (
 		<div className="space-y-4">
-			<div className="bg-stone-50 rounded-lg p-3">
-				<p className="font-mono text-sm text-stone-900 break-all min-h-[20px]">{password}</p>
+			<div className="bg-white/5 rounded-lg p-3">
+				<p className="font-mono text-sm text-white break-all min-h-[20px]">{password}</p>
 			</div>
 
 			<div className="flex gap-2">
 				<button
 					type="button"
 					onClick={copy}
-					className="px-3.5 py-2.5 text-sm font-medium text-stone-600 bg-stone-100 rounded-lg hover:bg-stone-200 active:bg-stone-300 transition-colors"
+					className="px-3.5 py-2.5 text-sm font-medium text-white/50 bg-white/10 rounded-lg hover:bg-white/20 active:bg-white/30 transition-colors"
 				>
 					{copied ? "copied" : "copy"}
 				</button>
 				<button
 					type="button"
 					onClick={generate}
-					className="px-3.5 py-2.5 text-sm font-medium text-stone-600 bg-stone-100 rounded-lg hover:bg-stone-200 active:bg-stone-300 transition-colors"
+					className="px-3.5 py-2.5 text-sm font-medium text-white/50 bg-white/10 rounded-lg hover:bg-white/20 active:bg-white/30 transition-colors"
 				>
 					regenerate
 				</button>
@@ -219,8 +219,8 @@ function GeneratorLight({ onSelect }: GeneratorProps) {
 
 			<div>
 				<div className="flex justify-between text-sm mb-2">
-					<span className="text-stone-600">length</span>
-					<span className="font-medium text-stone-900">{length}</span>
+					<span className="text-white/50">length</span>
+					<span className="font-medium text-white">{length}</span>
 				</div>
 				<input
 					type="range"
@@ -244,7 +244,7 @@ function GeneratorLight({ onSelect }: GeneratorProps) {
 						type="button"
 						onClick={() => opt.set(!opt.value)}
 						className={`px-3.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${
-							opt.value ? "bg-stone-200 text-stone-900" : "bg-stone-100 text-stone-400"
+							opt.value ? "bg-white/20 text-white" : "bg-white/10 text-white/30"
 						}`}
 					>
 						{opt.label}
diff --git a/apps/web/app/[locale]/vault/vault/search.tsx b/apps/web/app/[locale]/vault/vault/search.tsx
index 56849c3..b380494 100644
--- a/apps/web/app/[locale]/vault/vault/search.tsx
+++ b/apps/web/app/[locale]/vault/vault/search.tsx
@@ -12,7 +12,7 @@ export const SearchBar = forwardRef<HTMLInputElement, Props>(function SearchBar(
 		<div className="relative">
 			<svg
 				aria-hidden="true"
-				className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500"
+				className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40"
 				fill="none"
 				stroke="currentColor"
 				viewBox="0 0 24 24"
@@ -30,11 +30,11 @@ export const SearchBar = forwardRef<HTMLInputElement, Props>(function SearchBar(
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
 				placeholder="Search items..."
-				className="w-full bg-zinc-800 border border-zinc-700 rounded-lg pl-10 pr-10 py-2.5 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600 focus:ring-1 focus:ring-zinc-600 transition-all"
+				className="w-full bg-white/10 border border-white/20 rounded-lg pl-10 pr-10 py-2.5 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/30 transition-all"
 			/>
 			<button
 				onClick={() => onChange("")}
-				className={`absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center text-zinc-500 hover:text-zinc-400 rounded transition-all ${value ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+				className={`absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center text-white/40 hover:text-white/50 rounded transition-all ${value ? "opacity-100" : "opacity-0 pointer-events-none"}`}
 				aria-label="clear search"
 			>
 				<svg aria-hidden="true" className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/apps/web/app/[locale]/vault/vault/table.tsx b/apps/web/app/[locale]/vault/vault/table.tsx
index edd6f18..4f7df07 100644
--- a/apps/web/app/[locale]/vault/vault/table.tsx
+++ b/apps/web/app/[locale]/vault/vault/table.tsx
@@ -19,9 +19,9 @@ export function VaultTable({ items, onItemClick, onFavorite, onTagClick }: Props
 			<table className="w-full">
 				<thead>
 					<tr className="border-b border-white/[0.04]">
-						<th className="text-left text-xs font-medium text-zinc-500 uppercase tracking-wider px-4 py-3">name</th>
-						<th className="text-left text-xs font-medium text-zinc-500 uppercase tracking-wider px-4 py-3 hidden sm:table-cell w-24">type</th>
-						<th className="text-left text-xs font-medium text-zinc-500 uppercase tracking-wider px-4 py-3 hidden md:table-cell">tags</th>
+						<th className="text-left text-xs font-medium text-white/40 uppercase tracking-wider px-4 py-3">name</th>
+						<th className="text-left text-xs font-medium text-white/40 uppercase tracking-wider px-4 py-3 hidden sm:table-cell w-24">type</th>
+						<th className="text-left text-xs font-medium text-white/40 uppercase tracking-wider px-4 py-3 hidden md:table-cell">tags</th>
 						<th className="w-16 px-4 py-3" />
 					</tr>
 				</thead>
@@ -38,17 +38,17 @@ export function VaultTable({ items, onItemClick, onFavorite, onTagClick }: Props
 							>
 								<td className="px-4 py-3.5">
 									<div className="flex items-center gap-3">
-										<div className="flex items-center justify-center shrink-0 text-zinc-500">
+										<div className="flex items-center justify-center shrink-0 text-white/40">
 											{typeIconsSmall[item.type]}
 										</div>
 										<div className="min-w-0">
 											<p className="text-sm font-medium text-white truncate">{item.title}</p>
-											<p className="text-xs text-zinc-500 sm:hidden">{item.type}</p>
+											<p className="text-xs text-white/40 sm:hidden">{item.type}</p>
 										</div>
 									</div>
 								</td>
 								<td className="px-4 py-3.5 hidden sm:table-cell">
-									<span className="text-xs text-zinc-500 capitalize">{item.type}</span>
+									<span className="text-xs text-white/40 capitalize">{item.type}</span>
 								</td>
 								<td className="px-4 py-3.5 hidden md:table-cell">
 									{item.tags.length > 0 ? (
@@ -57,17 +57,17 @@ export function VaultTable({ items, onItemClick, onFavorite, onTagClick }: Props
 												<button
 													key={tag}
 													onClick={(e) => { e.stopPropagation(); onTagClick?.(tag); }}
-													className="px-2 py-0.5 rounded text-xs bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-300 transition-colors"
+													className="px-2 py-0.5 rounded text-xs bg-white/10 text-white/50 hover:bg-white/20 hover:text-white/60 transition-colors"
 												>
 													{tag}
 												</button>
 											))}
 											{item.tags.length > 2 && (
-												<span className="px-1.5 py-0.5 text-xs text-zinc-600">+{item.tags.length - 2}</span>
+												<span className="px-1.5 py-0.5 text-xs text-white/30">+{item.tags.length - 2}</span>
 											)}
 										</div>
 									) : (
-										<span className="text-zinc-700 text-xs">-</span>
+										<span className="text-white/20 text-xs">-</span>
 									)}
 								</td>
 								<td className="px-4 py-3.5">
@@ -77,7 +77,7 @@ export function VaultTable({ items, onItemClick, onFavorite, onTagClick }: Props
 											className={`p-1.5 rounded transition-all ${
 												item.favorite
 													? "text-amber-400 hover:text-amber-300"
-													: "text-transparent group-hover:text-zinc-600 hover:!text-zinc-400"
+													: "text-transparent group-hover:text-white/30 hover:!text-white/50"
 											}`}
 											aria-label={item.favorite ? "remove from favorites" : "add to favorites"}
 										>
diff --git a/apps/web/app/[locale]/vault/vault/tags.tsx b/apps/web/app/[locale]/vault/vault/tags.tsx
index b64743b..97a5fed 100644
--- a/apps/web/app/[locale]/vault/vault/tags.tsx
+++ b/apps/web/app/[locale]/vault/vault/tags.tsx
@@ -13,14 +13,14 @@ export function TagFilter({ tags, selected, onSelect }: TagFilterProps) {
 
 	return (
 		<div className="flex gap-1.5 flex-wrap items-center">
-			<svg aria-hidden="true" className="w-3.5 h-3.5 text-zinc-600 shrink-0 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<svg aria-hidden="true" className="w-3.5 h-3.5 text-white/30 shrink-0 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
 				<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 6h.008v.008H6V6z" />
 			</svg>
 			{selected && (
 				<button
 					onClick={() => onSelect(null)}
-					className="px-2 py-1 text-xs text-zinc-500 hover:text-zinc-400 transition-colors"
+					className="px-2 py-1 text-xs text-white/40 hover:text-white/50 transition-colors"
 				>
 					clear
 				</button>
@@ -33,8 +33,8 @@ export function TagFilter({ tags, selected, onSelect }: TagFilterProps) {
 						onClick={() => onSelect(isActive ? null : tag)}
 						className={`px-2.5 py-1 rounded-md text-xs font-medium transition-all ${
 							isActive
-								? "bg-orange-500/10 text-orange-500 border border-orange-500/20"
-								: "bg-zinc-800 text-zinc-400 border border-transparent hover:text-zinc-300"
+								? "bg-[#d4b08c]/10 text-[#d4b08c] border border-[#d4b08c]/20"
+								: "bg-white/10 text-white/50 border border-transparent hover:text-white/60"
 						}`}
 					>
 						{tag}
@@ -139,19 +139,19 @@ export function TagInputLight({ tags, onChange, readOnly }: TagInputProps) {
 	}
 
 	return (
-		<div className="w-full bg-white border border-stone-200 rounded-xl px-3 py-2.5 min-h-[48px] focus-within:ring-2 focus-within:ring-orange-500/40 focus-within:border-orange-500 transition-all">
+		<div className="w-full bg-[#161616] border border-white/10 rounded-xl px-3 py-2.5 min-h-[48px] focus-within:ring-2 focus-within:ring-[#d4b08c]/40 focus-within:border-[#d4b08c] transition-all">
 			<div className="flex flex-wrap gap-2 items-center">
 				{tags.map((tag) => (
 					<span
 						key={tag}
-						className="inline-flex items-center gap-1 px-3 py-1.5 bg-stone-100 rounded-full text-sm text-stone-700"
+						className="inline-flex items-center gap-1 px-3 py-1.5 bg-white/10 rounded-full text-sm text-white/70"
 					>
 						{tag}
 						{!readOnly && (
 							<button
 								type="button"
 								onClick={() => removeTag(tag)}
-								className="w-5 h-5 flex items-center justify-center text-stone-400 hover:text-stone-600 transition-colors rounded"
+								className="w-5 h-5 flex items-center justify-center text-white/30 hover:text-white/50 transition-colors rounded"
 								aria-label={`remove ${tag}`}
 							>
 								<svg aria-hidden="true" className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -169,7 +169,7 @@ export function TagInputLight({ tags, onChange, readOnly }: TagInputProps) {
 						onKeyDown={handleKeyDown}
 						onBlur={() => input && addTag(input)}
 						placeholder={tags.length === 0 ? "add tags..." : ""}
-						className="flex-1 min-w-[100px] bg-transparent outline-none text-base text-stone-900 placeholder:text-stone-400 py-1"
+						className="flex-1 min-w-[100px] bg-transparent outline-none text-base text-white placeholder:text-white/30 py-1"
 					/>
 				)}
 			</div>
diff --git a/apps/web/app/icon.svg b/apps/web/app/icon.svg
index cb30bb0..a7832f6 100644
--- a/apps/web/app/icon.svg
+++ b/apps/web/app/icon.svg
@@ -1,4 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="24" height="24" rx="6" fill="#FF6B00"/>
+  <rect width="24" height="24" rx="6" fill="#d4b08c"/>
   <path fill="#000" d="M17.5,3.875 C19.7782,3.875 21.625,5.72183 21.625,8 C21.625,9.2471 21.0714,10.36501 20.1971,11.12122 C20.4748,11.86972 20.625,12.66939 20.625,13.5 C20.625,15.89 19.382,18.0188 17.4446,19.4143 C17.1624,19.6176 16.8653,19.8054 16.5551,19.9763 L16.5183,19.9964 C15.2037,20.7125 13.6559,21.125 12,21.125 C10.34411,21.125 8.79628,20.7124 7.48166,19.9964 C7.1745,19.8291 6.88004,19.6452 6.59991,19.4462 L6.55539,19.4143 C4.61803,18.0188 3.375,15.89 3.375,13.5 C3.375,12.66939 3.52525,11.86971 3.80294,11.12122 C2.92856,10.36501 2.375,9.2471 2.375,8 C2.375,5.72183 4.22183,3.875 6.5,3.875 C8.07432,3.875 9.44244,4.75696 10.1376,6.05321 C10.73749,5.9365 11.36069,5.875 12,5.875 C12.6393,5.875 13.2625,5.9365 13.8624,6.05321 C14.5576,4.75696 15.9257,3.875 17.5,3.875 Z M13.5225,16.3968 C13.4126,16.6012 13.2228,16.7712 12.99,16.8943 C12.7145,17.04 12.3705,17.125 12,17.125 C11.62961,17.125 11.28562,17.0401 11.01014,16.8944 C10.77744,16.7713 10.58761,16.6014 10.47768,16.3971 C9.33578,16.8209 8.41869,17.7081 7.95497,18.8301 C9.1128,19.4892 10.50081,19.875 12,19.875 C13.4993,19.875 14.8874,19.4892 16.0453,18.8299 C15.7958,18.2257 15.4115,17.6816 14.9154,17.2378 C14.5045,16.8703 14.0326,16.586 13.5225,16.3968 Z M12,7.125 C7.88428,7.125 4.625,10.02458 4.625,13.5 C4.625,15.2987 5.49533,16.9402 6.9074,18.1082 C7.80618,16.1978 9.74847,14.875 12,14.875 C13.4399,14.875 14.7538,15.4162 15.7487,16.3061 C16.3092,16.8075 16.7686,17.4196 17.0926,18.1082 C18.5047,16.9402 19.375,15.2987 19.375,13.5 C19.375,10.02458 16.1157,7.125 12,7.125 Z M6.5,5.125 C4.91218,5.125 3.625,6.41218 3.625,8 C3.625,8.73272 3.90091,9.41662 4.37336,9.93541 C5.34066,8.32097 6.94287,7.05326 8.88195,6.38844 C8.35812,5.61513 7.47532,5.125 6.5,5.125 Z M17.5,5.125 C16.5254,5.125 15.6424,5.6143 15.1181,6.38845 C17.0571,7.05327 18.6593,8.32095 19.6266,9.93534 C20.1002,9.41558 20.375,8.73173 20.375,8 C20.375,6.41218 19.0878,5.125 17.5,5.125 Z"/>
 </svg>
diff --git a/apps/web/app/manifest.ts b/apps/web/app/manifest.ts
index d8cb5fa..462a8c0 100644
--- a/apps/web/app/manifest.ts
+++ b/apps/web/app/manifest.ts
@@ -8,7 +8,7 @@ export default function manifest(): MetadataRoute.Manifest {
     start_url: "/",
     display: "standalone",
     background_color: "#000000",
-    theme_color: "#FF6B00",
+    theme_color: "#d4b08c",
     icons: [
       {
         src: "/icon-192.png",
diff --git a/apps/web/components/breach.tsx b/apps/web/components/breach.tsx
index 25caf3e..6216d10 100644
--- a/apps/web/components/breach.tsx
+++ b/apps/web/components/breach.tsx
@@ -103,7 +103,7 @@ export function Scanner({ items }: ScannerProps) {
 				<button
 					onClick={scan}
 					disabled={scanning}
-					className="px-4 py-2 bg-[#FF6B00] text-black font-medium rounded-lg hover:bg-[#FF6B00]/90 transition-colors disabled:opacity-50"
+					className="px-4 py-2 bg-[#d4b08c] text-black font-medium rounded-lg hover:bg-[#d4b08c]/90 transition-colors disabled:opacity-50"
 				>
 					{scanning ? "scanning..." : "scan vault"}
 				</button>
@@ -113,7 +113,7 @@ export function Scanner({ items }: ScannerProps) {
 				<div className="space-y-2">
 					<div className="h-2 bg-white/10 rounded-full overflow-hidden">
 						<div
-							className="h-full bg-[#FF6B00] transition-all duration-300"
+							className="h-full bg-[#d4b08c] transition-all duration-300"
 							style={{ width: `${progress}%` }}
 						/>
 					</div>
diff --git a/apps/web/components/dock.tsx b/apps/web/components/dock.tsx
index f09a767..cd8a9b0 100644
--- a/apps/web/components/dock.tsx
+++ b/apps/web/components/dock.tsx
@@ -90,7 +90,7 @@ export function Dock() {
             {isExternal ? (
               <a
                 {...linkProps}
-                className="text-white/30 hover:text-[#FF6B00] transition-colors block"
+                className="text-white/30 hover:text-[#d4b08c] transition-colors block"
                 onMouseEnter={() => setHovered(item.key)}
                 onMouseLeave={() => setHovered(null)}
               >
@@ -99,7 +99,7 @@ export function Dock() {
             ) : (
               <Link
                 href={item.href}
-                className="text-white/30 hover:text-[#FF6B00] transition-colors block"
+                className="text-white/30 hover:text-[#d4b08c] transition-colors block"
                 onMouseEnter={() => setHovered(item.key)}
                 onMouseLeave={() => setHovered(null)}
               >
diff --git a/apps/web/components/export.tsx b/apps/web/components/export.tsx
index 0d82768..54846f0 100644
--- a/apps/web/components/export.tsx
+++ b/apps/web/components/export.tsx
@@ -96,7 +96,7 @@ export function Export({ items, open, onclose }: Props) {
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
 								placeholder="min 8 characters"
-								className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#FF6B00]/50"
+								className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#d4b08c]/50"
 							/>
 						</div>
 						<div className="mb-4">
@@ -106,7 +106,7 @@ export function Export({ items, open, onclose }: Props) {
 								value={confirm}
 								onChange={(e) => setConfirm(e.target.value)}
 								placeholder="confirm password"
-								className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#FF6B00]/50"
+								className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#d4b08c]/50"
 							/>
 						</div>
 					</>
@@ -133,7 +133,7 @@ export function Export({ items, open, onclose }: Props) {
 					type="button"
 					onClick={handleexport}
 					disabled={loading}
-					className="flex-1 px-4 py-2.5 bg-[#FF6B00] text-black rounded-lg hover:bg-[#FF6B00]/90 transition-colors font-medium disabled:opacity-50"
+					className="flex-1 px-4 py-2.5 bg-[#d4b08c] text-black rounded-lg hover:bg-[#d4b08c]/90 transition-colors font-medium disabled:opacity-50"
 				>
 					{loading ? "exporting..." : `export ${items.length} items`}
 				</button>
diff --git a/apps/web/components/ui/divider.tsx b/apps/web/components/ui/divider.tsx
index 84f7049..a5d9033 100644
--- a/apps/web/components/ui/divider.tsx
+++ b/apps/web/components/ui/divider.tsx
@@ -8,7 +8,7 @@ export const Divider = forwardRef<HTMLHRElement, DividerProps>(
 	({ className = "", orientation = "horizontal", ...props }, ref) => (
 		<hr
 			ref={ref}
-			className={`border-gray-200 ${
+			className={`border-white/10 ${
 				orientation === "vertical"
 					? "h-full w-px border-l"
 					: "w-full border-t"
diff --git a/apps/web/components/ui/toast.tsx b/apps/web/components/ui/toast.tsx
index e3e79bb..8c97d16 100644
--- a/apps/web/components/ui/toast.tsx
+++ b/apps/web/components/ui/toast.tsx
@@ -101,7 +101,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
 		<div
 			role="alert"
 			aria-live="polite"
-			className={`flex items-start gap-3 w-80 p-4 bg-stone-900 border border-white/10 rounded-xl shadow-lg transition-all duration-200 ${
+			className={`flex items-start gap-3 w-80 p-4 bg-[#161616] border border-white/10 rounded-xl shadow-lg transition-all duration-200 ${
 				exiting ? "opacity-0 translate-x-4" : "opacity-100 translate-x-0"
 			}`}
 		>
diff --git a/apps/web/components/vault/contextmenu.tsx b/apps/web/components/vault/contextmenu.tsx
index 4b38df8..a9186a5 100644
--- a/apps/web/components/vault/contextmenu.tsx
+++ b/apps/web/components/vault/contextmenu.tsx
@@ -49,7 +49,7 @@ export function ContextMenu({
 
 	return (
 		<div
-			className="fixed z-50 bg-zinc-900 border border-white/10 rounded-lg shadow-xl py-1 min-w-[160px]"
+			className="fixed z-50 bg-[#161616] border border-white/10 rounded-lg shadow-xl py-1 min-w-[160px]"
 			style={{ left: x, top: y }}
 			onClick={(e) => e.stopPropagation()}
 		>
@@ -75,7 +75,7 @@ export function ContextMenu({
 						<Icon name="chevron" className="w-3 h-3" />
 					</button>
 					{showColors && (
-						<div className="absolute left-full top-0 ml-1 bg-zinc-900 border border-white/10 rounded-lg shadow-xl p-2 flex gap-1">
+						<div className="absolute left-full top-0 ml-1 bg-[#161616] border border-white/10 rounded-lg shadow-xl p-2 flex gap-1">
 							{colors.map((color) => (
 								<button
 									key={color}
diff --git a/apps/web/components/vault/foldernode.tsx b/apps/web/components/vault/foldernode.tsx
index bac7e87..34fbab5 100644
--- a/apps/web/components/vault/foldernode.tsx
+++ b/apps/web/components/vault/foldernode.tsx
@@ -76,9 +76,9 @@ export function FolderNode({
 			<div
 				className={`group flex items-center gap-1 px-2 py-1.5 rounded-lg cursor-pointer transition-colors ${
 					isSelected
-						? "bg-[#FF6B00]/20 text-[#FF6B00]"
+						? "bg-[#d4b08c]/20 text-[#d4b08c]"
 						: "text-white/60 hover:text-white hover:bg-white/5"
-				} ${isDragOver ? "ring-2 ring-[#FF6B00]" : ""}`}
+				} ${isDragOver ? "ring-2 ring-[#d4b08c]" : ""}`}
 				style={{ paddingLeft: `${8 + depth * 16}px` }}
 				onClick={() => onSelect(folder.id)}
 				onContextMenu={(e) => onContext(e, folder.id)}
@@ -108,11 +108,11 @@ export function FolderNode({
 				)}
 				<Icon
 					name={folder.icon}
-					className={`w-4 h-4 shrink-0 ${isSelected ? "text-[#FF6B00]" : colorClasses[folder.color]}`}
+					className={`w-4 h-4 shrink-0 ${isSelected ? "text-[#d4b08c]" : colorClasses[folder.color]}`}
 				/>
 				<span className="flex-1 text-sm font-medium truncate">{folder.name}</span>
 				{folder.itemCount > 0 && (
-					<span className={`text-xs ${isSelected ? "text-[#FF6B00]/80" : "text-white/40"}`}>
+					<span className={`text-xs ${isSelected ? "text-[#d4b08c]/80" : "text-white/40"}`}>
 						{folder.itemCount}
 					</span>
 				)}
diff --git a/apps/web/components/vault/foldertree.tsx b/apps/web/components/vault/foldertree.tsx
index e91ca2c..9e32ef3 100644
--- a/apps/web/components/vault/foldertree.tsx
+++ b/apps/web/components/vault/foldertree.tsx
@@ -106,7 +106,7 @@ export function FolderTree(props: Props) {
 		setContext({ x: e.clientX, y: e.clientY, folderId });
 	}
 
-	const activeStyle = "bg-[#FF6B00]/20 text-[#FF6B00]";
+	const activeStyle = "bg-[#d4b08c]/20 text-[#d4b08c]";
 	const inactiveStyle = "text-white/60 hover:text-white hover:bg-white/5";
 
 	return (
@@ -172,10 +172,10 @@ interface SpecialButtonProps {
 function SpecialButton({ icon, label, count, active, onClick, hideZero, dragOver, onDragOver, onDrop, onDragLeave }: SpecialButtonProps) {
 	const show = !hideZero || count > 0;
 	return (
-		<button type="button" className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${active ? "bg-[#FF6B00]/20 text-[#FF6B00]" : "text-white/60 hover:text-white hover:bg-white/5"} ${dragOver ? "ring-2 ring-[#FF6B00]" : ""}`} onClick={onClick} onDragOver={onDragOver} onDrop={onDrop} onDragLeave={onDragLeave}>
-			<Icon name={icon} className={`w-4 h-4 ${active ? "text-[#FF6B00]" : "text-white/40"}`} />
+		<button type="button" className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${active ? "bg-[#d4b08c]/20 text-[#d4b08c]" : "text-white/60 hover:text-white hover:bg-white/5"} ${dragOver ? "ring-2 ring-[#d4b08c]" : ""}`} onClick={onClick} onDragOver={onDragOver} onDrop={onDrop} onDragLeave={onDragLeave}>
+			<Icon name={icon} className={`w-4 h-4 ${active ? "text-[#d4b08c]" : "text-white/40"}`} />
 			<span className="flex-1 text-sm text-left font-medium">{label}</span>
-			{show && <span className={`text-xs ${active ? "text-[#FF6B00]/80" : "text-white/40"}`}>{count}</span>}
+			{show && <span className={`text-xs ${active ? "text-[#d4b08c]/80" : "text-white/40"}`}>{count}</span>}
 		</button>
 	);
 }
diff --git a/apps/web/components/vault/item.tsx b/apps/web/components/vault/item.tsx
index 45c630a..7fc0b1a 100644
--- a/apps/web/components/vault/item.tsx
+++ b/apps/web/components/vault/item.tsx
@@ -93,7 +93,7 @@ function Field({ label, value, masked, mono, url }: FieldProps) {
 							href={value.startsWith("http") ? value : `https://${value}`}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="text-[#FF6B00] hover:underline inline-flex items-center gap-1"
+							className="text-[#d4b08c] hover:underline inline-flex items-center gap-1"
 						>
 							{displayValue}
 							<Svg path={iconpaths.external} className="w-3 h-3" />
@@ -274,7 +274,7 @@ export function ItemDisplay({ item, onEdit, onFavorite, onClose, compact }: Prop
 	}
 
 	return (
-		<div className={compact ? "" : "bg-stone-900 border border-white/10 rounded-xl overflow-hidden"}>
+		<div className={compact ? "" : "bg-[#161616] border border-white/10 rounded-xl overflow-hidden"}>
 			<div className={`${compact ? "" : "px-6 py-5"} border-b border-white/10`}>
 				<div className="flex items-start justify-between gap-4">
 					<div className="flex items-center gap-3 min-w-0">
diff --git a/apps/web/components/vault/itemform.tsx b/apps/web/components/vault/itemform.tsx
index ac3e76c..d45e960 100644
--- a/apps/web/components/vault/itemform.tsx
+++ b/apps/web/components/vault/itemform.tsx
@@ -165,7 +165,7 @@ function PasswordField({ value, onChange, required, showGenerator }: PasswordFie
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
 				required={required}
-				className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 pr-24 text-sm text-white font-mono placeholder:text-white/30 focus:outline-none focus:border-[#FF6B00]/50 focus:ring-1 focus:ring-[#FF6B00]/30 transition-all"
+				className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 pr-24 text-sm text-white font-mono placeholder:text-white/30 focus:outline-none focus:border-[#d4b08c]/50 focus:ring-1 focus:ring-[#d4b08c]/30 transition-all"
 			/>
 			<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
 				{showGenerator && (
@@ -222,7 +222,7 @@ function TagInput({ tags, onChange }: TagInputProps) {
 	}
 
 	return (
-		<div className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 min-h-[48px] focus-within:border-[#FF6B00]/50 focus-within:ring-1 focus-within:ring-[#FF6B00]/30 transition-all">
+		<div className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 min-h-[48px] focus-within:border-[#d4b08c]/50 focus-within:ring-1 focus-within:ring-[#d4b08c]/30 transition-all">
 			<div className="flex flex-wrap gap-2 items-center">
 				{tags.map((tag) => (
 					<span
@@ -301,7 +301,7 @@ export function ItemForm({ item, defaulttype, onSave, onDelete, onCancel }: Prop
 
 	function renderfield(field: FieldConfig) {
 		const inputclass =
-			"w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#FF6B00]/50 focus:ring-1 focus:ring-[#FF6B00]/30 transition-all";
+			"w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#d4b08c]/50 focus:ring-1 focus:ring-[#d4b08c]/30 transition-all";
 
 		return (
 			<div>
@@ -353,7 +353,7 @@ export function ItemForm({ item, defaulttype, onSave, onDelete, onCancel }: Prop
 									onClick={() => setType(t)}
 									className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
 										type === t
-											? "bg-[#FF6B00] text-black"
+											? "bg-[#d4b08c] text-black"
 											: "text-white/60 hover:text-white hover:bg-white/10"
 									}`}
 								>
@@ -374,7 +374,7 @@ export function ItemForm({ item, defaulttype, onSave, onDelete, onCancel }: Prop
 						onChange={(e) => setTitle(e.target.value)}
 						placeholder={typelabels[type]}
 						required
-						className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#FF6B00]/50 focus:ring-1 focus:ring-[#FF6B00]/30 transition-all"
+						className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#d4b08c]/50 focus:ring-1 focus:ring-[#d4b08c]/30 transition-all"
 					/>
 				</div>
 
@@ -405,7 +405,7 @@ export function ItemForm({ item, defaulttype, onSave, onDelete, onCancel }: Prop
 				</button>
 				<button
 					type="submit"
-					className="flex-1 sm:flex-initial px-6 py-2.5 bg-[#FF6B00] text-black font-medium rounded-lg hover:bg-[#FF6B00]/90 transition-colors text-sm"
+					className="flex-1 sm:flex-initial px-6 py-2.5 bg-[#d4b08c] text-black font-medium rounded-lg hover:bg-[#d4b08c]/90 transition-colors text-sm"
 				>
 					save
 				</button>
diff --git a/apps/web/components/vault/itemlist.tsx b/apps/web/components/vault/itemlist.tsx
index 0e0177a..1418bc1 100644
--- a/apps/web/components/vault/itemlist.tsx
+++ b/apps/web/components/vault/itemlist.tsx
@@ -187,7 +187,7 @@ export function ItemList({ items, selectedId, onSelect, onFavorite, onTagClick }
 						value={search}
 						onChange={(e) => setSearch(e.target.value)}
 						placeholder="Search items..."
-						className="w-full bg-white/5 border border-white/10 rounded-lg pl-10 pr-10 py-2.5 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-[#FF6B00]/50 focus:ring-1 focus:ring-[#FF6B00]/30 transition-all"
+						className="w-full bg-white/5 border border-white/10 rounded-lg pl-10 pr-10 py-2.5 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-[#d4b08c]/50 focus:ring-1 focus:ring-[#d4b08c]/30 transition-all"
 					/>
 					{search && (
 						<button
@@ -205,14 +205,14 @@ export function ItemList({ items, selectedId, onSelect, onFavorite, onTagClick }
 						onClick={() => setShowFilters(!showFilters)}
 						className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
 							showFilters || activeFilters > 0
-								? "bg-[#FF6B00]/20 text-[#FF6B00]"
+								? "bg-[#d4b08c]/20 text-[#d4b08c]"
 								: "bg-white/5 text-white/60 hover:text-white hover:bg-white/10"
 						}`}
 					>
 						<Svg path={iconpaths.filter} className="w-3.5 h-3.5" />
 						filters
 						{activeFilters > 0 && (
-							<span className="w-4 h-4 rounded-full bg-[#FF6B00] text-black text-[10px] flex items-center justify-center">
+							<span className="w-4 h-4 rounded-full bg-[#d4b08c] text-black text-[10px] flex items-center justify-center">
 								{activeFilters}
 							</span>
 						)}
@@ -238,7 +238,7 @@ export function ItemList({ items, selectedId, onSelect, onFavorite, onTagClick }
 								onClick={() => setTypeFilter(null)}
 								className={`px-2.5 py-1.5 rounded text-xs font-medium transition-colors ${
 									typeFilter === null
-										? "bg-[#FF6B00]/20 text-[#FF6B00]"
+										? "bg-[#d4b08c]/20 text-[#d4b08c]"
 										: "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
 								}`}
 							>
@@ -254,7 +254,7 @@ export function ItemList({ items, selectedId, onSelect, onFavorite, onTagClick }
 										onClick={() => setTypeFilter(isactive ? null : type)}
 										className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs font-medium transition-colors ${
 											isactive
-												? "bg-[#FF6B00]/20 text-[#FF6B00]"
+												? "bg-[#d4b08c]/20 text-[#d4b08c]"
 												: "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
 										}`}
 									>
@@ -274,7 +274,7 @@ export function ItemList({ items, selectedId, onSelect, onFavorite, onTagClick }
 										onClick={() => handletagclick(tag)}
 										className={`px-2 py-1 rounded text-xs transition-colors ${
 											tagFilter === tag
-												? "bg-[#FF6B00]/20 text-[#FF6B00]"
+												? "bg-[#d4b08c]/20 text-[#d4b08c]"
 												: "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
 										}`}
 									>
diff --git a/apps/web/components/vault/sidebar.tsx b/apps/web/components/vault/sidebar.tsx
index 5d03744..ddf54cf 100644
--- a/apps/web/components/vault/sidebar.tsx
+++ b/apps/web/components/vault/sidebar.tsx
@@ -132,7 +132,7 @@ function FolderItemComponent({
 			<div
 				className={`group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
 					selected
-						? "bg-[#FF6B00]/20 text-[#FF6B00]"
+						? "bg-[#d4b08c]/20 text-[#d4b08c]"
 						: "text-white/60 hover:text-white hover:bg-white/5"
 				}`}
 				style={{ paddingLeft: `${12 + depth * 16}px` }}
@@ -155,7 +155,7 @@ function FolderItemComponent({
 				)}
 				<Svg
 					path={iconpaths.folder}
-					className={`w-4 h-4 shrink-0 ${selected ? "text-[#FF6B00]" : "text-white/40"}`}
+					className={`w-4 h-4 shrink-0 ${selected ? "text-[#d4b08c]" : "text-white/40"}`}
 				/>
 				{editing ? (
 					<input
@@ -171,7 +171,7 @@ function FolderItemComponent({
 					<span className="flex-1 text-sm font-medium truncate">{folder.name}</span>
 				)}
 				{count > 0 && (
-					<span className={`text-xs ${selected ? "text-[#FF6B00]/80" : "text-white/40"}`}>
+					<span className={`text-xs ${selected ? "text-[#d4b08c]/80" : "text-white/40"}`}>
 						{count}
 					</span>
 				)}
@@ -188,7 +188,7 @@ function FolderItemComponent({
 							<Svg path={iconpaths.more} className="w-4 h-4" />
 						</button>
 						{showMenu && (
-							<div className="absolute right-0 top-full mt-1 bg-stone-800 border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[120px]">
+							<div className="absolute right-0 top-full mt-1 bg-[#161616] border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[120px]">
 								{onRename && (
 									<button
 										type="button"
@@ -293,7 +293,7 @@ export function VaultSidebar({
 					type="button"
 					className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
 						selected === "all" && !selectedType
-							? "bg-[#FF6B00]/20 text-[#FF6B00]"
+							? "bg-[#d4b08c]/20 text-[#d4b08c]"
 							: "text-white/60 hover:text-white hover:bg-white/5"
 					}`}
 					onClick={() => {
@@ -303,11 +303,11 @@ export function VaultSidebar({
 				>
 					<Svg
 						path={iconpaths.archive}
-						className={`w-5 h-5 ${selected === "all" && !selectedType ? "text-[#FF6B00]" : "text-white/40"}`}
+						className={`w-5 h-5 ${selected === "all" && !selectedType ? "text-[#d4b08c]" : "text-white/40"}`}
 					/>
 					<span className="flex-1 text-sm font-medium text-left">All Items</span>
 					<span
-						className={`text-xs ${selected === "all" && !selectedType ? "text-[#FF6B00]/80" : "text-white/40"}`}
+						className={`text-xs ${selected === "all" && !selectedType ? "text-[#d4b08c]/80" : "text-white/40"}`}
 					>
 						{totalCount}
 					</span>
@@ -317,18 +317,18 @@ export function VaultSidebar({
 					type="button"
 					className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
 						selected === "favorites"
-							? "bg-[#FF6B00]/20 text-[#FF6B00]"
+							? "bg-[#d4b08c]/20 text-[#d4b08c]"
 							: "text-white/60 hover:text-white hover:bg-white/5"
 					}`}
 					onClick={() => onSelect("favorites")}
 				>
 					<Svg
 						path={iconpaths.star}
-						className={`w-5 h-5 ${selected === "favorites" ? "text-[#FF6B00]" : "text-white/40"}`}
+						className={`w-5 h-5 ${selected === "favorites" ? "text-[#d4b08c]" : "text-white/40"}`}
 					/>
 					<span className="flex-1 text-sm font-medium text-left">Favorites</span>
 					{favoriteCount > 0 && (
-						<span className={`text-xs ${selected === "favorites" ? "text-[#FF6B00]/80" : "text-white/40"}`}>
+						<span className={`text-xs ${selected === "favorites" ? "text-[#d4b08c]/80" : "text-white/40"}`}>
 							{favoriteCount}
 						</span>
 					)}
@@ -351,13 +351,13 @@ export function VaultSidebar({
 								onClick={() => onTypeFilter(isactive ? null : type)}
 								className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
 									isactive
-										? "bg-[#FF6B00]/20 text-[#FF6B00]"
+										? "bg-[#d4b08c]/20 text-[#d4b08c]"
 										: "text-white/60 hover:text-white hover:bg-white/5"
 								}`}
 							>
-								<Svg path={iconpaths[type]} className={`w-4 h-4 ${isactive ? "text-[#FF6B00]" : "text-white/40"}`} />
+								<Svg path={iconpaths[type]} className={`w-4 h-4 ${isactive ? "text-[#d4b08c]" : "text-white/40"}`} />
 								<span className="flex-1 text-sm text-left">{typelabels[type]}</span>
-								<span className={`text-xs ${isactive ? "text-[#FF6B00]/80" : "text-white/40"}`}>
+								<span className={`text-xs ${isactive ? "text-[#d4b08c]/80" : "text-white/40"}`}>
 									{count}
 								</span>
 							</button>
@@ -403,18 +403,18 @@ export function VaultSidebar({
 					type="button"
 					className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
 						selected === "trash"
-							? "bg-[#FF6B00]/20 text-[#FF6B00]"
+							? "bg-[#d4b08c]/20 text-[#d4b08c]"
 							: "text-white/60 hover:text-white hover:bg-white/5"
 					}`}
 					onClick={() => onSelect("trash")}
 				>
 					<Svg
 						path={iconpaths.trash}
-						className={`w-5 h-5 ${selected === "trash" ? "text-[#FF6B00]" : "text-white/40"}`}
+						className={`w-5 h-5 ${selected === "trash" ? "text-[#d4b08c]" : "text-white/40"}`}
 					/>
 					<span className="flex-1 text-sm font-medium text-left">Trash</span>
 					{trashCount > 0 && (
-						<span className={`text-xs ${selected === "trash" ? "text-[#FF6B00]/80" : "text-white/40"}`}>
+						<span className={`text-xs ${selected === "trash" ? "text-[#d4b08c]/80" : "text-white/40"}`}>
 							{trashCount}
 						</span>
 					)}
diff --git a/apps/web/components/vault/toolbar.tsx b/apps/web/components/vault/toolbar.tsx
index dc87156..ddb5972 100644
--- a/apps/web/components/vault/toolbar.tsx
+++ b/apps/web/components/vault/toolbar.tsx
@@ -141,14 +141,14 @@ export function Toolbar({
 					<button
 						onClick={() => setShowNewMenu(!showNewMenu)}
 						disabled={disabled}
-						className="flex items-center gap-2 px-4 py-2 bg-[#FF6B00] text-black text-sm font-medium rounded-lg hover:bg-[#FF6B00]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+						className="flex items-center gap-2 px-4 py-2 bg-[#d4b08c] text-black text-sm font-medium rounded-lg hover:bg-[#d4b08c]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
 					>
 						<Svg path={iconpaths.plus} className="w-4 h-4" />
 						<span className="hidden sm:inline">New Item</span>
 						<Svg path={iconpaths.chevron} className="w-3.5 h-3.5 ml-1" />
 					</button>
 					{showNewMenu && (
-						<div className="absolute left-0 top-full mt-2 bg-stone-800 border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[160px]">
+						<div className="absolute left-0 top-full mt-2 bg-[#161616] border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[160px]">
 							<button
 								onClick={() => {
 									onNew();
@@ -232,7 +232,7 @@ export function Toolbar({
 						<Svg path={iconpaths.chevron} className="w-3.5 h-3.5" />
 					</button>
 					{showSortMenu && (
-						<div className="absolute right-0 top-full mt-2 bg-stone-800 border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[160px]">
+						<div className="absolute right-0 top-full mt-2 bg-[#161616] border border-white/10 rounded-lg shadow-xl z-50 py-1 min-w-[160px]">
 							{(Object.keys(sortlabels) as SortField[]).map((field) => (
 								<button
 									key={field}
@@ -242,7 +242,7 @@ export function Toolbar({
 									}}
 									className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
 										sortField === field
-											? "text-[#FF6B00] bg-[#FF6B00]/10"
+											? "text-[#d4b08c] bg-[#d4b08c]/10"
 											: "text-white/80 hover:text-white hover:bg-white/10"
 									}`}
 								>
@@ -250,7 +250,7 @@ export function Toolbar({
 									{sortField === field && (
 										<Svg
 											path={sortOrder === "asc" ? iconpaths.sortasc : iconpaths.sortdesc}
-											className="w-3.5 h-3.5 text-[#FF6B00]"
+											className="w-3.5 h-3.5 text-[#d4b08c]"
 										/>
 									)}
 								</button>
diff --git a/apps/web/lib/highlight.ts b/apps/web/lib/highlight.ts
index f5ad8e4..f6b435a 100644
--- a/apps/web/lib/highlight.ts
+++ b/apps/web/lib/highlight.ts
@@ -92,7 +92,7 @@ function tokenize(text: string): Token[] {
 }
 
 const colors: Record<Token["type"], string> = {
-  key: "#FF6B00",
+  key: "#d4b08c",
   string: "#22c55e",
   number: "#3b82f6",
   boolean: "#a855f7",

From c9e219f59d7133fc0ec9b54015a37d7bb46ad8d2 Mon Sep 17 00:00:00 2001
From: josh <josh@afterima.ge>
Date: Thu, 29 Jan 2026 06:39:09 +0000
Subject: [PATCH 3/3] fix: remaining color inconsistencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- password generator: orange-500 buttons and slider → gold accent
- cmdk: bg-black → bg-[#161616]
- manifest: background_color #000000 → #0a0a0a
---
 apps/web/app/[locale]/cmdk.tsx                 | 2 +-
 apps/web/app/[locale]/vault/vault/password.tsx | 4 ++--
 apps/web/app/manifest.ts                       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/[locale]/cmdk.tsx b/apps/web/app/[locale]/cmdk.tsx
index e3fb75b..3f63bdd 100644
--- a/apps/web/app/[locale]/cmdk.tsx
+++ b/apps/web/app/[locale]/cmdk.tsx
@@ -110,7 +110,7 @@ export function CommandPalette() {
 				className="absolute inset-0 bg-black/60 backdrop-blur-sm"
 				onClick={() => setOpen(false)}
 			/>
-			<div className="relative bg-black border border-white/10 rounded-xl shadow-2xl w-full max-w-xs overflow-hidden">
+			<div className="relative bg-[#161616] border border-white/10 rounded-xl shadow-2xl w-full max-w-xs overflow-hidden">
 				<div className="px-4 py-3 border-b border-white/10">
 					<span className="text-[10px] tracking-widest text-white/30 uppercase">shortcuts</span>
 				</div>
diff --git a/apps/web/app/[locale]/vault/vault/password.tsx b/apps/web/app/[locale]/vault/vault/password.tsx
index 467c703..a9f1543 100644
--- a/apps/web/app/[locale]/vault/vault/password.tsx
+++ b/apps/web/app/[locale]/vault/vault/password.tsx
@@ -211,7 +211,7 @@ function GeneratorLight({ onSelect }: GeneratorProps) {
 				<button
 					type="button"
 					onClick={() => onSelect(password)}
-					className="px-3.5 py-2.5 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600 active:bg-orange-700 transition-colors"
+					className="px-3.5 py-2.5 text-sm font-medium text-[#0a0a0a] bg-[#d4b08c] rounded-lg hover:bg-[#d4b08c]/90 active:bg-[#d4b08c]/80 transition-colors"
 				>
 					use
 				</button>
@@ -228,7 +228,7 @@ function GeneratorLight({ onSelect }: GeneratorProps) {
 					max={128}
 					value={length}
 					onChange={(e) => setLength(Number(e.target.value))}
-					className="w-full accent-orange-500"
+					className="w-full accent-[#d4b08c]"
 				/>
 			</div>
 
diff --git a/apps/web/app/manifest.ts b/apps/web/app/manifest.ts
index 462a8c0..5600bb9 100644
--- a/apps/web/app/manifest.ts
+++ b/apps/web/app/manifest.ts
@@ -7,7 +7,7 @@ export default function manifest(): MetadataRoute.Manifest {
     description: "one-time secret sharing for env vars",
     start_url: "/",
     display: "standalone",
-    background_color: "#000000",
+    background_color: "#0a0a0a",
     theme_color: "#d4b08c",
     icons: [
       {