frontend/src/components/ExportEngagementButton.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ChevronDown, Download, Loader2 } from 'lucide-react';
+import { ChevronDown, Download } from 'lucide-react';
 import { downloadEngagementExport, type ExportFormat } from '@/api/exports';
 import { useToast } from '@/hooks/useToast';
 
@@ -88,9 +88,11 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
               data-testid={`export-format-${value}`}
             >
               {loading === value ? (
-                <Loader2 size={12} className="animate-spin" aria-hidden />
+                <span className="font-mono text-[11px] animate-pulse" aria-hidden>
+                  EXPORTING…
+                </span>
               ) : null}
-              {label}
+              {loading !== value ? label : null}
             </button>
           ))}
         </div>

frontend/src/components/Layout.tsx

@@ -59,12 +59,12 @@ export function Layout(): JSX.Element {
         </div>
       </div>
 
-      {/* nav-bar-top — paper gives dark-mode lift vs canvas body */}
+      {/* nav-bar-top — fixed dark slab, never inverts (same visual family as utility-strip + footer) */}
-      <header className="bg-paper border-b border-hairline">
+      <header className="bg-slab text-slab-text">
         <div className="mx-auto w-full max-w-page px-xl h-16 flex items-center justify-between">
           <Link to="/engagements" className="flex items-center gap-sm" aria-label="Mimic home">
             <span className="inline-block h-6 w-6 rotate-12 bg-primary" aria-hidden />
-            <span className="text-[20px] font-medium tracking-tight text-ink">Mimic</span>
+            <span className="text-[20px] font-medium tracking-tight text-slab-text">Mimic</span>
           </Link>
 
           <nav className="flex items-center gap-md">
@@ -72,7 +72,9 @@ export function Layout(): JSX.Element {
               to="/engagements"
               className={({ isActive }) =>
                 `text-[16px] py-2 px-md ${
-                  isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                  isActive
+                    ? 'text-slab-text border-b-2 border-primary'
+                    : 'text-slab-muted hover:text-slab-text'
                 }`
               }
             >
@@ -83,7 +85,9 @@ export function Layout(): JSX.Element {
                 to="/admin/templates"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >
@@ -95,7 +99,9 @@ export function Layout(): JSX.Element {
                 to="/admin/users"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >

frontend/src/pages/UsersAdminPage.tsx

@@ -205,10 +205,10 @@ export function UsersAdminPage(): JSX.Element {
                     // per-row reconciliation (reset-password state leaked across rows).
                     <Fragment key={u.id}>
                       <tr className="border-b border-hairline last:border-0">
-                        <td className="px-xl py-md font-mono font-medium text-ink">
+                        <td className="px-xl py-md text-ink">
-                          {u.username}
+                          <span className="font-mono font-medium">{u.username}</span>
                           {isSelf ? (
-                            <span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]">
+                            <span className="ml-sm font-sans text-[12px] text-graphite">
                               (you)
                             </span>
                           ) : null}