diff --git a/app/app/dashboard/page.tsx b/app/app/dashboard/page.tsx
index b9998fba..7e441de4 100644
--- a/app/app/dashboard/page.tsx
+++ b/app/app/dashboard/page.tsx
@@ -240,9 +240,12 @@ export default function DashboardPage() {
             Your personal command centre for trading on Percolator
           </p>
 
-          {/* Blurred preview */}
+          {/* Ghost preview of the dashboard layout behind the connect gate.
+              Crisp at reduced opacity, NOT blurred: blur-sm + near-white
+              panels on the light theme's white bg dissolved into shapeless
+              smudges that read as a rendering glitch rather than a preview. */}
           <div className="relative">
-            <div className="pointer-events-none select-none blur-sm opacity-40">
+            <div className="pointer-events-none select-none opacity-40">
               <div className="grid grid-cols-2 gap-px border border-[var(--border)] bg-[var(--border)] lg:grid-cols-4">
                 {[1, 2, 3, 4].map((i) => (
                   <div key={i} className="bg-[var(--panel-bg)] p-5 h-20" />
diff --git a/app/app/trade/[slab]/page.tsx b/app/app/trade/[slab]/page.tsx
index 651ba6a0..5706fcab 100644
--- a/app/app/trade/[slab]/page.tsx
+++ b/app/app/trade/[slab]/page.tsx
@@ -93,7 +93,7 @@ function UsdToggleButton() {
           "rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
           !showUsd
             ? "bg-[var(--accent)]/10 text-[var(--accent)]"
-            : "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
+            : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
         ].join(" ")}
       >
         tokens
@@ -104,7 +104,7 @@ function UsdToggleButton() {
           "rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
           showUsd
             ? "bg-[var(--accent)]/10 text-[var(--accent)]"
-            : "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
+            : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
         ].join(" ")}
       >
         usd
@@ -124,7 +124,7 @@ function CopyButton({ text }: { text: string }) {
         toast("Address copied to clipboard!", "success");
         setTimeout(() => setCopied(false), 1500);
       }}
-      className="inline-flex items-center text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
+      className="inline-flex items-center text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
       title="Copy address"
     >
       {copied ? (
@@ -301,7 +301,7 @@ function MobileOrderSheet({ slab }: { slab: string }) {
       >
         <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[var(--border)]/50 bg-[var(--bg)] px-3 py-2">
           <span className="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)]">Order ticket</span>
-          <button onClick={() => setOpen(false)} className="text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
+          <button onClick={() => setOpen(false)} className="text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
             ✕
           </button>
         </div>
@@ -517,7 +517,7 @@ function TradePageInner({ slab }: { slab: string }) {
           Shown on all breakpoints (the pre-rebuild page only showed this on
           mobile; desktop had no equivalent, which was inconsistent). */}
       <div className="flex items-center gap-3 border-b border-[var(--border)]/30 px-3 py-1.5 overflow-x-auto whitespace-nowrap scrollbar-none">
-        <span className="flex items-center gap-1 text-[10px] text-[var(--text-dim)]" style={{ fontFamily: "var(--font-mono)" }}>
+        <span className="flex items-center gap-1 text-[10px] text-[var(--text-muted)]" style={{ fontFamily: "var(--font-mono)" }}>
           {shortAddress}
           <CopyButton text={slab} />
         </span>
@@ -542,7 +542,7 @@ function TradePageInner({ slab }: { slab: string }) {
         <UsdToggleButton />
         <a
           href={`/analytics/${slab}`}
-          className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
+          className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
         >
           Analytics →
         </a>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index f32851b3..14dd6c42 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -207,12 +207,15 @@ export const Header: FC = () => {
 
         {/* Right */}
         <div className="ml-auto flex shrink-0 items-center gap-2 sm:gap-2.5">
-          {/* DEVNET badge — non-interactive pill */}
+          {/* DEVNET badge — non-interactive pill. var(--warning), not
+              hardcoded amber-400: #fbbf24 lands at ~1.7:1 on the light
+              theme's white header (near-invisible); the token resolves to a
+              readable amber-700 in light mode and stays amber in dark. */}
           {network === "devnet" && (
             <span
               ref={badgeRef}
               title="You are on devnet - no real funds"
-              className="inline-flex items-center gap-1 rounded-full border border-[#fbbf24]/35 bg-[#fbbf24]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[#fbbf24] cursor-default pointer-events-none select-none"
+              className="inline-flex items-center gap-1 rounded-full border border-[var(--warning)]/35 bg-[var(--warning)]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[var(--warning)] cursor-default pointer-events-none select-none"
             >
               devnet
             </span>