diff --git a/src/app/admin/communications/abandoned-carts/page.tsx b/src/app/admin/communications/abandoned-carts/page.tsx
index ec57ded..2c364f4 100644
--- a/src/app/admin/communications/abandoned-carts/page.tsx
+++ b/src/app/admin/communications/abandoned-carts/page.tsx
@@ -13,7 +13,7 @@ export default async function AbandonedCartsPage() {
   const brandName = settingsResult?.success ? (settingsResult.settings?.brand_name ?? "Farm") : "Farm";
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-5xl space-y-6">
         {/* Header */}
         <div>
diff --git a/src/app/admin/communications/welcome-sequence/page.tsx b/src/app/admin/communications/welcome-sequence/page.tsx
index ef17cb4..23adabb 100644
--- a/src/app/admin/communications/welcome-sequence/page.tsx
+++ b/src/app/admin/communications/welcome-sequence/page.tsx
@@ -12,7 +12,7 @@ export default async function WelcomeSequencePage() {
   const brandName = settingsResult?.success ? (settingsResult.settings?.brand_name ?? "Farm") : "Farm";
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-5xl space-y-6">
         {/* Header */}
         <div>
diff --git a/src/app/admin/me/AdminMeClient.tsx b/src/app/admin/me/AdminMeClient.tsx
index 7a647e2..ed6a37f 100644
--- a/src/app/admin/me/AdminMeClient.tsx
+++ b/src/app/admin/me/AdminMeClient.tsx
@@ -71,44 +71,62 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
   }
 
   return (
-    <main className="min-h-screen bg-stone-50 px-6 py-12">
+    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-2xl">
-        <Link href="/admin" className="text-sm text-stone-500 hover:text-stone-700">
+        <Link 
+          href="/admin" 
+          className="text-sm transition-colors"
+          style={{ color: "var(--admin-text-muted)" }}
+        >
           ← Back to dashboard
         </Link>
 
-        <h1 className="mt-6 text-3xl font-bold text-stone-950">My Profile</h1>
-        <p className="mt-1 text-sm text-stone-500">
+        <h1 className="mt-6 text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>My Profile</h1>
+        <p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
           Manage your profile information and preferences.
         </p>
 
         {error && (
-          <div className="mt-4 rounded-xl bg-red-50 p-4 text-sm text-red-700">{error}</div>
+          <div className="mt-4 rounded-xl p-4 text-sm" style={{ 
+            backgroundColor: "rgba(239, 68, 68, 0.1)", 
+            color: "rgb(239, 68, 68)" 
+          }}>{error}</div>
         )}
 
         {/* Profile card */}
-        <div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
+        <div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{ 
+          backgroundColor: "white", 
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+          borderColor: "var(--admin-border)" 
+        }}>
           <div className="flex items-start justify-between">
             <div>
-              <h2 className="text-lg font-semibold text-stone-950">
+              <h2 className="text-lg font-semibold" style={{ color: "var(--admin-text-primary)" }}>
                 {currentUser.display_name || currentUser.email}
               </h2>
               {currentUser.display_name && (
-                <p className="text-sm text-stone-500">{currentUser.email}</p>
+                <p className="text-sm" style={{ color: "var(--admin-text-muted)" }}>{currentUser.email}</p>
               )}
               <div className="mt-2 flex items-center gap-2">
-                <span className="rounded-full bg-stone-50 px-2.5 py-0.5 text-xs font-semibold capitalize text-stone-500">
+                <span className="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize" style={{ 
+                  backgroundColor: "var(--admin-bg-subtle)", 
+                  color: "var(--admin-text-muted)" 
+                }}>
                   {currentUser.role.replace("_", " ")}
                 </span>
                 {currentUser.brand_name && (
-                  <span className="text-xs text-stone-500">{currentUser.brand_name}</span>
+                  <span className="text-xs" style={{ color: "var(--admin-text-muted)" }}>{currentUser.brand_name}</span>
                 )}
               </div>
             </div>
             {!editing && (
               <button
                 onClick={() => setEditing(true)}
-                className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
+                className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
+                style={{ 
+                  borderColor: "var(--admin-border)", 
+                  color: "var(--admin-text-muted)" 
+                }}
               >
                 Edit Profile
               </button>
@@ -120,12 +138,12 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
             <div className="mt-6 space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <p className="text-xs font-medium uppercase tracking-wide text-stone-500">Phone</p>
-                  <p className="mt-1 text-sm text-stone-700">{currentUser.phone_number ?? "—"}</p>
+                  <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>Phone</p>
+                  <p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.phone_number ?? "—"}</p>
                 </div>
                 <div>
-                  <p className="text-xs font-medium uppercase tracking-wide text-stone-500">Email</p>
-                  <p className="mt-1 text-sm text-stone-700">{currentUser.email}</p>
+                  <p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>Email</p>
+                  <p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</p>
                 </div>
               </div>
             </div>
@@ -135,22 +153,32 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
           {editing && (
             <form onSubmit={handleSaveProfile} className="mt-6 space-y-4">
               <div>
-                <label className="block text-sm font-medium text-stone-700">Display Name</label>
+                <label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Display Name</label>
                 <input
                   type="text"
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
-                  className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
+                  style={{ 
+                    borderColor: "var(--admin-border)",
+                    color: "var(--admin-text-primary)",
+                    backgroundColor: "white"
+                  }}
                   placeholder="Your name"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-stone-700">Phone Number</label>
+                <label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Phone Number</label>
                 <input
                   type="tel"
                   value={phoneNumber}
                   onChange={(e) => setPhoneNumber(e.target.value)}
-                  className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
+                  style={{ 
+                    borderColor: "var(--admin-border)",
+                    color: "var(--admin-text-primary)",
+                    backgroundColor: "white"
+                  }}
                   placeholder="+1 (555) 000-0000"
                 />
               </div>
@@ -158,14 +186,19 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
                 <button
                   type="button"
                   onClick={() => { setEditing(false); setError(null); }}
-                  className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
+                  className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
+                  style={{ 
+                    borderColor: "var(--admin-border)", 
+                    color: "var(--admin-text-muted)" 
+                  }}
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
                   disabled={saving}
-                  className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
+                  className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
+                  style={{ backgroundColor: "var(--admin-accent)" }}
                 >
                   {saving ? "Saving…" : "Save Changes"}
                 </button>
@@ -175,35 +208,51 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
         </div>
 
         {/* Email change section */}
-        <div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
-          <h3 className="text-base font-semibold text-stone-950">Email Address</h3>
-          <p className="mt-1 text-sm text-stone-500">
-            Current: <span className="font-medium text-stone-700">{currentUser.email}</span>
+        <div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{ 
+          backgroundColor: "white", 
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+          borderColor: "var(--admin-border)" 
+        }}>
+          <h3 className="text-base font-semibold" style={{ color: "var(--admin-text-primary)" }}>Email Address</h3>
+          <p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
+            Current: <span className="font-medium" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</span>
           </p>
 
           {emailChangeSent ? (
-            <div className="mt-4 rounded-lg bg-green-50 p-4 text-sm text-green-700">
+            <div className="mt-4 rounded-lg p-4 text-sm" style={{ 
+              backgroundColor: "rgba(16, 185, 129, 0.1)", 
+              color: "var(--admin-accent)" 
+            }}>
               A confirmation email has been sent to <strong>{newEmail}</strong>. Click the link in the email to confirm the change.
             </div>
           ) : (
             <form onSubmit={handleEmailChange} className="mt-4 space-y-3">
               <div>
-                <label className="block text-sm font-medium text-stone-700">New Email Address</label>
+                <label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>New Email Address</label>
                 <input
                   type="email"
                   value={newEmail}
                   onChange={(e) => setNewEmail(e.target.value)}
-                  className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                  className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
+                  style={{ 
+                    borderColor: "var(--admin-border)",
+                    color: "var(--admin-text-primary)",
+                    backgroundColor: "white"
+                  }}
                   placeholder="new@example.com"
                 />
               </div>
               {emailError && (
-                <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{emailError}</div>
+                <div className="rounded-lg p-3 text-sm" style={{ 
+                  backgroundColor: "rgba(239, 68, 68, 0.1)", 
+                  color: "rgb(239, 68, 68)" 
+                }}>{emailError}</div>
               )}
               <button
                 type="submit"
                 disabled={changingEmail || !newEmail || !newEmail.includes("@")}
-                className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
+                className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
+                style={{ backgroundColor: "var(--admin-accent)" }}
               >
                 {changingEmail ? "Sending…" : "Change Email"}
               </button>
diff --git a/src/app/admin/products/[id]/page.tsx b/src/app/admin/products/[id]/page.tsx
index 45c9282..f35207d 100644
--- a/src/app/admin/products/[id]/page.tsx
+++ b/src/app/admin/products/[id]/page.tsx
@@ -30,7 +30,7 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
 
   if (error || !product) {
     return (
-      <main className="min-h-screen bg-stone-100 px-6 py-12">
+      <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
         <div className="mx-auto max-w-4xl">
           <h1 className="text-3xl font-bold text-red-600">Product not found</h1>
           <pre className="mt-4 rounded-xl bg-white p-4 text-sm text-stone-600">
@@ -48,7 +48,7 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
   }
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-12">
+    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <a
           href="/admin/products"
diff --git a/src/app/admin/products/import/page.tsx b/src/app/admin/products/import/page.tsx
index 8fd7f28..497081e 100644
--- a/src/app/admin/products/import/page.tsx
+++ b/src/app/admin/products/import/page.tsx
@@ -81,7 +81,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
   }
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-6 flex items-center justify-between">
           <div>
diff --git a/src/app/admin/products/new/page.tsx b/src/app/admin/products/new/page.tsx
index c42c6e1..c85755c 100644
--- a/src/app/admin/products/new/page.tsx
+++ b/src/app/admin/products/new/page.tsx
@@ -6,7 +6,7 @@ export default async function NewProductPage() {
   const adminUser = await getAdminUser();
   if (!adminUser?.can_manage_products) redirect("/admin/pickup");
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-12">
+    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
           <a
diff --git a/src/app/admin/reports/page.tsx b/src/app/admin/reports/page.tsx
index 3fb469c..10589ac 100644
--- a/src/app/admin/reports/page.tsx
+++ b/src/app/admin/reports/page.tsx
@@ -22,7 +22,7 @@ export default async function ReportsPage() {
     : adminUser.brand_id ?? null;
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-7xl">
         <PageHeader
           title="Reports"
diff --git a/src/app/admin/route-trace/lots/[id]/page.tsx b/src/app/admin/route-trace/lots/[id]/page.tsx
index e18686e..aeb3fc6 100644
--- a/src/app/admin/route-trace/lots/[id]/page.tsx
+++ b/src/app/admin/route-trace/lots/[id]/page.tsx
@@ -41,7 +41,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
 
   if (!detailResult.success || !detailResult.lot) {
     return (
-      <div className="min-h-screen bg-stone-50 px-6 py-10">
+      <div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
         <div className="mx-auto max-w-2xl">
           <div className="rounded-xl border border-red-200 bg-white p-6 text-center">
             <p className="text-red-600">Lot not found</p>
@@ -53,7 +53,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
   }
 
   return (
-    <div className="min-h-screen bg-stone-50 px-6 py-10">
+    <div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-3xl">
         <div className="mb-6">
           <a href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
diff --git a/src/app/admin/route-trace/lots/new/page.tsx b/src/app/admin/route-trace/lots/new/page.tsx
index 546af51..103599f 100644
--- a/src/app/admin/route-trace/lots/new/page.tsx
+++ b/src/app/admin/route-trace/lots/new/page.tsx
@@ -25,7 +25,7 @@ export default async function NewLotPage() {
   if (!enabled) redirect("/admin/settings/apps?reason=route_trace");
 
   return (
-    <div className="min-h-screen bg-stone-50 px-6 py-10">
+    <div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-2xl">
         <div className="mb-6">
           <a href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
diff --git a/src/app/admin/sales/import/page.tsx b/src/app/admin/sales/import/page.tsx
index 70fb5e0..cc82a8f 100644
--- a/src/app/admin/sales/import/page.tsx
+++ b/src/app/admin/sales/import/page.tsx
@@ -77,7 +77,7 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
   }
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-6">
           <Link href="/admin/orders" className="text-sm text-stone-500 hover:text-stone-800">
diff --git a/src/app/admin/settings/shipping/page.tsx b/src/app/admin/settings/shipping/page.tsx
index 975f033..5ed8163 100644
--- a/src/app/admin/settings/shipping/page.tsx
+++ b/src/app/admin/settings/shipping/page.tsx
@@ -26,30 +26,30 @@ export default async function ShippingSettingsPage() {
   const settings = result.success ? result.settings : null;
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-10">
+    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-2xl">
         {/* Breadcrumb */}
-        <nav className="flex items-center gap-2 text-xs text-stone-500 mb-6">
-          <a href="/admin" className="hover:text-stone-800 transition-colors">Admin</a>
+        <nav className="flex items-center gap-2 text-xs mb-6" style={{ color: "var(--admin-text-muted)" }}>
+          <a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
           <span>/</span>
-          <span className="text-stone-800">Shipping</span>
+          <span style={{ color: "var(--admin-text-primary)" }}>Shipping</span>
         </nav>
 
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-2">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-stone-200 border border-stone-300">
-              <svg className="h-5 w-5 text-stone-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ backgroundColor: "var(--admin-accent)", color: "white" }}>
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25m-2.25 0h2.25m0 0v-.375c0-.621-.504-1.125-1.125-1.125H15m-1.5-3l1.5 0l.75 0v-.375c0-.621-.504-1.125-1.125-1.125H15m0 0v-.375c0-.621-.504-1.125-1.125-1.125H12" />
               </svg>
             </div>
-            <h1 className="text-3xl font-bold text-stone-950">Shipping Settings</h1>
+            <h1 className="text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>Shipping Settings</h1>
           </div>
-          <p className="mt-2 text-stone-500">
+          <p className="mt-2 text-sm" style={{ color: "var(--admin-text-muted)" }}>
             Configure FedEx integration for shipping fresh produce — sweet corn, onions, and more.
           </p>
         </div>
 
-        <div className="card p-6 shadow-xl">
+        <div className="rounded-2xl border p-6 shadow-lg" style={{ backgroundColor: "white", borderColor: "var(--admin-border)" }}>
           <ShippingSettingsForm
             settings={settings}
             brandId={effectiveBrandId}
diff --git a/src/app/admin/stops/[id]/page.tsx b/src/app/admin/stops/[id]/page.tsx
index 89c234a..623fe6f 100644
--- a/src/app/admin/stops/[id]/page.tsx
+++ b/src/app/admin/stops/[id]/page.tsx
@@ -38,7 +38,7 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
 
   if (error || !stop) {
     return (
-      <main className="min-h-screen bg-stone-100 px-6 py-12">
+      <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
         <div className="mx-auto max-w-4xl">
           <h1 className="text-3xl font-bold text-red-600">Stop not found</h1>
           <pre className="mt-4 rounded-xl bg-white border border-stone-200 p-4 text-sm text-stone-600">
@@ -72,7 +72,7 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
     .filter(Boolean);
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-12">
+    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <a
           href="/admin/stops"
diff --git a/src/app/admin/stops/new/page.tsx b/src/app/admin/stops/new/page.tsx
index ff9785c..c39fa0f 100644
--- a/src/app/admin/stops/new/page.tsx
+++ b/src/app/admin/stops/new/page.tsx
@@ -51,7 +51,7 @@ export default async function NewStopPage({
   ]);
 
   return (
-    <main className="min-h-screen bg-stone-100 px-6 py-12">
+    <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
           <a
diff --git a/src/app/admin/taxes/page.tsx b/src/app/admin/taxes/page.tsx
index 5c95d0f..03750f9 100644
--- a/src/app/admin/taxes/page.tsx
+++ b/src/app/admin/taxes/page.tsx
@@ -29,12 +29,20 @@ export default async function TaxesPage({ params }: Props) {
       resolvedBrandId = firstBrand.id;
     } else {
       return (
-        <main className="min-h-screen bg-stone-100 px-6 py-12">
+        <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
           <div className="mx-auto max-w-6xl">
-            <div className="card p-8 text-center">
-              <h1 className="text-2xl font-bold text-stone-950">No Brands Found</h1>
-              <p className="mt-2 text-stone-500">Create a brand in the database first.</p>
-              <a href="/admin" className="mt-4 inline-block rounded-xl bg-stone-200 px-6 py-3 text-sm font-medium text-stone-700 border border-stone-300 hover:bg-stone-300 transition-colors">
+            <div className="rounded-2xl p-8 text-center border" style={{ 
+              backgroundColor: "white", 
+              borderColor: "var(--admin-border)" 
+            }}>
+              <h1 className="text-2xl font-bold" style={{ color: "var(--admin-text-primary)" }}>No Brands Found</h1>
+              <p className="mt-2" style={{ color: "var(--admin-text-muted)" }}>Create a brand in the database first.</p>
+              <a href="/admin" className="mt-4 inline-block rounded-xl px-6 py-3 text-sm font-medium border transition-colors"
+                 style={{ 
+                   backgroundColor: "var(--admin-bg-subtle)", 
+                   borderColor: "var(--admin-border)", 
+                   color: "var(--admin-text-primary)" 
+                 }}>
                 Back to Admin
               </a>
             </div>
@@ -54,7 +62,7 @@ export default async function TaxesPage({ params }: Props) {
   const allBrands = (brands ?? []) as Array<{ id: string; name: string }>;
 
   return (
-    <main className="min-h-screen bg-stone-100">
+    <main className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-6xl px-6 py-10">
         <PageHeader
           title="Tax Dashboard"
diff --git a/src/components/admin/ShippingSettingsForm.tsx b/src/components/admin/ShippingSettingsForm.tsx
index 1fe64b4..0b8d24e 100644
--- a/src/components/admin/ShippingSettingsForm.tsx
+++ b/src/components/admin/ShippingSettingsForm.tsx
@@ -7,7 +7,7 @@ import {
   testFedExConnection,
   type ShippingSettings,
 } from "@/actions/shipping/settings";
-import { AdminInput, AdminTextInput, AdminTextarea, AdminSelect } from "./design-system";
+import { AdminInput, AdminTextInput, AdminTextarea, AdminSelect, AdminButton } from "./design-system";
 
 const SERVICE_OPTIONS = [
   { value: "FEDEX_OVERNIGHT", label: "FedEx Overnight" },
@@ -132,42 +132,78 @@ export default function ShippingSettingsForm({
       )}
 
       {/* Connection status banner */}
-      <div className={`flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium ${
-        isConfigured
-          ? "bg-emerald-900/30 border border-emerald-700 text-emerald-300"
-          : "bg-amber-900/30 border border-amber-700 text-amber-300"
-      }`}>
-        <span className={`h-2.5 w-2.5 rounded-full ${isConfigured ? "bg-emerald-500" : "bg-amber-900/300"}`} />
+      <div 
+        className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium border"
+        style={{
+          backgroundColor: isConfigured ? "rgba(16, 185, 129, 0.1)" : "rgba(245, 158, 11, 0.1)",
+          borderColor: isConfigured ? "var(--admin-accent)" : "rgba(245, 158, 11, 0.3)",
+          color: isConfigured ? "var(--admin-accent)" : "rgb(245, 158, 11)",
+        }}
+      >
+        <span 
+          className="h-2.5 w-2.5 rounded-full" 
+          style={{ backgroundColor: isConfigured ? "var(--admin-accent)" : "rgb(245, 158, 11)" }} 
+        />
         {isConfigured
           ? `FedEx Connected — ${settings?.fedex_use_production ? "Production" : "Sandbox"} mode`
           : "FedEx Not Configured — enter credentials below to enable shipping rates and label generation"}
       </div>
 
       {error && (
-        <div className="rounded-xl bg-red-900/50 border border-red-700 p-4 text-sm text-red-200">{error}</div>
+        <div 
+          className="rounded-xl p-4 text-sm border"
+          style={{ 
+            backgroundColor: "rgba(239, 68, 68, 0.1)", 
+            borderColor: "rgba(239, 68, 68, 0.3)", 
+            color: "rgb(239, 68, 68)" 
+          }}
+        >
+          {error}
+        </div>
       )}
       {saved && (
-        <div className="rounded-xl bg-green-900/50 border border-green-700 p-4 text-sm text-green-200">
+        <div 
+          className="rounded-xl p-4 text-sm border"
+          style={{ 
+            backgroundColor: "rgba(16, 185, 129, 0.1)", 
+            borderColor: "rgba(16, 185, 129, 0.3)", 
+            color: "var(--admin-accent)" 
+          }}
+        >
           Shipping settings saved.
         </div>
       )}
       {testResult && (
-        <div className={`rounded-xl p-4 text-sm border ${testResult.success ? "bg-green-900/50 border-green-700 text-green-200" : "bg-red-900/50 border-red-700 text-red-200"}`}>
+        <div 
+          className="rounded-xl p-4 text-sm border"
+          style={{ 
+            backgroundColor: testResult.success ? "rgba(16, 185, 129, 0.1)" : "rgba(239, 68, 68, 0.1)", 
+            borderColor: testResult.success ? "rgba(16, 185, 129, 0.3)" : "rgba(239, 68, 68, 0.3)", 
+            color: testResult.success ? "var(--admin-accent)" : "rgb(239, 68, 68)" 
+          }}
+        >
           {testResult.message}
         </div>
       )}
 
       {/* FedEx credentials */}
-      <div className="space-y-5 rounded-xl border border-blue-400 bg-blue-900/20 p-5">
+      <div 
+        className="space-y-5 rounded-xl border p-5"
+        style={{ 
+          backgroundColor: "var(--admin-bg-subtle)", 
+          borderColor: "var(--admin-border)" 
+        }}
+      >
         <div>
-          <h3 className="font-semibold text-blue-300">FedEx API Credentials</h3>
-          <p className="mt-1 text-sm text-blue-400">
+          <h3 className="font-semibold" style={{ color: "var(--admin-text-primary)" }}>FedEx API Credentials</h3>
+          <p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
             Used for shipping fresh sweet corn and onions. Get your credentials from{" "}
             <a
               href="https://developer.fedex.com"
               target="_blank"
               rel="noopener noreferrer"
               className="underline hover:no-underline"
+              style={{ color: "var(--admin-accent)" }}
             >
               developer.fedex.com
             </a>
@@ -203,7 +239,8 @@ export default function ShippingSettingsForm({
             <button
               type="button"
               onClick={() => setShowSecret(!showSecret)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-zinc-400 text-xs"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs transition-colors"
+              style={{ color: "var(--admin-text-muted)" }}
             >
               {showSecret ? "Hide" : "Show"}
             </button>
@@ -211,23 +248,32 @@ export default function ShippingSettingsForm({
         </AdminInput>
 
         {/* Production toggle */}
-        <div className="flex items-center gap-3 rounded-lg border border-zinc-700 bg-zinc-800 px-4 py-3">
+        <div 
+          className="flex items-center gap-3 rounded-xl px-4 py-3 border"
+          style={{ 
+            backgroundColor: "var(--admin-bg)", 
+            borderColor: "var(--admin-border)" 
+          }}
+        >
           <button
             type="button"
             onClick={() => setFedexUseProduction(!fedexUseProduction)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              fedexUseProduction ? "bg-blue-600" : "bg-zinc-600"
-            }`}
+            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+            style={{ 
+              backgroundColor: fedexUseProduction ? "var(--admin-accent)" : "var(--admin-text-muted)" 
+            }}
           >
             <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-zinc-900 transition-transform ${
-                fedexUseProduction ? "translate-x-6" : "translate-x-1"
-              }`}
+              className="inline-block h-4 w-4 rounded-full transition-transform"
+              style={{ 
+                backgroundColor: "white",
+                transform: fedexUseProduction ? "translateX(26px)" : "translateX(4px)" 
+              }}
             />
           </button>
           <div>
-            <span className="text-sm font-medium text-zinc-200">Use Production Mode</span>
-            <p className="text-xs text-zinc-400">
+            <span className="text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Use Production Mode</span>
+            <p className="text-xs" style={{ color: "var(--admin-text-muted)" }}>
               {fedexUseProduction
                 ? "Live rates, real labels. Sandbox is currently active."
                 : "Sandbox/test mode. Use for testing before going live."}
@@ -237,32 +283,38 @@ export default function ShippingSettingsForm({
 
         {/* Test connection */}
         <div className="flex items-center gap-3">
-          <button
-            type="button"
+          <AdminButton
+            variant="primary"
+            size="sm"
             onClick={handleTestConnection}
             disabled={testing || !fedexApiKey || !fedexApiSecret}
-            className="rounded-xl border border-blue-400 bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
           >
             {testing ? (
               <span className="flex items-center gap-2">
-                <span className="h-4 w-4 rounded-full border-2 border-blue-600 border-t-transparent animate-spin" />
+                <span className="h-4 w-4 rounded-full border-2 border-white border-t-transparent animate-spin" />
                 Testing...
               </span>
             ) : (
               "Test Connection"
             )}
-          </button>
+          </AdminButton>
           {testResult?.success && (
-            <span className="text-sm text-green-400 font-medium">✓ Connection verified</span>
+            <span className="text-sm font-medium" style={{ color: "var(--admin-accent)" }}>✓ Connection verified</span>
           )}
         </div>
       </div>
 
       {/* Default shipping options */}
-      <div className="space-y-5 rounded-xl border border-zinc-700 bg-zinc-900 p-5">
+      <div 
+        className="space-y-5 rounded-xl border p-5"
+        style={{ 
+          backgroundColor: "var(--admin-bg-subtle)", 
+          borderColor: "var(--admin-border)" 
+        }}
+      >
         <div>
-          <h3 className="font-semibold text-zinc-200">Default Shipping Service</h3>
-          <p className="mt-1 text-sm text-zinc-400">
+          <h3 className="font-semibold" style={{ color: "var(--admin-text-primary)" }}>Default Shipping Service</h3>
+          <p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
             Applied automatically when creating shipments. Perishable orders always require Overnight or 2-Day Air regardless of this setting.
           </p>
         </div>
@@ -277,10 +329,16 @@ export default function ShippingSettingsForm({
       </div>
 
       {/* Handling notes */}
-      <div className="space-y-5 rounded-xl border border-zinc-700 bg-zinc-900 p-5">
+      <div 
+        className="space-y-5 rounded-xl border p-5"
+        style={{ 
+          backgroundColor: "var(--admin-bg-subtle)", 
+          borderColor: "var(--admin-border)" 
+        }}
+      >
         <div>
-          <h3 className="font-semibold text-zinc-200">Handling Instructions</h3>
-          <p className="mt-1 text-sm text-zinc-400">
+          <h3 className="font-semibold" style={{ color: "var(--admin-text-primary)" }}>Handling Instructions</h3>
+          <p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
             These notes are attached to shipments containing perishable or fragile items (sweet corn, onions, etc.). Appear on the carrier label and in the warehouse.
           </p>
         </div>
@@ -308,18 +366,19 @@ export default function ShippingSettingsForm({
       </div>
 
       {loading ? (
-        <div className="flex items-center gap-3 text-zinc-500">
-          <div className="h-5 w-5 rounded-full border-2 border-zinc-500 border-t-transparent animate-spin" />
+        <div className="flex items-center gap-3" style={{ color: "var(--admin-text-muted)" }}>
+          <div className="h-5 w-5 rounded-full border-2 border-current border-t-transparent animate-spin" />
           Loading settings...
         </div>
       ) : (
-        <button
+        <AdminButton
+          variant="primary"
+          size="md"
           type="submit"
           disabled={saving}
-          className="rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white hover:bg-blue-700 disabled:opacity-50"
         >
           {saving ? "Saving..." : "Save Shipping Settings"}
-        </button>
+        </AdminButton>
       )}
     </form>
   );