diff --git a/frontend/apps/artcraft-dashboard/src/components/ui/checkbox.tsx b/frontend/apps/artcraft-dashboard/src/components/ui/checkbox.tsx
index 37308a6862..064dcde810 100644
--- a/frontend/apps/artcraft-dashboard/src/components/ui/checkbox.tsx
+++ b/frontend/apps/artcraft-dashboard/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { CheckIcon, MinusIcon } from "lucide-react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import * as React from "react";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Checkbox({
   className,
@@ -14,8 +14,8 @@ function Checkbox({
       data-slot="checkbox"
       checked={checked}
       className={cn(
-        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary",
-        className
+        "peer size-4 shrink-0 rounded-[3px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary",
+        className,
       )}
       {...props}
     >
@@ -30,7 +30,7 @@ function Checkbox({
         )}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/frontend/apps/artcraft-dashboard/src/pages/UserSignups.tsx b/frontend/apps/artcraft-dashboard/src/pages/UserSignups.tsx
index 41ca1e7238..42924a13a0 100644
--- a/frontend/apps/artcraft-dashboard/src/pages/UserSignups.tsx
+++ b/frontend/apps/artcraft-dashboard/src/pages/UserSignups.tsx
@@ -59,7 +59,9 @@ export function UserSignups() {
       if (cancelledRef.current) return;
 
       if (resp.success && resp.data) {
-        setUsers((prev) => (append ? [...prev, ...resp.data!.users] : resp.data!.users));
+        setUsers((prev) =>
+          append ? [...prev, ...resp.data!.users] : resp.data!.users,
+        );
         setNextCursor(resp.data.next_cursor);
       } else {
         setError(resp.errorMessage || "Failed to load users");
@@ -169,7 +171,9 @@ export function UserSignups() {
           onClick={handleRefresh}
           disabled={isLoading}
         >
-          <IconRefresh className={`size-4 ${isLoading ? "animate-spin" : ""}`} />
+          <IconRefresh
+            className={`size-4 ${isLoading ? "animate-spin" : ""}`}
+          />
           Refresh
         </Button>
       </div>
@@ -188,7 +192,8 @@ export function UserSignups() {
             All Users
             {!isLoading && (
               <span className="text-sm font-normal text-muted-foreground ml-1">
-                ({users.length}{nextCursor != null ? "+" : ""})
+                ({users.length}
+                {nextCursor != null ? "+" : ""})
               </span>
             )}
           </h3>
@@ -234,15 +239,33 @@ export function UserSignups() {
               <TableBody>
                 {Array.from({ length: 10 }).map((_, i) => (
                   <TableRow key={i}>
-                    <TableCell><Skeleton className="size-4 rounded-[4px]" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-24" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-28" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-36" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-28" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-16" /></TableCell>
-                    <TableCell><Skeleton className="h-4 w-16" /></TableCell>
-                    <TableCell><Skeleton className="h-5 w-20 rounded-full" /></TableCell>
-                    <TableCell><Skeleton className="h-6 w-20 rounded" /></TableCell>
+                    <TableCell>
+                      <Skeleton className="size-4 rounded-[3px]" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-28" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-36" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-28" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-16" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-16" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-5 w-20 rounded-full" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-6 w-20 rounded" />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -305,12 +328,21 @@ export function UserSignups() {
                       </Link>
                     </TableCell>
                     <TableCell className="text-sm text-muted-foreground">
-                      {user.display_name || <span className="text-muted-foreground/30">&mdash;</span>}
+                      {user.display_name || (
+                        <span className="text-muted-foreground/30">
+                          &mdash;
+                        </span>
+                      )}
                     </TableCell>
                     <TableCell className="text-sm">
-                      <span className="text-muted-foreground">{user.email_address}</span>
+                      <span className="text-muted-foreground">
+                        {user.email_address}
+                      </span>
                       {!user.email_confirmed && (
-                        <Badge variant="outline" className="ml-2 text-[10px] text-amber-400 border-amber-400/30">
+                        <Badge
+                          variant="outline"
+                          className="ml-2 text-[10px] text-amber-400 border-amber-400/30"
+                        >
                           Unconfirmed
                         </Badge>
                       )}
@@ -330,40 +362,65 @@ export function UserSignups() {
                           {user.maybe_source}
                         </Badge>
                       ) : (
-                        <span className="text-muted-foreground/30">&mdash;</span>
+                        <span className="text-muted-foreground/30">
+                          &mdash;
+                        </span>
                       )}
                     </TableCell>
                     <TableCell className="text-xs">
                       {user.maybe_signup_method ? (
-                        <Badge variant="outline" className="text-[10px] text-muted-foreground">
+                        <Badge
+                          variant="outline"
+                          className="text-[10px] text-muted-foreground"
+                        >
                           {user.maybe_signup_method}
                         </Badge>
                       ) : (
-                        <span className="text-muted-foreground/30">&mdash;</span>
+                        <span className="text-muted-foreground/30">
+                          &mdash;
+                        </span>
                       )}
                     </TableCell>
                     <TableCell className="text-xs">
                       <div className="flex items-center gap-1.5">
                         {user.is_temporary && (
-                          <Badge variant="secondary" className="text-[10px] bg-amber-500/10 text-amber-400 border-transparent">
+                          <Badge
+                            variant="secondary"
+                            className="text-[10px] bg-amber-500/10 text-amber-400 border-transparent"
+                          >
                             Temp
                           </Badge>
                         )}
                         {user.is_without_password && (
-                          <Badge variant="secondary" className="text-[10px] bg-orange-500/10 text-orange-400 border-transparent">
+                          <Badge
+                            variant="secondary"
+                            className="text-[10px] bg-orange-500/10 text-orange-400 border-transparent"
+                          >
                             No Password
                           </Badge>
                         )}
                         {!user.is_temporary && !user.is_without_password && (
-                          <Badge variant="secondary" className="text-[10px] bg-emerald-500/10 text-emerald-400 border-transparent">
+                          <Badge
+                            variant="secondary"
+                            className="text-[10px] bg-emerald-500/10 text-emerald-400 border-transparent"
+                          >
                             Active
                           </Badge>
                         )}
                       </div>
                     </TableCell>
                     <TableCell className="text-xs">
-                      <Button variant="ghost" size="sm" asChild className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground">
-                        <a href={`/user/profile/${user.username}`} target="_blank" rel="noopener noreferrer">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        asChild
+                        className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                      >
+                        <a
+                          href={`/user/profile/${user.username}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
                           <IconExternalLink className="size-3.5" />
                           View Profile
                         </a>
@@ -380,7 +437,9 @@ export function UserSignups() {
                           Loading more...
                         </div>
                       ) : (
-                        <span className="text-muted-foreground/50">Scroll for more</span>
+                        <span className="text-muted-foreground/50">
+                          Scroll for more
+                        </span>
                       )}
                     </TableCell>
                   </TableRow>
diff --git a/frontend/apps/artcraft-webapp/index.html b/frontend/apps/artcraft-webapp/index.html
index f678b90fa3..5db588df99 100644
--- a/frontend/apps/artcraft-webapp/index.html
+++ b/frontend/apps/artcraft-webapp/index.html
@@ -65,7 +65,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Instrument+Serif:ital@0;1&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..800&display=swap"
       rel="stylesheet"
     />
   </head>
diff --git a/frontend/apps/artcraft-webapp/public/images/artcraft-icon-2.png b/frontend/apps/artcraft-webapp/public/images/artcraft-icon-2.png
new file mode 100644
index 0000000000..b4542a2023
Binary files /dev/null and b/frontend/apps/artcraft-webapp/public/images/artcraft-icon-2.png differ
diff --git a/frontend/apps/artcraft-webapp/public/images/artcraft-logo-2.png b/frontend/apps/artcraft-webapp/public/images/artcraft-logo-2.png
new file mode 100644
index 0000000000..29814b993a
Binary files /dev/null and b/frontend/apps/artcraft-webapp/public/images/artcraft-logo-2.png differ
diff --git a/frontend/apps/artcraft-webapp/src/app/app.tsx b/frontend/apps/artcraft-webapp/src/app/app.tsx
index c74f29aed9..c4599bbec8 100644
--- a/frontend/apps/artcraft-webapp/src/app/app.tsx
+++ b/frontend/apps/artcraft-webapp/src/app/app.tsx
@@ -61,10 +61,10 @@ function ScrollToTop() {
 
 function AuthCheckSpinner() {
   return (
-    <div className="flex h-screen items-center justify-center bg-[#101014]">
+    <div className="flex h-screen items-center justify-center bg-ui-background">
       <LoaderCircleIcon
-        
-        className="animate-spin text-4xl text-primary/80" />
+
+        className="animate-spin text-4xl text-white/70" />
     </div>
   );
 }
@@ -114,7 +114,7 @@ function ProtectedContent() {
       style={{ "--ac-sidebar-offset": sidebarOffset } as React.CSSProperties}
     >
       {!hideTopBar && <TopBar />}
-      <SidebarInset className="flex-1 min-h-0 overflow-y-auto bg-[#121212]">
+      <SidebarInset className="flex-1 min-h-0 overflow-y-auto bg-ui-background">
         <PageTransition>
           <Outlet />
         </PageTransition>
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx b/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
index 48df3a6a2b..e035a3cd36 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
@@ -60,15 +60,15 @@ export function GoogleLoginButton({
       className={`group relative w-full h-10 transition-transform duration-150 active:scale-95 ${className}`}
     >
       {/* Custom visual button - shown behind */}
-      <div className="absolute inset-0 w-full h-full flex items-center justify-center gap-3 bg-white text-black rounded-full font-medium border border-gray-200 group-hover:border-white/80 group-hover:bg-white/80 transition-colors">
+      <div className="absolute inset-0 w-full h-full flex items-center justify-center gap-3 rounded-[3px] bg-white text-black font-medium group-hover:bg-white/80 transition-colors">
         {isLoading ? (
-          <LoaderCircleIcon
-            
-            className="animate-spin text-lg text-gray-600" />
+          <LoaderCircleIcon className="animate-spin text-lg text-black/60" />
         ) : (
           <>
             <GoogleIcon />
-            <span className="text-sm font-semibold">Continue with Google</span>
+            <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+              Continue with Google
+            </span>
           </>
         )}
       </div>
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
index 2b04e81c06..d5736230fd 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
@@ -31,7 +31,7 @@ export const AuthLayout = () => {
   }
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#101014] p-4 text-white">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-ui-background p-4 text-white">
       <div
         aria-hidden
         className="pointer-events-none absolute inset-0 z-0"
@@ -48,16 +48,7 @@ export const AuthLayout = () => {
         />
       </div>
 
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
-
-      <div className="relative z-10 flex w-full max-w-5xl overflow-hidden rounded-3xl border border-white/[4%] bg-[#1C1C20] shadow-2xl lg:min-h-[640px]">
+      <div className="relative z-10 flex w-full max-w-5xl overflow-hidden border border-white/15 bg-[#101014] lg:min-h-[640px]">
         {/* Form pane — only the inner content swaps per route (via Outlet), so
             this pane and the showcase beside it stay mounted across the
             login/signup toggle. */}
@@ -66,7 +57,7 @@ export const AuthLayout = () => {
             type="button"
             onClick={handleBack}
             aria-label="Go back"
-            className="absolute left-5 top-5 z-20 flex h-9 w-9 items-center justify-center rounded-full text-white/60 transition-colors hover:bg-white/10 hover:text-white"
+            className="absolute left-5 top-5 z-20 flex h-9 w-9 items-center justify-center text-white/60 transition-colors hover:bg-white/10 hover:text-white"
           >
             <ArrowLeftIcon />
           </button>
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
index 9335fe28ed..6e17337a40 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
@@ -4,7 +4,7 @@ const FEATURED_VIDEO_URL =
 export const AuthShowcase = () => {
   return (
     <div
-      className="absolute inset-2 overflow-hidden bg-black rounded-2xl"
+      className="absolute inset-2 overflow-hidden bg-black"
       style={{ containerType: "size" }}
     >
       {/* Vimeo background embed (no controls) scaled to cover the pane. The
@@ -30,7 +30,7 @@ export const AuthShowcase = () => {
 
       {/* Caption */}
       <div className="pointer-events-none absolute inset-x-0 bottom-0 p-8">
-        <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-300">
+        <p className="mb-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70">
           One of the cheapest
         </p>
         <h2 className="text-2xl font-bold leading-tight">
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
index 23d93c8c58..94c0b2e606 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
@@ -107,7 +107,7 @@ export const SignupForm = ({
         }}
       >
         {error && (
-          <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+          <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
             {error}
           </div>
         )}
@@ -123,7 +123,7 @@ export const SignupForm = ({
           className="space-y-4"
         >
           <Reveal className="space-y-2">
-            <label className="text-xs font-semibold text-white/70 ml-1">
+            <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70">
               Email
             </label>
             <Input
@@ -132,13 +132,13 @@ export const SignupForm = ({
               onChange={(e) => setEmail(e.target.value)}
               placeholder="you@example.com"
               autoFocus={autoFocus}
-              inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+              inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
             />
           </Reveal>
 
           <Reveal className="space-y-2">
-            <div className="flex justify-between items-center ml-1">
-              <label className="text-xs font-semibold text-white/70">
+            <div className="flex justify-between items-center">
+              <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70">
                 Password
               </label>
             </div>
@@ -148,7 +148,7 @@ export const SignupForm = ({
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Min. 8 characters"
-                inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
               />
               <button
                 type="button"
@@ -163,12 +163,12 @@ export const SignupForm = ({
 
           <Reveal className="pt-2">
             <Button
-              className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+              className="w-full justify-center h-10"
               type="submit"
               disabled={isLoading}
             >
               {isLoading ? (
-                <LoaderCircleIcon  className="animate-spin" />
+                <LoaderCircleIcon className="animate-spin" />
               ) : (
                 "Create account"
               )}
@@ -190,7 +190,7 @@ export const SignupForm = ({
           <div className="absolute inset-0 flex items-center">
             <div className="w-full border-t border-white/10" />
           </div>
-          <span className="relative bg-[#1C1C20] px-4 text-xs uppercase tracking-widest text-white/40">
+          <span className="relative bg-[#101014] px-4 font-mono text-[11px] uppercase tracking-[0.12em] text-white/40">
             or
           </span>
         </Reveal>
diff --git a/frontend/apps/artcraft-webapp/src/components/credits-modal.tsx b/frontend/apps/artcraft-webapp/src/components/credits-modal.tsx
index 296267c094..b1fb8f3c30 100644
--- a/frontend/apps/artcraft-webapp/src/components/credits-modal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/credits-modal.tsx
@@ -51,7 +51,7 @@ export function CreditsModal({ isOpen, onClose }: CreditsModalProps) {
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      className="rounded-2xl w-full max-w-2xl max-h-[100vh] overflow-y-auto overflow-x-hidden border border-white/5 bg-[#161618] p-0 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)]"
+      className="w-full max-w-2xl max-h-[100vh] overflow-y-auto overflow-x-hidden border border-white/15 bg-ui-modal p-0"
       allowBackgroundInteraction={false}
       showClose={true}
       closeOnOutsideClick={true}
@@ -60,16 +60,6 @@ export function CreditsModal({ isOpen, onClose }: CreditsModalProps) {
       backdropClassName="bg-black/80"
     >
       <div className="relative overflow-hidden">
-        {/* Off-center ambient glow, feels designed, not generic */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/25 blur-[80px]"
-        />
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
-        />
-
         <div className="relative px-8 pt-10 pb-8 sm:px-10 sm:pt-11 sm:pb-9">
           <h2 className="font-display text-3xl font-semibold tracking-tight text-white sm:text-[34px] sm:leading-[1.1]">
             Buy <span className="text-primary">credits</span>
@@ -89,23 +79,21 @@ export function CreditsModal({ isOpen, onClose }: CreditsModalProps) {
                   onClick={() => handlePurchase(pack)}
                   disabled={purchasingId !== null}
                   className={twMerge(
-                    "group relative flex flex-col gap-6 rounded-2xl border p-6 text-left transition-all disabled:cursor-not-allowed disabled:opacity-60",
+                    "group relative flex flex-col gap-6 border p-6 text-left transition-all disabled:cursor-not-allowed disabled:opacity-60",
                     isPopular
-                      ? "border-primary/50 bg-primary/[0.07] hover:border-primary"
-                      : "border-white/10 bg-white/[0.02] hover:border-white/25 hover:bg-white/[0.04]",
+                      ? "border-white/60 bg-white/[0.06] hover:border-white"
+                      : "border-white/15 bg-white/[0.02] hover:border-white/30 hover:bg-white/[0.04]",
                   )}
                 >
                   {pack.badge && (
-                    <span className="absolute -top-2.5 right-3 rounded-full bg-primary px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow-lg">
+                    <span className="absolute -top-2.5 right-3 bg-white px-2.5 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-black">
                       {pack.badge}
                     </span>
                   )}
 
                   <div className="flex items-center gap-3">
-                    <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/15">
-                      <CoinsIcon
-                        
-                        className="text-primary text-lg" />
+                    <span className="flex h-12 w-12 shrink-0 items-center justify-center bg-white/10">
+                      <CoinsIcon className="text-white text-lg" />
                     </span>
                     <div className="min-w-0">
                       <div className="text-4xl font-bold leading-none tracking-tight text-white">
@@ -119,17 +107,13 @@ export function CreditsModal({ isOpen, onClose }: CreditsModalProps) {
                     <span className="text-2xl font-semibold text-white/80">
                       ${pack.priceUsd}
                     </span>
-                    <span className="flex items-center gap-1.5 text-base font-semibold text-primary-400">
+                    <span className="flex items-center gap-1.5 text-base font-semibold text-white">
                       {isLoading ? (
-                        <LoaderCircleIcon
-                          
-                          className="animate-spin" />
+                        <LoaderCircleIcon className="animate-spin" />
                       ) : (
                         <>
                           Buy
-                          <ArrowRightIcon
-                            
-                            className="text-xs transition-transform group-hover:translate-x-0.5" />
+                          <ArrowRightIcon className="text-xs transition-transform group-hover:translate-x-0.5" />
                         </>
                       )}
                     </span>
diff --git a/frontend/apps/artcraft-webapp/src/components/generation-gallery/CreateMediaPageShell.tsx b/frontend/apps/artcraft-webapp/src/components/generation-gallery/CreateMediaPageShell.tsx
index 2dcc3439e3..01feffc4af 100644
--- a/frontend/apps/artcraft-webapp/src/components/generation-gallery/CreateMediaPageShell.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/generation-gallery/CreateMediaPageShell.tsx
@@ -80,10 +80,10 @@ export function CreateMediaPageShell({
 
   if (!authChecked) {
     return (
-      <div className="flex h-full items-center justify-center bg-[#101014]">
+      <div className="flex h-full items-center justify-center bg-ui-background">
         <LoaderCircleIcon
-          
-          className="animate-spin text-4xl text-primary/80" />
+
+          className="animate-spin text-4xl text-white/60" />
       </div>
     );
   }
@@ -99,7 +99,7 @@ export function CreateMediaPageShell({
           goToHistory: () => setMobileTab("history"),
         }}
       >
-        <div className="flex h-full w-full flex-col bg-[#101014] text-white">
+        <div className="flex h-full w-full flex-col bg-ui-background text-white">
           <Seo title={title} description={description} />
 
           {/* Flex (not absolute) keeps the toggle cluster from overlapping
@@ -150,27 +150,20 @@ export function CreateMediaPageShell({
   }
 
   return (
-    <div className="flex h-full w-full bg-[#101014] text-white">
+    <div className="flex h-full w-full bg-ui-background text-white">
       <Seo title={title} description={description} />
 
       {/* Decorative background, empty state only. Not rendered on mobile
-          devices: the glow orbs use filter: blur(120px) and the truchet uses
-          mask-image, both of which are full-screen GPU layers that iOS Safari
-          must re-rasterize when an overlay (mobile menu, modal) composites over
-          them, causing multi-second hangs. (This is distinct from
-          backdrop-filter.) We gate on the actual device (react-device-detect's
-          user-agent check) rather than a viewport breakpoint so the layers
-          never mount on a real phone/tablet, and a narrow desktop window still
-          gets the decoration. */}
+          devices: the truchet uses mask-image, a full-screen GPU layer that
+          iOS Safari must re-rasterize when an overlay (mobile menu, modal)
+          composites over it, causing multi-second hangs. (This is distinct
+          from backdrop-filter.) We gate on the actual device
+          (react-device-detect's user-agent check) rather than a viewport
+          breakpoint so the layers never mount on a real phone/tablet, and a
+          narrow desktop window still gets the decoration. */}
       {!hasContent && !isMobile && (
         <>
-          {glowOrbs ?? (
-            <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
-              <div className="absolute left-1/2 top-[-10%] h-[700px] w-[700px] -translate-x-1/2 rounded-full bg-gradient-to-br from-blue-700 via-blue-500 to-[#00AABA] opacity-[0.12] blur-[120px] transform-gpu" />
-              <div className="absolute bottom-[-15%] right-[-10%] h-[500px] w-[500px] rounded-full bg-gradient-to-br from-purple-600 via-blue-500 to-[#00AABA] opacity-[0.08] blur-[120px] transform-gpu" />
-              <div className="absolute bottom-[20%] left-[-10%] h-[400px] w-[400px] rounded-full bg-gradient-to-br from-blue-600 to-pink-500 opacity-[0.06] blur-[140px] transform-gpu" />
-            </div>
-          )}
+          {glowOrbs}
           <div
             aria-hidden
             className="pointer-events-none fixed inset-0 z-0"
@@ -193,7 +186,7 @@ export function CreateMediaPageShell({
         <div className="flex h-full w-full flex-col">
           {!hasContent && (
             <div className="flex flex-1 items-center justify-center">
-              <div className="animate-fade-in-up relative z-20 mb-32 flex flex-col items-center justify-center text-center drop-shadow-xl">
+              <div className="animate-fade-in-up relative z-20 mb-32 flex flex-col items-center justify-center text-center">
                 <h1 className="text-5xl font-semibold text-white md:text-7xl">
                   {emptyStateTitle}
                 </h1>
@@ -219,7 +212,7 @@ export function CreateMediaPageShell({
           {hasContent && (
             <div
               aria-hidden
-              className="pointer-events-none fixed bottom-0 right-0 z-20 h-48 bg-gradient-to-t from-[#101014] to-transparent"
+              className="pointer-events-none fixed bottom-0 right-0 z-20 h-48 bg-gradient-to-t from-ui-background to-transparent"
               style={{ left: "var(--ac-sidebar-offset, 0px)" }}
             />
           )}
diff --git a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GallerySelectionDownloadBar.tsx b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GallerySelectionDownloadBar.tsx
index 83a0ea49bf..91df923179 100644
--- a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GallerySelectionDownloadBar.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GallerySelectionDownloadBar.tsx
@@ -83,7 +83,7 @@ export function GallerySelectionDownloadBar({
         type="button"
         onClick={handleDownload}
         disabled={isDownloading || selectedItems.length === 0}
-        className="flex items-center gap-2 rounded-full bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-60"
+        className="flex items-center gap-2 border border-white/15 bg-ui-controls/60 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 disabled:opacity-60"
       >
         <DynamicIcon
           icon={isDownloading ? LoaderCircleIcon : ArrowDownToLineIcon}
diff --git a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryGrid.tsx b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryGrid.tsx
index 57d89f60e9..b4ecc8c97d 100644
--- a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryGrid.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryGrid.tsx
@@ -1,4 +1,11 @@
-import { ArrowDownToLineIcon, CheckIcon, LinkIcon, LoaderCircleIcon, RotateCwIcon, VideoIcon } from "lucide-react";
+import {
+  ArrowDownToLineIcon,
+  CheckIcon,
+  LinkIcon,
+  LoaderCircleIcon,
+  RotateCwIcon,
+  VideoIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import {
@@ -85,7 +92,7 @@ function CardRecreateButton({
         type="button"
         onClick={handleRecreate}
         disabled={isRecreating}
-        className="flex items-center gap-1.5 rounded-md bg-white/5 px-3 py-1.5 text-xs text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
+        className="flex items-center gap-1.5 border border-white/15 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
       >
         <DynamicIcon
           icon={isRecreating ? LoaderCircleIcon : RotateCwIcon}
@@ -103,7 +110,7 @@ function CardRecreateButton({
         onClick={handleRecreate}
         disabled={isRecreating}
         aria-label="Recreate"
-        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-white/70 opacity-0 transition hover:bg-white/15 hover:text-white focus-visible:opacity-100 group-hover:opacity-100 disabled:opacity-60"
+        className="flex h-7 w-7 shrink-0 items-center justify-center text-white/70 opacity-0 transition hover:bg-white/15 hover:text-white focus-visible:opacity-100 group-hover:opacity-100 disabled:opacity-60"
       >
         <DynamicIcon
           icon={isRecreating ? LoaderCircleIcon : RotateCwIcon}
@@ -136,7 +143,7 @@ function CardActions({
   } = useGalleryItemActions(item, { enableMakeVideo });
 
   const buttonClass =
-    "flex h-7 w-7 items-center justify-center rounded-md text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60";
+    "flex h-7 w-7 items-center justify-center text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60";
 
   return (
     <>
@@ -164,7 +171,7 @@ function CardActions({
             onClick={handleMakeVideo}
             aria-label="Make Video"
           >
-            <VideoIcon  className="text-sm" />
+            <VideoIcon className="text-sm" />
           </button>
         </Tooltip>
       )}
diff --git a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryList.tsx b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryList.tsx
index 8dfc44a444..ee1788cd79 100644
--- a/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryList.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/generation-gallery/GenerationGalleryList.tsx
@@ -103,8 +103,8 @@ function RowRecreateButton({
         aria-label="Recreate"
         className={
           kind === "pending"
-            ? "flex h-7 w-7 items-center justify-center rounded-md text-white/60 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
-            : "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-white/40 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
+            ? "flex h-7 w-7 items-center justify-center text-white/60 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
+            : "flex h-7 w-7 shrink-0 items-center justify-center text-white/40 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60"
         }
       >
         <DynamicIcon
@@ -152,7 +152,7 @@ function GalleryRowActions({
   } = actions;
 
   const buttonClass =
-    "flex h-8 w-8 items-center justify-center rounded-md text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
+    "flex h-8 w-8 items-center justify-center text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
 
   return (
     <>
diff --git a/frontend/apps/artcraft-webapp/src/components/insufficient-credits-modal.tsx b/frontend/apps/artcraft-webapp/src/components/insufficient-credits-modal.tsx
index d6e13560b5..2e8b078668 100644
--- a/frontend/apps/artcraft-webapp/src/components/insufficient-credits-modal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/insufficient-credits-modal.tsx
@@ -128,7 +128,7 @@ export function InsufficientCreditsModal() {
       <Modal
         isOpen={isOpen}
         onClose={close}
-        className="rounded-2xl w-full max-w-md overflow-hidden border border-white/5 bg-[#161618] p-0 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)]"
+        className="w-full max-w-md overflow-hidden border border-white/15 bg-ui-modal p-0"
         allowBackgroundInteraction={false}
         showClose={true}
         closeOnOutsideClick={true}
@@ -137,16 +137,6 @@ export function InsufficientCreditsModal() {
         backdropClassName="bg-black/80"
       >
         <div className="relative overflow-hidden">
-          {/* Off-center ambient glow, feels designed, not generic */}
-          <div
-            aria-hidden
-            className="pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/25 blur-[80px]"
-          />
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
-          />
-
           <div className="relative px-8 pt-10 pb-8 sm:px-10 sm:pt-12 sm:pb-10">
             <h2 className="mt-3 font-display text-3xl font-semibold tracking-tight text-white sm:text-[34px] sm:leading-[1.1]">
               {copy.heading}
@@ -161,10 +151,8 @@ export function InsufficientCreditsModal() {
                   key={perk}
                   className="flex items-start gap-3 text-[14px] text-white/75"
                 >
-                  <span className="mt-[2px] flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/15">
-                    <CheckIcon
-                      
-                      className="text-[9px] text-primary" />
+                  <span className="mt-[2px] flex h-4 w-4 shrink-0 items-center justify-center bg-white/10">
+                    <CheckIcon className="text-[9px] text-white" />
                   </span>
                   <span>{perk}</span>
                 </li>
@@ -176,10 +164,7 @@ export function InsufficientCreditsModal() {
                 <>
                   {!isOnBiggestPlan && (
                     <Link to="/pricing" onClick={close} className="block">
-                      <Button
-                        variant="primary"
-                        className="w-full h-10 text-sm font-semibold rounded-full"
-                      >
+                      <Button variant="primary" className="w-full h-10">
                         Upgrade plan
                       </Button>
                     </Link>
@@ -187,17 +172,14 @@ export function InsufficientCreditsModal() {
                   <Button
                     variant={isOnBiggestPlan ? "primary" : "secondary"}
                     onClick={handleBuyCredits}
-                    className="w-full h-10 text-sm font-semibold rounded-full"
+                    className="w-full h-10"
                   >
                     Buy more credits
                   </Button>
                 </>
               ) : (
                 <Link to="/pricing" onClick={close} className="block">
-                  <Button
-                    variant="primary"
-                    className="w-full h-10 text-sm font-semibold rounded-full"
-                  >
+                  <Button variant="primary" className="w-full h-10">
                     Upgrade plan
                   </Button>
                 </Link>
diff --git a/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx b/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
index 82619b2041..ca8ecf5bcd 100644
--- a/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
@@ -4,12 +4,26 @@ import { Button } from "@storyteller/ui-button";
 import { toast } from "../toast/toast";
 import { Gravatar } from "@storyteller/ui-gravatar";
 import type { UserInfo } from "@storyteller/api";
-import { ArrowDownToLineIcon, CheckIcon, CopyIcon, ImageIcon, ImagesIcon, InfoIcon, LinkIcon, LoaderCircleIcon, PauseIcon, PencilIcon, PlayIcon, RotateCwIcon, Trash2Icon, UserIcon, VideoIcon, XIcon } from "lucide-react";
-import { DynamicIcon } from "@storyteller/icons";
 import {
-  getContextImageThumbnail,
-  THUMBNAIL_SIZES,
-} from "@storyteller/common";
+  ArrowDownToLineIcon,
+  CheckIcon,
+  CopyIcon,
+  ImageIcon,
+  ImagesIcon,
+  InfoIcon,
+  LinkIcon,
+  LoaderCircleIcon,
+  PauseIcon,
+  PencilIcon,
+  PlayIcon,
+  RotateCwIcon,
+  Trash2Icon,
+  UserIcon,
+  VideoIcon,
+  XIcon,
+} from "lucide-react";
+import { DynamicIcon } from "@storyteller/icons";
+import { getContextImageThumbnail, THUMBNAIL_SIZES } from "@storyteller/common";
 import {
   getCreatorIconPathForModelId,
   getModelDisplayName,
@@ -29,16 +43,12 @@ import {
 
 // ── InfoRow (private to this file; other consumers do not need it) ─────────
 
-function InfoRow({
-  label,
-  value,
-}: {
-  label: string;
-  value: React.ReactNode;
-}) {
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-white/5 last:border-0">
-      <span className="text-sm text-white/60 font-medium">{label}</span>
+    <div className="flex items-center justify-between px-4 py-3 border-b border-white/10 last:border-0">
+      <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
+        {label}
+      </span>
       <span className="text-sm text-white font-medium flex items-center gap-2">
         {value}
       </span>
@@ -84,7 +94,9 @@ export function LightboxDetails({
   const promptCopy = useCopyFeedback();
   const shareCopy = useCopyFeedback();
   const [isDownloading, setIsDownloading] = useState(false);
-  const [playingAudioToken, setPlayingAudioToken] = useState<string | null>(null);
+  const [playingAudioToken, setPlayingAudioToken] = useState<string | null>(
+    null,
+  );
   const audioPlayerRef = useRef<HTMLAudioElement | null>(null);
 
   const stopAudio = useCallback(() => {
@@ -174,14 +186,14 @@ export function LightboxDetails({
     !!createdAt;
 
   return (
-    <div className="relative flex w-full sm:w-[320px] shrink-0 flex-col bg-ui-panel rounded-b-xl sm:rounded-b-none sm:rounded-r-xl min-h-0 flex-1 sm:flex-none sm:h-full overflow-hidden">
+    <div className="relative flex w-full sm:w-[320px] shrink-0 flex-col bg-ui-panel min-h-0 flex-1 sm:flex-none sm:h-full overflow-hidden">
       {onClose && (
         <button
           onClick={onClose}
-          className="absolute top-3 right-3 z-20 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/70 transition-colors hover:bg-black/60 hover:text-white"
+          className="absolute top-3 right-3 z-20 flex h-8 w-8 items-center justify-center bg-black/40 text-white/70 transition-colors hover:bg-black/60 hover:text-white"
           aria-label="Close"
         >
-          <XIcon  className="h-4 w-4" />
+          <XIcon className="h-4 w-4" />
         </button>
       )}
 
@@ -189,20 +201,20 @@ export function LightboxDetails({
         {promptData.loading ? (
           <div className="space-y-6 animate-pulse">
             <div className="space-y-2">
-              <div className="h-4 w-20 bg-white/10 rounded" />
-              <div className="h-20 w-full bg-white/10 rounded-lg" />
+              <div className="h-4 w-20 bg-white/10" />
+              <div className="h-20 w-full bg-white/10" />
             </div>
             <div className="space-y-2">
-              <div className="h-4 w-32 bg-white/10 rounded" />
-              <div className="h-10 w-full bg-white/10 rounded-lg" />
-              <div className="h-10 w-full bg-white/10 rounded-lg" />
+              <div className="h-4 w-32 bg-white/10" />
+              <div className="h-10 w-full bg-white/10" />
+              <div className="h-10 w-full bg-white/10" />
             </div>
           </div>
         ) : (
           <>
             {creator && (
               <div
-                className={`sticky -top-4 z-10 -mx-4 -mt-4 mb-1 flex items-center gap-3 bg-ui-panel px-4 pt-4 pb-3 border-b border-white/5 ${onClose ? "pr-10" : ""}`}
+                className={`sticky -top-4 z-10 -mx-4 -mt-4 mb-1 flex items-center gap-3 bg-ui-panel px-4 pt-4 pb-3 border-b border-white/10 ${onClose ? "pr-10" : ""}`}
               >
                 {creator.core_info ? (
                   <Gravatar
@@ -213,10 +225,10 @@ export function LightboxDetails({
                     backgroundIndex={
                       creator.core_info.default_avatar.color_index
                     }
-                    className="rounded-xl border-white/10"
+                    className="rounded-none border-white/15"
                   />
                 ) : (
-                  <div className="h-9 w-9 shrink-0 flex items-center justify-center rounded-xl bg-white/10 text-white/50 border border-white/5">
+                  <div className="h-9 w-9 shrink-0 flex items-center justify-center bg-white/10 text-white/50 border border-white/15">
                     <UserIcon />
                   </div>
                 )}
@@ -224,7 +236,7 @@ export function LightboxDetails({
                   <span className="text-white text-sm font-semibold leading-none">
                     {creator.display_name}
                   </span>
-                  <span className="text-white/60 text-xs font-medium">
+                  <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
                     Author
                   </span>
                 </div>
@@ -234,7 +246,7 @@ export function LightboxDetails({
             {promptData.hasToken && (
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-xs font-medium text-white/60">
+                  <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
                     <PencilIcon />
                     <span>Prompt</span>
                   </div>
@@ -252,7 +264,7 @@ export function LightboxDetails({
                   )}
                 </div>
 
-                <div className="text-sm text-white/90 break-words px-4 py-3 rounded-xl bg-black/20 leading-relaxed border border-white/5">
+                <div className="text-sm text-white/90 break-words px-4 py-3 bg-black/20 leading-relaxed border border-white/10">
                   <div
                     ref={promptRef}
                     className={!isPromptExpanded ? "line-clamp-4" : ""}
@@ -274,73 +286,78 @@ export function LightboxDetails({
               </div>
             )}
 
-            {promptData.contextImages && promptData.contextImages.length > 0 && (
-              <div className="space-y-2">
-                <div className="flex items-center gap-2 text-xs font-medium text-white/60">
-                  <ImageIcon />
-                  <span>Reference Media</span>
-                </div>
-                <div className="grid grid-cols-5 gap-2">
-                  {promptData.contextImages.map((contextImage, index) => {
-                    const isAudio = contextImage.semantic === "audioref";
-                    const isVideoRef = contextImage.semantic === "vid_ref";
-                    const { thumbnail } = getContextImageThumbnail(
-                      contextImage,
-                      { size: THUMBNAIL_SIZES.SMALL },
-                    );
-                    const isPlayingThis = playingAudioToken === contextImage.media_token;
-
-                    if (isAudio) {
-                      return (
-                        <button
-                          key={contextImage.media_token}
-                          type="button"
-                          onClick={() => handleAudioToggle(contextImage.media_token, contextImage.media_links.cdn_url)}
-                          className="relative aspect-square overflow-hidden rounded-lg border border-white/10 hover:border-white/40 transition-colors flex items-center justify-center bg-white/5"
-                        >
-                          <DynamicIcon
-                            icon={isPlayingThis ? PauseIcon : PlayIcon}
-                            className="text-white/70 text-lg"
-                          />
-                        </button>
+            {promptData.contextImages &&
+              promptData.contextImages.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
+                    <ImageIcon />
+                    <span>Reference Media</span>
+                  </div>
+                  <div className="grid grid-cols-5 gap-2">
+                    {promptData.contextImages.map((contextImage, index) => {
+                      const isAudio = contextImage.semantic === "audioref";
+                      const isVideoRef = contextImage.semantic === "vid_ref";
+                      const { thumbnail } = getContextImageThumbnail(
+                        contextImage,
+                        { size: THUMBNAIL_SIZES.SMALL },
                       );
-                    }
+                      const isPlayingThis =
+                        playingAudioToken === contextImage.media_token;
 
-                    return (
-                      <a
-                        key={contextImage.media_token}
-                        href={`${SHARE_URL_BASE}${contextImage.media_token}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="relative aspect-square overflow-hidden rounded-lg border border-white/10 hover:border-white/40 transition-colors block"
-                      >
-                        <img
-                          src={thumbnail}
-                          alt={`Reference ${index + 1}`}
-                          className="h-full w-full object-cover"
-                        />
-                        {isVideoRef && (
-                          <div className="absolute inset-0 flex items-center justify-center">
-                            <VideoIcon
-                              
-                              className="text-white/80 text-sm drop-shadow-lg" />
-                          </div>
-                        )}
-                      </a>
-                    );
-                  })}
+                      if (isAudio) {
+                        return (
+                          <button
+                            key={contextImage.media_token}
+                            type="button"
+                            onClick={() =>
+                              handleAudioToggle(
+                                contextImage.media_token,
+                                contextImage.media_links.cdn_url,
+                              )
+                            }
+                            className="relative aspect-square overflow-hidden border border-white/15 hover:border-white/40 transition-colors flex items-center justify-center bg-white/5"
+                          >
+                            <DynamicIcon
+                              icon={isPlayingThis ? PauseIcon : PlayIcon}
+                              className="text-white/70 text-lg"
+                            />
+                          </button>
+                        );
+                      }
+
+                      return (
+                        <a
+                          key={contextImage.media_token}
+                          href={`${SHARE_URL_BASE}${contextImage.media_token}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="relative aspect-square overflow-hidden border border-white/15 hover:border-white/40 transition-colors block"
+                        >
+                          <img
+                            src={thumbnail}
+                            alt={`Reference ${index + 1}`}
+                            className="h-full w-full object-cover"
+                          />
+                          {isVideoRef && (
+                            <div className="absolute inset-0 flex items-center justify-center">
+                              <VideoIcon className="text-white/80 text-sm drop-shadow-lg" />
+                            </div>
+                          )}
+                        </a>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
 
             {hasInfoSection && (
               <div className="space-y-2">
-                <div className="flex items-center gap-2 text-xs font-medium text-white/60">
+                <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
                   <InfoIcon />
                   <span>Information</span>
                 </div>
 
-                <div className="flex flex-col rounded-xl bg-black/20 border border-white/5 overflow-hidden">
+                <div className="flex flex-col bg-black/20 border border-white/10 overflow-hidden">
                   {promptData.modelType && (
                     <InfoRow
                       label="Model"
@@ -421,7 +438,7 @@ export function LightboxDetails({
         )}
       </div>
 
-      <div className="p-4 space-y-2 border-t border-white/5">
+      <div className="p-4 space-y-2 border-t border-white/10">
         <div className="grid grid-cols-2 gap-2">
           <Button
             className="w-full border border-ui-panel-border bg-ui-controls/40 hover:bg-ui-controls/60 text-white"
@@ -446,7 +463,7 @@ export function LightboxDetails({
                 setIsDownloading(false);
               }
             }}
-            className={`w-full inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors border border-ui-panel-border ${
+            className={`w-full inline-flex items-center justify-center gap-2 px-3 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors border border-ui-panel-border ${
               mediaUrl
                 ? "bg-ui-controls/40 hover:bg-ui-controls/60 text-white disabled:opacity-60"
                 : "bg-ui-controls/20 text-white/60 cursor-not-allowed"
@@ -462,7 +479,7 @@ export function LightboxDetails({
         {onMakeVideo && (
           <Button
             icon={VideoIcon}
-            className="w-full shadow-lg shadow-brand-primary/20"
+            className="w-full"
             variant="primary"
             onClick={onMakeVideo}
           >
@@ -512,7 +529,7 @@ export function LightboxDetails({
         {showDownloadAppCta && (
           <Button
             icon={ArrowDownToLineIcon}
-            className="w-full shadow-lg shadow-brand-primary/20"
+            className="w-full"
             variant="primary"
             onClick={() => {
               window.location.href = "/download";
diff --git a/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx b/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
index cceed3545c..10765e9b42 100644
--- a/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
@@ -357,13 +357,13 @@ export function Lightbox({
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        className="rounded-xl h-[90vh] sm:h-[680px] w-full sm:w-[1100px] max-w-[95vw] max-h-[90vh] p-0 border-white/5 shadow-2xl"
+        className="h-[90vh] sm:h-[680px] w-full sm:w-[1100px] max-w-[95vw] max-h-[90vh] p-0 border-white/15"
         backdropClassName="!bg-black/80"
         showClose={false}
       >
         <div className="flex flex-col sm:flex-row h-full">
           {/* Media preview panel */}
-          <div className="group/nav relative flex h-[45vh] sm:h-full flex-1 items-center justify-center overflow-hidden rounded-t-xl sm:rounded-l-xl sm:rounded-tr-none bg-black">
+          <div className="group/nav relative flex h-[45vh] sm:h-full flex-1 items-center justify-center overflow-hidden bg-black">
             {!selectedImageUrl ? (
               <div className="flex h-full w-full items-center justify-center">
                 <span className="text-base-fg/60">Media not available</span>
@@ -419,8 +419,8 @@ export function Lightbox({
               </video>
             ) : isAudio ? (
               <div className="flex h-full w-full items-center justify-center px-4 sm:px-8">
-                <div className="w-full max-w-xl rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02] px-4 py-10 sm:px-6">
-                  <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
+                <div className="w-full max-w-xl border border-white/15 bg-ui-controls px-4 py-10 sm:px-6">
+                  <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center border border-white/15 bg-white/10">
                     <MusicIcon
                       
                       className="text-2xl text-white/70" />
@@ -485,9 +485,9 @@ export function Lightbox({
                             key={`${url}-thumb-${idx}`}
                             type="button"
                             onClick={() => onThumbClick(idx)}
-                            className={`relative h-16 w-16 flex-[0_0_4rem] overflow-hidden rounded-md border-2 transition-all ${
+                            className={`relative h-16 w-16 flex-[0_0_4rem] overflow-hidden border transition-all ${
                               idx === selectedIndex
-                                ? "border-primary-400 opacity-100"
+                                ? "border-white opacity-100"
                                 : "border-transparent opacity-60 hover:border-white/40 hover:opacity-100"
                             }`}
                           >
@@ -518,7 +518,7 @@ export function Lightbox({
                   e.stopPropagation();
                   onNavigatePrev();
                 }}
-                className="absolute left-2 sm:left-3 top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-black/50 text-white/70 sm:opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white sm:group-hover/nav:opacity-100"
+                className="absolute left-2 sm:left-3 top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center bg-black/50 text-white/70 sm:opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white sm:group-hover/nav:opacity-100"
                 aria-label="Previous item"
               >
                 <ChevronLeftIcon  className="text-lg" />
@@ -530,7 +530,7 @@ export function Lightbox({
                   e.stopPropagation();
                   onNavigateNext();
                 }}
-                className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-black/50 text-white/70 sm:opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white sm:group-hover/nav:opacity-100"
+                className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center bg-black/50 text-white/70 sm:opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white sm:group-hover/nav:opacity-100"
                 aria-label="Next item"
               >
                 <ChevronRightIcon  className="text-lg" />
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/CharactersModal.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/CharactersModal.tsx
index 8a71946801..f08d2477c4 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/CharactersModal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/CharactersModal.tsx
@@ -1,16 +1,25 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Modal } from "@storyteller/ui-modal";
-import { ArrowLeftIcon, EyeIcon, LoaderCircleIcon, PenIcon, PlusIcon, Trash2Icon, UploadIcon, UsersIcon, XIcon } from "lucide-react";
-import { twMerge } from "tailwind-merge";
 import {
-  CharactersApi,
-  Character,
-  MediaUploadApi,
-} from "@storyteller/api";
+  ArrowLeftIcon,
+  EyeIcon,
+  LoaderCircleIcon,
+  PenIcon,
+  PlusIcon,
+  Trash2Icon,
+  UploadIcon,
+  UsersIcon,
+  XIcon,
+} from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import { CharactersApi, Character, MediaUploadApi } from "@storyteller/api";
 import { toast } from "../toast/toast";
 import { v4 as uuidv4 } from "uuid";
 import { Button } from "@storyteller/ui-button";
-import { useCharactersStore, DeckPreviewModal } from "@storyteller/ui-promptbox";
+import {
+  useCharactersStore,
+  DeckPreviewModal,
+} from "@storyteller/ui-promptbox";
 import { useIsMobile } from "../ui/use-mobile";
 import { SettingsDrawer } from "./mobile/SettingsDrawer";
 
@@ -324,7 +333,7 @@ const CharacterListView = ({
           {Array.from({ length: 8 }).map((_, i) => (
             <div
               key={i}
-              className="flex flex-col overflow-hidden rounded-lg border border-transparent bg-white/[0.05]"
+              className="flex flex-col overflow-hidden border border-transparent bg-white/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden">
                 <div
@@ -336,7 +345,7 @@ const CharacterListView = ({
               </div>
               <div className="px-2 py-1.5 flex justify-center bg-white/[0.04]">
                 <div
-                  className="h-3 w-2/3 rounded bg-white/[0.08]"
+                  className="h-3 w-2/3 bg-white/[0.08]"
                   style={{
                     animation: `charPulse 1.8s ease-in-out ${i * 0.07 + 0.1}s infinite`,
                   }}
@@ -356,10 +365,10 @@ const CharacterListView = ({
           {/* Create New card */}
           <button
             onClick={onCreateClick}
-            className="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border-2 border-dashed border-white/10 bg-white/[0.05] text-white/60 transition-colors hover:border-white/25 hover:text-white/80"
+            className="flex flex-col items-center justify-center gap-2 overflow-hidden border-2 border-dashed border-white/15 bg-white/[0.05] text-white/60 transition-colors hover:border-white/30 hover:text-white/80"
           >
             <div className="flex aspect-square w-full flex-col items-center justify-center gap-2">
-              <PlusIcon  className="text-lg" />
+              <PlusIcon className="text-lg" />
               <span className="text-sm font-medium">Create New</span>
             </div>
           </button>
@@ -368,7 +377,7 @@ const CharacterListView = ({
           {pendingCharacters.map((pending) => (
             <div
               key={`pending-${pending.name}`}
-              className="relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-white/[0.05]"
+              className="relative flex flex-col overflow-hidden border border-transparent bg-white/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden bg-white/[0.05]">
                 {pending.previewUrl ? (
@@ -379,13 +388,11 @@ const CharacterListView = ({
                   />
                 ) : (
                   <div className="flex h-full w-full items-center justify-center text-white/20">
-                    <UsersIcon  className="text-2xl" />
+                    <UsersIcon className="text-2xl" />
                   </div>
                 )}
                 <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/40">
-                  <LoaderCircleIcon
-                    
-                    className="text-lg text-white/80 animate-spin" />
+                  <LoaderCircleIcon className="text-lg text-white/80 animate-spin" />
                   <span className="text-xs font-medium text-white/80">
                     Creating...
                   </span>
@@ -405,7 +412,7 @@ const CharacterListView = ({
             return (
               <div
                 key={character.token}
-                className="group relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-white/[0.05] transition-colors hover:border-white/25 hover:bg-white/10"
+                className="group relative flex flex-col overflow-hidden border border-transparent bg-white/[0.05] transition-colors hover:border-white/30 hover:bg-white/10"
               >
                 <button
                   onClick={() => onSelectCharacter?.(character)}
@@ -421,9 +428,7 @@ const CharacterListView = ({
                       />
                     ) : (
                       <div className="flex h-full w-full items-center justify-center text-white/20">
-                        <UsersIcon
-                          
-                          className="text-2xl" />
+                        <UsersIcon className="text-2xl" />
                       </div>
                     )}
                   </div>
@@ -445,9 +450,9 @@ const CharacterListView = ({
                           setPreviewCharacter(character);
                         }}
                         title="View full size"
-                        className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-black/80"
+                        className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-black/80"
                       >
-                        <EyeIcon  className="text-[10px]" />
+                        <EyeIcon className="text-[10px]" />
                       </button>
                     )}
                     {isUserCreated && (
@@ -457,22 +462,18 @@ const CharacterListView = ({
                             e.stopPropagation();
                             onEditCharacter(character);
                           }}
-                          className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-black/80"
+                          className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-black/80"
                         >
-                          <PenIcon
-                            
-                            className="text-[10px]" />
+                          <PenIcon className="text-[10px]" />
                         </button>
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
                             setConfirmDelete(character);
                           }}
-                          className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-red-500"
+                          className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-red-500"
                         >
-                          <Trash2Icon
-                            
-                            className="text-[10px]" />
+                          <Trash2Icon className="text-[10px]" />
                         </button>
                       </>
                     )}
@@ -486,28 +487,25 @@ const CharacterListView = ({
 
       {/* Delete confirmation overlay */}
       {confirmDelete && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm">
-          <div className="mx-4 w-full max-w-sm rounded-xl border border-white/10 bg-[#1e1e22] p-6 shadow-2xl">
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60">
+          <div className="mx-4 w-full max-w-sm border border-white/15 bg-ui-modal p-6">
             <h3 className="mb-2 text-lg font-semibold text-white">
               Delete character?
             </h3>
             <p className="mb-5 text-sm text-white/70">
-              This will permanently delete{" "}
-              <strong>{confirmDelete.name}</strong>. This action cannot be
-              undone.
+              This will permanently delete <strong>{confirmDelete.name}</strong>
+              . This action cannot be undone.
             </p>
             <div className="flex justify-end gap-2">
               <Button
                 variant="secondary"
-                className="border-none"
                 onClick={() => setConfirmDelete(null)}
                 disabled={isDeleting}
               >
                 Cancel
               </Button>
               <Button
-                variant="primary"
-                className="bg-red-500 hover:bg-red-600"
+                variant="destructive"
                 onClick={() => handleDelete(confirmDelete)}
                 loading={isDeleting}
                 disabled={isDeleting}
@@ -608,7 +606,7 @@ const EditCharacterView = ({
 
         {/* Avatar preview */}
         {character.maybe_avatar?.cdn_url && (
-          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white/[0.05]">
+          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden bg-white/[0.05]">
             <img
               src={character.maybe_avatar.cdn_url}
               alt={character.name}
@@ -619,7 +617,10 @@ const EditCharacterView = ({
 
         {/* Name input */}
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="edit-character-name" className="text-sm font-medium text-white/80">
+          <label
+            htmlFor="edit-character-name"
+            className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70"
+          >
             Name
           </label>
           <input
@@ -628,14 +629,18 @@ const EditCharacterView = ({
             onChange={(e) => setName(e.target.value)}
             placeholder="Character name"
             autoComplete="off"
-            className="w-full rounded-lg border border-white/10 bg-white/[0.07] px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-primary"
+            className="w-full border border-white/15 bg-ui-controls px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-white"
           />
         </div>
 
         {/* Description input */}
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="edit-character-description" className="text-sm font-medium text-white/80">
-            Description <span className="font-normal text-white/40">(optional)</span>
+          <label
+            htmlFor="edit-character-description"
+            className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70"
+          >
+            Description{" "}
+            <span className="font-normal text-white/40">(optional)</span>
           </label>
           <textarea
             id="edit-character-description"
@@ -644,14 +649,14 @@ const EditCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg border border-white/10 bg-white/[0.07] px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-primary"
+            className="w-full resize-none border border-white/15 bg-ui-controls px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-white"
           />
         </div>
       </div>
 
       {/* Action buttons */}
       <div className="flex justify-end gap-2 pt-4">
-        <Button variant="secondary" className="border-none" onClick={onBack}>
+        <Button variant="secondary" onClick={onBack}>
           Cancel
         </Button>
         <Button
@@ -859,8 +864,8 @@ const NewCharacterView = ({
         <div
           ref={dropZoneRef}
           className={twMerge(
-            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-white/20 bg-white/[0.05] transition-colors overflow-hidden",
-            isDragging && "border-blue-400 bg-blue-500/10",
+            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-[3px] border-2 border-dashed border-white/15 bg-white/[0.05] transition-colors overflow-hidden",
+            isDragging && "border-white/60 bg-white/10",
           )}
           onDragEnter={handleDragEnter}
           onDragOver={handleDragOver}
@@ -880,9 +885,7 @@ const NewCharacterView = ({
               />
               {!images[0]!.mediaToken && (
                 <div className="absolute inset-0 flex items-center justify-center bg-black/50">
-                  <LoaderCircleIcon
-                    
-                    className="text-white animate-spin" />
+                  <LoaderCircleIcon className="text-white animate-spin" />
                 </div>
               )}
               <button
@@ -890,16 +893,14 @@ const NewCharacterView = ({
                   e.stopPropagation();
                   removeImage(0);
                 }}
-                className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500"
+                className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500"
               >
-                <XIcon  className="text-sm" />
+                <XIcon className="text-sm" />
               </button>
             </div>
           ) : (
             <div className="flex h-full w-full flex-col items-center justify-center text-white/60">
-              <UploadIcon
-                
-                className="mb-2 text-xl text-white/40" />
+              <UploadIcon className="mb-2 text-xl text-white/40" />
               <p className="text-sm">Upload reference image</p>
               <p className="mb-3 text-xs text-white/40">
                 Click or drag an image here
@@ -918,7 +919,10 @@ const NewCharacterView = ({
 
         {/* Name input */}
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="character-name" className="text-sm font-medium text-white/80">
+          <label
+            htmlFor="character-name"
+            className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70"
+          >
             Name
           </label>
           <input
@@ -927,14 +931,18 @@ const NewCharacterView = ({
             onChange={(e) => setName(e.target.value)}
             placeholder="Character name"
             autoComplete="off"
-            className="w-full rounded-lg border border-white/10 bg-white/[0.07] px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-primary"
+            className="w-full border border-white/15 bg-ui-controls px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-white"
           />
         </div>
 
         {/* Description input */}
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="character-description" className="text-sm font-medium text-white/80">
-            Description <span className="font-normal text-white/40">(optional)</span>
+          <label
+            htmlFor="character-description"
+            className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70"
+          >
+            Description{" "}
+            <span className="font-normal text-white/40">(optional)</span>
           </label>
           <textarea
             id="character-description"
@@ -943,14 +951,14 @@ const NewCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg border border-white/10 bg-white/[0.07] px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-primary"
+            className="w-full resize-none border border-white/15 bg-ui-controls px-3 py-2 text-sm text-white placeholder-white/50 outline-none transition-colors focus:border-white"
           />
         </div>
       </div>
 
       {/* Action buttons */}
       <div className="flex justify-end gap-2 pt-4">
-        <Button variant="secondary" className="border-none" onClick={onBack}>
+        <Button variant="secondary" onClick={onBack}>
           Cancel
         </Button>
         <Button
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/ImagePromptRow.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/ImagePromptRow.tsx
index a1da101bea..baecd1d762 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/ImagePromptRow.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/ImagePromptRow.tsx
@@ -6,7 +6,13 @@ import {
   type CSSProperties,
   type SyntheticEvent,
 } from "react";
-import { ImageIcon, ImagesIcon, LoaderCircleIcon, PlusIcon, XIcon } from "lucide-react";
+import {
+  ImageIcon,
+  ImagesIcon,
+  LoaderCircleIcon,
+  PlusIcon,
+  XIcon,
+} from "lucide-react";
 import { Button } from "@storyteller/ui-button";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { Modal } from "@storyteller/ui-modal";
@@ -234,10 +240,7 @@ export const ImagePromptRow = ({
       )}
       <div
         ref={rootRef}
-        className={twMerge(
-          "glass flex flex-col sm:flex-row rounded-2xl sm:rounded-t-2xl sm:rounded-b-none",
-          className,
-        )}
+        className={twMerge("glass flex flex-col sm:flex-row", className)}
         onMouseDown={stopIfInside}
         onClick={stopIfInside}
         onPointerDown={stopIfInside}
@@ -245,8 +248,8 @@ export const ImagePromptRow = ({
         <div className="flex min-w-0 flex-1 gap-2 px-3 py-2">
           <div className="flex grow flex-col gap-1 min-w-32">
             <div className="flex items-center gap-2 text-white/90">
-              <ImageIcon  className="h-3.5 w-3.5" />
-              <span className="flex items-center gap-1.5 text-sm font-medium">
+              <ImageIcon className="h-3.5 w-3.5" />
+              <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
                 {sectionLabel}
                 {showCount && (
                   <span className="font-semibold text-white/60">
@@ -322,10 +325,9 @@ export const ImagePromptRow = ({
               <div className="hidden sm:block w-[1px] bg-white/10" />
               <div className="flex grow flex-col gap-1 sm:p-2">
                 <div className="flex items-center gap-2 text-white/90">
-                  <ImageIcon  className="h-3.5 w-3.5" />
-                  <span className="flex items-center gap-1.5 text-sm font-medium">
-                    End Frame{" "}
-                    <span className="text-xs text-white/60">(optional)</span>
+                  <ImageIcon className="h-3.5 w-3.5" />
+                  <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+                    End Frame <span className="text-white/60">(optional)</span>
                   </span>
                 </div>
                 <span className="text-[13px] text-white/60">
@@ -336,7 +338,7 @@ export const ImagePromptRow = ({
             <div className="flex items-center gap-2">
               {endFrameImage ? (
                 <div
-                  className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all cursor-pointer hover:border-white/80"
+                  className="group relative aspect-square w-10 sm:w-14 overflow-hidden border border-white/15 transition-all cursor-pointer hover:border-white/40"
                   onClick={() => setPreviewImage(endFrameImage)}
                 >
                   <img
@@ -349,17 +351,14 @@ export const ImagePromptRow = ({
                       e.stopPropagation();
                       setEndFrameImage?.(undefined);
                     }}
-                    className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
+                    className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center bg-black/50 text-white sm:opacity-0 transition-colors hover:bg-black sm:group-hover:opacity-100"
                   >
-                    <XIcon  className="h-2.5 w-2.5" />
+                    <XIcon className="h-2.5 w-2.5" />
                   </button>
                 </div>
               ) : uploadingEndFrame ? (
-                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
-                  <LoaderCircleIcon
-                    
-                    spin
-                    className="h-5 w-5 text-white" />
+                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden border border-white/15 bg-white/5">
+                  <LoaderCircleIcon spin className="h-5 w-5 text-white" />
                 </div>
               ) : (
                 <AddButton
@@ -385,7 +384,7 @@ export const ImagePromptRow = ({
             <img
               src={previewImage.fullUrl || previewImage.url}
               alt="Preview"
-              className="max-w-[90vw] max-h-[90vh] object-contain drop-shadow-2xl rounded-lg"
+              className="max-w-[90vw] max-h-[90vh] object-contain"
             />
           </div>
         )}
@@ -397,7 +396,7 @@ export const ImagePromptRow = ({
 // ── Sub-components ───────────────────────────────────────────────────────
 
 const ADD_BUTTON_CLASS =
-  "flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
+  "flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden border border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
 
 // Upload / Pick-from-library affordance. On desktop it's a hover tooltip; on
 // mobile that tooltip auto-opens from the emulated mouseenter fired on
@@ -414,9 +413,7 @@ export const AddButton = ({
   const isMobile = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  const plus = (
-    <PlusIcon  className="text-2xl text-white/80" />
-  );
+  const plus = <PlusIcon className="text-2xl text-white/80" />;
 
   if (!onPickFromLibrary) {
     return (
@@ -460,7 +457,7 @@ export const AddButton = ({
             <Button
               variant="action"
               icon={ImagesIcon}
-              className="w-full bg-white/15 hover:bg-white/20"
+              className="w-full"
               onClick={() => {
                 setDrawerOpen(false);
                 onPickFromLibrary();
@@ -495,7 +492,7 @@ export const AddButton = ({
             variant="action"
             onClick={onPickFromLibrary}
             icon={ImagesIcon}
-            className="w-full bg-white/15 hover:bg-white/20"
+            className="w-full"
           >
             Pick from library
           </Button>
@@ -519,7 +516,7 @@ const ImageThumbnail = ({
   onPreview?: (image: RefImage) => void;
 }) => (
   <div
-    className="group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all cursor-pointer hover:border-white/80"
+    className="group glass relative aspect-square w-10 sm:w-14 overflow-hidden border border-white/15 transition-all cursor-pointer hover:border-white/40"
     onClick={() => onPreview?.(image)}
   >
     <img
@@ -532,9 +529,9 @@ const ImageThumbnail = ({
         e.stopPropagation();
         onRemove(image.id);
       }}
-      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
+      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center bg-black/50 text-white sm:opacity-0 transition-colors hover:bg-black sm:group-hover:opacity-100"
     >
-      <XIcon  className="h-2.5 w-2.5" />
+      <XIcon className="h-2.5 w-2.5" />
     </button>
   </div>
 );
@@ -572,11 +569,11 @@ const SortableImage = ({
       {...(allowReorder ? { ...attributes, ...listeners } : {})}
       onClick={() => onPreview?.(image)}
       className={twMerge(
-        "group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-opacity",
+        "group glass relative aspect-square w-10 sm:w-14 overflow-hidden border border-white/15 transition-opacity",
         allowReorder
-          ? "cursor-move hover:border-white/80"
-          : "cursor-pointer hover:border-white/80",
-        isDragging && "opacity-50 shadow-lg",
+          ? "cursor-move hover:border-white/40"
+          : "cursor-pointer hover:border-white/40",
+        isDragging && "opacity-50",
       )}
     >
       <img
@@ -591,9 +588,9 @@ const SortableImage = ({
         }}
         onMouseDown={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
-        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
+        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center bg-black/50 text-white sm:opacity-0 transition-colors hover:bg-black sm:group-hover:opacity-100"
       >
-        <XIcon  className="h-2.5 w-2.5" />
+        <XIcon className="h-2.5 w-2.5" />
       </button>
     </div>
   );
@@ -603,7 +600,7 @@ const UploadingThumbnail = ({ file }: { file: File }) => {
   const previewUrl = useMemo(() => URL.createObjectURL(file), [file]);
   useEffect(() => () => URL.revokeObjectURL(previewUrl), [previewUrl]);
   return (
-    <div className="glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30">
+    <div className="glass relative aspect-square w-10 sm:w-14 overflow-hidden border border-white/15">
       <div className="absolute inset-0">
         <img
           src={previewUrl}
@@ -612,10 +609,7 @@ const UploadingThumbnail = ({ file }: { file: File }) => {
         />
       </div>
       <div className="absolute inset-0 flex items-center justify-center bg-black/20">
-        <LoaderCircleIcon
-          
-          spin
-          className="h-6 w-6 text-white" />
+        <LoaderCircleIcon spin className="h-6 w-6 text-white" />
       </div>
     </div>
   );
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/MediaReferenceRow.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/MediaReferenceRow.tsx
index ca0d8f50c2..620515d953 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/MediaReferenceRow.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/MediaReferenceRow.tsx
@@ -1,5 +1,12 @@
 import { useCallback, useRef, useState } from "react";
-import { LoaderCircleIcon, MusicIcon, PlayIcon, SquareIcon, VideoIcon, XIcon } from "lucide-react";
+import {
+  LoaderCircleIcon,
+  MusicIcon,
+  PlayIcon,
+  SquareIcon,
+  VideoIcon,
+  XIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { twMerge } from "tailwind-merge";
 import { UploaderStates } from "@storyteller/common";
@@ -214,10 +221,7 @@ export const MediaReferenceRow = ({
         onChange={handleAudioUpload}
       />
       <div
-        className={twMerge(
-          "glass flex flex-col sm:flex-row rounded-2xl",
-          className,
-        )}
+        className={twMerge("glass flex flex-col sm:flex-row", className)}
         onMouseDown={(e) => e.stopPropagation()}
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
@@ -227,8 +231,8 @@ export const MediaReferenceRow = ({
           <div className="flex grow gap-2 px-3 py-2">
             <div className="flex grow flex-col gap-1">
               <div className="flex items-center gap-2 text-white/90">
-                <VideoIcon  className="h-3.5 w-3.5" />
-                <span className="flex items-center gap-1.5 text-sm font-medium">
+                <VideoIcon className="h-3.5 w-3.5" />
+                <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
                   Video Ref
                   <span className="font-semibold text-white/60">
                     ({referenceVideos.length}/{maxVideoCount})
@@ -248,11 +252,8 @@ export const MediaReferenceRow = ({
                 />
               ))}
               {uploadingVideo && (
-                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
-                  <LoaderCircleIcon
-                    
-                    spin
-                    className="h-5 w-5 text-white/60" />
+                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden border border-white/15 bg-white/5">
+                  <LoaderCircleIcon spin className="h-5 w-5 text-white/60" />
                 </div>
               )}
               {canAddVideo && (
@@ -275,8 +276,8 @@ export const MediaReferenceRow = ({
           <div className="flex grow gap-2 px-3 py-2">
             <div className="flex grow flex-col gap-1">
               <div className="flex items-center gap-2 text-white/90">
-                <MusicIcon  className="h-3.5 w-3.5" />
-                <span className="flex items-center gap-1.5 text-sm font-medium">
+                <MusicIcon className="h-3.5 w-3.5" />
+                <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
                   Audio Ref
                   <span className="font-semibold text-white/60">
                     ({referenceAudios.length}/{maxAudioCount})
@@ -297,11 +298,8 @@ export const MediaReferenceRow = ({
                 />
               ))}
               {uploadingAudio && (
-                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
-                  <LoaderCircleIcon
-                    
-                    spin
-                    className="h-5 w-5 text-white/60" />
+                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden border border-white/15 bg-white/5">
+                  <LoaderCircleIcon spin className="h-5 w-5 text-white/60" />
                 </div>
               )}
               {canAddAudio && (
@@ -328,7 +326,7 @@ const VideoRefTile = ({
   video: RefVideo;
   onRemove: (id: string) => void;
 }) => (
-  <div className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+  <div className="group relative aspect-square w-10 sm:w-14 overflow-hidden border border-white/15 transition-all hover:border-white/40">
     <video
       src={video.url}
       muted
@@ -343,9 +341,9 @@ const VideoRefTile = ({
         e.stopPropagation();
         onRemove(video.id);
       }}
-      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
+      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center bg-black/50 text-white sm:opacity-0 transition-colors hover:bg-black sm:group-hover:opacity-100"
     >
-      <XIcon  className="h-2.5 w-2.5" />
+      <XIcon className="h-2.5 w-2.5" />
     </button>
   </div>
 );
@@ -382,7 +380,7 @@ const AudioRefTile = ({
   );
 
   return (
-    <div className="group relative flex aspect-square w-10 sm:w-14 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+    <div className="group relative flex aspect-square w-10 sm:w-14 cursor-pointer items-center justify-center overflow-hidden border border-white/15 transition-all hover:border-white/40">
       <button
         onClick={handleTogglePlay}
         className="flex h-full w-full items-center justify-center"
@@ -403,9 +401,9 @@ const AudioRefTile = ({
           e.stopPropagation();
           onRemove(audio.id);
         }}
-        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
+        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center bg-black/50 text-white sm:opacity-0 transition-colors hover:bg-black sm:group-hover:opacity-100"
       >
-        <XIcon  className="h-2.5 w-2.5" />
+        <XIcon className="h-2.5 w-2.5" />
       </button>
     </div>
   );
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBox.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBox.tsx
index 213448f79b..dfe7658527 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBox.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBox.tsx
@@ -8,7 +8,13 @@ import {
   type ReactNode,
 } from "react";
 import { twMerge } from "tailwind-merge";
-import { ChevronDownIcon, ChevronUpIcon, MusicIcon, UsersIcon, VideoIcon } from "lucide-react";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MusicIcon,
+  UsersIcon,
+  VideoIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { GenerateIconButton } from "@storyteller/ui-button";
 import { Tooltip } from "@storyteller/ui-tooltip";
@@ -231,8 +237,7 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
     // mode renders no video/audio deck, so those kinds only land in
     // reference mode where the user can see (and remove) them.
     const isKeyframeMode = !!isVideo && !isReferenceMode;
-    const dropAcceptsImages =
-      !!supportsImagePrompts && maxImagePromptCount > 0;
+    const dropAcceptsImages = !!supportsImagePrompts && maxImagePromptCount > 0;
     const dropAcceptsVideos =
       !isKeyframeMode && !!videoRefsSupported && !!onReferenceVideosChange;
     const dropAcceptsAudio =
@@ -344,8 +349,7 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
     const deckAddActions: DeckAddAction[] = [];
     if (
       supportsImagePrompts &&
-      referenceImages.length + deck.uploadingImages.length <
-        maxImagePromptCount
+      referenceImages.length + deck.uploadingImages.length < maxImagePromptCount
     ) {
       deckAddActions.push({
         key: "upload-image",
@@ -769,8 +773,8 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
 
           <div
             className={twMerge(
-              "glass rounded-2xl p-3 sm:p-4 !transition-all duration-200",
-              isFocused && "ring-1 ring-primary",
+              "glass p-3 sm:p-4 !transition-all duration-200",
+              isFocused && "border-primary",
             )}
             {...drop.dropZoneProps}
           >
@@ -849,8 +853,8 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
                     />
 
                     {mentionOpen && filteredMentionItems.length > 0 && (
-                      <div className="absolute bottom-full left-0 z-50 mb-1 w-64 max-w-[calc(100vw-3rem)] overflow-hidden rounded-lg border border-ui-panel-border bg-ui-controls shadow-lg backdrop-blur-xl">
-                        <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-base-fg/50">
+                      <div className="absolute bottom-full left-0 z-50 mb-1 w-64 max-w-[calc(100vw-3rem)] overflow-hidden rounded-[3px] border border-ui-panel-border bg-ui-controls">
+                        <div className="px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                           Mentions
                         </div>
                         {filteredMentionItems.map((item, i) => (
@@ -868,7 +872,7 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
                             }}
                             onMouseEnter={() => setMentionIndex(i)}
                           >
-                            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-md border border-white/20 bg-black/20">
+                            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden border border-white/15 bg-black/20">
                               {(item.type === "image" ||
                                 item.type === "character") &&
                               item.preview ? (
@@ -885,13 +889,13 @@ export const PromptBox = forwardRef<HTMLDivElement, PromptBoxProps>(
                                   className="h-full w-full object-cover"
                                 />
                               ) : item.type === "character" ? (
-                                <UsersIcon
-                                  
-                                  className="h-3.5 w-3.5 text-white/60" />
+                                <UsersIcon className="h-3.5 w-3.5 text-white/60" />
                               ) : (
                                 <DynamicIcon
                                   icon={
-                                    item.type === "video" ? VideoIcon : MusicIcon
+                                    item.type === "video"
+                                      ? VideoIcon
+                                      : MusicIcon
                                   }
                                   className="h-3.5 w-3.5 text-white/60"
                                 />
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBoxDropZone.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBoxDropZone.tsx
index a28a5f82e3..1ac00a7dd0 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBoxDropZone.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptBoxDropZone.tsx
@@ -245,15 +245,15 @@ export function PromptBoxDropOverlay({
   return (
     <div
       className={twMerge(
-        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed bg-[#161618]/85 backdrop-blur-sm",
-        rejected ? "border-red-400/80" : "border-primary",
+        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 border-2 border-dashed bg-ui-controls/85",
+        rejected ? "border-red-400/80" : "border-white/60",
       )}
     >
       <div className="flex items-center gap-2">
         {kinds.map((kind, i) => (
           <div
             key={kind.label}
-            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-base-fg/90"
+            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center bg-white/10 text-base-fg/90"
             style={{ animationDelay: `${i * 50}ms` }}
           >
             <DynamicIcon icon={kind.icon} className="text-sm" />
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptFullscreen.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptFullscreen.tsx
index c9b7064955..7f82355f91 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptFullscreen.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/PromptFullscreen.tsx
@@ -7,7 +7,7 @@ import { Maximize2Icon } from "lucide-react";
 // Webapp "focus mode" for the prompt editor. Mirrors the desktop lib's
 // (@storyteller/ui-promptbox) fullscreen feature but lives here because the
 // webapp has its own PromptBox. Reuses the shared @storyteller/ui-modal for a
-// Trello-card-style centered panel + blurred backdrop. The overlay renders a
+// Trello-card-style centered panel. The overlay renders a
 // fresh editor bound to the SAME value + onChange, so text/mentions stay
 // continuous across open/close.
 
@@ -32,7 +32,7 @@ export const PromptFullscreenButton = ({
           type="button"
           aria-label="Expand prompt to focus mode"
           onClick={onClick}
-          className="flex h-6 w-6 items-center justify-center rounded-full bg-base-fg/5 text-base-fg/50 transition-colors hover:bg-base-fg/10 hover:text-base-fg/90 focus:outline-none"
+          className="flex h-6 w-6 items-center justify-center bg-base-fg/5 text-base-fg/50 transition-colors hover:bg-base-fg/10 hover:text-base-fg/90 focus:outline-none"
         >
           <Maximize2Icon
             
@@ -96,7 +96,6 @@ export const PromptFullscreenModal = ({
       closeOnOutsideClick
       closeOnEsc
       className="w-full max-w-4xl"
-      backdropClassName="backdrop-blur-md"
     >
       {/* Explicit inline height (not a Tailwind arbitrary class) so the column
           is reliably bounded across the modal's nested wrappers — that's what
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerOptionList.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerOptionList.tsx
index 267011822b..4f19bb8acc 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerOptionList.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerOptionList.tsx
@@ -19,8 +19,8 @@ export function DrawerOptionList({ items, onSelect }: DrawerOptionListProps) {
           disabled={item.disabled}
           onClick={() => !item.disabled && onSelect(item)}
           className={twMerge(
-            "flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition-colors",
-            item.selected ? "bg-primary/15" : "hover:bg-white/5",
+            "flex w-full items-center gap-3 px-3 py-3 text-left transition-colors",
+            item.selected ? "bg-white/10" : "hover:bg-white/5",
             item.disabled && "cursor-not-allowed opacity-50",
           )}
         >
@@ -42,8 +42,8 @@ export function DrawerOptionList({ items, onSelect }: DrawerOptionListProps) {
           {item.trailing}
           {item.selected && (
             <CheckIcon
-              
-              className="h-3.5 w-3.5 shrink-0 text-primary" />
+
+              className="h-3.5 w-3.5 shrink-0 text-white" />
           )}
         </button>
       ))}
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerSection.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerSection.tsx
index b869405984..b71408238d 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerSection.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/DrawerSection.tsx
@@ -9,7 +9,7 @@ interface DrawerSectionProps {
 export function DrawerSection({ label, children }: DrawerSectionProps) {
   return (
     <div className="py-1">
-      <span className="px-3 text-[11px] font-semibold uppercase tracking-wider text-base-fg/45">
+      <span className="px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/45">
         {label}
       </span>
       {children}
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileCountStepper.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileCountStepper.tsx
index 2fbf88de7f..e37972cd1d 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileCountStepper.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileCountStepper.tsx
@@ -33,14 +33,14 @@ export function MobileCountStepper({
   };
 
   return (
-    <div className="flex h-11 shrink-0 items-center rounded-xl border border-ui-panel-border bg-ui-controls px-1">
+    <div className="flex h-11 shrink-0 items-center rounded-[3px] border border-ui-panel-border bg-ui-controls px-1">
       <button
         type="button"
         onClick={() => step(-1)}
         disabled={index <= 0}
-        className="flex h-9 w-8 items-center justify-center rounded-lg text-base-fg/80 transition-colors hover:bg-white/10 disabled:opacity-30"
+        className="flex h-9 w-8 items-center justify-center text-base-fg/80 transition-colors hover:bg-white/10 disabled:opacity-30"
       >
-        <MinusIcon  className="h-3 w-3" />
+        <MinusIcon className="h-3 w-3" />
       </button>
       <span className="min-w-10 text-center text-sm font-semibold tabular-nums text-base-fg">
         {value}/{maxValue}
@@ -49,9 +49,9 @@ export function MobileCountStepper({
         type="button"
         onClick={() => step(1)}
         disabled={index === allowed.length - 1}
-        className="flex h-9 w-8 items-center justify-center rounded-lg text-base-fg/80 transition-colors hover:bg-white/10 disabled:opacity-30"
+        className="flex h-9 w-8 items-center justify-center text-base-fg/80 transition-colors hover:bg-white/10 disabled:opacity-30"
       >
-        <PlusIcon  className="h-3 w-3" />
+        <PlusIcon className="h-3 w-3" />
       </button>
     </div>
   );
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileFieldButton.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileFieldButton.tsx
index af73fc6e4f..1eb5ddacce 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileFieldButton.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobileFieldButton.tsx
@@ -26,7 +26,7 @@ export function MobileFieldButton({
       onClick={onClick}
       disabled={disabled}
       className={twMerge(
-        "flex w-full items-center gap-3 rounded-xl border border-ui-panel-border bg-ui-controls px-3.5 py-3 text-left transition-colors",
+        "flex w-full items-center gap-3 border border-ui-panel-border bg-ui-controls px-3.5 py-3 text-left transition-colors",
         "hover:bg-ui-controls/80 active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobilePromptForm.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobilePromptForm.tsx
index 29d38cd5b6..1bf3c51172 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobilePromptForm.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/MobilePromptForm.tsx
@@ -77,7 +77,7 @@ export function MobilePromptForm({
           {frames}
           {mediaRefs}
 
-          <div className="rounded-xl border border-ui-panel-border bg-ui-controls p-3">
+          <div className="border border-ui-panel-border bg-ui-controls p-3">
             <MentionTextarea
               value={prompt}
               onChange={onPromptChange}
@@ -100,7 +100,7 @@ export function MobilePromptForm({
       <div className="flex items-center gap-2 border-t border-ui-panel-border bg-ui-panel px-3 py-3">
         {countField}
         <GenerateButton
-          className="h-11 rounded-xl flex-1 items-center justify-center border-none bg-primary text-base text-white disabled:cursor-not-allowed disabled:opacity-50"
+          className="h-11 flex-1 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50"
           onClick={handleCreate}
           disabled={!prompt.trim() || isSubmitting}
           loading={isSubmitting}
diff --git a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/SettingsDrawer.tsx b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/SettingsDrawer.tsx
index d13b3351e2..02b2b8a200 100644
--- a/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/SettingsDrawer.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/SettingsDrawer.tsx
@@ -64,13 +64,13 @@ export function SettingsDrawer({
         aria-describedby={undefined}
         modal={modal}
         open={open}
-        className="ac-drawer-content max-h-[80vh] rounded-t-2xl bg-ui-panel pb-[max(1rem,env(safe-area-inset-bottom))]"
+        className="ac-drawer-content max-h-[80vh] bg-ui-panel pb-[max(1rem,env(safe-area-inset-bottom))]"
       >
         <button
           type="button"
           aria-label="Close"
           onClick={() => onOpenChange(false)}
-          className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
+          className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center bg-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
         >
           <XIcon  className="text-sm" />
         </button>
@@ -104,7 +104,7 @@ export function SettingsDrawer({
           onPointerUp={endDrag}
           onPointerCancel={endDrag}
         >
-          <div className="mx-auto mt-2 h-1 w-10 shrink-0 rounded-full bg-white/20" />
+          <div className="mx-auto mt-2 h-1 w-10 shrink-0 bg-white/20" />
           <SheetHeader className={hideHeader ? "sr-only" : "select-none pb-2 pr-12"}>
             <SheetTitle>{title}</SheetTitle>
           </SheetHeader>
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
index e6300962cf..cf1a74fcc2 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
@@ -156,7 +156,7 @@ function UsernameForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
           maxLength={USERNAME_MAX}
           autoComplete="username"
           autoFocus
-          inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+          inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
         />
         <Input
           type="password"
@@ -164,7 +164,7 @@ function UsernameForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
           onChange={(e) => setCurrentPassword(e.target.value)}
           placeholder="Confirm password"
           autoComplete="current-password"
-          inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+          inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
         />
         {error && <FormError message={error} />}
         <FormActions
@@ -262,7 +262,7 @@ function EmailForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
           maxLength={EMAIL_MAX}
           autoComplete="email"
           autoFocus
-          inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+          inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
         />
         <Input
           type="password"
@@ -270,7 +270,7 @@ function EmailForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
           onChange={(e) => setCurrentPassword(e.target.value)}
           placeholder="Confirm password"
           autoComplete="current-password"
-          inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+          inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
         />
         {error && <FormError message={error} />}
         <FormActions
@@ -388,7 +388,7 @@ function PasswordForm({
             placeholder="Current password"
             autoComplete="current-password"
             autoFocus
-            inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+            inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
           />
         )}
         <div className="grid grid-cols-2 gap-2">
@@ -400,7 +400,7 @@ function PasswordForm({
             minLength={PASSWORD_MIN}
             autoComplete="new-password"
             autoFocus={passwordNotSet}
-            inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+            inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
           />
           <Input
             type="password"
@@ -411,7 +411,7 @@ function PasswordForm({
             }
             minLength={PASSWORD_MIN}
             autoComplete="new-password"
-            inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+            inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
           />
         </div>
         {error && <FormError message={error} />}
@@ -450,7 +450,9 @@ function SectionShell({
     <div className="flex flex-col gap-3">
       <div className="flex items-start justify-between gap-3">
         <div className="flex flex-col gap-0.5">
-          <p className="text-sm font-medium">{title}</p>
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            {title}
+          </p>
           <p className="text-xs opacity-70">
             {isEditing ? editingDescription : collapsedDescription}
           </p>
@@ -480,7 +482,7 @@ function SectionShell({
 function CurrentValue({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex items-baseline gap-2">
-      <span className="text-[10px] font-semibold uppercase tracking-wider text-white/40">
+      <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-white/40">
         {label}
       </span>
       <span className="text-sm font-medium text-white truncate">{value}</span>
@@ -514,11 +516,7 @@ function FormActions({
         className="h-9 px-4"
         disabled={submitting || disabled}
       >
-        {submitting ? (
-          <LoaderCircleIcon  className="animate-spin" />
-        ) : (
-          "Save"
-        )}
+        {submitting ? <LoaderCircleIcon className="animate-spin" /> : "Save"}
       </Button>
     </div>
   );
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/ApiKeySection.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/ApiKeySection.tsx
index a267fb8811..8e68f64cc4 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/ApiKeySection.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/ApiKeySection.tsx
@@ -2,7 +2,13 @@ import { useEffect, useState } from "react";
 import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
 import { Modal } from "@storyteller/ui-modal";
-import { CheckIcon, CopyIcon, KeyIcon, LoaderCircleIcon, TrashIcon } from "lucide-react";
+import {
+  CheckIcon,
+  CopyIcon,
+  KeyIcon,
+  LoaderCircleIcon,
+  TrashIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import {
   UserApiKeysApi,
@@ -17,7 +23,7 @@ const DESCRIPTION_MAX = 512;
 const PAGE_SIZE = 20;
 
 const INPUT_CLASS =
-  "w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none";
+  "w-full bg-ui-controls border border-white/15 focus:border-white/40 rounded-[3px] px-3 py-2 text-sm text-white placeholder-white/30 outline-none";
 
 interface ApiKeySectionProps {
   user: UserInfo;
@@ -97,7 +103,9 @@ export function ApiKeySection(_props: ApiKeySectionProps) {
     <div className="flex flex-col gap-3">
       <div className="flex items-start justify-between gap-3 mb-2">
         <div className="flex flex-col gap-0.5">
-          <p className="text-sm font-medium">API keys</p>
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            API keys
+          </p>
           <p className="text-xs opacity-70">
             Create and manage keys to access the API programmatically.
           </p>
@@ -131,7 +139,7 @@ export function ApiKeySection(_props: ApiKeySectionProps) {
 
       {loading ? (
         <div className="py-6 text-center text-xs opacity-60">
-          <LoaderCircleIcon  className="animate-spin" />
+          <LoaderCircleIcon className="animate-spin" />
         </div>
       ) : keys.length === 0 ? (
         <div className="py-6 text-center text-xs opacity-60">
@@ -169,7 +177,7 @@ export function ApiKeySection(_props: ApiKeySectionProps) {
             onClick={() => load(false)}
           >
             {loadingMore ? (
-              <LoaderCircleIcon  className="animate-spin" />
+              <LoaderCircleIcon className="animate-spin" />
             ) : (
               "Load more"
             )}
@@ -279,16 +287,16 @@ function NewKeyReveal({
   };
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-primary/40 bg-primary/10 p-3">
+    <div className="flex flex-col gap-2 border border-white/30 bg-white/[0.06] p-3">
       <div className="flex items-center gap-2 text-sm font-medium">
-        <KeyIcon  className="opacity-80" />
+        <KeyIcon className="opacity-80" />
         <span>API key created</span>
       </div>
       <p className="text-xs opacity-80">
         Copy your key now. For security, you won't be able to see it again.
       </p>
       <div className="flex items-center gap-2">
-        <code className="min-w-0 flex-1 truncate rounded-md bg-black/40 px-3 py-2 font-mono text-xs text-white">
+        <code className="min-w-0 flex-1 truncate border border-white/15 bg-ui-controls px-3 py-2 font-mono text-xs text-white">
           {created.api_key}
         </code>
         <Button
@@ -334,7 +342,7 @@ function ApiKeyRow({
   onRequestDelete: () => void;
 }) {
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-white/10 bg-white/[0.03] p-3 transition-colors hover:border-white/[0.14]">
+    <div className="flex flex-col gap-2 border border-white/15 bg-white/[0.03] p-3 transition-colors hover:border-white/30">
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 flex-col gap-0.5">
           <p className="truncate text-sm font-medium">{item.name}</p>
@@ -346,10 +354,10 @@ function ApiKeyRow({
           <div className="flex items-center gap-2 pt-1">
             {/* Truncated prefix, display-only — the full secret is only shown on
                 create. The trailing ellipsis signals it's not the whole value. */}
-            <code className="min-w-0 truncate rounded bg-black/40 px-2 py-1 font-mono text-[11px] text-white/70">
+            <code className="min-w-0 truncate bg-ui-controls px-2 py-1 font-mono text-[11px] text-white/70">
               {item.truncated_api_key}…
             </code>
-            <span className="text-[10px] uppercase tracking-wider text-white/40">
+            <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-white/40">
               {formatDate(item.created_at)}
             </span>
           </div>
@@ -497,13 +505,13 @@ function DeleteConfirmModal({
           </Button>
           <Button
             type="button"
-            variant="primary"
-            className="h-9 px-4 bg-red-500 hover:bg-red-600"
+            variant="destructive"
+            className="h-9 px-4"
             onClick={handleConfirm}
             disabled={deleting}
           >
             {deleting ? (
-              <LoaderCircleIcon  className="animate-spin" />
+              <LoaderCircleIcon className="animate-spin" />
             ) : (
               "Delete"
             )}
@@ -543,7 +551,7 @@ function FormActions({
         disabled={submitting || disabled}
       >
         {submitting ? (
-          <LoaderCircleIcon  className="animate-spin" />
+          <LoaderCircleIcon className="animate-spin" />
         ) : (
           submitLabel
         )}
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
index 038f5bcc4c..82c0f2abe1 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
@@ -44,7 +44,9 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
         <div className="flex h-full flex-col sm:grid sm:grid-cols-12 sm:gap-3">
           <div className="relative shrink-0 border-b border-ui-panel-border p-4 sm:col-span-4 sm:border-b-0 sm:p-3 sm:pt-2 sm:after:absolute sm:after:right-0 sm:after:top-0 sm:after:h-full sm:after:w-px sm:after:bg-ui-panel-border">
             <div className="hidden items-center gap-2.5 py-0.5 sm:flex">
-              <h2 className="text-[18px] font-semibold opacity-80">Settings</h2>
+              <h2 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
+                Settings
+              </h2>
             </div>
             <hr className="my-2 hidden w-full border-ui-panel-border sm:block" />
             <div className="flex gap-2 overflow-x-auto pe-10 sm:block sm:space-y-1 sm:overflow-visible sm:pe-0">
@@ -53,8 +55,10 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
                   key={t.id}
                   onClick={() => setTab(t.id)}
                   className={twMerge(
-                    "h-9 shrink-0 rounded-lg px-3 text-left transition-colors sm:w-full sm:px-2",
-                    tab === t.id ? "bg-[#63636B]/20" : "hover:bg-white/[0.04]",
+                    "h-9 shrink-0 px-3 text-left transition-colors sm:w-full sm:px-2",
+                    tab === t.id
+                      ? "bg-white/10 text-white"
+                      : "text-white/70 hover:bg-white/[0.06] hover:text-white",
                   )}
                 >
                   <div className="flex items-center gap-2.5 whitespace-nowrap text-sm">
@@ -68,7 +72,9 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
 
           <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto sm:col-span-8 sm:h-full">
             <div className="w-full border-b border-ui-panel-border px-4 py-2.5 sm:px-0">
-              <h2 className="text-[18px] font-semibold">{activeLabel}</h2>
+              <h2 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/80">
+                {activeLabel}
+              </h2>
             </div>
             <div className="h-full p-4 text-sm sm:p-3 sm:ps-0">
               {tab === "general" && <GeneralPanel />}
@@ -94,7 +100,9 @@ function GeneralPanel() {
     <div className="space-y-4 text-base-fg">
       <div className="flex flex-col gap-2 pt-3">
         <div className="flex flex-col gap-0.5">
-          <p className="text-sm font-medium">Enter to generate</p>
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            Enter to generate
+          </p>
           <p className="text-xs opacity-70">
             When on, pressing Enter submits the prompt and Shift+Enter adds a
             new line. When off (default), both Enter and Shift+Enter add a new
@@ -109,7 +117,9 @@ function GeneralPanel() {
       </div>
       <div className="flex flex-col gap-2">
         <div className="flex flex-col gap-0.5">
-          <p className="text-sm font-medium">Play videos with sound</p>
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            Play videos with sound
+          </p>
           <p className="text-xs opacity-70">
             When on (default), videos in the media viewer start unmuted so you
             don't have to click unmute every time. When off, they start muted.
@@ -123,7 +133,9 @@ function GeneralPanel() {
       </div>
       <div className="flex flex-col gap-2">
         <div className="flex flex-col gap-0.5">
-          <p className="text-sm font-medium">Group models by family</p>
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            Group models by family
+          </p>
           <p className="text-xs opacity-70">
             When on (default), the model picker groups models into submenus by
             family, like Seedance or Veo. When off, every model shows in one
diff --git a/frontend/apps/artcraft-webapp/src/components/sidebar/app-sidebar.tsx b/frontend/apps/artcraft-webapp/src/components/sidebar/app-sidebar.tsx
index 341ad5fbcf..bf78e7b09d 100644
--- a/frontend/apps/artcraft-webapp/src/components/sidebar/app-sidebar.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/sidebar/app-sidebar.tsx
@@ -1,7 +1,24 @@
 import { useMemo } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { motion, useReducedMotion } from "framer-motion";
-import { BoxIcon, CircleHelpIcon, DownloadIcon, FilmIcon, GiftIcon, GlobeIcon, GraduationCapIcon, GroupIcon, HouseIcon, ImageIcon, ImagesIcon, MusicIcon, NewspaperIcon, PencilIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
+import {
+  BoxIcon,
+  CircleHelpIcon,
+  DownloadIcon,
+  FilmIcon,
+  GiftIcon,
+  GlobeIcon,
+  GraduationCapIcon,
+  GroupIcon,
+  HouseIcon,
+  ImageIcon,
+  ImagesIcon,
+  MusicIcon,
+  NewspaperIcon,
+  PencilIcon,
+  VideoIcon,
+  WandSparklesIcon,
+} from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { DynamicIcon, DiscordIcon } from "@storyteller/icons";
 import { Button } from "@storyteller/ui-button";
@@ -33,7 +50,9 @@ type NavItem = {
   badge?: string;
 };
 
-const PRIMARY_ITEMS: NavItem[] = [{ label: "Home", href: "/", icon: HouseIcon }];
+const PRIMARY_ITEMS: NavItem[] = [
+  { label: "Home", href: "/", icon: HouseIcon },
+];
 
 // Generation entries — make something from a prompt.
 const CREATE_ITEMS_STATIC: NavItem[] = [
@@ -150,13 +169,15 @@ function NavMenuItem({
           interactive, kept subtle to stay within the "restrained chrome" lane. */}
       <DynamicIcon
         icon={item.icon}
-        className="transition-transform duration-200 ease-out group-hover/menu-item:scale-110"
+        className="transition-colors duration-150"
       />
       <span className="group-data-[collapsible=icon]:hidden">{item.label}</span>
       {item.badge && (
         <span
-          className={`ml-auto px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none text-white group-data-[collapsible=icon]:hidden rounded-full ${
-            item.badge === "NEW" ? "bg-purple-600" : "bg-amber-600"
+          className={`ml-auto border px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.12em] leading-none group-data-[collapsible=icon]:hidden ${
+            item.badge === "NEW"
+              ? "border-purple-400/40 text-purple-300"
+              : "border-amber-400/40 text-amber-300"
           }`}
         >
           {item.badge}
@@ -173,7 +194,7 @@ function NavMenuItem({
       {active && (
         <motion.span
           layoutId="sidebar-active-indicator"
-          className="pointer-events-none absolute inset-y-1.5 left-0 z-10 w-1 rounded-full bg-primary"
+          className="pointer-events-none absolute inset-y-1.5 left-0 z-10 w-0.5 bg-white"
           transition={
             reduceMotion
               ? { duration: 0 }
@@ -259,7 +280,7 @@ export function AppSidebar() {
               className="flex items-center gap-2"
             >
               <img
-                src="/images/artcraft-logo.png"
+                src="/images/artcraft-logo-2.png"
                 alt="ArtCraft"
                 className="h-5 w-auto shrink-0"
               />
@@ -318,7 +339,7 @@ export function AppSidebar() {
           onClick={() =>
             window.open(DOWNLOAD_URL, "_blank", "noopener,noreferrer")
           }
-          className="w-full justify-center h-9 text-sm font-semibold rounded-full"
+          className="w-full justify-center h-9"
         >
           Download ArtCraft
         </Button>
diff --git a/frontend/apps/artcraft-webapp/src/components/sidebar/library-folders-nav.tsx b/frontend/apps/artcraft-webapp/src/components/sidebar/library-folders-nav.tsx
index e5bae76eed..a8682e6a3c 100644
--- a/frontend/apps/artcraft-webapp/src/components/sidebar/library-folders-nav.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/sidebar/library-folders-nav.tsx
@@ -81,7 +81,7 @@ export function LibraryFoldersNav({
             type="button"
             onClick={() => openNewFolderModal(null)}
             aria-label="New folder"
-            className="mr-1 flex h-5 w-5 items-center justify-center rounded text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
+            className="mr-1 flex h-5 w-5 items-center justify-center text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
           >
             <PlusIcon  className="text-xs" />
           </button>
@@ -125,7 +125,7 @@ export function LibraryFoldersNav({
                 type="button"
                 onClick={() => setExpanded((v) => !v)}
                 aria-label={expanded ? "Collapse folders" : "Expand folders"}
-                className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
+                className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
               >
                 <ChevronRightIcon
                   
diff --git a/frontend/apps/artcraft-webapp/src/components/sidebar/library-tags-nav.tsx b/frontend/apps/artcraft-webapp/src/components/sidebar/library-tags-nav.tsx
index 25400748ac..3428ebddb6 100644
--- a/frontend/apps/artcraft-webapp/src/components/sidebar/library-tags-nav.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/sidebar/library-tags-nav.tsx
@@ -63,7 +63,7 @@ export function LibraryTagsNav({
             type="button"
             onClick={() => setExpanded((v) => !v)}
             aria-label={expanded ? "Collapse tags" : "Expand tags"}
-            className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
+            className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors group-data-[collapsible=icon]:hidden"
           >
             <ChevronRightIcon
               
@@ -103,7 +103,7 @@ export function LibraryTagsNav({
                     className="pl-5"
                   >
                     <TagIcon
-                      
+
                       className="text-violet-400" />
                     <span className="truncate">{tag.value}</span>
                     <span className="ml-auto text-[10px] text-sidebar-foreground/40 transition-opacity group-hover/menu-item:opacity-0">
@@ -123,7 +123,7 @@ export function LibraryTagsNav({
                       });
                     }}
                     aria-label={`Options for tag "${tag.value}"`}
-                    className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded text-sidebar-foreground/50 opacity-0 transition-opacity group-hover/menu-item:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-foreground"
+                    className="absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center text-sidebar-foreground/50 opacity-0 transition-opacity group-hover/menu-item:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-foreground"
                   >
                     <EllipsisIcon  className="text-xs" />
                   </button>
diff --git a/frontend/apps/artcraft-webapp/src/components/sidebar/mobile-bottom-nav.tsx b/frontend/apps/artcraft-webapp/src/components/sidebar/mobile-bottom-nav.tsx
index 9078d12ec9..5d0b64b11e 100644
--- a/frontend/apps/artcraft-webapp/src/components/sidebar/mobile-bottom-nav.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/sidebar/mobile-bottom-nav.tsx
@@ -32,10 +32,8 @@ export function MobileBottomNav() {
             key={item.href}
             to={item.href}
             className={twMerge(
-              "flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors active:scale-95",
-              active
-                ? "text-primary"
-                : "text-base-fg/55 hover:text-base-fg/80",
+              "flex flex-1 flex-col items-center justify-center gap-1 py-2 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] transition-colors",
+              active ? "text-white" : "text-base-fg/55 hover:text-base-fg/80",
             )}
           >
             <DynamicIcon icon={item.icon} className="h-5 w-5" />
diff --git a/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx b/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx
index 021493ce62..bf1c3aabc7 100644
--- a/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/signup-cta-modal.tsx
@@ -72,7 +72,7 @@ export function SignupCtaModal() {
     <Modal
       isOpen={isOpen}
       onClose={close}
-      className="rounded-2xl w-full max-w-md overflow-hidden border border-white/[5%] bg-[#161618] p-0 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)]"
+      className="w-full max-w-md overflow-hidden border border-white/15 bg-ui-modal p-0"
       allowBackgroundInteraction={false}
       showClose={true}
       closeOnOutsideClick={true}
@@ -81,16 +81,6 @@ export function SignupCtaModal() {
       backdropClassName="bg-black/80"
     >
       <div className="relative overflow-hidden">
-        {/* Off-center ambient glow, feels designed, not generic */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/25 blur-[80px]"
-        />
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
-        />
-
         <div className="relative px-8 pt-10 pb-8 sm:px-10 sm:pt-12 sm:pb-10">
           <h2 className="mt-3 font-display text-3xl font-semibold tracking-tight text-white sm:text-[34px] sm:leading-[1.1]">
             Start <span className="text-primary">crafting</span> in seconds.
@@ -105,10 +95,8 @@ export function SignupCtaModal() {
                 key={perk}
                 className="flex items-start gap-3 text-[14px] text-white/75"
               >
-                <span className="mt-[2px] flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/15">
-                  <CheckIcon
-                    
-                    className="text-[9px] text-primary" />
+                <span className="mt-[2px] flex h-4 w-4 shrink-0 items-center justify-center bg-white/10">
+                  <CheckIcon className="text-[9px] text-white" />
                 </span>
                 <span>{perk}</span>
               </li>
@@ -117,16 +105,13 @@ export function SignupCtaModal() {
 
           <div className="mt-8 flex flex-col gap-3">
             {error && (
-              <div className="rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-center text-sm text-red-500">
+              <div className="border border-red-500/20 bg-red-500/10 px-4 py-3 text-center text-sm text-red-500">
                 {error}
               </div>
             )}
 
             <Link to={`/signup?from=${from}`} onClick={close} className="block">
-              <Button
-                variant="primary"
-                className="w-full h-10 text-sm font-semibold rounded-full"
-              >
+              <Button variant="primary" className="w-full h-10">
                 Create account with email
               </Button>
             </Link>
@@ -135,7 +120,7 @@ export function SignupCtaModal() {
               <div className="absolute inset-0 flex items-center">
                 <div className="w-full border-t border-white/10" />
               </div>
-              <span className="relative bg-[#161618] px-4 text-xs uppercase tracking-widest text-white/40">
+              <span className="relative bg-ui-modal px-4 font-mono text-[11px] uppercase tracking-[0.12em] text-white/40">
                 or
               </span>
             </div>
diff --git a/frontend/apps/artcraft-webapp/src/components/toast/toast.tsx b/frontend/apps/artcraft-webapp/src/components/toast/toast.tsx
index a8cd63b7df..22f0a24cbd 100644
--- a/frontend/apps/artcraft-webapp/src/components/toast/toast.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/toast/toast.tsx
@@ -88,10 +88,10 @@ export const ToastContainer = () => {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className="glass flex max-w-full items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-white animate-toast-in sm:max-w-md"
+          className="glass flex max-w-full items-center gap-3 rounded-[3px] px-4 py-2.5 text-sm text-white animate-toast-in sm:max-w-md"
         >
           <div
-            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${
+            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center ${
               toast.type === "success" ? "bg-green-500" : "bg-red-500"
             }`}
           >
@@ -107,7 +107,7 @@ export const ToastContainer = () => {
             onClick={() => dismiss(toast.id)}
             className="ml-1 text-white/40 transition-colors hover:text-white/80"
           >
-            <XIcon  className="h-3 w-3" />
+            <XIcon className="h-3 w-3" />
           </button>
         </div>
       ))}
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/ActiveSceneTitle.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/ActiveSceneTitle.tsx
index 3febdad5cf..a86adcb67b 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/ActiveSceneTitle.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/ActiveSceneTitle.tsx
@@ -121,7 +121,7 @@ export function ActiveSceneTitle() {
               onClick={startEdit}
               title="Rename scene"
               aria-label="Rename scene"
-              className="flex min-w-0 max-w-[280px] items-center rounded-lg border border-transparent px-3 py-1.5 text-sm font-semibold text-white transition-all hover:cursor-text hover:bg-white/[0.08]"
+              className="flex min-w-0 max-w-[280px] items-center border border-transparent px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:cursor-text hover:bg-white/10"
             >
               <span className="truncate">{title}</span>
               <PencilIcon
@@ -129,7 +129,7 @@ export function ActiveSceneTitle() {
                 className="ml-2 shrink-0 text-sm opacity-50" />
             </button>
           ) : (
-            <div className="max-w-[280px] truncate rounded-lg border border-transparent px-3 py-1.5 text-sm font-semibold text-white/80">
+            <div className="max-w-[280px] truncate border border-transparent px-3 py-1.5 text-sm font-semibold text-white/80">
               {title}
             </div>
           )}
@@ -157,8 +157,8 @@ export function ActiveSceneTitle() {
           disabled={isSubmitting}
           maxLength={120}
           className={twMerge(
-            "h-[34px] w-fit max-w-full rounded-lg border border-white/[0.12] bg-white/[0.04] px-3 text-sm font-semibold text-white outline-none focus:outline focus:outline-2 focus:outline-brand-primary",
-            isSubmitting && "outline outline-2 outline-brand-secondary",
+            "h-[34px] w-fit max-w-full border border-white/15 bg-ui-controls px-3 text-sm font-semibold text-white outline-none focus:outline focus:outline-1 focus:outline-white/60",
+            isSubmitting && "outline outline-1 outline-white/30",
             !isValid && "border-danger focus:outline-danger focus:outline-2",
           )}
         />
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/TopBarActions.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/TopBarActions.tsx
index 3c55b60f43..6d27348943 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/TopBarActions.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/TopBarActions.tsx
@@ -14,7 +14,14 @@ import {
   Transition,
 } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
-import { CoinsIcon, GemIcon, GiftIcon, ImagesIcon, LifeBuoyIcon, SettingsIcon } from "lucide-react";
+import {
+  CoinsIcon,
+  GemIcon,
+  GiftIcon,
+  ImagesIcon,
+  LifeBuoyIcon,
+  SettingsIcon,
+} from "lucide-react";
 import { DiscordIcon } from "@storyteller/icons";
 import { Button } from "@storyteller/ui-button";
 import { PopoverMenu } from "@storyteller/ui-popover";
@@ -99,9 +106,9 @@ export function TopBarActions({ className }: { className?: string }) {
         <>
           <Link
             to="/pricing"
-            className="hidden lg:flex h-8 items-center gap-1.5 px-3 rounded-lg text-sm font-medium text-white/85 hover:bg-white/[0.04] transition-colors"
+            className="hidden lg:flex h-8 items-center gap-1.5 px-3 rounded-[3px] font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 hover:bg-white/10 hover:text-white transition-colors"
           >
-            <GemIcon  className="text-[11px]" />
+            <GemIcon className="text-[11px]" />
             Pricing
           </Link>
 
@@ -118,7 +125,7 @@ export function TopBarActions({ className }: { className?: string }) {
               variant="primary"
               icon={GemIcon}
               onClick={() => navigate("/pricing")}
-              className="h-8 px-3 text-sm font-semibold rounded-lg"
+              className="h-8 px-3"
             >
               Upgrade
             </Button>
@@ -128,14 +135,14 @@ export function TopBarActions({ className }: { className?: string }) {
 
           <Link
             to="/library"
-            className="hidden sm:flex h-8 items-center gap-1.5 px-3 rounded-lg bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] shadow-none text-sm font-medium text-white/80 transition-colors"
+            className="hidden sm:flex h-8 items-center gap-1.5 px-3 rounded-[3px] border border-white/15 hover:bg-white/10 hover:border-white/30 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/80 transition-colors"
           >
-            <ImagesIcon  className="text-[11px]" />
+            <ImagesIcon className="text-[11px]" />
             My Library
           </Link>
 
           <Menu as="div" className="relative ml-1">
-            <MenuButton className="flex h-8 w-8 rounded-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary/40 ring-offset-2 ring-offset-[#121212]">
+            <MenuButton className="flex h-8 w-8 overflow-hidden border border-white/15 focus:outline-none focus:ring-2 focus:ring-white/60 ring-offset-2 ring-offset-[#0b0b0c]">
               <span className="sr-only">Open user menu</span>
               <img
                 className="h-full w-full object-cover"
@@ -154,9 +161,9 @@ export function TopBarActions({ className }: { className?: string }) {
             >
               <MenuItems
                 modal={false}
-                className="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-xl bg-[#1a1a1a] border border-white/[0.08] shadow-xl focus:outline-none overflow-hidden"
+                className="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-[3px] bg-[#101014] border border-white/15 focus:outline-none overflow-hidden"
               >
-                <div className="px-4 py-3 border-b border-white/[0.06]">
+                <div className="px-4 py-3 border-b border-white/15">
                   <p className="text-sm font-medium text-white truncate">
                     {user.display_name || user.username}
                   </p>
@@ -166,13 +173,11 @@ export function TopBarActions({ className }: { className?: string }) {
                     <button
                       onClick={() => setSettingsOpen(true)}
                       className={twMerge(
-                        active ? "bg-white/[0.04]" : "",
+                        active ? "bg-white/10" : "",
                         "flex w-full items-center gap-2 px-4 py-2 text-sm text-white/70 transition-colors",
                       )}
                     >
-                      <SettingsIcon
-                        
-                        className="text-[11px] text-white/50" />
+                      <SettingsIcon className="text-[11px] text-white/50" />
                       Settings
                     </button>
                   )}
@@ -182,13 +187,11 @@ export function TopBarActions({ className }: { className?: string }) {
                     <button
                       onClick={() => navigate("/support")}
                       className={twMerge(
-                        active ? "bg-white/[0.04]" : "",
+                        active ? "bg-white/10" : "",
                         "flex w-full items-center gap-2 px-4 py-2 text-sm text-white/70 transition-colors",
                       )}
                     >
-                      <LifeBuoyIcon
-                        
-                        className="text-[11px] text-white/50" />
+                      <LifeBuoyIcon className="text-[11px] text-white/50" />
                       Support
                     </button>
                   )}
@@ -201,13 +204,11 @@ export function TopBarActions({ className }: { className?: string }) {
                       <button
                         onClick={() => navigate("/referrals")}
                         className={twMerge(
-                          active ? "bg-white/[0.04]" : "",
+                          active ? "bg-white/10" : "",
                           "flex w-full items-center gap-2 px-4 py-2 text-sm text-white/70 transition-colors",
                         )}
                       >
-                        <GiftIcon
-                          
-                          className="text-[11px] text-white/50" />
+                        <GiftIcon className="text-[11px] text-white/50" />
                         Referrals
                       </button>
                     )}
@@ -220,13 +221,11 @@ export function TopBarActions({ className }: { className?: string }) {
                       target="_blank"
                       rel="noopener noreferrer"
                       className={twMerge(
-                        active ? "bg-white/[0.04]" : "",
+                        active ? "bg-white/10" : "",
                         "flex w-full items-center gap-2 px-4 py-2 text-sm text-white/70 transition-colors",
                       )}
                     >
-                      <DiscordIcon
-                        
-                        className="text-[11px] text-white/50" />
+                      <DiscordIcon className="text-[11px] text-white/50" />
                       Join Discord
                     </a>
                   )}
@@ -252,20 +251,20 @@ export function TopBarActions({ className }: { className?: string }) {
         <>
           <Link
             to="/pricing"
-            className="hidden lg:flex h-8 items-center gap-1.5 px-3 rounded-lg text-sm font-medium text-white/85 hover:bg-white/[0.04] transition-colors"
+            className="hidden lg:flex h-8 items-center gap-1.5 px-3 rounded-[3px] font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 hover:bg-white/10 hover:text-white transition-colors"
           >
-            <GemIcon  className="text-[11px]" />
+            <GemIcon className="text-[11px]" />
             Pricing
           </Link>
           <Link
             to="/login"
-            className="h-8 flex items-center px-3 rounded-lg text-sm font-medium text-white/80 hover:text-white hover:bg-white/[0.04] transition-all"
+            className="h-8 flex items-center px-3 rounded-[3px] font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/80 hover:text-white hover:bg-white/10 transition-colors"
           >
             Login
           </Link>
           <Link
             to="/signup"
-            className="h-8 flex items-center gap-1.5 px-3.5 rounded-full text-sm font-semibold text-black bg-white hover:bg-white/90 transition-all shadow-sm"
+            className="h-8 flex items-center gap-1.5 px-3.5 rounded-[3px] font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-black bg-white hover:bg-white/80 transition-colors"
           >
             Sign up
           </Link>
@@ -297,16 +296,14 @@ function CreditsChip({
     <PopoverMenu
       position="bottom"
       align="end"
-      triggerIcon={
-        <CoinsIcon  className="text-primary text-[11px]" />
-      }
+      triggerIcon={<CoinsIcon className="text-primary text-[11px]" />}
       triggerLabel={
         <span className="whitespace-nowrap text-sm font-medium">
           {credits.toLocaleString()}
         </span>
       }
-      buttonClassName="h-8 px-3 ps-2.5 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] shadow-none text-white/80 rounded-lg gap-1.5"
-      panelClassName="mt-2 bg-[#1a1a1a] border border-white/[0.08] text-white rounded-xl"
+      buttonClassName="h-8 px-3 ps-2.5 bg-transparent hover:bg-white/10 border border-white/15 hover:border-white/30 shadow-none text-white/80 rounded-[3px] gap-1.5"
+      panelClassName="mt-2 bg-[#101014] border border-white/15 text-white rounded-[3px]"
     >
       {(close) => (
         <div className="w-72 max-w-[calc(100vw-24px)] p-3 text-white">
@@ -325,7 +322,7 @@ function CreditsChip({
             </button>
           </div>
           <div className="flex items-center gap-2 text-3xl font-semibold text-white tracking-tight">
-            <CoinsIcon  className="text-xl text-primary" />
+            <CoinsIcon className="text-xl text-primary" />
             {credits.toLocaleString()}
           </div>
           <div className="mt-3 flex gap-2">
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/breadcrumbs.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/breadcrumbs.tsx
index 5192b007d6..c7c2957f47 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/breadcrumbs.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/breadcrumbs.tsx
@@ -77,7 +77,7 @@ export function Breadcrumbs() {
   if (crumbs.length === 0) return null;
 
   return (
-    <nav className="hidden md:flex items-center gap-1.5 text-sm text-white/45 min-w-0">
+    <nav className="hidden md:flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/45 min-w-0">
       {crumbs.map((crumb, i) => {
         const isLast = i === crumbs.length - 1;
         return (
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/task-queue.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/task-queue.tsx
index 59544a5270..dc541988f6 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/task-queue.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/task-queue.tsx
@@ -1,6 +1,17 @@
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { PopoverMenu } from "@storyteller/ui-popover";
-import { BombIcon, BrushIcon, CheckIcon, CircleAlertIcon, CopyIcon, ListChecksIcon, LoaderCircleIcon, RotateCwIcon, Trash2Icon, XIcon } from "lucide-react";
+import {
+  BombIcon,
+  BrushIcon,
+  CheckIcon,
+  CircleAlertIcon,
+  CopyIcon,
+  ListChecksIcon,
+  LoaderCircleIcon,
+  RotateCwIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { Modal } from "@storyteller/ui-modal";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -180,7 +191,7 @@ const CopyPromptButton = ({ prompt }: { prompt: string }) => {
       delay={300}
     >
       <button
-        className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+        className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
         aria-label="Copy prompt"
         onClick={(e) => {
           e.stopPropagation();
@@ -220,7 +231,7 @@ const RecreateTaskButton = ({
       delay={300}
     >
       <button
-        className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls disabled:opacity-60"
+        className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls disabled:opacity-60"
         aria-label="Recreate"
         disabled={isRecreating}
         onClick={handleRecreate}
@@ -255,13 +266,13 @@ const InProgressCard = ({
     : null;
 
   return (
-    <div className="rounded-md p-2 transition-colors hover:bg-ui-controls/40">
+    <div className="p-2 transition-colors hover:bg-ui-controls/40">
       <div className="flex items-center gap-2.5">
-        <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden rounded bg-ui-controls">
+        <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden bg-ui-controls">
           <LoaderCircleIcon
-            
             className="animate-spin text-base-fg/60"
-            size="lg" />
+            size="lg"
+          />
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between text-sm">
@@ -285,9 +296,9 @@ const InProgressCard = ({
             </div>
           )}
           <div className="mt-1.5 flex items-center gap-2">
-            <div className="h-1.5 min-w-0 flex-1 rounded bg-ui-controls">
+            <div className="h-1.5 min-w-0 flex-1 bg-ui-controls">
               <div
-                className="h-1.5 rounded bg-primary-400"
+                className="h-1.5 bg-white"
                 style={{
                   width: `${Math.max(0, Math.min(100, task.progress))}%`,
                 }}
@@ -307,7 +318,7 @@ const InProgressCard = ({
           {task.prompt && <CopyPromptButton prompt={task.prompt} />}
           {onDismiss && (
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+              className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
               aria-label="Dismiss"
               onClick={(e) => {
                 e.stopPropagation();
@@ -334,12 +345,12 @@ const CompletedCard = ({
 }) => {
   return (
     <div
-      className="flex cursor-pointer items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-ui-controls/40"
+      className="flex cursor-pointer items-center gap-2.5 p-2 transition-colors hover:bg-ui-controls/40"
       onClick={onClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : -1}
     >
-      <div className="h-[72px] w-[72px] shrink-0 overflow-hidden rounded bg-ui-controls">
+      <div className="h-[72px] w-[72px] shrink-0 overflow-hidden bg-ui-controls">
         {task.thumbnailUrl ? (
           <img
             src={task.thumbnailUrl}
@@ -379,7 +390,7 @@ const CompletedCard = ({
         {task.prompt && <CopyPromptButton prompt={task.prompt} />}
         {onDismiss && (
           <button
-            className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+            className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
             aria-label="Dismiss"
             onClick={(e) => {
               e.stopPropagation();
@@ -403,13 +414,10 @@ const FailedCard = ({
 }) => {
   const statusLabel = FAILED_STATUS_LABEL[task.status] || "Failed";
   return (
-    <div className="rounded-md p-2 transition-colors hover:bg-ui-controls/40">
+    <div className="p-2 transition-colors hover:bg-ui-controls/40">
       <div className="flex items-center gap-2.5">
-        <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden rounded bg-red-500/10">
-          <CircleAlertIcon
-            
-            className="text-red-400"
-            size="lg" />
+        <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden bg-red-500/10">
+          <CircleAlertIcon className="text-red-400" size="lg" />
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between text-sm">
@@ -423,7 +431,7 @@ const FailedCard = ({
             </div>
           )}
           <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden">
-            <span className="shrink-0 rounded bg-red-500/15 px-1.5 py-0 text-[11px] font-medium text-red-400">
+            <span className="shrink-0 bg-red-500/15 px-1.5 py-0 text-[11px] font-medium text-red-400">
               {statusLabel}
             </span>
             {task.failureReason && (
@@ -471,7 +479,7 @@ const FailedCard = ({
           {task.prompt && <CopyPromptButton prompt={task.prompt} />}
           {onDismiss && (
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+              className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
               aria-label="Dismiss"
               onClick={(e) => {
                 e.stopPropagation();
@@ -1042,7 +1050,7 @@ export const TaskQueue = () => {
         <div>
           {inProgress.length > 0 && (
             <div className="mb-4">
-              <div className="mb-1 px-1 text-xs uppercase tracking-wide text-base-fg/50">
+              <div className="mb-1 px-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                 In Progress
               </div>
               {inProgress.map((t) => (
@@ -1057,14 +1065,14 @@ export const TaskQueue = () => {
           {failed.length > 0 && (
             <div className="mb-4">
               <div className="mb-1 flex items-center justify-between px-1">
-                <div className="text-xs font-semibold uppercase tracking-wide text-red-400/70">
+                <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-red-400/70">
                   Failed
                 </div>
                 <button
                   className="text-xs tracking-wide text-red-400/70 transition-colors hover:text-red-300"
                   onClick={() => handleClearFailed()}
                 >
-                  <XIcon  className="mr-1" />
+                  <XIcon className="mr-1" />
                   Clear failed
                 </button>
               </div>
@@ -1080,14 +1088,14 @@ export const TaskQueue = () => {
           {completed.length > 0 && (
             <div>
               <div className="mb-1 flex items-center justify-between px-1">
-                <div className="text-xs font-semibold uppercase tracking-wide text-base-fg/50">
+                <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                   Completed
                 </div>
                 <button
                   className="text-xs tracking-wide text-base-fg/50 transition-colors hover:text-base-fg/100"
                   onClick={() => handleClearCompleted()}
                 >
-                  <XIcon  className="mr-1" />
+                  <XIcon className="mr-1" />
                   Clear completed
                 </button>
               </div>
@@ -1122,23 +1130,21 @@ export const TaskQueue = () => {
       <Tooltip content="Task Queue" position="bottom" closeOnClick={true}>
         <div className="relative task-queue-trigger">
           {badgeCount > 0 && (
-            <div className="absolute -right-1 -top-1 z-20 flex h-[15px] min-w-[15px] items-center justify-center rounded-full bg-primary-400 px-1 text-[10px] font-semibold text-white ring-2 ring-[#121212]">
+            <div className="absolute -right-1 -top-1 z-20 flex h-[15px] min-w-[15px] items-center justify-center bg-white px-1 font-mono text-[10px] font-semibold text-black ring-2 ring-[#0b0b0c]">
               {badgeCount}
             </div>
           )}
           <PopoverMenu
             mode="default"
-            buttonClassName="h-8 w-8 !p-0 relative bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] text-white/80 rounded-lg shadow-none"
-            panelClassName="w-[calc(100vw-5rem)] sm:w-[400px] p-2 bg-[#1a1a1a] border border-white/[0.08] mt-2 rounded-xl"
+            buttonClassName="h-8 w-8 !p-0 relative bg-transparent hover:bg-white/10 border border-white/15 hover:border-white/30 text-white/80 rounded-[3px] shadow-none"
+            panelClassName="w-[calc(100vw-5rem)] sm:w-[400px] p-2 bg-[#101014] border border-white/15 mt-2 rounded-[3px]"
             position="bottom"
             align="end"
             triggerIcon={
               inProgressCount > 0 ? (
-                <LoaderCircleIcon
-                  
-                  className="animate-spin text-[11px]" />
+                <LoaderCircleIcon className="animate-spin text-[11px]" />
               ) : (
-                <ListChecksIcon  className="text-[11px]" />
+                <ListChecksIcon className="text-[11px]" />
               )
             }
             onOpenChange={handleOpenChange}
@@ -1175,36 +1181,36 @@ export const TaskQueue = () => {
         showClose={false}
       >
         <div className="flex h-full flex-col">
-          <div className="rounded-t-xl border-ui-panel-border bg-ui-panel">
+          <div className="border-b border-ui-panel-border bg-ui-panel">
             <div className="flex items-center justify-between p-3">
               <h2 className="text-lg font-semibold">Task Queue</h2>
               <div className="flex items-center gap-2">
                 <Button
-                  className="rounded-full flex h-9 items-center justify-center bg-green-500/10 px-3 text-green-500 hover:bg-green-500/20"
+                  className="flex h-9 items-center justify-center bg-green-500/10 px-3 text-green-500 hover:bg-green-500/20"
                   onClick={() => handleClearCompleted()}
                 >
-                  <BrushIcon  className="mr-1.5" />
+                  <BrushIcon className="mr-1.5" />
                   Clear completed
                 </Button>
                 <Button
-                  className="rounded-full flex h-9 items-center justify-center bg-orange-500/10 px-3 text-orange-500 hover:bg-orange-500/20"
+                  className="flex h-9 items-center justify-center bg-orange-500/10 px-3 text-orange-500 hover:bg-orange-500/20"
                   onClick={() => handleClearStale()}
                 >
-                  <Trash2Icon  className="mr-1.5" />
+                  <Trash2Icon className="mr-1.5" />
                   Clear stale
                 </Button>
                 <Button
-                  className="rounded-full flex h-9 items-center justify-center bg-red-500/10 px-3 text-red-400 hover:bg-red-500/20"
+                  className="flex h-9 items-center justify-center bg-red-500/10 px-3 text-red-400 hover:bg-red-500/20"
                   onClick={() => handleClearFailed()}
                 >
-                  <Trash2Icon  className="mr-1.5" />
+                  <Trash2Icon className="mr-1.5" />
                   Clear failed
                 </Button>
                 <Button
-                  className="rounded-full flex h-9 items-center justify-center bg-red-500/10 px-3 text-red-500 hover:bg-red-500/20"
+                  className="flex h-9 items-center justify-center bg-red-500/10 px-3 text-red-500 hover:bg-red-500/20"
                   onClick={() => handleRemoveAll()}
                 >
-                  <BombIcon  className="mr-1.5" />
+                  <BombIcon className="mr-1.5" />
                   Remove all
                 </Button>
                 <div className="mr-2 h-4 w-[1px] bg-base-fg/10" />
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
index b9091faf18..bbff9b7427 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
@@ -24,7 +24,7 @@ export function TopBar() {
   const showSelectToggle = showViewToggle;
 
   return (
-    <header className="sticky top-0 z-20 flex items-center gap-3 border-b border-white/[0.06] bg-[#121212]/80 backdrop-blur-md px-3 pb-4 pt-3 sm:pt-6">
+    <header className="sticky top-0 z-20 flex items-center gap-3 border-b border-white/15 bg-ui-background px-3 pb-4 pt-3 sm:pt-6">
       {/* Left: sidebar trigger (mobile only) + logo (when sidebar closed) + breadcrumbs */}
       <div className="flex items-center gap-2 min-w-0 shrink-0">
         <SidebarTrigger className="md:hidden" />
@@ -35,8 +35,8 @@ export function TopBar() {
               <img
                 src={
                   isMobile
-                    ? "/images/artcraft-icon.png"
-                    : "/images/artcraft-logo.png"
+                    ? "/images/artcraft-icon-2.png"
+                    : "/images/artcraft-logo-2.png"
                 }
                 alt="ArtCraft"
                 className={isMobile ? "h-5 w-auto" : "h-5 w-auto"}
diff --git a/frontend/apps/artcraft-webapp/src/components/ui/sheet.tsx b/frontend/apps/artcraft-webapp/src/components/ui/sheet.tsx
index 541f041a43..c754fd272a 100644
--- a/frontend/apps/artcraft-webapp/src/components/ui/sheet.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/ui/sheet.tsx
@@ -53,16 +53,16 @@ const SheetContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed z-50 flex flex-col bg-[#1F1F1F] shadow-lg transition ease-in-out",
+          "fixed z-50 flex flex-col bg-[#101014] transition ease-in-out",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300",
           side === "left" &&
-            "inset-y-0 left-0 h-full border-r border-white/[0.08] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+            "inset-y-0 left-0 h-full border-r border-white/15 data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
           side === "right" &&
-            "inset-y-0 right-0 h-full border-l border-white/[0.08] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+            "inset-y-0 right-0 h-full border-l border-white/15 data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
           side === "top" &&
-            "inset-x-0 top-0 border-b border-white/[0.08] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+            "inset-x-0 top-0 border-b border-white/15 data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
           side === "bottom" &&
-            "inset-x-0 bottom-0 border-t border-white/[0.08] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+            "inset-x-0 bottom-0 border-t border-white/15 data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
           className,
         )}
         {...props}
diff --git a/frontend/apps/artcraft-webapp/src/components/ui/sidebar.tsx b/frontend/apps/artcraft-webapp/src/components/ui/sidebar.tsx
index 75d579acf5..1401cf5535 100644
--- a/frontend/apps/artcraft-webapp/src/components/ui/sidebar.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/ui/sidebar.tsx
@@ -234,7 +234,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-30 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "fixed inset-y-0 z-30 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex bg-background",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -247,7 +247,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-[20px] group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:backdrop-blur-[7.5px] group-data-[variant=floating]:overflow-hidden group-data-[variant=floating]:shadow-[-20px_68px_20px_0px_rgba(0,0,0,0),-13px_43px_18px_0px_rgba(0,0,0,0.01),-7px_24px_15px_0px_rgba(0,0,0,0.04),-3px_11px_11px_0px_rgba(0,0,0,0.07),-1px_3px_6px_0px_rgba(0,0,0,0.08)]"
+            className="flex h-full w-full flex-col bg-sidebar rounded-[3px] group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:overflow-hidden"
           >
             {children}
           </div>
@@ -274,7 +274,7 @@ const SidebarTrigger = React.forwardRef<
         toggleSidebar();
       }}
       className={cn(
-        "inline-flex h-8 w-8 items-center justify-center rounded-lg text-white/60 hover:text-white hover:bg-white/[0.06] transition-colors",
+        "inline-flex h-8 w-8 items-center justify-center text-white/60 hover:text-white hover:bg-white/[0.06] transition-colors",
         className,
       )}
       {...props}
@@ -323,7 +323,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0",
         className,
       )}
       {...props}
@@ -397,7 +397,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/50 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center px-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-sidebar-foreground/50 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
@@ -447,7 +447,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding,background-color,color] duration-200 ease-out hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[3px] px-2 py-1.5 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding,background-color,color] duration-200 ease-out hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/frontend/apps/artcraft-webapp/src/components/ui/tooltip.tsx b/frontend/apps/artcraft-webapp/src/components/ui/tooltip.tsx
index e7dcdd5fe0..9bef58534b 100644
--- a/frontend/apps/artcraft-webapp/src/components/ui/tooltip.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/ui/tooltip.tsx
@@ -15,7 +15,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[60] overflow-hidden rounded-md bg-[#1f1f1f] border border-white/[0.08] px-2.5 py-1.5 text-xs text-white shadow-md",
+        "z-[60] overflow-hidden rounded-[3px] bg-[#101014] border border-white/15 px-2.5 py-1.5 text-xs text-white",
         "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className,
       )}
diff --git a/frontend/apps/artcraft-webapp/src/pages/checkout/cancel.tsx b/frontend/apps/artcraft-webapp/src/pages/checkout/cancel.tsx
index feb2485533..b6589d45f5 100644
--- a/frontend/apps/artcraft-webapp/src/pages/checkout/cancel.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/checkout/cancel.tsx
@@ -7,24 +7,19 @@ import Seo from "../../components/seo";
 
 const CheckoutCancel = () => {
   return (
-    <div className="relative min-h-screen overflow-hidden bg-[#101014] text-white">
+    <div className="relative min-h-screen overflow-hidden bg-ui-background text-white">
       <Seo
         title="Checkout Cancelled - ArtCraft"
         description="Your checkout was cancelled. No payment was made."
       />
 
-      {/* Background gradient - subtle/neutral */}
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
-        <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-gray-500/20 via-gray-600/10 to-gray-700/5 opacity-40 blur-[120px]"></div>
-      </div>
-
       <main className="relative z-10 pt-20 pb-20 px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
         {/* Cancel Card */}
         <div className="max-w-lg w-full">
-          <div className="bg-[#1A1A1E] border border-white/10 rounded-3xl p-8 md:p-12 text-center">
+          <div className="bg-[#101014] border border-white/15 p-8 md:p-12 text-center">
             {/* Cancel Icon */}
             <div className="mb-6">
-              <div className="w-20 h-20 mx-auto rounded-full bg-white/10 flex items-center justify-center">
+              <div className="w-20 h-20 mx-auto border border-white/15 bg-white/10 flex items-center justify-center">
                 <CircleXIcon
                   
                   className="text-5xl text-white/50" />
@@ -41,7 +36,7 @@ const CheckoutCancel = () => {
             </p>
 
             {/* Info Box */}
-            <div className="bg-[#252529] rounded-2xl p-5 mb-8 text-left">
+            <div className="bg-ui-controls border border-white/15 p-5 mb-8 text-left">
               <p className="text-white/70 text-sm">
                 <span className="text-white font-medium">
                   Changed your mind?
@@ -56,14 +51,14 @@ const CheckoutCancel = () => {
               <Button
                 as="link"
                 href="/pricing"
-                className="rounded-full bg-primary hover:bg-primary-600 px-8 py-3 text-sm font-bold rounded-xl justify-center"
+                className="px-8 py-3 justify-center"
               >
                 View Plans Again
               </Button>
             </div>
 
             {/* Discord CTA */}
-            <div className="mt-8 pt-6 border-t border-white/10 flex flex-col gap-2 items-center">
+            <div className="mt-8 pt-6 border-t border-white/15 flex flex-col gap-2 items-center">
               <div className="flex items-center justify-center gap-2 mb-2">
                 <span className="text-white/70 text-sm">
                   Need help deciding?
@@ -73,7 +68,7 @@ const CheckoutCancel = () => {
                 as="link"
                 href={SOCIAL_LINKS.DISCORD}
                 target="_blank"
-                className="rounded-full bg-white text-black hover:bg-white/80 px-4 py-2 text-sm font-bold rounded-xl justify-center border-transparent"
+                className="bg-white text-black hover:bg-white/80 px-4 py-2 justify-center border-transparent"
               >
                 <DiscordIcon />
                 Join Discord
diff --git a/frontend/apps/artcraft-webapp/src/pages/checkout/success.tsx b/frontend/apps/artcraft-webapp/src/pages/checkout/success.tsx
index 41cdf4b277..a5229f3359 100644
--- a/frontend/apps/artcraft-webapp/src/pages/checkout/success.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/checkout/success.tsx
@@ -1,4 +1,14 @@
-import { ArrowRightIcon, BoxIcon, CircleCheckIcon, DownloadIcon, ImageIcon, MonitorIcon, RocketIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
+import {
+  ArrowRightIcon,
+  BoxIcon,
+  CircleCheckIcon,
+  DownloadIcon,
+  ImageIcon,
+  MonitorIcon,
+  RocketIcon,
+  VideoIcon,
+  WandSparklesIcon,
+} from "lucide-react";
 import { DynamicIcon, DiscordIcon } from "@storyteller/icons";
 import { Button } from "@storyteller/ui-button";
 import { Link, useSearchParams } from "react-router-dom";
@@ -59,35 +69,27 @@ const CheckoutSuccess = () => {
 
   if (isCheckingOnboarding) {
     return (
-      <div className="relative min-h-screen bg-[#101014] text-white flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+      <div className="relative min-h-screen bg-ui-background text-white flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white"></div>
       </div>
     );
   }
 
   return (
-    <div className="relative min-h-full bg-[#101014] text-white">
+    <div className="relative min-h-full bg-ui-background text-white">
       <Seo
         title="Payment Successful - ArtCraft"
         description="Your ArtCraft subscription is now active. Download and start creating!"
       />
 
-      {/* Background gradient — clipped to its own wrapper so the outer
-          page can grow naturally and let SidebarInset handle scrolling. */}
-      <div className="absolute inset-0 overflow-hidden flex items-center justify-center pointer-events-none z-0">
-        <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-green-500/40 via-primary/30 to-purple-600/20 opacity-40 blur-[120px]"></div>
-      </div>
-
       <main className="relative z-10 pt-12 pb-20 px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
         {/* Success Card */}
         <div className="max-w-4xl w-full">
-          <div className="bg-[#1A1A1E] border border-white/10 rounded-3xl p-8 md:p-12 text-center">
+          <div className="bg-[#101014] border border-white/15 p-8 md:p-12 text-center">
             {/* Success Icon */}
             <div className="mb-6">
-              <div className="w-20 h-20 mx-auto rounded-full bg-green-500/20 flex items-center justify-center">
-                <CircleCheckIcon
-                  
-                  className="text-5xl text-green-400" />
+              <div className="w-20 h-20 mx-auto border border-white/15 bg-green-500/10 flex items-center justify-center">
+                <CircleCheckIcon className="text-5xl text-green-400" />
               </div>
             </div>
 
@@ -102,12 +104,10 @@ const CheckoutSuccess = () => {
             </p>
 
             {/* Start creating in the browser */}
-            <div className="bg-[#252529] rounded-2xl p-6 mb-8 text-left">
+            <div className="bg-ui-controls border border-white/15 p-6 mb-8 text-left">
               <div className="flex items-center gap-3 mb-2">
-                <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
-                  <WandSparklesIcon
-                    
-                    className="text-primary text-sm" />
+                <div className="w-8 h-8 bg-white/10 flex items-center justify-center">
+                  <WandSparklesIcon className="text-white/70 text-sm" />
                 </div>
                 <h2 className="text-lg font-medium text-white">
                   Start creating right here
@@ -130,30 +130,26 @@ const CheckoutSuccess = () => {
                   <Link
                     key={item.to}
                     to={item.to}
-                    className="group flex items-center gap-3 bg-[#1A1A1E] hover:bg-[#222227] border border-white/[0.06] hover:border-white/[0.12] rounded-xl px-4 py-3 transition-all"
+                    className="group flex items-center gap-3 rounded-[3px] bg-ui-background hover:bg-white/10 border border-white/15 hover:border-white/30 px-4 py-3 transition-all"
                   >
                     <DynamicIcon
                       icon={item.icon}
-                      className="text-primary text-base shrink-0"
+                      className="text-white/70 text-base shrink-0"
                     />
                     <span className="text-white/90 font-medium flex-1">
                       {item.label}
                     </span>
-                    <ArrowRightIcon
-                      
-                      className="text-white/30 text-[11px] transition-transform group-hover:translate-x-0.5" />
+                    <ArrowRightIcon className="text-white/30 text-[11px] transition-transform group-hover:translate-x-0.5" />
                   </Link>
                 ))}
               </div>
             </div>
 
             {/* Next Steps */}
-            <div className="bg-[#252529] rounded-2xl p-6 mb-8 text-left">
+            <div className="bg-ui-controls border border-white/15 p-6 mb-8 text-left">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
-                  <RocketIcon
-                    
-                    className="text-primary text-sm" />
+                <div className="w-8 h-8 bg-white/10 flex items-center justify-center">
+                  <RocketIcon className="text-white/70 text-sm" />
                 </div>
                 <h2 className="text-lg font-medium text-white">Next Steps</h2>
               </div>
@@ -166,7 +162,7 @@ const CheckoutSuccess = () => {
                   "Start creating with all premium features!",
                 ].map((step, idx) => (
                   <div key={idx} className="flex items-start gap-3">
-                    <div className="w-6 h-6 shrink-0 rounded-full bg-primary/50 flex items-center justify-center text-xs font-bold text-white mt-0.5">
+                    <div className="w-6 h-6 shrink-0 bg-white/10 border border-white/15 flex items-center justify-center font-mono text-[11px] font-semibold text-white mt-0.5">
                       {idx + 1}
                     </div>
                     <span className="text-white/80">{step}</span>
@@ -181,16 +177,16 @@ const CheckoutSuccess = () => {
                 <Button
                   as="link"
                   href={downloadUrl}
-                  className="rounded-full bg-primary hover:bg-primary-600 px-8 py-3 text-sm font-bold rounded-xl justify-center"
+                  className="px-8 py-3 justify-center"
                 >
-                  <DownloadIcon  className="mr-2" />
+                  <DownloadIcon className="mr-2" />
                   Download ArtCraft
                 </Button>
               </div>
             ) : (
-              <div className="bg-[#431407] border border-orange-900/50 rounded-2xl p-6 text-orange-200 text-sm leading-relaxed">
+              <div className="bg-[#431407] border border-orange-900/50 p-6 text-orange-200 text-sm leading-relaxed">
                 <div className="flex items-center justify-center mb-3 text-orange-400">
-                  <MonitorIcon  className="text-2xl" />
+                  <MonitorIcon className="text-2xl" />
                 </div>
                 ArtCraft is a desktop application. <br />
                 Please head to your computer to download and start creating.
@@ -204,21 +200,21 @@ const CheckoutSuccess = () => {
                   href={DOWNLOAD_LINKS.WINDOWS}
                   className="hover:text-white transition-colors flex items-center gap-2"
                 >
-                  <span className="w-1.5 h-1.5 rounded-full bg-current"></span>
+                  <span className="w-1.5 h-1.5 bg-current"></span>
                   Windows
                 </a>
                 <a
                   href={DOWNLOAD_LINKS.MACOS}
                   className="hover:text-white transition-colors flex items-center gap-2"
                 >
-                  <span className="w-1.5 h-1.5 rounded-full bg-current"></span>
+                  <span className="w-1.5 h-1.5 bg-current"></span>
                   Mac
                 </a>
               </div>
             )}
 
             {/* Discord CTA */}
-            <div className="mt-8 pt-6 border-t border-white/10 flex flex-col gap-2 items-center">
+            <div className="mt-8 pt-6 border-t border-white/15 flex flex-col gap-2 items-center">
               <div className="flex items-center justify-center gap-2 mb-2">
                 <span className="text-white/70 text-sm">
                   Join our community
@@ -228,7 +224,7 @@ const CheckoutSuccess = () => {
                 as="link"
                 href={SOCIAL_LINKS.DISCORD}
                 target="_blank"
-                className="rounded-full bg-white text-black hover:bg-white/80 px-4 py-2 text-sm font-bold rounded-xl justify-center border-transparent"
+                className="bg-white text-black hover:bg-white/80 px-4 py-2 justify-center border-transparent"
               >
                 <DiscordIcon />
                 Join Discord
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-audio/create-audio.tsx b/frontend/apps/artcraft-webapp/src/pages/create-audio/create-audio.tsx
index 2950fc7112..b393c4acd7 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-audio/create-audio.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-audio/create-audio.tsx
@@ -77,6 +77,16 @@ const AUDIO_REF_MAX_DURATION_SECONDS = 600;
 
 const supports = (flag: boolean | null | undefined): boolean => flag === true;
 
+// The lib ToggleButton still carries the old glassy look (2px transparent
+// border, grey translucent blur). These overrides align the audio toggles
+// with their sibling toolbar controls (the PopoverMenu triggers): flat
+// ui-controls surface, 1px hairline border, 4px corners. Active keeps the
+// brand tint as the on-state affordance.
+const toolbarToggleClassName = (isActive: boolean): string =>
+  isActive
+    ? "rounded-[3px] border border-ui-controls-border backdrop-blur-none hover:border-ui-controls-border"
+    : "rounded-[3px] border border-ui-controls-border bg-ui-controls backdrop-blur-none hover:bg-ui-controls/80";
+
 // Store API model data alongside popover items via a lookup map
 let _modelLookup = new Map<string, OmniGenAudioModelDetails>();
 
@@ -490,6 +500,7 @@ export default function CreateAudio() {
             icon={MicOffIcon}
             activeIcon={MicOffIcon}
             label="Instrumental"
+            className={toolbarToggleClassName(ui.isInstrumental)}
             onClick={() => setUi({ isInstrumental: !ui.isInstrumental })}
           />
         </Tooltip>
@@ -506,6 +517,7 @@ export default function CreateAudio() {
             icon={MicIcon}
             activeIcon={MicIcon}
             label="Keep lyrics"
+            className={toolbarToggleClassName(ui.keepLyrics)}
             onClick={() => setUi({ keepLyrics: !ui.keepLyrics })}
           />
         </Tooltip>
@@ -522,6 +534,7 @@ export default function CreateAudio() {
             icon={RepeatIcon}
             activeIcon={RepeatIcon}
             label="Loop"
+            className={toolbarToggleClassName(ui.isLoopable)}
             onClick={() => setUi({ isLoopable: !ui.isLoopable })}
           />
         </Tooltip>
@@ -630,7 +643,7 @@ export default function CreateAudio() {
       settingsFields={
         <>
           {styleSupported && (
-            <div className="rounded-xl border border-ui-panel-border bg-ui-controls px-3 py-1.5">
+            <div className="rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-1.5">
               <StylePromptRow
                 value={ui.stylePrompt}
                 onChange={setStylePrompt}
@@ -774,7 +787,7 @@ export default function CreateAudio() {
             variant="primary"
             onClick={openSignupCta}
             icon={SparklesIcon}
-            className="h-12 px-6 text-base font-semibold rounded-full"
+            className="h-12 px-6"
           >
             Sign up to create
           </Button>
@@ -953,7 +966,7 @@ function MobileSliderRow({
           <button
             type="button"
             onClick={onReset}
-            className="rounded bg-white/5 px-2 py-0.5 text-xs font-medium text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
+            className="bg-white/5 px-2 py-0.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
           >
             Auto
           </button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-image/components/AspectRatioIcon.tsx b/frontend/apps/artcraft-webapp/src/pages/create-image/components/AspectRatioIcon.tsx
index 67f27b42ff..7cea5b1c91 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-image/components/AspectRatioIcon.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-image/components/AspectRatioIcon.tsx
@@ -37,7 +37,6 @@ export const AspectRatioIcon = ({
         y={y}
         width={w}
         height={h}
-        rx={1.5}
         stroke="currentColor"
         strokeWidth={1.5}
       />
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx b/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
index dbf84b40d8..0bea67c8d3 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
@@ -680,7 +680,7 @@ export default function CreateImage() {
             variant="primary"
             onClick={openSignupCta}
             icon={SparklesIcon}
-            className="h-12 px-6 text-base font-semibold rounded-full"
+            className="h-12 px-6"
           >
             Sign up to create
           </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-object/components/MeshInputsRow.tsx b/frontend/apps/artcraft-webapp/src/pages/create-object/components/MeshInputsRow.tsx
index 2d111bc7e5..2ce457b350 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-object/components/MeshInputsRow.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-object/components/MeshInputsRow.tsx
@@ -2,7 +2,11 @@ import { useRef, useState } from "react";
 import { BoxIcon, ImageIcon, LoaderCircleIcon, XIcon } from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { AddButton, type RefImage } from "../../../components/prompt-box";
-import { MESH_FILE_ACCEPT, uploadMeshFile, uploadViewImage } from "./mesh-upload";
+import {
+  MESH_FILE_ACCEPT,
+  uploadMeshFile,
+  uploadViewImage,
+} from "./mesh-upload";
 
 // Multi-view side inputs (front/back/left/right) and the mesh-to-mesh input
 // file — the mobile form band. The desktop prompt box renders the same store
@@ -53,59 +57,61 @@ export function MeshInputsRow({
   return (
     // Title on the left, upload slots right-aligned + top-aligned (matches
     // ImagePromptRow).
-    <div className="glass flex items-start gap-3 rounded-2xl px-3 py-2">
+    <div className="glass flex items-start gap-3 px-3 py-2">
       <div className="flex grow flex-col gap-1 min-w-32">
         <div className="flex items-center gap-2 text-white/90">
           <DynamicIcon icon={titleIcon} className="h-3.5 w-3.5" />
-          <span className="text-sm font-medium">{title}</span>
+          <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            {title}
+          </span>
         </div>
         <span className="text-[13px] text-white/60">{subtitle}</span>
       </div>
       <div className="flex flex-wrap items-end justify-end gap-3">
         {showMultiView && (
-        <>
-          <ImageSlot
-            label="Front"
-            image={frontImage}
-            onChange={(img) => onChange({ frontImage: img })}
-            onPickFromLibrary={
-              onPickSlotFromLibrary
-                ? () => onPickSlotFromLibrary("front")
-                : undefined
-            }
-          />
-          <ImageSlot
-            label="Back"
-            image={backImage}
-            onChange={(img) => onChange({ backImage: img })}
-            onPickFromLibrary={
-              onPickSlotFromLibrary
-                ? () => onPickSlotFromLibrary("back")
-                : undefined
-            }
-          />
-          <ImageSlot
-            label="Left"
-            image={leftImage}
-            onChange={(img) => onChange({ leftImage: img })}
-            onPickFromLibrary={
-              onPickSlotFromLibrary
-                ? () => onPickSlotFromLibrary("left")
-                : undefined
-            }
-          />
-          <ImageSlot
-            label="Right"
-            image={rightImage}
-            onChange={(img) => onChange({ rightImage: img })}
-            onPickFromLibrary={
-              onPickSlotFromLibrary
-                ? () => onPickSlotFromLibrary("right")
-                : undefined
-            }
-          />
-        </>
-      )}
+          <>
+            <ImageSlot
+              label="Front"
+              image={frontImage}
+              onChange={(img) => onChange({ frontImage: img })}
+              onPickFromLibrary={
+                onPickSlotFromLibrary
+                  ? () => onPickSlotFromLibrary("front")
+                  : undefined
+              }
+            />
+            <ImageSlot
+              label="Back"
+              image={backImage}
+              onChange={(img) => onChange({ backImage: img })}
+              onPickFromLibrary={
+                onPickSlotFromLibrary
+                  ? () => onPickSlotFromLibrary("back")
+                  : undefined
+              }
+            />
+            <ImageSlot
+              label="Left"
+              image={leftImage}
+              onChange={(img) => onChange({ leftImage: img })}
+              onPickFromLibrary={
+                onPickSlotFromLibrary
+                  ? () => onPickSlotFromLibrary("left")
+                  : undefined
+              }
+            />
+            <ImageSlot
+              label="Right"
+              image={rightImage}
+              onChange={(img) => onChange({ rightImage: img })}
+              onPickFromLibrary={
+                onPickSlotFromLibrary
+                  ? () => onPickSlotFromLibrary("right")
+                  : undefined
+              }
+            />
+          </>
+        )}
         {showMeshInput && (
           <MeshFileSlot
             mesh={inputMesh}
@@ -120,7 +126,7 @@ export function MeshInputsRow({
 // ── Slots ──────────────────────────────────────────────────────────────────
 
 const SLOT_CLASS =
-  "flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
+  "flex aspect-square w-14 items-center justify-center overflow-hidden rounded-[3px] border border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
 
 function SlotShell({
   label,
@@ -132,7 +138,9 @@ function SlotShell({
   return (
     <div className="flex flex-col items-center gap-1">
       {children}
-      <span className="text-[11px] text-white/60">{label}</span>
+      <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-white/60">
+        {label}
+      </span>
     </div>
   );
 }
@@ -171,7 +179,7 @@ function ImageSlot({
         onChange={handleUpload}
       />
       {image ? (
-        <div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30">
+        <div className="group relative aspect-square w-14 overflow-hidden rounded-[3px] border border-white/30">
           <img
             src={image.url}
             alt={`${label} view`}
@@ -179,17 +187,14 @@ function ImageSlot({
           />
           <button
             onClick={() => onChange(undefined)}
-            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-md transition-colors hover:bg-black"
+            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center bg-black/50 text-white transition-colors hover:bg-black"
           >
-            <XIcon  className="h-2.5 w-2.5" />
+            <XIcon className="h-2.5 w-2.5" />
           </button>
         </div>
       ) : uploading ? (
         <div className={SLOT_CLASS}>
-          <LoaderCircleIcon
-            
-            spin
-            className="h-5 w-5 text-white" />
+          <LoaderCircleIcon spin className="h-5 w-5 text-white" />
         </div>
       ) : (
         <AddButton
@@ -231,28 +236,25 @@ function MeshFileSlot({
         onChange={handleUpload}
       />
       {mesh ? (
-        <div className="group relative flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/10">
-          <BoxIcon  className="h-5 w-5 text-white/80" />
+        <div className="group relative flex aspect-square w-14 items-center justify-center overflow-hidden rounded-[3px] border border-white/30 bg-white/10">
+          <BoxIcon className="h-5 w-5 text-white/80" />
           <button
             onClick={() => onChange(undefined)}
-            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-md transition-colors hover:bg-black"
+            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center bg-black/50 text-white transition-colors hover:bg-black"
           >
-            <XIcon  className="h-2.5 w-2.5" />
+            <XIcon className="h-2.5 w-2.5" />
           </button>
         </div>
       ) : uploading ? (
         <div className={SLOT_CLASS}>
-          <LoaderCircleIcon
-            
-            spin
-            className="h-5 w-5 text-white" />
+          <LoaderCircleIcon spin className="h-5 w-5 text-white" />
         </div>
       ) : (
         <button
           onClick={() => inputRef.current?.click()}
           className={SLOT_CLASS}
         >
-          <BoxIcon  className="text-xl text-white/80" />
+          <BoxIcon className="text-xl text-white/80" />
         </button>
       )}
     </SlotShell>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-object/create-object.tsx b/frontend/apps/artcraft-webapp/src/pages/create-object/create-object.tsx
index ea39d2c14e..bf2b424a44 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-object/create-object.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-object/create-object.tsx
@@ -625,7 +625,7 @@ export default function CreateObject() {
             variant="primary"
             onClick={openSignupCta}
             icon={SparklesIcon}
-            className="h-12 px-6 text-base font-semibold rounded-full"
+            className="h-12 px-6"
           >
             Sign up to create
           </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-vfx/create-vfx.tsx b/frontend/apps/artcraft-webapp/src/pages/create-vfx/create-vfx.tsx
index f771215f68..9c2e3abd1f 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-vfx/create-vfx.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-vfx/create-vfx.tsx
@@ -247,16 +247,16 @@ export default function CreateVFX() {
 
   if (!authChecked) {
     return (
-      <div className="flex h-screen items-center justify-center bg-[#101014]">
+      <div className="flex h-screen items-center justify-center bg-ui-background">
         <LoaderCircleIcon
-          
+
           className="animate-spin text-4xl text-primary/80" />
       </div>
     );
   }
 
   return (
-    <div className="relative h-full w-full bg-[#101014] text-white">
+    <div className="relative h-full w-full bg-ui-background text-white">
       <Seo
         title="Background Change - ArtCraft"
         description="Swap the backdrop of a video using a reference image."
@@ -304,7 +304,7 @@ export default function CreateVFX() {
 
       <div
         aria-hidden
-        className="pointer-events-none fixed bottom-0 right-0 z-20 h-72 bg-gradient-to-t from-[#101014] via-[#101014]/85 to-transparent transition-[left] duration-200 ease-linear"
+        className="pointer-events-none fixed bottom-0 right-0 z-20 h-72 bg-gradient-to-t from-ui-background via-ui-background/85 to-transparent transition-[left] duration-200 ease-linear"
         style={{ left: "var(--ac-sidebar-offset, 0px)" }}
       />
 
@@ -338,7 +338,7 @@ interface EmptyStateProps {
 
 const EmptyState = ({ title, subtitle }: EmptyStateProps) => (
   <div className="flex max-w-md flex-col items-center gap-4 text-center">
-    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/5 ring-1 ring-white/10">
+    <div className="flex h-12 w-12 items-center justify-center border border-white/15 bg-white/5">
       <SparklesIcon  className="text-2xl text-white/40" />
     </div>
     <h3 className="text-2xl font-bold text-white">{title}</h3>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx b/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
index 0e9a73c43c..f238b7e58a 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { AudioLinesIcon, ClockIcon, InfoIcon, SparklesIcon } from "lucide-react";
+import {
+  AudioLinesIcon,
+  ClockIcon,
+  InfoIcon,
+  SparklesIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { CharactersApi, FilterMediaClasses } from "@storyteller/api";
 import type { OmniGenVideoModelInfo } from "@storyteller/api";
@@ -1487,10 +1492,8 @@ export default function CreateVideo() {
       autoAdvance={loggedIn && !!prompt.trim() && !isGenerating && !needsImage}
       banner={
         requiresImageInput ? (
-          <div className="flex items-start gap-2.5 rounded-lg border border-amber-500/40 bg-amber-900/80 px-3.5 py-2.5 text-xs text-amber-100">
-            <InfoIcon
-              
-              className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
+          <div className="flex items-start gap-2.5 border border-amber-500/40 bg-ui-panel px-3.5 py-2.5 text-xs text-amber-100">
+            <InfoIcon className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
             <span>
               This model can&apos;t generate from text alone — add a starting
               frame to animate your prompt.
@@ -1506,13 +1509,13 @@ export default function CreateVideo() {
                 key={item.label}
                 type="button"
                 onClick={() => handleInputModeChange(item)}
-                className={`rounded-xl border px-3 py-2.5 text-left transition-colors ${
+                className={`border px-3 py-2.5 text-left transition-colors ${
                   item.selected
-                    ? "border-primary bg-primary/15"
+                    ? "border-white bg-white/10"
                     : "border-ui-panel-border bg-ui-controls hover:bg-ui-controls/80"
                 }`}
               >
-                <span className="block text-sm font-semibold text-base-fg">
+                <span className="block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg">
                   {item.label}
                 </span>
                 <span className="block text-xs text-base-fg/55">
@@ -1566,9 +1569,9 @@ export default function CreateVideo() {
             />
           )}
           {hasSound && (
-            <div className="flex items-center justify-between rounded-xl border border-ui-panel-border bg-ui-controls px-3.5 py-2.5">
+            <div className="flex items-center justify-between rounded-[3px] border border-ui-panel-border bg-ui-controls px-3.5 py-2.5">
               <span className="flex items-center gap-2 text-sm font-medium text-base-fg/70">
-                <AudioLinesIcon  className="h-4 w-4" />
+                <AudioLinesIcon className="h-4 w-4" />
                 Audio
               </span>
               <ToggleButton
@@ -1584,7 +1587,7 @@ export default function CreateVideo() {
             <>
               <MobileFieldButton
                 label="Output"
-                icon={<ClockIcon  className="h-4 w-4" />}
+                icon={<ClockIcon className="h-4 w-4" />}
                 value={outputSummary}
                 onClick={() => setIsOutputDrawerOpen(true)}
               />
@@ -1653,7 +1656,7 @@ export default function CreateVideo() {
           <button
             type="button"
             onClick={() => setIsCharactersModalOpen(true)}
-            className="flex h-11 items-center justify-center gap-1 rounded-xl border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg transition-all hover:bg-ui-controls/80 active:scale-95"
+            className="flex h-11 items-center justify-center gap-1 border border-ui-controls-border bg-ui-controls px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors hover:bg-ui-controls/80"
           >
             @Characters
           </button>
@@ -1664,14 +1667,6 @@ export default function CreateVideo() {
 
   // ── Render ────────────────────────────────────────────────────────────
 
-  const videoGlowOrbs = (
-    <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
-      <div className="absolute left-1/2 top-[-10%] h-[700px] w-[700px] -translate-x-1/2 rounded-full bg-gradient-to-br from-blue-700 via-blue-500 to-[#00AABA] opacity-[0.12] blur-[120px] transform-gpu" />
-      <div className="absolute bottom-[-15%] left-[-10%] h-[500px] w-[500px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-purple-600 opacity-[0.08] blur-[120px] transform-gpu" />
-      <div className="absolute bottom-[10%] right-[-10%] h-[400px] w-[400px] rounded-full bg-gradient-to-br from-blue-600 to-pink-500 opacity-[0.06] blur-[140px] transform-gpu" />
-    </div>
-  );
-
   return (
     <CreateMediaPageShell
       title="Create Video - ArtCraft"
@@ -1688,7 +1683,7 @@ export default function CreateVideo() {
             variant="primary"
             onClick={openSignupCta}
             icon={SparklesIcon}
-            className="h-12 px-6 text-base font-semibold rounded-full"
+            className="h-12 px-6"
           >
             Sign up to create
           </Button>
@@ -1697,7 +1692,6 @@ export default function CreateVideo() {
       bottomOffset={promptHeight + 24}
       modelItems={modelItems}
       onModelChange={handleModelChange}
-      glowOrbs={videoGlowOrbs}
       promptForm={mobileForm}
       gridContent={
         <GenerationGallery
@@ -1726,7 +1720,7 @@ export default function CreateVideo() {
           }}
         >
           {/* {selectedModel?.model === "seedance_2p0" && (
-            <div className="mb-2 flex items-start gap-2.5 rounded-lg border border-yellow-500/40 px-3.5 py-2.5 text-xs text-yellow-200 shadow-lg backdrop-blur-xl bg-yellow-800/60">
+            <div className="mb-2 flex items-start gap-2.5 border border-yellow-500/40 bg-ui-panel px-3.5 py-2.5 text-xs text-yellow-200">
               <TriangleAlertIcon className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-yellow-400" />
               <span>
                 Seedance 2.0 is in Early Alpha. Generations may be slow and may experience outages.
@@ -1735,10 +1729,8 @@ export default function CreateVideo() {
             </div>
           )} */}
           {requiresImageInput && (
-            <div className="mb-2 flex items-start gap-2.5 rounded-lg border border-amber-500/40 bg-amber-900/80 px-3.5 py-2.5 text-xs text-amber-100 shadow-lg backdrop-blur-sm">
-              <InfoIcon
-                
-                className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
+            <div className="mb-2 flex items-start gap-2.5 border border-amber-500/40 bg-ui-panel px-3.5 py-2.5 text-xs text-amber-100">
+              <InfoIcon className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
               <span>
                 This model can&apos;t generate from text alone — add a starting
                 frame to animate your prompt.
@@ -1900,11 +1892,7 @@ export default function CreateVideo() {
                     <PopoverMenu
                       mode="default"
                       panelTitle="Duration"
-                      triggerIcon={
-                        <ClockIcon
-                          
-                          className="h-3.5 w-3.5" />
-                      }
+                      triggerIcon={<ClockIcon className="h-3.5 w-3.5" />}
                       triggerLabel={`${effectiveDuration}s`}
                     >
                       <div className="w-[min(16rem,calc(100vw-2rem))] pb-0.5">
@@ -1948,7 +1936,7 @@ export default function CreateVideo() {
                       }
                       className={
                         generateWithSound
-                          ? "bg-primary/40 hover:bg-primary/50 border-primary/30"
+                          ? "bg-white/10 hover:bg-white/15 border-white/40"
                           : undefined
                       }
                     />
@@ -1973,7 +1961,7 @@ export default function CreateVideo() {
                   <button
                     type="button"
                     onClick={() => setIsCharactersModalOpen(true)}
-                    className="flex h-9 items-center justify-center gap-1 rounded-lg border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg shadow-sm transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
+                    className="flex h-9 items-center justify-center gap-1 border border-ui-controls-border bg-ui-controls px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors duration-150 hover:bg-ui-controls/80"
                   >
                     @Characters
                   </button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-world/components/ReferenceVideoSlot.tsx b/frontend/apps/artcraft-webapp/src/pages/create-world/components/ReferenceVideoSlot.tsx
index 7b03117aa5..3e1707cf1a 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-world/components/ReferenceVideoSlot.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-world/components/ReferenceVideoSlot.tsx
@@ -11,7 +11,7 @@ import type { RefVideo } from "../../../components/prompt-box";
 // the desktop prompt box renders the same ref in its reference deck).
 
 const SLOT_CLASS =
-  "flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
+  "flex aspect-square w-14 items-center justify-center overflow-hidden rounded-[3px] border border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10";
 
 export function ReferenceVideoSlot({
   video,
@@ -62,13 +62,17 @@ export function ReferenceVideoSlot({
   return (
     // Title on the left, upload slot right-aligned + top-aligned (matches
     // ImagePromptRow).
-    <div className="glass flex items-start gap-3 rounded-2xl px-3 py-2">
+    <div className="glass flex items-start gap-3 px-3 py-2">
       <div className="flex grow flex-col gap-1 min-w-32">
         <div className="flex items-center gap-2 text-white/90">
-          <VideoIcon  className="h-3.5 w-3.5" />
-          <span className="text-sm font-medium">Reference video</span>
+          <VideoIcon className="h-3.5 w-3.5" />
+          <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+            Reference video
+          </span>
         </div>
-        <span className="text-[13px] text-white/60">Guide the world (optional)</span>
+        <span className="text-[13px] text-white/60">
+          Guide the world (optional)
+        </span>
       </div>
       <input
         type="file"
@@ -78,7 +82,7 @@ export function ReferenceVideoSlot({
         onChange={handleUpload}
       />
       {video ? (
-        <div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30">
+        <div className="group relative aspect-square w-14 overflow-hidden rounded-[3px] border border-white/30">
           <video
             src={video.url}
             muted
@@ -87,9 +91,9 @@ export function ReferenceVideoSlot({
           />
           <button
             onClick={handleRemove}
-            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-md transition-colors hover:bg-black"
+            className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center bg-black/50 text-white transition-colors hover:bg-black"
           >
-            <XIcon  className="h-2.5 w-2.5" />
+            <XIcon className="h-2.5 w-2.5" />
           </button>
         </div>
       ) : uploading ? (
@@ -97,8 +101,11 @@ export function ReferenceVideoSlot({
           <LoaderCircleIcon className="h-5 w-5 animate-spin text-white" />
         </div>
       ) : (
-        <button onClick={() => inputRef.current?.click()} className={SLOT_CLASS}>
-          <PlusIcon  className="text-xl text-white/80" />
+        <button
+          onClick={() => inputRef.current?.click()}
+          className={SLOT_CLASS}
+        >
+          <PlusIcon className="text-xl text-white/80" />
         </button>
       )}
     </div>
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-world/create-world.tsx b/frontend/apps/artcraft-webapp/src/pages/create-world/create-world.tsx
index 3eb7ab4d71..240c8d2360 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-world/create-world.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-world/create-world.tsx
@@ -478,7 +478,7 @@ export default function CreateWorld() {
             variant="primary"
             onClick={openSignupCta}
             icon={SparklesIcon}
-            className="h-12 px-6 text-base font-semibold rounded-full"
+            className="h-12 px-6"
           >
             Sign up to create
           </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx b/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
index 2b2f4ba769..0e2f9c6db3 100644
--- a/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
@@ -41,22 +41,14 @@ const ForgotPassword = () => {
   };
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+    <div className="relative min-h-screen bg-ui-background text-white overflow-hidden flex flex-col">
       <Seo
         title="Reset Password - ArtCraft"
         description="Reset your ArtCraft password."
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
 
       <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
+        <div className="w-full max-w-md bg-[#101014] border border-white/15 p-6 py-8">
           {!submitted ? (
             <>
               <div className="text-center mb-8">
@@ -80,13 +72,13 @@ const ForgotPassword = () => {
                 }}
               >
                 {error && (
-                  <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+                  <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
                     {error}
                   </div>
                 )}
 
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     Email or Username
                   </label>
                   <Input
@@ -95,21 +87,19 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="you@example.com"
-                    inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                   />
                 </div>
 
                 <div className="pt-2">
                   <Button
                     id="send-reset-btn"
-                    className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                    className="w-full justify-center h-10"
                     type="submit"
                     disabled={isLoading}
                   >
                     {isLoading ? (
-                      <LoaderCircleIcon
-                        
-                        className="animate-spin" />
+                      <LoaderCircleIcon className="animate-spin" />
                     ) : (
                       "Send Reset Code"
                     )}
@@ -119,8 +109,8 @@ const ForgotPassword = () => {
             </>
           ) : (
             <div className="text-center py-8">
-              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500">
-                <MailIcon  className="text-2xl" />
+              <div className="w-16 h-16 border border-white/15 bg-green-500/10 flex items-center justify-center mx-auto mb-4 text-green-500">
+                <MailIcon className="text-2xl" />
               </div>
               <h3 className="text-xl font-medium mb-2">Check your email</h3>
               <p className="text-white/60 text-sm mb-6">
@@ -128,12 +118,12 @@ const ForgotPassword = () => {
                 <span className="text-white font-medium">{email}</span>
               </p>
               <Link to="/forgot-password/verify">
-                <Button className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10 mb-3">
+                <Button className="w-full justify-center h-10 mb-3">
                   Enter Verification Code
                 </Button>
               </Link>
               <Button
-                className="rounded-full w-full bg-white/10 hover:bg-white/20 text-white border-none justify-center font-bold h-10"
+                className="w-full bg-transparent border border-white/15 hover:bg-white/10 text-white justify-center h-10"
                 onClick={() => setSubmitted(false)}
               >
                 Try another email
diff --git a/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx b/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
index 981b169730..a66495eec5 100644
--- a/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
@@ -1,4 +1,10 @@
-import { ArrowLeftIcon, CircleCheckIcon, EyeIcon, EyeOffIcon, LoaderCircleIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  CircleCheckIcon,
+  EyeIcon,
+  EyeOffIcon,
+  LoaderCircleIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
@@ -96,22 +102,14 @@ const VerifyReset = () => {
   };
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+    <div className="relative min-h-screen bg-ui-background text-white overflow-hidden flex flex-col">
       <Seo
         title="Verify Password Reset - ArtCraft"
         description="Enter your verification code and new password."
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
 
       <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
+        <div className="w-full max-w-md bg-[#101014] border border-white/15 p-6 py-8">
           {!success ? (
             <>
               <div className="text-center mb-8">
@@ -137,14 +135,14 @@ const VerifyReset = () => {
                 }}
               >
                 {error && (
-                  <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+                  <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
                     {error}
                   </div>
                 )}
 
                 {/* Verification Code */}
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     Verification Code
                   </label>
                   <Input
@@ -154,7 +152,7 @@ const VerifyReset = () => {
                     onChange={(e) => setVerificationCode(e.target.value)}
                     placeholder="Enter verification code"
                     isError={!!fieldErrors.verificationCode}
-                    inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                   />
                   {fieldErrors.verificationCode && (
                     <p className="text-red-400 text-xs ml-1">
@@ -165,7 +163,7 @@ const VerifyReset = () => {
 
                 {/* New Password */}
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     New Password
                   </label>
                   <div className="relative">
@@ -176,7 +174,7 @@ const VerifyReset = () => {
                       onChange={(e) => setNewPassword(e.target.value)}
                       placeholder="Enter new password"
                       isError={!!fieldErrors.newPassword}
-                      inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                      inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                     />
                     <button
                       type="button"
@@ -197,7 +195,7 @@ const VerifyReset = () => {
 
                 {/* Verify New Password */}
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     Verify New Password
                   </label>
                   <div className="relative">
@@ -208,7 +206,7 @@ const VerifyReset = () => {
                       onChange={(e) => setConfirmPassword(e.target.value)}
                       placeholder="Enter new password again"
                       isError={!!fieldErrors.confirmPassword}
-                      inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                      inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                     />
                     <button
                       type="button"
@@ -232,14 +230,12 @@ const VerifyReset = () => {
                 <div className="pt-2">
                   <Button
                     id="change-password-btn"
-                    className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                    className="w-full justify-center h-10"
                     type="submit"
                     disabled={isLoading}
                   >
                     {isLoading ? (
-                      <LoaderCircleIcon
-                        
-                        className="animate-spin" />
+                      <LoaderCircleIcon className="animate-spin" />
                     ) : (
                       "Change Password"
                     )}
@@ -259,8 +255,8 @@ const VerifyReset = () => {
           ) : (
             <>
               <div className="text-center py-8">
-                <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500">
-                  <CircleCheckIcon  className="text-2xl" />
+                <div className="w-16 h-16 border border-white/15 bg-green-500/10 flex items-center justify-center mx-auto mb-4 text-green-500">
+                  <CircleCheckIcon className="text-2xl" />
                 </div>
                 <h3 className="text-xl font-medium mb-2">
                   Password Reset Successfully
@@ -271,7 +267,7 @@ const VerifyReset = () => {
                 </p>
                 <Button
                   id="back-to-homepage-btn"
-                  className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                  className="w-full justify-center h-10"
                   onClick={() => navigate(redirectTo)}
                 >
                   {redirectLabel}
diff --git a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/extraction-panel.tsx b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/extraction-panel.tsx
index d6182f52f0..df3fca8ed2 100644
--- a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/extraction-panel.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/extraction-panel.tsx
@@ -43,9 +43,9 @@ export const ExtractionPanel = ({
   const burstAvailable = Number.isFinite(duration) && duration > 0;
 
   return (
-    <div className="flex h-fit flex-col divide-y divide-ui-divider rounded-xl border border-ui-panel-border bg-ui-panel">
+    <div className="flex h-fit flex-col divide-y divide-ui-divider border border-ui-panel-border bg-ui-panel">
       <div className="space-y-3 p-4">
-        <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-wider text-base-fg/50">
+        <div className="flex items-center justify-between font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
           <span>Playhead</span>
           <span className="font-mono text-xs normal-case tracking-normal text-base-fg/80">
             {disabled ? "--:--.---" : formatTimePrecise(currentTime)}
@@ -56,7 +56,7 @@ export const ExtractionPanel = ({
           icon={CameraIcon}
           onClick={onCaptureCurrent}
           disabled={disabled || isExtracting}
-          className="w-full py-2 text-sm font-medium"
+          className="w-full py-2"
         >
           Capture frame
         </Button>
@@ -72,14 +72,12 @@ export const ExtractionPanel = ({
           className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-base-fg/75 transition-colors hover:text-base-fg disabled:cursor-default disabled:opacity-40"
         >
           <span className="flex items-center gap-2">
-            <LayersIcon
-              
-              className="text-xs text-base-fg/40" />
+            <LayersIcon className="text-xs text-base-fg/40" />
             Burst capture
           </span>
           <ChevronDownIcon
-            
-            className={`text-xs text-base-fg/40 transition-transform ${burstOpen ? "rotate-180" : ""}`} />
+            className={`text-xs text-base-fg/40 transition-transform ${burstOpen ? "rotate-180" : ""}`}
+          />
         </button>
         <AnimatePresence initial={false}>
           {burstOpen && !disabled && burstAvailable && (
@@ -108,10 +106,13 @@ export const ExtractionPanel = ({
                       disabled={isExtracting}
                       onChange={(e) =>
                         onNumFramesChange(
-                          Math.max(1, Math.min(50, parseInt(e.target.value) || 1)),
+                          Math.max(
+                            1,
+                            Math.min(50, parseInt(e.target.value) || 1),
+                          ),
                         )
                       }
-                      className="w-full rounded-md border border-ui-controls-border bg-ui-controls px-2.5 py-1.5 text-sm text-base-fg focus:border-primary focus:outline-none"
+                      className="w-full border border-ui-controls-border bg-ui-controls px-2.5 py-1.5 text-sm text-base-fg focus:border-white/40 focus:outline-none"
                     />
                   </label>
                   <label className="block">
@@ -126,18 +127,21 @@ export const ExtractionPanel = ({
                       disabled={isExtracting}
                       onChange={(e) =>
                         onSpacingChange(
-                          Math.max(1, Math.min(10000, parseInt(e.target.value) || 1)),
+                          Math.max(
+                            1,
+                            Math.min(10000, parseInt(e.target.value) || 1),
+                          ),
                         )
                       }
-                      className="w-full rounded-md border border-ui-controls-border bg-ui-controls px-2.5 py-1.5 text-sm text-base-fg focus:border-primary focus:outline-none"
+                      className="w-full border border-ui-controls-border bg-ui-controls px-2.5 py-1.5 text-sm text-base-fg focus:border-white/40 focus:outline-none"
                     />
                   </label>
                 </div>
                 {isExtracting && progress ? (
                   <div className="flex items-center gap-2">
-                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/10">
+                    <div className="h-1.5 flex-1 overflow-hidden bg-white/10">
                       <div
-                        className="h-full rounded-full bg-primary transition-all"
+                        className="h-full bg-white transition-all"
                         style={{
                           width: `${(progress.done / progress.total) * 100}%`,
                         }}
@@ -148,10 +152,10 @@ export const ExtractionPanel = ({
                     </span>
                     <button
                       onClick={onCancel}
-                      className="flex h-6 w-6 items-center justify-center rounded-md text-base-fg/50 transition-colors hover:bg-white/10 hover:text-base-fg"
+                      className="flex h-6 w-6 items-center justify-center text-base-fg/50 transition-colors hover:bg-white/10 hover:text-base-fg"
                       aria-label="Cancel extraction"
                     >
-                      <XIcon  className="text-xs" />
+                      <XIcon className="text-xs" />
                     </button>
                   </div>
                 ) : (
@@ -159,7 +163,7 @@ export const ExtractionPanel = ({
                     variant="action"
                     onClick={onExtractBurst}
                     disabled={isExtracting}
-                    className="w-full py-1.5 text-sm font-medium"
+                    className="w-full py-1.5"
                   >
                     Extract {numFrames} {numFrames === 1 ? "frame" : "frames"}
                   </Button>
@@ -174,13 +178,17 @@ export const ExtractionPanel = ({
         <div className="flex items-center justify-between">
           <span>Duration</span>
           <span className="font-mono text-base-fg/70">
-            {!disabled && Number.isFinite(duration) ? formatTime(duration) : "—"}
+            {!disabled && Number.isFinite(duration)
+              ? formatTime(duration)
+              : "—"}
           </span>
         </div>
         <div className="flex items-center justify-between">
           <span>Resolution</span>
           <span className="font-mono text-base-fg/70">
-            {!disabled && resolution ? `${resolution.w} × ${resolution.h}` : "—"}
+            {!disabled && resolution
+              ? `${resolution.w} × ${resolution.h}`
+              : "—"}
           </span>
         </div>
       </div>
diff --git a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frame-extractor.tsx b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frame-extractor.tsx
index 30abb433b5..56b5f6dac8 100644
--- a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frame-extractor.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frame-extractor.tsx
@@ -436,7 +436,7 @@ export default function FrameExtractor() {
   // ── Render ─────────────────────────────────────────────────────────────────
 
   return (
-    <div className="relative min-h-full w-full shrink-0 bg-[#101014] px-3 pb-8 sm:px-4 md:px-8 lg:px-12">
+    <div className="relative min-h-full w-full shrink-0 bg-ui-background px-3 pb-8 sm:px-4 md:px-8 lg:px-12">
       <Seo
         title="Video Frame Extractor - ArtCraft"
         description="Grab a still frame from any video — capture, save to your library, or use it as an image prompt reference."
@@ -452,7 +452,7 @@ export default function FrameExtractor() {
                 variant="action"
                 icon={RotateCwIcon}
                 onClick={clearSource}
-                className="px-3 py-1.5 text-sm"
+                className="px-3 py-1.5"
               >
                 Switch Video
               </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frames-grid.tsx b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frames-grid.tsx
index d57b0b6db6..e16e6539dd 100644
--- a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frames-grid.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/frames-grid.tsx
@@ -43,7 +43,7 @@ export const FramesGrid = ({
   const hasUnsaved = frames.some((frame) => !actionState[frame.id]?.saved);
 
   return (
-    <div className="rounded-xl border border-ui-panel-border bg-ui-panel p-4">
+    <div className="border border-ui-panel-border bg-ui-panel p-4">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <h3 className="text-sm font-semibold text-base-fg">
           Captured frames
@@ -56,7 +56,7 @@ export const FramesGrid = ({
             <button
               onClick={onSaveAll}
               disabled={isSavingAll}
-              className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-base-fg/70 transition-colors hover:bg-white/5 hover:text-base-fg disabled:opacity-50"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-base-fg/70 transition-colors hover:bg-white/5 hover:text-base-fg disabled:opacity-50"
             >
               <DynamicIcon
                 icon={isSavingAll ? LoaderCircleIcon : SaveIcon}
@@ -67,7 +67,7 @@ export const FramesGrid = ({
           )}
           <button
             onClick={onClear}
-            className="rounded-md px-2.5 py-1.5 text-xs font-medium text-base-fg/50 transition-colors hover:bg-white/5 hover:text-base-fg"
+            className="px-2.5 py-1.5 text-xs font-medium text-base-fg/50 transition-colors hover:bg-white/5 hover:text-base-fg"
           >
             Clear
           </button>
@@ -86,7 +86,7 @@ export const FramesGrid = ({
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.95 }}
                 transition={{ duration: 0.18, ease: EASE_EMPHASIS }}
-                className="group/frame overflow-hidden rounded-lg border border-ui-panel-border bg-ui-background"
+                className="group/frame overflow-hidden border border-ui-panel-border bg-ui-background"
               >
                 <div className="relative aspect-video bg-black">
                   <img
@@ -96,12 +96,12 @@ export const FramesGrid = ({
                   />
                   <button
                     onClick={() => onRemove(frame)}
-                    className="absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md bg-black/60 text-white/60 opacity-0 backdrop-blur-sm transition-all hover:text-white group-hover/frame:opacity-100"
+                    className="absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center bg-black/60 text-white/60 opacity-0 transition-all hover:text-white group-hover/frame:opacity-100"
                     aria-label="Remove frame"
                   >
                     <XIcon  className="text-xs" />
                   </button>
-                  <span className="absolute bottom-1.5 left-1.5 rounded bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white/85 backdrop-blur-sm">
+                  <span className="absolute bottom-1.5 left-1.5 bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white/85">
                     {formatTimePrecise(frame.timestamp)}
                   </span>
                 </div>
@@ -158,14 +158,14 @@ const FrameAction = ({
   disabled,
   success,
 }: FrameActionProps) => (
-  // fixed strategy: the card is overflow-hidden (rounded corners), which
-  // would clip an absolutely-positioned tooltip.
+  // fixed strategy: the card is overflow-hidden, which would clip an
+  // absolutely-positioned tooltip.
   <Tooltip content={tooltip} position="top" strategy="fixed" className="z-50">
     <button
       onClick={onClick}
       disabled={loading || disabled}
       aria-label={tooltip}
-      className={`flex h-7 w-8 items-center justify-center rounded-md text-xs transition-colors disabled:cursor-default ${
+      className={`flex h-7 w-8 items-center justify-center text-xs transition-colors disabled:cursor-default ${
         success
           ? "text-green"
           : "text-base-fg/60 hover:bg-white/5 hover:text-base-fg"
diff --git a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-drop-zone.tsx b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-drop-zone.tsx
index 77096eaf99..dc18278b9e 100644
--- a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-drop-zone.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-drop-zone.tsx
@@ -24,11 +24,11 @@ export const VideoDropZone = ({
   };
 
   return (
-    <div className="overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-3">
+    <div className="overflow-hidden border border-ui-panel-border bg-ui-panel p-3">
       <div
         className={twMerge(
-          "flex aspect-video flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-ui-border bg-ui-background/40 p-6 text-center transition-colors",
-          isDragActive && "border-primary/60 bg-primary/5",
+          "flex aspect-video flex-col items-center justify-center gap-4 rounded-[3px] border border-dashed border-ui-border bg-ui-background/40 p-6 text-center transition-colors",
+          isDragActive && "border-white/60 bg-white/5",
         )}
         onDragEnter={(e) => {
           e.preventDefault();
@@ -65,7 +65,7 @@ export const VideoDropZone = ({
             variant="primary"
             icon={UploadIcon}
             onClick={() => fileInputRef.current?.click()}
-            className="px-4 py-1.5 text-sm font-medium"
+            className="px-4 py-1.5"
           >
             Select video
           </Button>
@@ -73,7 +73,7 @@ export const VideoDropZone = ({
             variant="action"
             icon={ImagesIcon}
             onClick={onPickFromLibrary}
-            className="px-4 py-1.5 text-sm font-medium"
+            className="px-4 py-1.5"
           >
             From library
           </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-scrubber.tsx b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-scrubber.tsx
index 79929ea7b0..4081301a39 100644
--- a/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-scrubber.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/frame-extractor/video-scrubber.tsx
@@ -228,7 +228,7 @@ export const VideoScrubber = ({
   ];
 
   return (
-    <div className="group/scrubber overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel">
+    <div className="group/scrubber overflow-hidden border border-ui-panel-border bg-ui-panel">
       <div className="relative aspect-video w-full bg-black">
         <video
           ref={videoRef}
@@ -243,7 +243,7 @@ export const VideoScrubber = ({
         {!isPlaying && !disabled && (
           <button
             onClick={togglePlayPause}
-            className="absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/scrubber:opacity-100"
+            className="absolute inset-0 m-auto flex h-12 w-12 items-center justify-center bg-black/55 text-white opacity-0 transition-opacity group-hover/scrubber:opacity-100"
             aria-label="Play"
           >
             <PlayIcon  className="ml-0.5" />
@@ -261,21 +261,21 @@ export const VideoScrubber = ({
           onPointerCancel={handleTimelinePointerUp}
           onPointerLeave={() => setHoverRatio(null)}
         >
-          <div className="absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-white/10 transition-all group-hover/timeline:h-3">
+          <div className="absolute top-1/2 h-2 w-full -translate-y-1/2 bg-white/10 transition-all group-hover/timeline:h-3">
             <div
-              className="h-full rounded-full bg-primary"
+              className="h-full bg-white"
               style={{ width: `${progressPercent}%` }}
             />
           </div>
           <div
-            className="absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow"
+            className="absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 bg-white"
             style={{ left: `${progressPercent}%` }}
           />
           {hoverRatio !== null &&
             Number.isFinite(duration) &&
             duration > 0 && (
               <div
-                className="pointer-events-none absolute -top-6 -translate-x-1/2 rounded-md bg-black/80 px-2 py-0.5 font-mono text-[10px] text-white"
+                className="pointer-events-none absolute -top-6 -translate-x-1/2 rounded-[3px] bg-black/80 px-2 py-0.5 font-mono text-[10px] text-white"
                 style={{ left: `${hoverRatio * 100}%` }}
               >
                 {formatTimePrecise(hoverRatio * duration)}
@@ -289,7 +289,7 @@ export const VideoScrubber = ({
               <Tooltip key={step.label} content={step.tooltip} position="top" className="z-50">
                 <button
                   onClick={() => seekBy(step.delta)}
-                  className="flex h-8 w-8 items-center justify-center rounded-md text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+                  className="flex h-8 w-8 items-center justify-center text-white/70 transition-colors hover:bg-white/10 hover:text-white"
                   aria-label={step.tooltip}
                 >
                   <DynamicIcon icon={step.icon} className="text-xs" />
@@ -299,7 +299,7 @@ export const VideoScrubber = ({
             <Tooltip content="Play/Pause (Space)" position="top" className="z-50">
               <button
                 onClick={togglePlayPause}
-                className="mx-0.5 flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+                className="mx-0.5 flex h-9 w-9 items-center justify-center bg-white/10 text-white transition-colors hover:bg-white/20"
                 aria-label="Play or pause"
               >
                 <DynamicIcon icon={isPlaying ? PauseIcon : PlayIcon} />
@@ -309,7 +309,7 @@ export const VideoScrubber = ({
               <Tooltip key={step.label} content={step.tooltip} position="top" className="z-50">
                 <button
                   onClick={() => seekBy(step.delta)}
-                  className="flex h-8 w-8 items-center justify-center rounded-md text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+                  className="flex h-8 w-8 items-center justify-center text-white/70 transition-colors hover:bg-white/10 hover:text-white"
                   aria-label={step.tooltip}
                 >
                   <DynamicIcon icon={step.icon} className="text-xs" />
@@ -322,7 +322,7 @@ export const VideoScrubber = ({
             <div className="hidden items-center gap-2 sm:flex">
               <button
                 onClick={toggleMute}
-                className="flex h-7 w-7 items-center justify-center rounded-md text-white/60 transition-colors hover:bg-white/10 hover:text-white"
+                className="flex h-7 w-7 items-center justify-center text-white/60 transition-colors hover:bg-white/10 hover:text-white"
                 aria-label={isMuted ? "Unmute" : "Mute"}
               >
                 <DynamicIcon
@@ -340,7 +340,7 @@ export const VideoScrubber = ({
                   const video = videoRef.current;
                   if (video) video.volume = parseFloat(e.target.value);
                 }}
-                className="w-20 accent-primary"
+                className="w-20 accent-white"
                 aria-label="Volume"
               />
             </div>
diff --git a/frontend/apps/artcraft-webapp/src/pages/home/home.tsx b/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
index 93f18d4384..ae8179e33f 100644
--- a/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/home/home.tsx
@@ -1,22 +1,28 @@
 import { Link } from "react-router-dom";
-import { motion, useReducedMotion } from "framer-motion";
-import { ArrowRightIcon, BoxIcon, FilmIcon, GlobeIcon, GroupIcon, ImageIcon, ImagesIcon, MusicIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
+import {
+  ArrowRightIcon,
+  BoxIcon,
+  FilmIcon,
+  GlobeIcon,
+  GroupIcon,
+  ImageIcon,
+  ImagesIcon,
+  MusicIcon,
+  VideoIcon,
+  WandSparklesIcon,
+} from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import Seo from "../../components/seo";
 import { Reveal, RevealGroup } from "../../components/motion/reveal";
-import { TRANSITION_SPRING } from "../../lib/motion";
-
-const MotionLink = motion(Link);
 
 type AppCard = {
   label: string;
   description: string;
   href: string;
   icon: LucideIcon;
-  accent: string;
-  iconBg: string;
-  iconColor: string;
+  iconTile: string;
+  hoverBorder: string;
   badge?: string;
 };
 
@@ -26,72 +32,64 @@ const APPS: AppCard[] = [
     description: "Generate images from prompts and references.",
     href: "/create-image",
     icon: ImageIcon,
-    accent: "from-blue-500/20 to-blue-500/0",
-    iconBg: "bg-blue-500/25 border-blue-400/30",
-    iconColor: "text-blue-300",
+    iconTile: "border-blue-400/40 bg-blue-500/20 text-blue-300",
+    hoverBorder: "hover:border-blue-400/60",
   },
   {
     label: "Video",
     description: "Generate cinematic clips from text or images.",
     href: "/create-video",
     icon: VideoIcon,
-    accent: "from-purple-500/20 to-purple-500/0",
-    iconBg: "bg-purple-500/25 border-purple-400/30",
-    iconColor: "text-purple-300",
+    iconTile: "border-purple-400/40 bg-purple-500/20 text-purple-300",
+    hoverBorder: "hover:border-purple-400/60",
   },
   {
     label: "Audio",
     description: "Generate songs and sound effects from prompts.",
     href: "/create-audio",
     icon: MusicIcon,
-    accent: "from-pink-500/20 to-pink-500/0",
-    iconBg: "bg-pink-500/25 border-pink-400/30",
-    iconColor: "text-pink-300",
+    iconTile: "border-pink-400/40 bg-pink-500/20 text-pink-300",
+    hoverBorder: "hover:border-pink-400/60",
   },
   {
     label: "3D Object",
     description: "Turn a prompt or image into a 3D model.",
     href: "/create-object",
     icon: BoxIcon,
-    accent: "from-cyan-500/20 to-cyan-500/0",
-    iconBg: "bg-cyan-500/25 border-cyan-400/30",
-    iconColor: "text-cyan-300",
+    iconTile: "border-cyan-400/40 bg-cyan-500/20 text-cyan-300",
+    hoverBorder: "hover:border-cyan-400/60",
   },
   {
     label: "3D World",
     description: "Turn a prompt or image into an explorable world.",
     href: "/create-world",
     icon: GlobeIcon,
-    accent: "from-teal-500/20 to-teal-500/0",
-    iconBg: "bg-teal-500/25 border-teal-400/30",
-    iconColor: "text-teal-300",
+    iconTile: "border-teal-400/40 bg-teal-500/20 text-teal-300",
+    hoverBorder: "hover:border-teal-400/60",
   },
   {
     label: "Edit 3D",
     description: "Compose 3D scenes and render with AI cameras.",
     href: "/edit-3d",
     icon: BoxIcon,
-    accent: "from-amber-500/20 to-amber-500/0",
-    iconBg: "bg-amber-500/25 border-amber-400/30",
-    iconColor: "text-amber-300",
+    iconTile: "border-amber-400/40 bg-amber-500/20 text-amber-300",
+    hoverBorder: "hover:border-amber-400/60",
   },
   {
     label: "Background Change",
     description: "Swap or remove backgrounds with AI VFX.",
     href: "/background-change",
     icon: WandSparklesIcon,
-    accent: "from-emerald-500/20 to-emerald-500/0",
-    iconBg: "bg-emerald-500/25 border-emerald-400/30",
-    iconColor: "text-emerald-300",
+    iconTile: "border-emerald-400/40 bg-emerald-500/20 text-emerald-300",
+    hoverBorder: "hover:border-emerald-400/60",
   },
   {
     label: "Edit Video",
     description: "Trim, arrange, and edit clips on a timeline.",
     href: "/video-editor",
     icon: FilmIcon,
-    accent: "from-rose-500/20 to-rose-500/0",
-    iconBg: "bg-rose-500/25 border-rose-400/30",
-    iconColor: "text-rose-300",
+    iconTile: "border-rose-400/40 bg-rose-500/20 text-rose-300",
+    hoverBorder: "hover:border-rose-400/60",
     badge: "BETA",
   },
   {
@@ -99,9 +97,8 @@ const APPS: AppCard[] = [
     description: "Collect references and ideas to steer a generation.",
     href: "/moodboard",
     icon: GroupIcon,
-    accent: "from-indigo-500/20 to-indigo-500/0",
-    iconBg: "bg-indigo-500/25 border-indigo-400/30",
-    iconColor: "text-indigo-300",
+    iconTile: "border-indigo-400/40 bg-indigo-500/20 text-indigo-300",
+    hoverBorder: "hover:border-indigo-400/60",
     badge: "BETA",
   },
   {
@@ -109,27 +106,35 @@ const APPS: AppCard[] = [
     description: "Grab a still frame from any video.",
     href: "/frame-extractor",
     icon: ImagesIcon,
-    accent: "from-orange-500/20 to-orange-500/0",
-    iconBg: "bg-orange-500/25 border-orange-400/30",
-    iconColor: "text-orange-300",
+    iconTile: "border-orange-400/40 bg-orange-500/20 text-orange-300",
+    hoverBorder: "hover:border-orange-400/60",
     badge: "NEW",
   },
 ];
 
 export function Home() {
-  const reduceMotion = useReducedMotion();
   return (
     <div className="min-h-full px-6 sm:px-10 py-10 sm:py-16 max-w-6xl mx-auto w-full">
       <Seo
         title="ArtCraft - Create AI Images and Video"
         description="Generate AI images and video with ArtCraft."
       />
-      <Reveal as="h1" inView={false} y={20} className="text-center font-display text-4xl sm:text-6xl mx-auto font-semibold tracking-tight">
+      <Reveal
+        as="h1"
+        inView={false}
+        y={20}
+        className="text-center font-display text-4xl sm:text-6xl mx-auto font-semibold tracking-tight"
+      >
         What will you <span className="text-primary">craft</span> today?
       </Reveal>
 
       <section className="py-12">
-        <Reveal as="h2" inView={false} delay={0.08} className="text-sm font-semibold text-white/85 mb-4">
+        <Reveal
+          as="h2"
+          inView={false}
+          delay={0.08}
+          className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 mb-4"
+        >
           Create
         </Reveal>
         <RevealGroup
@@ -140,37 +145,36 @@ export function Home() {
         >
           {APPS.map((app) => (
             <Reveal key={app.href} y={20}>
-              <MotionLink
+              <Link
                 to={app.href}
-                className="bg-ui-controls/50 group relative flex h-full overflow-hidden rounded-2xl p-5 ring-1 ring-white/[0.06] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.04)] hover:bg-ui-controls hover:ring-white/15"
-                whileHover={reduceMotion ? undefined : { y: -4 }}
-                whileTap={reduceMotion ? undefined : { scale: 0.985 }}
-                transition={TRANSITION_SPRING}
+                className={`group relative flex h-full border rounded-[3px] border-white/10 bg-white/5 p-5 transition-colors duration-150 ${app.hoverBorder}`}
               >
-                <div
-                  className={`absolute -inset-px rounded-2xl bg-gradient-to-br ${app.accent} opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none`}
-                  aria-hidden
-                />
                 <div className="relative flex w-full items-start gap-4">
                   <div
-                    className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border ${app.iconBg} ${app.iconColor} shadow-[inset_0_1px_1px_rgba(255,255,255,0.12)] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105`}
+                    className={`flex h-11 w-11 shrink-0 items-center justify-center border ${app.iconTile}`}
                   >
                     <DynamicIcon icon={app.icon} className="text-base" />
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center justify-between gap-2">
                       <div className="flex items-center gap-2 min-w-0">
-                        <h3 className="text-base font-semibold text-white truncate">
+                        <h3 className=" text-sm font-bold uppercase tracking-[0.08em] text-white truncate">
                           {app.label}
                         </h3>
                         {app.badge && (
-                          <span className="shrink-0 rounded-full bg-amber-600 px-1.5 py-0.5 text-[9px] font-semibold uppercase leading-none text-white">
+                          <span
+                            className={`shrink-0 border px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.12em] leading-none ${
+                              app.badge === "NEW"
+                                ? "border-purple-400/40 text-purple-300"
+                                : "border-amber-400/40 text-amber-300"
+                            }`}
+                          >
                             {app.badge}
                           </span>
                         )}
                       </div>
-                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/[0.04] text-white/40 transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:bg-white/10 group-hover:text-white/80 group-hover:translate-x-0.5">
-                        <ArrowRightIcon  className="text-xs" />
+                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[3px] border border-white/15 text-white/40 transition-colors duration-150 group-hover:border-white/40 group-hover:text-white">
+                        <ArrowRightIcon className="text-xs" />
                       </span>
                     </div>
                     <p className="mt-1 text-sm text-white/55 leading-snug">
@@ -178,7 +182,7 @@ export function Home() {
                     </p>
                   </div>
                 </div>
-              </MotionLink>
+              </Link>
             </Reveal>
           ))}
         </RevealGroup>
diff --git a/frontend/apps/artcraft-webapp/src/pages/library/library.tsx b/frontend/apps/artcraft-webapp/src/pages/library/library.tsx
index 20f80c9b63..7cb79d2702 100644
--- a/frontend/apps/artcraft-webapp/src/pages/library/library.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/library/library.tsx
@@ -35,7 +35,31 @@ import {
   showActionReminder,
   isActionReminderOpen,
 } from "@storyteller/ui-action-reminder-modal";
-import { ArrowDownToLineIcon, BoxIcon, CloudIcon, EllipsisIcon, FolderIcon, FolderOpenIcon, FolderPlusIcon, GlobeIcon, Grid3x3Icon, ImageIcon, ImagesIcon, ListIcon, LoaderCircleIcon, MusicIcon, PencilIcon, PlusIcon, RefreshCwIcon, StarIcon, TagIcon, TagsIcon, Trash2Icon, VideoIcon, XIcon } from "lucide-react";
+import {
+  ArrowDownToLineIcon,
+  BoxIcon,
+  CloudIcon,
+  EllipsisIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  FolderPlusIcon,
+  GlobeIcon,
+  Grid3x3Icon,
+  ImageIcon,
+  ImagesIcon,
+  ListIcon,
+  LoaderCircleIcon,
+  MusicIcon,
+  PencilIcon,
+  PlusIcon,
+  RefreshCwIcon,
+  StarIcon,
+  TagIcon,
+  TagsIcon,
+  Trash2Icon,
+  VideoIcon,
+  XIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { Lightbox } from "../../components/lightbox/lightbox";
 import { toast } from "../../components/toast/toast";
@@ -988,7 +1012,7 @@ export default function Library() {
   // ── Not logged in / loading auth ──────────────────────────────────────────
   if (isLoggedIn === false) {
     return (
-      <div className="relative min-h-full w-full bg-[#101014] flex items-center justify-center px-4">
+      <div className="relative min-h-full w-full bg-ui-background flex items-center justify-center px-4">
         <div className="text-center space-y-6">
           <h1 className="text-3xl font-medium text-white">My Library</h1>
           <p className="text-white/60 text-lg max-w-md mx-auto">
@@ -996,18 +1020,12 @@ export default function Library() {
           </p>
           <div className="flex gap-3 justify-center">
             <Link to="/login">
-              <Button
-                variant="primary"
-                className="rounded-full bg-white text-black hover:bg-white/90 text-sm font-semibold px-6 py-2.5"
-              >
+              <Button variant="primary" className="px-6 py-2.5">
                 Login
               </Button>
             </Link>
             <Link to="/signup">
-              <Button
-                variant="primary"
-                className="rounded-full text-sm font-semibold px-6 py-2.5"
-              >
+              <Button variant="secondary" className="px-6 py-2.5">
                 Sign up
               </Button>
             </Link>
@@ -1019,7 +1037,7 @@ export default function Library() {
 
   if (isLoggedIn === null) {
     return (
-      <div className="relative min-h-full w-full bg-[#101014] flex items-center justify-center">
+      <div className="relative min-h-full w-full bg-ui-background flex items-center justify-center">
         <LoadingSpinner className="h-10 w-10 text-white/60" />
       </div>
     );
@@ -1048,7 +1066,9 @@ export default function Library() {
           gridColumns={4}
           scrollRoot={null}
         >
-          <h3 className="text-sm font-medium text-white/50 mb-2">{date}</h3>
+          <h3 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/50 mb-2">
+            {date}
+          </h3>
           <div className={GRID_CLASS}>
             {dateItems.map((item) => (
               <LibraryTile
@@ -1084,7 +1104,7 @@ export default function Library() {
       // `select-none` blocks the blue text/image highlight when sweeping a
       // marquee or fat-fingering a click; native selection would otherwise also
       // hijack the drag. Form fields opt back in so dialog inputs stay editable.
-      className="relative min-h-full w-full shrink-0 select-none [&_input]:select-text [&_textarea]:select-text bg-[#101014] pb-8 px-3 sm:px-4 md:px-8 lg:px-12"
+      className="relative min-h-full w-full shrink-0 select-none [&_input]:select-text [&_textarea]:select-text bg-ui-background pb-8 px-3 sm:px-4 md:px-8 lg:px-12"
       onPointerDown={handleMarqueePointerDown}
     >
       <div className="mx-auto max-w-[1600px]">
@@ -1094,124 +1114,116 @@ export default function Library() {
           // z-10 keeps the sticky header above the (static) grid tiles while
           // staying below the app topbar (z-20), so topbar popovers (credits,
           // avatar) aren't painted under this bar.
-          className="sticky top-0 z-10 -mx-3 sm:-mx-4 md:-mx-8 lg:-mx-12 px-3 sm:px-4 md:px-8 lg:px-12 pb-3 pt-3 bg-[#101014] mb-4 sm:mb-6"
+          className="sticky top-0 z-10 -mx-3 sm:-mx-4 md:-mx-8 lg:-mx-12 px-3 sm:px-4 md:px-8 lg:px-12 pb-3 pt-3 bg-ui-background mb-4 sm:mb-6"
         >
           <div className="flex flex-col gap-6">
             {/* Tabs + actions */}
             <div className="flex items-center justify-between gap-3">
               <div className="flex items-center gap-2">
-                <div className="flex items-center gap-1 bg-ui-controls/40 rounded-xl p-1">
+                <div className="flex items-center gap-1 rounded-[3px] border border-white/15 bg-ui-controls/40 p-1">
                   <Link
                     to="/library"
-                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                       tab === "unsorted"
-                        ? "text-white"
+                        ? "text-black"
                         : "text-white/60 hover:text-white"
                     }`}
                   >
                     {tab === "unsorted" && (
                       <motion.span
                         layoutId="library-tab-indicator"
-                        className="absolute inset-0 rounded-md bg-ui-controls"
+                        className="absolute inset-0 rounded-[3px] bg-white"
                         transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                       />
                     )}
-                    <Grid3x3Icon
-                      
-                      className="relative z-10 text-xs" />
+                    <Grid3x3Icon className="relative z-10 text-xs" />
                     <span className="relative z-10">All Assets</span>
                   </Link>
                   <Link
                     to="/library/folders"
-                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                       tab === "folders"
-                        ? "text-white"
+                        ? "text-black"
                         : "text-white/60 hover:text-white"
                     }`}
                   >
                     {tab === "folders" && (
                       <motion.span
                         layoutId="library-tab-indicator"
-                        className="absolute inset-0 rounded-md bg-ui-controls"
+                        className="absolute inset-0 rounded-[3px] bg-white"
                         transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                       />
                     )}
-                    <FolderIcon
-                      
-                      className="relative z-10 text-xs" />
+                    <FolderIcon className="relative z-10 text-xs" />
                     <span className="relative z-10">Folders</span>
                   </Link>
                   <Link
                     to="/library/folderless"
-                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                       tab === "folderless"
-                        ? "text-white"
+                        ? "text-black"
                         : "text-white/60 hover:text-white"
                     }`}
                   >
                     {tab === "folderless" && (
                       <motion.span
                         layoutId="library-tab-indicator"
-                        className="absolute inset-0 rounded-md bg-ui-controls"
+                        className="absolute inset-0 rounded-[3px] bg-white"
                         transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                       />
                     )}
-                    <FolderOpenIcon
-                      
-                      className="relative z-10 text-xs" />
+                    <FolderOpenIcon className="relative z-10 text-xs" />
                     <span className="relative z-10">Unfoldered</span>
                   </Link>
                   <Link
                     to="/library/tags"
-                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                    className={`relative flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                       tab === "tags"
-                        ? "text-white"
+                        ? "text-black"
                         : "text-white/60 hover:text-white"
                     }`}
                   >
                     {tab === "tags" && (
                       <motion.span
                         layoutId="library-tab-indicator"
-                        className="absolute inset-0 rounded-md bg-ui-controls"
+                        className="absolute inset-0 rounded-[3px] bg-white"
                         transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                       />
                     )}
-                    <TagIcon
-                      
-                      className="relative z-10 text-xs" />
+                    <TagIcon className="relative z-10 text-xs" />
                     <span className="relative z-10">Tags</span>
                   </Link>
                 </div>
                 {(tab === "unsorted" || tab === "folderless") && (
                   <button
                     onClick={refreshRoot}
-                    className="h-8 w-8 flex items-center justify-center rounded-lg text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
+                    className="h-8 w-8 flex items-center justify-center text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
                     title="Refresh library"
                   >
                     <RefreshCwIcon
-                      
-                      className={`text-sm ${initialLoading ? "animate-spin" : ""}`} />
+                      className={`text-sm ${initialLoading ? "animate-spin" : ""}`}
+                    />
                   </button>
                 )}
               </div>
 
               <div className="flex items-center gap-2">
                 {tab === "folderless" && (
-                  <div className="flex items-center gap-1 bg-ui-controls/40 rounded-xl p-1 overflow-x-auto">
+                  <div className="flex items-center gap-1 rounded-[3px] border border-white/15 bg-ui-controls/40 p-1 overflow-x-auto">
                     {FOLDERLESS_CLASS_FILTERS.map((filter) => (
                       <button
                         key={filter.id}
                         onClick={() => setFolderlessClass(filter.id)}
-                        className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                        className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                           folderlessClass === filter.id
-                            ? "text-white"
+                            ? "text-black"
                             : "text-white/60 hover:text-white"
                         }`}
                       >
                         {folderlessClass === filter.id && (
                           <motion.span
                             layoutId="library-folderless-filter-indicator"
-                            className="absolute inset-0 rounded-md bg-ui-controls"
+                            className="absolute inset-0 rounded-[3px] bg-white"
                             transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                           />
                         )}
@@ -1227,21 +1239,21 @@ export default function Library() {
                   </div>
                 )}
                 {tab === "unsorted" && (
-                  <div className="flex items-center gap-1 bg-ui-controls/40 rounded-xl p-1 overflow-x-auto">
+                  <div className="flex items-center gap-1 rounded-[3px] border border-white/15 bg-ui-controls/40 p-1 overflow-x-auto">
                     {FILTERS.map((filter) => (
                       <button
                         key={filter.id}
                         onClick={() => navigate(filter.route)}
-                        className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                        className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                           activeFilter === filter.id
-                            ? "text-white"
+                            ? "text-black"
                             : "text-white/60 hover:text-white"
                         }`}
                       >
                         {activeFilter === filter.id && (
                           <motion.span
                             layoutId="library-filter-indicator"
-                            className="absolute inset-0 rounded-md bg-ui-controls"
+                            className="absolute inset-0 rounded-[3px] bg-white"
                             transition={{ duration: 0.32, ease: EASE_EMPHASIS }}
                           />
                         )}
@@ -1261,7 +1273,7 @@ export default function Library() {
                     variant="primary"
                     icon={FolderPlusIcon}
                     onClick={() => openNewFolderModal(null)}
-                    className="rounded-full text-xs sm:text-sm px-3 sm:px-4 py-2"
+                    className="px-3 sm:px-4 py-2"
                   >
                     New folder
                   </Button>
@@ -1269,7 +1281,7 @@ export default function Library() {
                 {tab === "tags" && !activeTagToken && tags.length > 0 && (
                   <>
                     {tagView === "list" && (
-                      <div className="flex items-center gap-1 bg-ui-controls/40 rounded-xl p-1 overflow-x-auto">
+                      <div className="flex items-center gap-1 rounded-[3px] border border-white/15 bg-ui-controls/40 p-1 overflow-x-auto">
                         {(
                           [
                             ["count", "Most used"],
@@ -1279,16 +1291,16 @@ export default function Library() {
                           <button
                             key={id}
                             onClick={() => setTagSort(id)}
-                            className={`relative px-2.5 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                            className={`relative px-2.5 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                               tagSort === id
-                                ? "text-white"
+                                ? "text-black"
                                 : "text-white/60 hover:text-white"
                             }`}
                           >
                             {tagSort === id && (
                               <motion.span
                                 layoutId="library-tag-sort-indicator"
-                                className="absolute inset-0 rounded-md bg-ui-controls"
+                                className="absolute inset-0 rounded-[3px] bg-white"
                                 transition={{
                                   duration: 0.32,
                                   ease: EASE_EMPHASIS,
@@ -1300,7 +1312,7 @@ export default function Library() {
                         ))}
                       </div>
                     )}
-                    <div className="flex items-center gap-1 bg-ui-controls/40 rounded-xl p-1">
+                    <div className="flex items-center gap-1 rounded-[3px] border border-white/15 bg-ui-controls/40 p-1">
                       {(
                         [
                           ["cloud", CloudIcon, "Cloud"],
@@ -1311,16 +1323,16 @@ export default function Library() {
                           key={id}
                           onClick={() => setTagView(id)}
                           title={label}
-                          className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
+                          className={`relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-1 sm:py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors whitespace-nowrap ${
                             tagView === id
-                              ? "text-white"
+                              ? "text-black"
                               : "text-white/60 hover:text-white"
                           }`}
                         >
                           {tagView === id && (
                             <motion.span
                               layoutId="library-tag-view-indicator"
-                              className="absolute inset-0 rounded-md bg-ui-controls"
+                              className="absolute inset-0 rounded-[3px] bg-white"
                               transition={{
                                 duration: 0.32,
                                 ease: EASE_EMPHASIS,
@@ -1368,17 +1380,17 @@ export default function Library() {
                 </h1>
                 <button
                   onClick={() => startRename(activeFolderId!)}
-                  className="h-7 w-7 flex items-center justify-center rounded-lg text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
+                  className="h-7 w-7 flex items-center justify-center text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
                   title="Rename folder"
                 >
-                  <PencilIcon  className="text-xs" />
+                  <PencilIcon className="text-xs" />
                 </button>
                 <button
                   onClick={() => openNewFolderModal(activeFolderId)}
-                  className="h-7 w-7 flex items-center justify-center rounded-lg text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
+                  className="h-7 w-7 flex items-center justify-center text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
                   title="New subfolder"
                 >
-                  <FolderPlusIcon  className="text-xs" />
+                  <FolderPlusIcon className="text-xs" />
                 </button>
               </div>
             )}
@@ -1404,17 +1416,17 @@ export default function Library() {
                 )}
                 <button
                   onClick={() => setTagRenameTarget(activeTagToken)}
-                  className="h-7 w-7 flex items-center justify-center rounded-lg text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
+                  className="h-7 w-7 flex items-center justify-center text-white/50 hover:text-white hover:bg-ui-controls/40 transition-colors"
                   title="Rename tag"
                 >
-                  <PencilIcon  className="text-xs" />
+                  <PencilIcon className="text-xs" />
                 </button>
                 <button
                   onClick={() => confirmDeleteTag(activeTagToken)}
-                  className="h-7 w-7 flex items-center justify-center rounded-lg text-white/50 hover:text-red hover:bg-ui-controls/40 transition-colors"
+                  className="h-7 w-7 flex items-center justify-center text-white/50 hover:text-red hover:bg-ui-controls/40 transition-colors"
                   title="Delete tag"
                 >
-                  <Trash2Icon  className="text-xs" />
+                  <Trash2Icon className="text-xs" />
                 </button>
               </div>
             )}
@@ -1427,7 +1439,7 @@ export default function Library() {
           {tab === "folders" && currentSubfolders.length > 0 && (
             <div>
               {inFolder && (
-                <h3 className="text-sm font-medium text-white/50 mb-2">
+                <h3 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/50 mb-2">
                   Folders
                 </h3>
               )}
@@ -1451,17 +1463,15 @@ export default function Library() {
             /* ── Folders tab, root: cards only (above) ── */
             currentSubfolders.length === 0 && (
               <div className="flex flex-col items-center justify-center py-20 gap-3">
-                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-ui-controls/30">
-                  <FolderOpenIcon
-                    
-                    className="text-2xl text-white/40" />
+                <div className="flex h-14 w-14 items-center justify-center border border-white/15 bg-ui-controls/30">
+                  <FolderOpenIcon className="text-2xl text-white/40" />
                 </div>
                 <p className="text-white/40 text-sm">No folders yet.</p>
                 <Button
                   variant="primary"
                   icon={FolderPlusIcon}
                   onClick={() => openNewFolderModal(null)}
-                  className="rounded-full text-sm px-4 py-2"
+                  className="px-4 py-2"
                 >
                   New folder
                 </Button>
@@ -1482,18 +1492,12 @@ export default function Library() {
                 </p>
                 <div className="flex gap-3">
                   <Link to="/create-image">
-                    <Button
-                      variant="primary"
-                      className="rounded-full text-sm px-4 py-2"
-                    >
+                    <Button variant="primary" className="px-4 py-2">
                       Create Image
                     </Button>
                   </Link>
                   <Link to="/create-video">
-                    <Button
-                      variant="secondary"
-                      className="rounded-full text-sm px-4 py-2 border border-ui-panel-border"
-                    >
+                    <Button variant="secondary" className="px-4 py-2">
                       Create Video
                     </Button>
                   </Link>
@@ -1517,10 +1521,8 @@ export default function Library() {
               </div>
             ) : tags.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-20 gap-3">
-                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-ui-controls/30">
-                  <TagsIcon
-                    
-                    className="text-2xl text-white/40" />
+                <div className="flex h-14 w-14 items-center justify-center border border-white/15 bg-ui-controls/30">
+                  <TagsIcon className="text-2xl text-white/40" />
                 </div>
                 <p className="text-white/40 text-sm">No tags yet.</p>
                 <p className="text-white/30 text-xs max-w-xs text-center">
@@ -1541,7 +1543,7 @@ export default function Library() {
                 {sortedTags.map((t) => (
                   <div
                     key={t.token}
-                    className="flex items-center rounded-full bg-ui-controls/40 hover:bg-ui-controls/70 transition-colors"
+                    className="flex items-center rounded-[3px] border border-white/15 bg-ui-controls/40 hover:bg-ui-controls/70 transition-colors"
                   >
                     <button
                       type="button"
@@ -1556,9 +1558,7 @@ export default function Library() {
                       }}
                       className="flex items-center gap-2 pl-4 pr-1 py-2 text-sm font-medium text-white"
                     >
-                      <TagIcon
-                        
-                        className="text-xs text-violet-400" />
+                      <TagIcon className="text-xs text-violet-400" />
                       <span className="max-w-[14rem] truncate">{t.value}</span>
                       <span className="text-xs text-white/40">
                         {t.useCount}
@@ -1576,9 +1576,9 @@ export default function Library() {
                       }}
                       aria-label={`Options for tag "${t.value}"`}
                       title="Rename or delete"
-                      className="mr-1.5 flex h-6 w-6 items-center justify-center rounded-full text-white/40 hover:bg-white/10 hover:text-white transition-colors"
+                      className="mr-1.5 flex h-6 w-6 items-center justify-center text-white/40 hover:bg-white/10 hover:text-white transition-colors"
                     >
-                      <EllipsisIcon  className="text-xs" />
+                      <EllipsisIcon className="text-xs" />
                     </button>
                   </div>
                 ))}
@@ -1609,7 +1609,7 @@ export default function Library() {
           ) : /* ── Unsorted ── */ initialLoading && allItems.length === 0 ? (
             <div>
               <div
-                className="h-4 w-24 rounded mb-3"
+                className="h-4 w-24 mb-3"
                 style={{
                   background:
                     "linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 70%)",
@@ -1619,10 +1619,7 @@ export default function Library() {
               />
               <div className={GRID_CLASS}>
                 {Array.from({ length: 15 }).map((_, i) => (
-                  <div
-                    key={i}
-                    className="aspect-square rounded-lg overflow-hidden"
-                  >
+                  <div key={i} className="aspect-square overflow-hidden">
                     <div
                       className="h-full w-full"
                       style={{
@@ -1648,18 +1645,12 @@ export default function Library() {
               </p>
               <div className="flex gap-3">
                 <Link to="/create-image">
-                  <Button
-                    variant="primary"
-                    className="rounded-full text-sm px-4 py-2"
-                  >
+                  <Button variant="primary" className="px-4 py-2">
                     Create Image
                   </Button>
                 </Link>
                 <Link to="/create-video">
-                  <Button
-                    variant="secondary"
-                    className="rounded-full text-sm px-4 py-2 border border-ui-panel-border"
-                  >
+                  <Button variant="secondary" className="px-4 py-2">
                     Create Video
                   </Button>
                 </Link>
@@ -1687,7 +1678,7 @@ export default function Library() {
         <div
           ref={marqueeRef}
           style={{ display: "none" }}
-          className="pointer-events-none fixed z-40 rounded-sm border border-primary/60 bg-primary/10"
+          className="pointer-events-none fixed z-40 border border-white/60 bg-white/10"
         />
 
         {/* Bulk selection bar — subscribes to the selection store itself so
@@ -1772,7 +1763,7 @@ export default function Library() {
               }}
             />
             <div
-              className="fixed z-[9999] min-w-44 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+              className="fixed z-[9999] min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1"
               style={{ left: contextMenu.x, top: contextMenu.y }}
             >
               {(() => {
@@ -1783,7 +1774,7 @@ export default function Library() {
                   <>
                     <button
                       type="button"
-                      className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+                      className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
                       onClick={() => {
                         setFolderStar(
                           contextMenu.folderId,
@@ -1793,8 +1784,8 @@ export default function Library() {
                       }}
                     >
                       <StarIcon
-                        
-                        className={`w-4 ${menuFolder?.hasStar ? "text-amber-400" : "text-base-fg/40"}`} />
+                        className={`w-4 ${menuFolder?.hasStar ? "text-amber-400" : "text-base-fg/40"}`}
+                      />
                       <span>{menuFolder?.hasStar ? "Unstar" : "Star"}</span>
                     </button>
                     <FolderColorRow
@@ -1809,32 +1800,32 @@ export default function Library() {
               })()}
               <button
                 type="button"
-                className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+                className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
                 onClick={() => {
                   openNewFolderModal(contextMenu.folderId);
                 }}
               >
-                <FolderPlusIcon  className="w-4" />
+                <FolderPlusIcon className="w-4" />
                 <span>New subfolder</span>
               </button>
               <button
                 type="button"
-                className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+                className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
                 onClick={() => startRename(contextMenu.folderId)}
               >
-                <PencilIcon  className="w-4" />
+                <PencilIcon className="w-4" />
                 <span>Rename</span>
               </button>
               <button
                 type="button"
-                className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-red"
+                className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-red"
                 onClick={() => {
                   const folderId = contextMenu.folderId;
                   setContextMenu(null);
                   confirmDeleteFolder(folderId);
                 }}
               >
-                <Trash2Icon  className="w-4" />
+                <Trash2Icon className="w-4" />
                 <span>Delete folder</span>
               </button>
             </div>
@@ -1855,27 +1846,27 @@ export default function Library() {
               }}
             />
             <div
-              className="fixed z-[9999] min-w-44 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+              className="fixed z-[9999] min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1"
               style={{ left: tagContextMenu.x, top: tagContextMenu.y }}
             >
               <button
                 type="button"
-                className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+                className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
                 onClick={() => setTagRenameTarget(tagContextMenu.tagToken)}
               >
-                <PencilIcon  className="w-4" />
+                <PencilIcon className="w-4" />
                 <span>Rename</span>
               </button>
               <button
                 type="button"
-                className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-red"
+                className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-red"
                 onClick={() => {
                   const token = tagContextMenu.tagToken;
                   setTagContextMenu(null);
                   confirmDeleteTag(token);
                 }}
               >
-                <Trash2Icon  className="w-4" />
+                <Trash2Icon className="w-4" />
                 <span>Delete tag</span>
               </button>
             </div>
@@ -2051,7 +2042,7 @@ const SEND_TO_TARGETS: {
 // Shared styling for the bar's action pills. `whitespace-nowrap` keeps labels
 // on a single line — the bar grows instead of squishing buttons into two rows.
 const BAR_BUTTON_CLASS =
-  "flex items-center gap-2 whitespace-nowrap rounded-full bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-white hover:bg-ui-controls/90 transition-colors";
+  "flex items-center gap-2 whitespace-nowrap border border-white/15 bg-ui-controls/60 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white hover:bg-ui-controls/90 transition-colors";
 
 interface BulkSelectionBarProps {
   allItems: GalleryItem[];
@@ -2180,7 +2171,7 @@ function BulkSelectionBar({
   return (
     <div
       data-no-marquee
-      className="fixed bottom-20 sm:bottom-4 z-30 flex w-fit -translate-x-1/2 items-center gap-2 rounded-full border border-ui-panel-border bg-ui-panel/95 px-2.5 py-2 shadow-xl backdrop-blur"
+      className="fixed bottom-20 sm:bottom-4 z-30 flex w-fit -translate-x-1/2 items-center gap-2 border border-ui-panel-border bg-ui-panel px-2.5 py-2"
       style={{
         // Center within the content area (viewport minus the app sidebar).
         left: "calc(50% + var(--ac-sidebar-offset, 0px) / 2)",
@@ -2191,7 +2182,7 @@ function BulkSelectionBar({
           <BulkThumb key={si.id} item={si} />
         ))}
         {selectedItems.length > 4 && (
-          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded border-2 border-ui-panel bg-black/20">
+          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center border-2 border-ui-panel bg-black/20">
             <span className="text-[11px] text-white/70">
               +{selectedItems.length - 4}
             </span>
@@ -2225,8 +2216,8 @@ function BulkSelectionBar({
                 className="fixed inset-0 z-[59]"
                 onClick={() => setSendToOpen(false)}
               />
-              <div className="absolute bottom-full left-0 z-[60] mb-2 w-44 rounded-lg border border-ui-panel-border bg-ui-panel p-2 shadow-xl">
-                <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wider text-white/40">
+              <div className="absolute bottom-full left-0 z-[60] mb-2 w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-2">
+                <div className="px-2 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
                   Use as reference in
                 </div>
                 {SEND_TO_TARGETS.filter(
@@ -2240,7 +2231,7 @@ function BulkSelectionBar({
                       sendToPrompt(selectedItems, target.destination, navigate);
                       clear();
                     }}
-                    className="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-white hover:bg-ui-controls/50 transition-colors"
+                    className="flex w-full items-center gap-2.5 px-2 py-1.5 text-sm text-white hover:bg-ui-controls/50 transition-colors"
                   >
                     <DynamicIcon icon={target.icon} className="w-4 text-xs" />
                     <span>{target.label}</span>
@@ -2265,7 +2256,7 @@ function BulkSelectionBar({
             }}
             className={BAR_BUTTON_CLASS}
           >
-            <ImagesIcon  className="text-xs" />
+            <ImagesIcon className="text-xs" />
             <span className="hidden sm:inline">Extract frames</span>
           </button>
         )}
@@ -2278,7 +2269,7 @@ function BulkSelectionBar({
           onClick={() => setPopoverOpen((v) => !v)}
           className={BAR_BUTTON_CLASS}
         >
-          <FolderPlusIcon  className="text-xs" />
+          <FolderPlusIcon className="text-xs" />
           {/* Icon-only on phones — five labeled buttons overflow the bar. */}
           <span className="hidden sm:inline">Add to folder</span>
         </button>
@@ -2288,8 +2279,8 @@ function BulkSelectionBar({
               className="fixed inset-0 z-[59]"
               onClick={() => setPopoverOpen(false)}
             />
-            <div className="absolute bottom-full right-0 z-[60] mb-2 max-h-72 w-56 overflow-y-auto rounded-lg border border-ui-panel-border bg-ui-panel p-2 shadow-xl">
-              <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wider text-white/40">
+            <div className="absolute bottom-full right-0 z-[60] mb-2 max-h-72 w-56 overflow-y-auto rounded-[3px] border border-ui-panel-border bg-ui-panel p-2">
+              <div className="px-2 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
                 Folders
               </div>
               {sortedFolders.length === 0 ? (
@@ -2306,10 +2297,9 @@ function BulkSelectionBar({
                       setPopoverOpen(false);
                       clear();
                     }}
-                    className="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-white hover:bg-ui-controls/50 transition-colors"
+                    className="flex w-full items-center gap-2.5 px-2 py-1.5 text-sm text-white hover:bg-ui-controls/50 transition-colors"
                   >
                     <FolderIcon
-                      
                       className={
                         folder.colorCode ? "text-xs" : "text-xs text-primary"
                       }
@@ -2317,7 +2307,8 @@ function BulkSelectionBar({
                         folder.colorCode
                           ? { color: folder.colorCode }
                           : undefined
-                      } />
+                      }
+                    />
                     <span className="truncate">{folder.name}</span>
                   </button>
                 ))
@@ -2329,9 +2320,9 @@ function BulkSelectionBar({
                   setPopoverOpen(false);
                   onNewFolder(activeFolderId, Array.from(ids));
                 }}
-                className="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-white/70 hover:bg-ui-controls/50 transition-colors"
+                className="flex w-full items-center gap-2.5 px-2 py-1.5 text-sm text-white/70 hover:bg-ui-controls/50 transition-colors"
               >
-                <PlusIcon  className="w-4 text-xs" />
+                <PlusIcon className="w-4 text-xs" />
                 <span>Create new folder</span>
               </button>
             </div>
@@ -2353,7 +2344,7 @@ function BulkSelectionBar({
           }}
           className={BAR_BUTTON_CLASS}
         >
-          <TagsIcon  className="text-xs" />
+          <TagsIcon className="text-xs" />
           <span className="hidden sm:inline">Add tags</span>
         </button>
         {tagsOpen && (
@@ -2362,8 +2353,8 @@ function BulkSelectionBar({
               className="fixed inset-0 z-[59]"
               onClick={() => setTagsOpen(false)}
             />
-            <div className="absolute bottom-full right-0 z-[60] mb-2 w-72 rounded-lg border border-ui-panel-border bg-ui-panel p-2 shadow-xl">
-              <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wider text-white/40">
+            <div className="absolute bottom-full right-0 z-[60] mb-2 w-72 rounded-[3px] border border-ui-panel-border bg-ui-panel p-2">
+              <div className="px-2 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
                 Add tags
               </div>
               <TagChipInput
@@ -2380,7 +2371,7 @@ function BulkSelectionBar({
                 disabled={tagChips.length === 0}
                 loading={addingTags}
                 onClick={handleAddTags}
-                className="mt-2 w-full justify-center rounded-md text-sm py-1.5"
+                className="mt-2 w-full justify-center py-1.5"
               >
                 Tag {ids.size} {ids.size === 1 ? "item" : "items"}
               </Button>
@@ -2407,16 +2398,16 @@ function BulkSelectionBar({
       <button
         type="button"
         onClick={onDeleteSelected}
-        className="flex items-center gap-2 whitespace-nowrap rounded-full bg-red/90 px-3 py-1.5 text-sm font-medium text-white hover:bg-red transition-colors"
+        className="flex items-center gap-2 whitespace-nowrap bg-red/90 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white hover:bg-red transition-colors"
       >
-        <Trash2Icon  className="text-xs" />
+        <Trash2Icon className="text-xs" />
         Delete
       </button>
       <button
         type="button"
         onClick={clear}
         aria-label="Clear selection"
-        className="flex h-8 w-8 items-center justify-center rounded-full bg-ui-controls/60 text-white hover:bg-ui-controls/90 transition-colors"
+        className="flex h-8 w-8 items-center justify-center border border-white/15 bg-ui-controls/60 text-white hover:bg-ui-controls/90 transition-colors"
       >
         <XIcon />
       </button>
@@ -2438,7 +2429,7 @@ function BulkThumb({ item }: { item: GalleryItem }) {
           : ImageIcon;
   const showImage = !!item.thumbnail && !failed;
   return (
-    <div className="-ml-2 h-8 w-8 flex-shrink-0 overflow-hidden rounded border-2 border-ui-panel bg-black/30 first:ml-0">
+    <div className="-ml-2 h-8 w-8 flex-shrink-0 overflow-hidden border-2 border-ui-panel bg-black/30 first:ml-0">
       {showImage ? (
         <img
           src={item.thumbnail!}
diff --git a/frontend/apps/artcraft-webapp/src/pages/login/login.tsx b/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
index 8ca4b821f8..99b1ae4e50 100644
--- a/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
@@ -5,7 +5,11 @@ import { Input } from "@storyteller/ui-input";
 import { useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { UsersApi } from "@storyteller/api";
-import { AuthHeader, AuthFooter, GoogleLoginButton } from "../../components/auth";
+import {
+  AuthHeader,
+  AuthFooter,
+  GoogleLoginButton,
+} from "../../components/auth";
 import Seo from "../../components/seo";
 import { Reveal, RevealGroup } from "../../components/motion/reveal";
 import { refreshSession } from "../../lib/session";
@@ -76,7 +80,7 @@ const Login = () => {
         }}
       >
         {error && (
-          <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+          <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
             {error}
           </div>
         )}
@@ -93,7 +97,7 @@ const Login = () => {
           className="space-y-4"
         >
           <Reveal className="space-y-2">
-            <label className="text-xs font-semibold text-white/70 ml-1">
+            <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 ml-1">
               Email or Username
             </label>
             <Input
@@ -101,12 +105,12 @@ const Login = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="you@example.com or username"
-              inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+              inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
             />
           </Reveal>
           <Reveal className="space-y-2">
             <div className="flex justify-between items-center ml-1">
-              <label className="text-xs font-semibold text-white/70">
+              <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70">
                 Password
               </label>
               <Link
@@ -122,7 +126,7 @@ const Login = () => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Min. 8 characters"
-                inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
               />
               <button
                 type="button"
@@ -137,12 +141,12 @@ const Login = () => {
 
           <Reveal className="pt-2">
             <Button
-              className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+              className="w-full justify-center h-10"
               type="submit"
               disabled={isLoading}
             >
               {isLoading ? (
-                <LoaderCircleIcon  className="animate-spin" />
+                <LoaderCircleIcon className="animate-spin" />
               ) : (
                 "Log in"
               )}
@@ -157,9 +161,9 @@ const Login = () => {
       <RevealGroup inView={false} delayChildren={0.28} stagger={0.08}>
         <Reveal className="relative my-6 flex items-center justify-center">
           <div className="absolute inset-0 flex items-center">
-            <div className="w-full border-t border-white/10" />
+            <div className="w-full border-t border-white/15" />
           </div>
-          <span className="relative bg-[#1C1C20] px-4 text-xs uppercase tracking-widest text-white/40">
+          <span className="relative bg-[#101014] px-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
             or
           </span>
         </Reveal>
diff --git a/frontend/apps/artcraft-webapp/src/pages/media/media.tsx b/frontend/apps/artcraft-webapp/src/pages/media/media.tsx
index 3cb56dd7bc..f8da4f3f11 100644
--- a/frontend/apps/artcraft-webapp/src/pages/media/media.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/media/media.tsx
@@ -129,9 +129,9 @@ export default function MediaPage() {
         description="View shared media from ArtCraft."
       />
       <div className="mx-auto max-w-[1920px] w-full h-auto lg:h-[calc(100vh-100px)] min-h-[500px]">
-        <div className="flex flex-col lg:flex-row h-full w-full overflow-hidden rounded-xl border border-white/[2%]">
+        <div className="flex flex-col lg:flex-row h-full w-full overflow-hidden border border-white/15">
           {/* Media Preview Area */}
-          <div className="relative flex-1 bg-black/20 backdrop-blur-lg flex items-center justify-center overflow-hidden min-h-[30vh] lg:min-h-0">
+          <div className="relative flex-1 bg-black flex items-center justify-center overflow-hidden min-h-[30vh] lg:min-h-0">
             {mediaRecordLoading ? (
               <div className="absolute inset-0 flex items-center justify-center">
                 <LoadingSpinner className="h-12 w-12 text-white/60" />
diff --git a/frontend/apps/artcraft-webapp/src/pages/onboarding/onboarding.tsx b/frontend/apps/artcraft-webapp/src/pages/onboarding/onboarding.tsx
index 155dbabc79..9768a488ce 100644
--- a/frontend/apps/artcraft-webapp/src/pages/onboarding/onboarding.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/onboarding/onboarding.tsx
@@ -285,30 +285,25 @@ const Onboarding = () => {
 
   if (isLoading) {
     return (
-      <div className="relative min-h-screen bg-[#101014] text-white flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+      <div className="relative min-h-screen bg-ui-background text-white flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white"></div>
       </div>
     );
   }
 
   if (currentStep === "complete") {
     return (
-      <div className="relative min-h-screen bg-[#101014] text-white">
+      <div className="relative min-h-screen bg-ui-background text-white">
         <Seo
           title="Setup Complete - ArtCraft"
           description="Your account setup is complete."
         />
-        <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
-          <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-green-500/40 via-primary/30 to-purple-600/20 opacity-40 blur-[120px]"></div>
-        </div>
 
         <main className="relative z-10 pt-20 pb-20 px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
           <div className="max-w-md w-full text-center">
             <div className="mb-6">
-              <div className="w-20 h-20 mx-auto rounded-full bg-green-500/20 flex items-center justify-center">
-                <CircleCheckIcon
-                  
-                  className="text-5xl text-green-400" />
+              <div className="w-20 h-20 mx-auto border border-white/15 bg-green-500/10 flex items-center justify-center">
+                <CircleCheckIcon className="text-5xl text-green-400" />
               </div>
             </div>
             <h1 className="text-3xl md:text-4xl font-medium mb-4 text-white">
@@ -322,28 +317,20 @@ const Onboarding = () => {
   }
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white">
+    <div className="relative min-h-screen bg-ui-background text-white">
       <Seo
         title="Complete Your Setup - ArtCraft"
         description="Just a few more details to get you started with ArtCraft."
       />
 
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
-        <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-blue-700 via-blue-500 to-[#00AABA] opacity-20 blur-[120px]"></div>
-      </div>
-
       <main className="relative z-10 pt-20 pb-20 px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
         <div className="max-w-md w-full">
           {isNewAccount && (
-            <div className="bg-blue-500/10 border border-blue-500/30 rounded-xl p-4 mb-6 flex items-start gap-3 animate-fade-in shadow-lg shadow-blue-900/10">
-              <InfoIcon
-                
-                className="text-blue-400 mt-1 flex-shrink-0 text-lg" />
+            <div className="bg-white/5 border border-white/15 p-4 mb-6 flex items-start gap-3 animate-fade-in">
+              <InfoIcon className="text-white/70 mt-1 flex-shrink-0 text-lg" />
               <div>
-                <h3 className="text-blue-200 font-medium mb-1">
-                  Account Created
-                </h3>
-                <p className="text-blue-300/80 text-sm leading-relaxed">
+                <h3 className="text-white font-medium mb-1">Account Created</h3>
+                <p className="text-white/60 text-sm leading-relaxed">
                   We've automatically created an account for you. Please
                   complete your setup below to secure it.
                 </p>
@@ -351,7 +338,7 @@ const Onboarding = () => {
             </div>
           )}
 
-          <div className="bg-[#1C1C20] border border-white/10 rounded-2xl p-6 py-8 shadow-2xl">
+          <div className="bg-[#101014] border border-white/15 p-6 py-8">
             <div className="text-center mb-8">
               <h1 className="text-2xl font-semibold mb-2">
                 {currentStep === "password" &&
@@ -376,7 +363,7 @@ const Onboarding = () => {
 
             <form onSubmit={handleSubmit} className="space-y-4">
               {error && (
-                <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+                <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
                   {error}
                 </div>
               )}
@@ -384,7 +371,7 @@ const Onboarding = () => {
               {currentStep === "password" && (
                 <>
                   <div className="space-y-2">
-                    <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                    <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                       Password
                     </label>
                     <Input
@@ -393,13 +380,13 @@ const Onboarding = () => {
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
                       required
-                      inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                      inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                       placeholder="Enter your password"
                       minLength={8}
                     />
                   </div>
                   <div className="space-y-2">
-                    <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                    <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                       Confirm Password
                     </label>
                     <Input
@@ -408,7 +395,7 @@ const Onboarding = () => {
                       value={passwordConfirmation}
                       onChange={(e) => setPasswordConfirmation(e.target.value)}
                       required
-                      inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                      inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                       placeholder="Confirm your password"
                       minLength={8}
                     />
@@ -418,7 +405,7 @@ const Onboarding = () => {
 
               {currentStep === "email" && (
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     Email Address
                   </label>
                   <Input
@@ -427,7 +414,7 @@ const Onboarding = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     required
-                    inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                     placeholder="your@email.com"
                   />
                 </div>
@@ -435,7 +422,7 @@ const Onboarding = () => {
 
               {currentStep === "username" && (
                 <div className="space-y-2">
-                  <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                  <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                     Username
                   </label>
                   <Input
@@ -443,7 +430,7 @@ const Onboarding = () => {
                     id="username"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
-                    inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                     placeholder="Your display name"
                   />
                 </div>
@@ -452,13 +439,11 @@ const Onboarding = () => {
               <div className="flex gap-3 pt-2">
                 <Button
                   type="submit"
-                  className="flex-1 bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                  className="flex-1 justify-center h-10"
                   disabled={isSubmitting}
                 >
                   {isSubmitting ? (
-                    <LoaderCircleIcon
-                      
-                      className="animate-spin" />
+                    <LoaderCircleIcon className="animate-spin" />
                   ) : (
                     "Continue"
                   )}
@@ -467,7 +452,7 @@ const Onboarding = () => {
                   <Button
                     type="button"
                     onClick={handleSkip}
-                    className="bg-white/10 hover:bg-white/20 text-white border-none justify-center font-bold h-10 px-6"
+                    className="bg-transparent border border-white/15 hover:bg-white/10 text-white justify-center h-10 px-6"
                   >
                     Skip
                   </Button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagedraw/base-image-selector.tsx b/frontend/apps/artcraft-webapp/src/pages/pagedraw/base-image-selector.tsx
index f185ffffe2..33cd090aca 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagedraw/base-image-selector.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagedraw/base-image-selector.tsx
@@ -8,14 +8,16 @@
 //   - start from a blank canvas   → BlankCanvasModal (from the lib)
 
 import { useState } from "react";
-import { ImagesIcon, LoaderCircleIcon, MaximizeIcon, PencilIcon } from "lucide-react";
+import {
+  ImagesIcon,
+  LoaderCircleIcon,
+  MaximizeIcon,
+  PencilIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { UploaderStates } from "@storyteller/common";
 import { MediaFilesApi } from "@storyteller/api";
-import {
-  GalleryModal,
-  type GalleryItem,
-} from "@storyteller/ui-gallery-modal";
+import { GalleryModal, type GalleryItem } from "@storyteller/ui-gallery-modal";
 import {
   BlankCanvasModal,
   type BaseSelectorImage,
@@ -141,10 +143,10 @@ export function BaseImageSelector({
         }}
         onDragLeave={() => setIsDragging(false)}
         onDrop={onDrop}
-        className={`flex h-full w-full cursor-pointer flex-col items-center justify-center gap-4 rounded-2xl border-2 border-dashed p-8 text-center transition-colors ${
+        className={`flex h-full w-full cursor-pointer flex-col items-center justify-center gap-4 rounded-[3px] border border-dashed p-8 text-center transition-colors ${
           isDragging
-            ? "border-primary-400 bg-primary/10"
-            : "border-ui-panel-border bg-ui-background hover:border-primary-400/50"
+            ? "border-white bg-white/10"
+            : "border-white/15 bg-ui-background hover:border-white/40"
         } ${busy ? "pointer-events-none opacity-60" : ""}`}
       >
         <input
@@ -154,7 +156,7 @@ export function BaseImageSelector({
           onChange={onFileInput}
           disabled={busy}
         />
-        <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-primary-400/30 bg-primary/30 text-primary-300">
+        <div className="flex h-14 w-14 items-center justify-center border border-primary-400/30 bg-primary/30 text-primary-300">
           <DynamicIcon
             icon={busy ? LoaderCircleIcon : PencilIcon}
             className={`text-xl ${busy ? "animate-spin" : ""}`}
@@ -174,7 +176,7 @@ export function BaseImageSelector({
               setIsGalleryOpen(true);
             }}
             disabled={busy}
-            className="flex items-center gap-2 rounded-lg border border-ui-controls-border bg-ui-controls px-3 py-2 text-sm font-medium text-base-fg transition-colors hover:bg-ui-controls/80"
+            className="flex items-center gap-2 border border-ui-controls-border bg-ui-controls px-3 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors hover:bg-ui-controls/80"
           >
             <ImagesIcon />
             Pick from Library
@@ -186,7 +188,7 @@ export function BaseImageSelector({
               setIsBlankCanvasOpen(true);
             }}
             disabled={busy}
-            className="flex items-center gap-2 rounded-lg border border-ui-controls-border bg-ui-controls px-3 py-2 text-sm font-medium text-base-fg transition-colors hover:bg-ui-controls/80"
+            className="flex items-center gap-2 border border-ui-controls-border bg-ui-controls px-3 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors hover:bg-ui-controls/80"
           >
             <MaximizeIcon />
             Blank Canvas
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagedraw/pagedraw.tsx b/frontend/apps/artcraft-webapp/src/pages/pagedraw/pagedraw.tsx
index 5adf2f4c7a..e86a1e0a76 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagedraw/pagedraw.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagedraw/pagedraw.tsx
@@ -28,7 +28,7 @@ export default function PageDraw() {
             transform: "translateZ(0)",
             // Recolors the lib's `.pegboard-bg` canvas backdrop (the surface
             // behind the artboard) to the webapp's page color.
-            "--st-canvas": "#101014",
+            "--st-canvas": "#0b0b0c",
             // With the global top bar hidden but the bottom prompt bar still
             // present, the usable canvas area's center sits above the geometric
             // center. Pull the side panels (toolbar + history) up by half the
@@ -39,7 +39,7 @@ export default function PageDraw() {
       >
         <PageDrawLib
           adapter={adapter}
-          backgroundClassName="bg-[#101014]"
+          backgroundClassName="bg-ui-background"
           fillParentHeight={!isMobile}
           // Cost/help live in the webapp's own chrome, not over the canvas.
           showBottomRightControls={false}
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/demo-output-overlay.tsx b/frontend/apps/artcraft-webapp/src/pages/pagescene/demo-output-overlay.tsx
index be41e4d095..7f86cfccea 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/demo-output-overlay.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/demo-output-overlay.tsx
@@ -1,5 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
-import { ImageIcon, MaximizeIcon, MinimizeIcon, VideoIcon, WandSparklesIcon, XIcon } from "lucide-react";
+import {
+  ImageIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+  VideoIcon,
+  WandSparklesIcon,
+  XIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { MediaFilesApi, PromptsApi } from "@storyteller/api";
 import { addCorsParam, PLACEHOLDER_IMAGES } from "@storyteller/common";
@@ -154,7 +161,7 @@ export function DemoOutputOverlay({
 
   if (isExpanded) {
     return (
-      <div className="pointer-events-auto absolute inset-0 z-30 flex items-center justify-center bg-black/70 p-8 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="pointer-events-auto absolute inset-0 z-30 flex items-center justify-center bg-black/70 p-8 animate-in fade-in duration-200">
         <button
           type="button"
           aria-label="Close expanded view"
@@ -209,9 +216,9 @@ function ShowOutputPill({ onClick }: { onClick: () => void }) {
       type="button"
       onClick={onClick}
       aria-label="Show rendered output"
-      className="pointer-events-auto absolute right-2 top-16 z-30 flex items-center gap-2 rounded-xl border border-ui-controls-border bg-ui-controls px-3 py-1.5 text-sm font-medium text-base-fg shadow-xl transition-colors duration-150 hover:bg-ui-controls/80 animate-in fade-in slide-in-from-right-4"
+      className="pointer-events-auto absolute right-2 top-16 z-30 flex items-center gap-2 border border-ui-controls-border bg-ui-controls px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors duration-150 hover:bg-ui-controls/80 animate-in fade-in slide-in-from-right-4"
     >
-      <ImageIcon  className="h-3 w-3 text-primary" />
+      <ImageIcon className="h-3 w-3 text-primary" />
       Show output
     </button>
   );
@@ -223,9 +230,9 @@ interface ViewToggleProps {
 }
 
 // Single-button sliding toggle. The whole pill is the click target —
-// clicking anywhere on it flips between video and image. A primary-
-// coloured indicator translates between the two icons to show which
-// side is currently active.
+// clicking anywhere on it flips between video and image. A white
+// indicator translates between the two icons to show which side is
+// currently active.
 function ViewToggle({ view, onChange }: ViewToggleProps) {
   const next: View = view === "video" ? "image" : "video";
   return (
@@ -233,11 +240,11 @@ function ViewToggle({ view, onChange }: ViewToggleProps) {
       type="button"
       aria-label={view === "video" ? "Switch to image" : "Switch to video"}
       onClick={() => onChange(next)}
-      className="relative flex h-7 w-14 shrink-0 items-center rounded-full border border-ui-controls-border bg-black/30 p-0.5 transition-colors hover:bg-black/40"
+      className="relative flex h-7 w-14 shrink-0 items-center border border-ui-controls-border bg-black/30 p-0.5 transition-colors hover:bg-black/40"
     >
       <span
         aria-hidden="true"
-        className="pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 w-[calc(50%-0.125rem)] rounded-full bg-primary shadow-sm transition-transform duration-200 ease-out"
+        className="pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 w-[calc(50%-0.125rem)] bg-white transition-transform duration-200 ease-out"
         style={{
           transform: view === "image" ? "translateX(100%)" : "translateX(0%)",
         }}
@@ -258,7 +265,7 @@ function ToggleIcon({ icon, active }: ToggleIconProps) {
     <span
       className={
         "relative z-10 flex h-full flex-1 items-center justify-center transition-colors " +
-        (active ? "text-white" : "text-base-fg/60")
+        (active ? "text-black" : "text-base-fg/60")
       }
     >
       <DynamicIcon icon={icon} className="h-3 w-3" />
@@ -297,14 +304,12 @@ function Card({
     onToggleExpanded();
   };
   return (
-    <div className="glass pointer-events-auto overflow-hidden rounded-xl shadow-xl border-2 border-primary">
+    <div className="glass pointer-events-auto overflow-hidden border border-primary">
       <div className="flex items-center justify-between gap-3 border-b border-ui-controls-border/60 px-3 py-2">
         <div className="flex min-w-0 items-center gap-2">
-          <WandSparklesIcon
-            
-            className="h-3 w-3 shrink-0 text-primary" />
+          <WandSparklesIcon className="h-3 w-3 shrink-0 text-primary" />
           <div className="min-w-0 leading-tight">
-            <div className="text-xs font-semibold uppercase tracking-wider text-base-fg">
+            <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg">
               Rendered Output
             </div>
             <div className="truncate text-[10px] text-base-fg/50">
@@ -322,9 +327,9 @@ function Card({
                 ? "Collapse to picture-in-picture"
                 : "Hide rendered output"
             }
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-base-fg/60 transition-colors hover:bg-ui-controls hover:text-base-fg"
+            className="flex h-6 w-6 shrink-0 items-center justify-center text-base-fg/60 transition-colors hover:bg-ui-controls hover:text-base-fg"
           >
-            <XIcon  className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
           </button>
         </div>
       </div>
@@ -339,8 +344,9 @@ function Card({
             onToggleExpanded();
           }
         }}
-        className={`relative aspect-video w-full bg-black/40 ${isExpanded ? "cursor-zoom-out" : "cursor-zoom-in"
-          }`}
+        className={`relative aspect-video w-full bg-black/40 ${
+          isExpanded ? "cursor-zoom-out" : "cursor-zoom-in"
+        }`}
       >
         {children}
         <button
@@ -349,8 +355,10 @@ function Card({
             e.stopPropagation();
             onToggleExpanded();
           }}
-          aria-label={isExpanded ? "Collapse output view" : "Expand output view"}
-          className="absolute bottom-2 right-2 flex h-7 w-7 items-center justify-center rounded-md border border-white/10 bg-black/60 text-white/80 shadow-lg backdrop-blur-md transition-colors duration-150 hover:bg-black/80 hover:text-white"
+          aria-label={
+            isExpanded ? "Collapse output view" : "Expand output view"
+          }
+          className="absolute bottom-2 right-2 flex h-7 w-7 items-center justify-center border border-white/15 bg-black/60 text-white/80 transition-colors duration-150 hover:bg-black/80 hover:text-white"
         >
           <DynamicIcon
             icon={isExpanded ? MinimizeIcon : MaximizeIcon}
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/other-scenes-overlay.tsx b/frontend/apps/artcraft-webapp/src/pages/pagescene/other-scenes-overlay.tsx
index a41c23bd88..d2d68a3c7c 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/other-scenes-overlay.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/other-scenes-overlay.tsx
@@ -63,9 +63,9 @@ function CollapsedPill({ onClick }: { onClick: () => void }) {
     <button
       type="button"
       onClick={onClick}
-      className="flex items-center gap-2.5 rounded-full border border-primary/40 bg-gradient-to-r from-primary/90 to-primary px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:from-primary hover:to-primary animate-in fade-in slide-in-from-bottom-2 duration-300"
+      className="flex items-center gap-2.5 bg-white px-5 py-2.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-black transition-colors hover:bg-white/80 animate-in fade-in slide-in-from-bottom-2 duration-300"
     >
-      <BoxesIcon  className="h-3.5 w-3.5" />
+      <BoxesIcon className="h-3.5 w-3.5" />
       <span>See other demo scenes</span>
     </button>
   );
@@ -79,13 +79,11 @@ interface ExpandedPanelProps {
 
 function ExpandedPanel({ scenes, onClose, onPick }: ExpandedPanelProps) {
   return (
-    <div className="glass w-[860px] max-w-[90vw] overflow-hidden rounded-xl border border-ui-controls-border shadow-2xl animate-in fade-in slide-in-from-bottom-2 duration-200">
+    <div className="glass w-[860px] max-w-[90vw] overflow-hidden rounded-[3px] border border-ui-controls-border animate-in fade-in slide-in-from-bottom-2 duration-200">
       <div className="flex items-center justify-between border-b border-ui-controls-border/60 px-4 py-2.5">
         <div className="flex items-center gap-2">
-          <LayersIcon
-            
-            className="h-3 w-3 text-primary" />
-          <div className="text-xs font-semibold uppercase tracking-wider text-base-fg">
+          <LayersIcon className="h-3 w-3 text-primary" />
+          <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg">
             Other demo scenes
           </div>
         </div>
@@ -93,9 +91,9 @@ function ExpandedPanel({ scenes, onClose, onPick }: ExpandedPanelProps) {
           type="button"
           onClick={onClose}
           aria-label="Close other scenes"
-          className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 transition-colors hover:bg-ui-controls hover:text-base-fg"
+          className="flex h-6 w-6 items-center justify-center text-base-fg/60 transition-colors hover:bg-ui-controls hover:text-base-fg"
         >
-          <XIcon  className="h-4 w-4" />
+          <XIcon className="h-4 w-4" />
         </button>
       </div>
       <div className="grid grid-cols-2 gap-3 p-3 sm:grid-cols-3">
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/pagescene.tsx b/frontend/apps/artcraft-webapp/src/pages/pagescene/pagescene.tsx
index 20b868ca8f..c28a79e688 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/pagescene.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/pagescene.tsx
@@ -386,7 +386,7 @@ function MobileGate() {
   return (
     <div className="flex h-full w-full items-center justify-center p-6">
       <div className="flex max-w-sm flex-col items-center gap-4 text-center">
-        <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-amber-400/30 bg-amber-500/25 text-amber-300">
+        <div className="flex h-14 w-14 items-center justify-center border border-amber-400/30 bg-amber-500/25 text-amber-300">
           <MonitorIcon  className="text-xl" />
         </div>
         <h1 className="text-xl font-semibold text-white">
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashCard.tsx b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashCard.tsx
index f8b09ccc23..58b0619fe5 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashCard.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashCard.tsx
@@ -1,7 +1,7 @@
 // One reusable card for the edit-3D splash. The blank-scene variant
 // renders a dashed plus tile; the example variant renders a thumbnail
 // of the scene's rendered output (with the prompt's first reference
-// image cross-fading in on hover) over the accent gradient fallback.
+// image cross-fading in on hover) over the accent surface fallback.
 // Sharing one component keeps the hover/border/typography treatment
 // consistent across the grid.
 
@@ -29,7 +29,7 @@ interface ExampleCardProps {
 type SceneSplashCardProps = BlankCardProps | ExampleCardProps;
 
 const SHELL_CLASS =
-  "group flex flex-col overflow-hidden rounded-xl border bg-white/[0.03] text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60";
+  "group flex flex-col overflow-hidden border bg-white/[0.03] text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60";
 
 export function SceneSplashCard(props: SceneSplashCardProps) {
   return (
@@ -53,8 +53,8 @@ function CardThumbnail(props: SceneSplashCardProps) {
   if (props.variant === "blank") {
     return (
       <div className="flex aspect-video items-center justify-center bg-white/[0.02]">
-        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white/5 text-white/55 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
-          <PlusIcon  className="text-sm" />
+        <div className="flex h-9 w-9 items-center justify-center bg-white/5 text-white/55 transition-colors group-hover:bg-white/10 group-hover:text-white">
+          <PlusIcon className="text-sm" />
         </div>
       </div>
     );
@@ -78,10 +78,7 @@ function ExampleThumbnail({
 
   return (
     <div
-      className={twMerge(
-        "relative aspect-video overflow-hidden bg-gradient-to-br",
-        accentClass,
-      )}
+      className={twMerge("relative aspect-video overflow-hidden", accentClass)}
     >
       {previewUrl && (
         <img
@@ -99,7 +96,7 @@ function ExampleThumbnail({
           className="absolute inset-0 h-full w-full select-none object-cover opacity-0 transition-opacity duration-200 group-hover:opacity-100"
         />
       )}
-      <span className="absolute top-2 left-2 rounded-full bg-black/55 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-white/75 backdrop-blur-sm">
+      <span className="absolute top-2 left-2 bg-black/55 px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-white/75">
         Preview
       </span>
     </div>
@@ -125,7 +122,7 @@ function CardCaption({
 //   - previewUrl: the rendered output image (the "after"), shown by default
 //   - hoverUrl:   the prompt's first reference image (the "before"), shown
 //                 on hover so users can see what the scene generated FROM
-// Failures stay silent — the card's accent gradient is a graceful fallback.
+// Failures stay silent, the card's accent surface is a graceful fallback.
 function useSceneCardImages(outputToken: string): {
   previewUrl: string | null;
   hoverUrl: string | null;
@@ -157,7 +154,7 @@ function useSceneCardImages(outputToken: string): {
           promptResp?.data?.maybe_context_images?.[0]?.media_links?.cdn_url;
         if (firstRef) setHoverUrl(firstRef);
       } catch {
-        // Decorative imagery — gradient fallback is acceptable.
+        // Decorative imagery, the fallback surface is acceptable.
       }
     })();
 
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashModal.tsx b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashModal.tsx
index 0162d79b4e..f7c7c8432f 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashModal.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/SceneSplashModal.tsx
@@ -1,6 +1,6 @@
 // Edit-3D splash modal. Mirrors the design language of
-// SignupCtaModal (bg-[#161618], border-white/10, off-center primary
-// glow, font-display heading) so the editor's onboarding modal feels
+// SignupCtaModal (flat near-black surface, hairline border,
+// font-display heading) so the editor's onboarding modal feels
 // like the rest of the webapp, not a one-off.
 
 import { Modal } from "@storyteller/ui-modal";
@@ -22,7 +22,7 @@ export function SceneSplashModal({
     <Modal
       isOpen={isOpen}
       onClose={close}
-      className="rounded-2xl w-full max-w-3xl overflow-hidden border border-white/10 bg-[#161618] p-0 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)]"
+      className="w-full max-w-3xl overflow-hidden border border-white/15 bg-ui-modal p-0"
       childPadding={false}
       backdropClassName="!bg-black/80"
       closeOnOutsideClick
@@ -32,11 +32,7 @@ export function SceneSplashModal({
       <div className="relative overflow-hidden">
         <div
           aria-hidden
-          className="pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/25 blur-[80px]"
-        />
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
+          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-white/15"
         />
 
         <div className="relative px-8 pt-10 pb-8 sm:px-10 sm:pt-12 sm:pb-10">
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/example-scenes.ts b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/example-scenes.ts
index feff381813..1f3c821134 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/example-scenes.ts
+++ b/frontend/apps/artcraft-webapp/src/pages/pagescene/splash/example-scenes.ts
@@ -8,7 +8,7 @@ export interface ExampleScene {
   id: string;
   title: string;
   description: string;
-  // Tailwind gradient class fragment used by the card's thumbnail. Kept
+  // Tailwind class fragment used by the card's thumbnail fallback. Kept
   // as a class string (not a CSS color) so JIT picks it up at build time.
   accentClass: string;
   sceneToken: string;
@@ -27,7 +27,7 @@ export const EXAMPLE_SCENES: readonly ExampleScene[] = [
     id: "lone-drifter",
     title: "Lone Drifter",
     description: "Sundown standoff, dust on the wind",
-    accentClass: "from-orange-500/30 to-amber-700/20",
+    accentClass: "bg-orange-500/15",
     sceneToken: "m_ywnjq1bdjw2163p456tczbg5p7ean8",
     outputToken: "m_9n2w5c4teefm21nhsceex3degeca9h",
   },
@@ -35,7 +35,7 @@ export const EXAMPLE_SCENES: readonly ExampleScene[] = [
     id: "black-sails",
     title: "Black Sails",
     description: "Galleon at dawn, salt on the bow",
-    accentClass: "from-slate-700/30 to-teal-800/20",
+    accentClass: "bg-teal-500/15",
     sceneToken: PLACEHOLDER_SCENE_TOKEN,
     outputToken: PLACEHOLDER_OUTPUT_TOKEN,
   },
@@ -43,7 +43,7 @@ export const EXAMPLE_SCENES: readonly ExampleScene[] = [
     id: "cold-brew-hero",
     title: "Cold Brew",
     description: "Studio bottle shot, soft rim light",
-    accentClass: "from-amber-900/30 to-stone-700/20",
+    accentClass: "bg-amber-500/15",
     sceneToken: "m_c8earcb2pnhb4n6pnbcfn01hg9vn9w",
     outputToken: "m_a5y9cvskk8xe2y4j3hjskrha86x65q",
   },
diff --git a/frontend/apps/artcraft-webapp/src/pages/pricing/pricing.tsx b/frontend/apps/artcraft-webapp/src/pages/pricing/pricing.tsx
index 2d01150c70..adb4d14493 100644
--- a/frontend/apps/artcraft-webapp/src/pages/pricing/pricing.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/pricing/pricing.tsx
@@ -14,10 +14,10 @@ import { Reveal } from "../../components/motion/reveal";
 const SeedanceBanner = () => (
   <div className="flex flex-col gap-5">
     <div className="flex flex-wrap items-center gap-2">
-      <span className="inline-flex items-center text-[11px] font-semibold uppercase tracking-[0.18em] text-primary-200 bg-primary/[0.12] border border-primary/25 rounded-full px-3 py-1">
+      <span className="inline-flex items-center font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white bg-white/10 border border-white/30 px-3 py-1">
         Early access
       </span>
-      <span className="inline-flex items-center text-[11px] font-semibold uppercase tracking-[0.18em] text-white/65 bg-white/[0.04] border border-white/[0.08] rounded-full px-3 py-1">
+      <span className="inline-flex items-center font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/65 bg-white/5 border border-white/15 px-3 py-1">
         Available today in ArtCraft
       </span>
     </div>
@@ -33,7 +33,7 @@ const SeedanceBanner = () => (
       </p>
     </div>
 
-    <div className="relative w-full rounded-2xl sm:rounded-[24px] overflow-hidden bg-[#080808] border border-white/[0.08]">
+    <div className="relative w-full overflow-hidden bg-[#080808] border border-white/15">
       <div style={{ paddingTop: "56.25%" }} className="relative">
         <iframe
           src="https://player.vimeo.com/video/1169289718?autoplay=1&muted=1&loop=1&background=0&byline=0&portrait=0&title=0"
@@ -46,16 +46,16 @@ const SeedanceBanner = () => (
     </div>
 
     <div className="grid grid-cols-2 gap-3">
-      <div className="rounded-xl bg-gradient-to-br from-primary/15 via-white/[0.03] to-white/[0.02] border border-primary/25 p-4">
-        <div className="text-[12px] font-semibold uppercase tracking-wider text-primary mb-1">
+      <div className="bg-[#101014] border border-white/30 p-4">
+        <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white mb-1">
           Seedance video credits
         </div>
         <div className="text-white/55 text-sm leading-snug">
           Included with every paid ArtCraft plan
         </div>
       </div>
-      <div className="rounded-xl bg-[#080808] border border-white/[0.08] p-4">
-        <div className="text-[12px] font-semibold uppercase tracking-wider text-white/70 mb-1">
+      <div className="bg-[#101014] border border-white/15 p-4">
+        <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 mb-1">
           First in the world
         </div>
         <div className="text-white/55 text-sm leading-snug">
@@ -73,10 +73,10 @@ const BuyMoreCreditsCta = ({ onClick }: { onClick: () => void }) => (
     <p className="text-base text-white/65">Need more credits?</p>
     <Button
       variant="secondary"
-      className="mt-3 gap-2 rounded-full border border-white/[0.1] bg-white/[0.06] hover:bg-white/[0.1] px-5 py-2 h-11 text-[14px] font-semibold text-white"
+      className="mt-3 gap-2 border border-white/15 bg-transparent hover:bg-white/10 px-5 py-2 h-11 text-white"
       onClick={onClick}
     >
-      <CoinsIcon  className="text-primary text-[13px]" />
+      <CoinsIcon className="text-[13px]" />
       Buy more credits
     </Button>
   </div>
@@ -113,25 +113,12 @@ const Pricing = () => {
   }, []);
 
   return (
-    <div className="relative min-h-full bg-[#101014] text-white">
+    <div className="relative min-h-full bg-ui-background text-white">
       <Seo
         title="Pricing - ArtCraft"
         description="Simple, transparent pricing for ArtCraft. Start for free and scale as you grow."
       />
 
-      {/* Subtle radial accent at top, matches landing3. Clipped to its own
-          wrapper so the outer page can grow naturally and let SidebarInset
-          handle scrolling. */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
-        <div
-          className="absolute inset-x-0 top-0 h-[700px]"
-          style={{
-            background:
-              "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-          }}
-        />
-      </div>
-
       <main className="relative z-10 px-4 sm:px-8 pt-10">
         {isSeedanceRef ? (
           <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-[5fr_7fr] gap-8 xl:gap-12 items-start">
@@ -152,7 +139,12 @@ const Pricing = () => {
         ) : (
           <div className="max-w-6xl mx-auto">
             <PricingPromoBanner className="mb-10 sm:mb-12" />
-            <Reveal as="div" inView={false} y={20} className="text-center mb-14">
+            <Reveal
+              as="div"
+              inView={false}
+              y={20}
+              className="text-center mb-14"
+            >
               <h1 className="text-4xl sm:text-5xl md:text-6xl tracking-[-0.035em] font-medium leading-[1.02] mb-5">
                 Invest in <span className="font-serif-italic">yourself</span>.
               </h1>
@@ -187,12 +179,10 @@ const Pricing = () => {
           </p>
           <Button
             variant="secondary"
-            className="mt-4 gap-2 rounded-full border border-white/[0.1] bg-white/[0.06] hover:bg-white/[0.1] px-5 py-2 h-11 text-[14px] font-semibold text-white"
+            className="mt-4 gap-2 border border-white/15 bg-transparent hover:bg-white/10 px-5 py-2 h-11 text-white"
             onClick={() => setCreditsModalOpen(true)}
           >
-            <CoinsIcon
-              
-              className="text-primary text-[13px]" />
+            <CoinsIcon className="text-[13px]" />
             Buy Credits
           </Button>
         </div>
diff --git a/frontend/apps/artcraft-webapp/src/pages/referrals/referrals.tsx b/frontend/apps/artcraft-webapp/src/pages/referrals/referrals.tsx
index b20008fb1a..2aa38a011f 100644
--- a/frontend/apps/artcraft-webapp/src/pages/referrals/referrals.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/referrals/referrals.tsx
@@ -120,7 +120,7 @@ export default function Referrals() {
 
   if (!authChecked) {
     return (
-      <div className="flex min-h-full items-center justify-center bg-[#101014]">
+      <div className="flex min-h-full items-center justify-center bg-ui-background">
         <LoadingSpinner className="h-10 w-10 text-white/60" />
       </div>
     );
@@ -133,25 +133,16 @@ export default function Referrals() {
   const profileLink = `${SHARE_ORIGIN}/?u=${encodeURIComponent(user.username)}`;
 
   return (
-    <div className="relative min-h-full w-full bg-[#101014] text-white">
+    <div className="relative min-h-full w-full bg-ui-background text-white">
       <Seo
         title="Referrals - ArtCraft"
         description="Create and share referral links to invite people to ArtCraft."
       />
 
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0 overflow-hidden"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
-
       <main className="relative z-10 px-4 sm:px-8 pt-10 pb-10">
         <div className="max-w-3xl mx-auto">
           <header className="text-center mb-8">
-            <span className="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-5">
+            <span className="inline-block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 mb-5">
               Share the craft
             </span>
             <h1 className="text-5xl tracking-[-0.035em] font-medium leading-[1.02] mb-5">
@@ -166,16 +157,16 @@ export default function Referrals() {
 
           <div className="my-6 sm:my-8 flex items-center justify-center gap-3 text-white/40">
             <div className="h-px w-10 bg-white/20" />
-            <span className="text-xs font-semibold uppercase tracking-[0.18em]">
+            <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
               Or
             </span>
             <div className="h-px w-10 bg-white/20" />
           </div>
 
-          <section className="rounded-2xl bg-[#1C1C20] border border-white/10 p-6 sm:p-8 shadow-2xl">
+          <section className="bg-[#101014] border border-white/15 p-6 sm:p-8">
             <div className="flex items-start justify-between gap-4 mb-5">
               <div>
-                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary mb-2">
+                <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 mb-2">
                   Option 2
                 </div>
                 <h2 className="text-lg font-medium text-white">
@@ -196,7 +187,7 @@ export default function Referrals() {
                 <LoadingSpinner className="h-7 w-7 text-white/60" />
               </div>
             ) : listError ? (
-              <div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
+              <div className="bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
                 {listError}
               </div>
             ) : codes.length === 0 ? (
@@ -222,7 +213,7 @@ export default function Referrals() {
             <form onSubmit={handleCreate} className="mt-6 space-y-2">
               <label
                 htmlFor="new-referral-code"
-                className="block text-xs font-bold uppercase tracking-wide text-white/60 ml-1"
+                className="block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1"
               >
                 New code
               </label>
@@ -240,14 +231,14 @@ export default function Referrals() {
                   }
                   disabled={atLimit || creating}
                   maxLength={REFERRAL_CODE_MAX_LENGTH}
-                  className="flex-1 h-11 rounded-xl bg-black/20 border border-white/10 focus:border-primary/50 px-4 text-sm text-white placeholder-white/25 outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="flex-1 h-11 bg-ui-controls border border-white/15 focus:border-white/40 px-4 text-sm text-white placeholder-white/25 outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 />
                 <button
                   type="submit"
                   disabled={submitDisabled}
-                  className="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-primary hover:bg-primary-600 px-6 text-[14px] font-semibold text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                  className="inline-flex h-11 items-center justify-center gap-2 bg-white hover:bg-white/80 px-6 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-black transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                 >
-                  <PlusIcon  className="text-[12px]" />
+                  <PlusIcon className="text-[12px]" />
                   {creating ? "Creating…" : "Create"}
                 </button>
               </div>
@@ -275,9 +266,9 @@ export default function Referrals() {
 
 function ProfileLinkPanel({ profileLink }: { profileLink: string }) {
   return (
-    <section className="rounded-2xl bg-[#1C1C20] border border-white/10 p-6 sm:p-8 shadow-2xl">
+    <section className="bg-[#101014] border border-white/15 p-6 sm:p-8">
       <div className="mb-4">
-        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary mb-2">
+        <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 mb-2">
           Option 1
         </div>
         <h2 className="text-lg font-medium text-white">
@@ -316,13 +307,13 @@ function ReferralCodeRow({
   });
 
   return (
-    <li className="rounded-xl bg-black/20 border border-white/[0.08] px-4 py-3.5">
+    <li className="bg-ui-controls border border-white/15 px-4 py-3.5">
       <div className="flex items-center gap-3 mb-3">
         <div className="flex-1 min-w-0">
           <div className="text-[15px] font-medium text-white truncate">
             {entry.code}
           </div>
-          <div className="mt-0.5 text-[11px] uppercase tracking-wide text-white/40">
+          <div className="mt-0.5 font-mono text-[11px] uppercase tracking-[0.12em] text-white/40">
             Created {createdLabel}
           </div>
         </div>
@@ -332,7 +323,7 @@ function ReferralCodeRow({
               type="button"
               onClick={onCancelDelete}
               disabled={isDeleting}
-              className="h-9 px-3 rounded-full text-xs font-semibold text-white/70 hover:text-white hover:bg-white/[0.06] transition-colors disabled:opacity-50"
+              className="h-9 px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-50"
             >
               Cancel
             </button>
@@ -340,7 +331,7 @@ function ReferralCodeRow({
               type="button"
               onClick={onConfirmDelete}
               disabled={isDeleting}
-              className="h-9 px-3.5 rounded-full text-xs font-semibold text-white bg-red-500/85 hover:bg-red-500 transition-colors disabled:opacity-50"
+              className="h-9 px-3.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white bg-red-500/85 hover:bg-red-500 transition-colors disabled:opacity-50"
             >
               {isDeleting ? "Deleting…" : "Delete"}
             </button>
@@ -349,10 +340,10 @@ function ReferralCodeRow({
           <button
             type="button"
             onClick={onRequestDelete}
-            className="h-9 w-9 inline-flex items-center justify-center rounded-full text-white/45 hover:text-white hover:bg-white/[0.06] transition-colors"
+            className="h-9 w-9 inline-flex items-center justify-center text-white/45 hover:text-white hover:bg-white/10 transition-colors"
             title="Delete referral code"
           >
-            <Trash2Icon  className="text-[13px]" />
+            <Trash2Icon className="text-[13px]" />
           </button>
         )}
       </div>
@@ -381,12 +372,12 @@ function CopyableLink({ value }: { value: string }) {
         value={value}
         readOnly
         onFocus={(e) => e.currentTarget.select()}
-        className="flex-1 min-w-0 h-11 rounded-xl bg-black/20 border border-white/10 focus:border-primary/50 px-4 text-sm text-white/80 font-mono outline-none transition-colors"
+        className="flex-1 min-w-0 h-11 bg-ui-controls border border-white/15 focus:border-white/40 px-4 text-sm text-white/80 font-mono outline-none transition-colors"
       />
       <button
         type="button"
         onClick={handleCopy}
-        className="inline-flex h-11 items-center gap-2 rounded-full bg-white/[0.06] hover:bg-white/[0.1] border border-white/[0.1] px-4 text-xs font-semibold text-white/85 transition-all"
+        className="inline-flex h-11 items-center gap-2 bg-transparent hover:bg-white/10 border border-white/15 px-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/85 transition-colors"
       >
         <DynamicIcon
           icon={copied ? CheckIcon : CopyIcon}
diff --git a/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx b/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx
index e145fb5720..a9997ab7c3 100644
--- a/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx
@@ -25,10 +25,8 @@ const SetPassword = () => {
   // a password) from being misrouted here.
   if (!authChecked) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-[#101014]">
-        <LoaderCircleIcon
-          
-          className="animate-spin text-4xl text-primary/80" />
+      <div className="flex min-h-screen items-center justify-center bg-ui-background">
+        <LoaderCircleIcon className="animate-spin text-4xl text-white/80" />
       </div>
     );
   }
@@ -68,22 +66,14 @@ const SetPassword = () => {
   };
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+    <div className="relative min-h-screen bg-ui-background text-white overflow-hidden flex flex-col">
       <Seo
         title="Set Password - ArtCraft"
         description="Set a password for your ArtCraft account."
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
 
       <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
+        <div className="w-full max-w-md bg-[#101014] border border-white/15 p-6 py-8">
           <div className="text-center mb-8">
             <img
               src="/images/artcraft-icon.png"
@@ -105,13 +95,13 @@ const SetPassword = () => {
             }}
           >
             {error && (
-              <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+              <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 text-sm text-center">
                 {error}
               </div>
             )}
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+              <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                 Password
               </label>
               <div className="relative">
@@ -121,7 +111,7 @@ const SetPassword = () => {
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Min. 8 characters"
                   autoFocus
-                  inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                  inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                 />
                 <button
                   type="button"
@@ -135,7 +125,7 @@ const SetPassword = () => {
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+              <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 ml-1">
                 Confirm password
               </label>
               <div className="relative">
@@ -144,7 +134,7 @@ const SetPassword = () => {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   placeholder="Re-enter your password"
-                  inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                  inputClassName="w-full bg-ui-controls border border-white/15 focus:border-white/40 px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                 />
                 <button
                   type="button"
@@ -161,14 +151,12 @@ const SetPassword = () => {
 
             <div className="pt-2">
               <Button
-                className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                className="w-full justify-center h-10"
                 type="submit"
                 disabled={isLoading}
               >
                 {isLoading ? (
-                  <LoaderCircleIcon
-                    
-                    className="animate-spin" />
+                  <LoaderCircleIcon className="animate-spin" />
                 ) : (
                   "Set password"
                 )}
diff --git a/frontend/apps/artcraft-webapp/src/pages/support/support.tsx b/frontend/apps/artcraft-webapp/src/pages/support/support.tsx
index ec9fd83af8..e8dd08aed8 100644
--- a/frontend/apps/artcraft-webapp/src/pages/support/support.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/support/support.tsx
@@ -44,7 +44,7 @@ const Support = () => {
     "Get help with ArtCraft: browse the FAQ, join our Discord community, or email us directly.";
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white">
+    <div className="relative min-h-screen bg-ui-background text-white">
       <Seo title={title} description={description} />
 
       <main className="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 pt-24 sm:pt-32 pb-20">
@@ -58,7 +58,7 @@ const Support = () => {
           </p>
         </header>
 
-        <ul className="divide-y divide-white/[0.06] border border-white/[0.06] rounded-xl overflow-hidden bg-white/[0.02]">
+        <ul className="divide-y divide-white/15 border border-white/15 overflow-hidden bg-[#101014]">
           {ROWS.map((row) => (
             <li key={row.title}>
               <SupportLink row={row} />
@@ -72,13 +72,13 @@ const Support = () => {
 
 const SupportLink = ({ row }: { row: SupportRow }) => {
   const className =
-    "group flex items-center gap-4 px-4 py-4 sm:px-5 sm:py-5 transition-colors duration-150 hover:bg-white/[0.03]";
+    "group flex items-center gap-4 rounded-[3px] px-4 py-4 sm:px-5 sm:py-5 transition-colors duration-150 hover:bg-white/[0.03]";
 
   const content = (
     <>
       <div
-        className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-md border transition-colors ${
-          row.iconBgClass ?? "bg-white/[0.04] border-white/[0.06]"
+        className={`flex h-10 w-10 shrink-0 items-center justify-center border transition-colors ${
+          row.iconBgClass ?? "bg-white/[0.04] border-white/15"
         } ${row.iconColorClass ?? "text-white/70 group-hover:text-white"}`}
       >
         <DynamicIcon icon={row.icon} />
diff --git a/frontend/apps/artcraft-webapp/src/pages/video-editor/VideoEditorProjectsLanding.tsx b/frontend/apps/artcraft-webapp/src/pages/video-editor/VideoEditorProjectsLanding.tsx
index 12d32e320a..141166fbe0 100644
--- a/frontend/apps/artcraft-webapp/src/pages/video-editor/VideoEditorProjectsLanding.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/video-editor/VideoEditorProjectsLanding.tsx
@@ -18,8 +18,8 @@ import {
 
 // Landing view for /video-editor (no project in the URL): the user's saved
 // video projects plus a "New project" tile. Styled to match the create
-// pages and library: #101014 canvas, glow orbs, eyebrow + display heading,
-// ui-controls cards with primary hover rings, kebab menus, and the app's
+// pages and library: near-black canvas, eyebrow + display heading,
+// ui-controls cards with hairline hover rings, kebab menus, and the app's
 // standard confirm dialog.
 
 const GRID_CLASSES =
@@ -128,14 +128,7 @@ export function VideoEditorProjectsLanding({
   };
 
   return (
-    <div className="relative h-full w-full overflow-y-auto bg-[#101014] text-white">
-      {/* Video-themed glow orbs (create-video recipe; absolute, not fixed,
-          since this page scrolls inside SidebarInset). */}
-      <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
-        <div className="absolute left-1/2 top-[-10%] h-[700px] w-[700px] -translate-x-1/2 transform-gpu rounded-full bg-gradient-to-br from-blue-700 via-blue-500 to-[#00AABA] opacity-[0.10] blur-[120px]" />
-        <div className="absolute bottom-[-15%] left-[-10%] h-[500px] w-[500px] transform-gpu rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-purple-600 opacity-[0.07] blur-[120px]" />
-      </div>
-
+    <div className="relative h-full w-full overflow-y-auto bg-ui-background text-white">
       {/* The global topbar is hidden on /video-editor routes; surface its
           actions here like the editor header does. */}
       <div className="absolute right-4 top-3 z-20">
@@ -144,7 +137,7 @@ export function VideoEditorProjectsLanding({
 
       <div className="relative z-10 mx-auto w-full max-w-[1600px] px-3 pb-16 pt-10 sm:px-4 md:px-8 lg:px-12">
         <header className="animate-fade-in-up">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-white/40">
+          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
             Video editor
           </p>
           <h1 className="mt-1.5 font-display text-3xl font-semibold md:text-4xl">
@@ -193,7 +186,7 @@ export function VideoEditorProjectsLanding({
               variant="primary"
               icon={SparklesIcon}
               onClick={onNewProject}
-              className="mt-8 h-12 rounded-full px-6 text-base font-semibold"
+              className="mt-8 h-12 px-6"
             >
               New project
             </Button>
@@ -202,9 +195,7 @@ export function VideoEditorProjectsLanding({
 
         {status === "error" && (
           <div className="flex flex-col items-center justify-center gap-4 py-28 text-center">
-            <TriangleAlertIcon
-              
-              className="text-3xl text-white/30" />
+            <TriangleAlertIcon className="text-3xl text-white/30" />
             <div>
               <div className="text-lg font-medium">
                 Couldn't load your projects
diff --git a/frontend/apps/artcraft-webapp/src/pages/video-editor/components/VideoProjectCard.tsx b/frontend/apps/artcraft-webapp/src/pages/video-editor/components/VideoProjectCard.tsx
index d6fb4c3675..4949675f6e 100644
--- a/frontend/apps/artcraft-webapp/src/pages/video-editor/components/VideoProjectCard.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/video-editor/components/VideoProjectCard.tsx
@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { ClapperboardIcon, EllipsisIcon, PenIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  ClapperboardIcon,
+  EllipsisIcon,
+  PenIcon,
+  PlusIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import { PopoverMenu } from "@storyteller/ui-popover";
 import type { ProjectMeta } from "@storyteller/ui-video-editor";
@@ -7,19 +13,18 @@ import { formatTimeAgo } from "../../../lib/format-time-ago";
 
 // Card, skeleton, and "new project" tile for the video projects landing.
 // Visual language follows the library/create-page cards: ui-controls
-// surface, primary hover ring, hover-revealed kebab menu, and the house
+// surface, hairline hover ring, hover-revealed kebab menu, and the house
 // dashed recipe for the new-item tile.
 
 // Deterministic per-project placeholder art so thumbnail-less cards don't
-// all look identical (blue/teal/purple/pink families, matching the
-// create-page glow orbs).
-const PLACEHOLDER_GRADIENTS = [
-  "from-blue-600/30 via-blue-500/15 to-[#00AABA]/20",
-  "from-purple-600/30 via-blue-500/15 to-pink-500/20",
-  "from-[#00AABA]/30 via-blue-600/15 to-purple-500/20",
-  "from-pink-500/25 via-purple-500/15 to-blue-600/20",
-  "from-indigo-500/30 via-blue-500/15 to-teal-500/20",
-  "from-sky-500/25 via-indigo-500/15 to-purple-600/20",
+// all look identical (flat blue/teal/purple/pink tints).
+const PLACEHOLDER_TINTS = [
+  "bg-blue-600/20",
+  "bg-purple-600/20",
+  "bg-[#00AABA]/20",
+  "bg-pink-500/15",
+  "bg-indigo-500/20",
+  "bg-sky-500/15",
 ];
 
 const STAGGER_STEP_MS = 30;
@@ -48,7 +53,7 @@ export function VideoProjectCard({
   return (
     <div
       className={twMerge(
-        "animate-fade-in-up group relative flex flex-col overflow-hidden rounded-xl bg-ui-controls/40 ring-1 ring-white/5 transition-all duration-200 hover:ring-2 hover:ring-primary-400/60",
+        "animate-fade-in-up group relative flex flex-col overflow-hidden rounded-[3px] bg-ui-controls/40 ring-1 ring-white/15 transition-all duration-200 hover:ring-white/40",
         isDeleting && "pointer-events-none opacity-50",
       )}
       style={{
@@ -73,17 +78,15 @@ export function VideoProjectCard({
         ) : (
           <div
             className={twMerge(
-              "flex h-full w-full items-center justify-center bg-gradient-to-br",
-              gradientForProject(project.id),
+              "flex h-full w-full items-center justify-center",
+              tintForProject(project.id),
             )}
           >
-            <ClapperboardIcon
-              
-              className="text-3xl text-white/25 transition-colors group-hover:text-white/40" />
+            <ClapperboardIcon className="text-3xl text-white/25 transition-colors group-hover:text-white/40" />
           </div>
         )}
         <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/70 to-transparent p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-          <span className="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white backdrop-blur-sm">
+          <span className="bg-white/15 px-3 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white">
             Open project
           </span>
         </div>
@@ -106,10 +109,8 @@ export function VideoProjectCard({
           position="bottom"
           align="end"
           mode="default"
-          triggerIcon={
-            <EllipsisIcon  className="text-base-fg" />
-          }
-          buttonClassName="h-7 w-7 p-0 rounded-full bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg border border-ui-controls-border"
+          triggerIcon={<EllipsisIcon className="text-base-fg" />}
+          buttonClassName="h-7 w-7 p-0 bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg border border-ui-controls-border"
           panelClassName="w-max min-w-44 p-1"
           closeOnUnhover
         >
@@ -117,26 +118,26 @@ export function VideoProjectCard({
             <div className="flex flex-col">
               <button
                 type="button"
-                className="flex w-full items-center gap-2 whitespace-nowrap rounded-md px-2 py-2 text-sm text-base-fg hover:bg-ui-controls/60"
+                className="flex w-full items-center gap-2 whitespace-nowrap px-2 py-2 text-sm text-base-fg hover:bg-ui-controls/60"
                 onClick={(e) => {
                   e.stopPropagation();
                   close();
                   onRename();
                 }}
               >
-                <PenIcon  className="w-3.5" />
+                <PenIcon className="w-3.5" />
                 Rename
               </button>
               <button
                 type="button"
-                className="flex w-full items-center gap-2 whitespace-nowrap rounded-md px-2 py-2 text-sm text-red hover:bg-red/10"
+                className="flex w-full items-center gap-2 whitespace-nowrap px-2 py-2 text-sm text-red hover:bg-red/10"
                 onClick={(e) => {
                   e.stopPropagation();
                   close();
                   onDelete();
                 }}
               >
-                <Trash2Icon  className="w-3.5" />
+                <Trash2Icon className="w-3.5" />
                 Delete
               </button>
             </div>
@@ -149,11 +150,11 @@ export function VideoProjectCard({
 
 export function VideoProjectCardSkeleton() {
   return (
-    <div className="flex flex-col overflow-hidden rounded-xl ring-1 ring-white/5">
+    <div className="flex flex-col overflow-hidden rounded-[3px] ring-1 ring-white/15">
       <div className="animate-shimmer aspect-video w-full bg-white/[0.04]" />
       <div className="space-y-2 px-3 py-3">
-        <div className="animate-shimmer h-3.5 w-2/3 rounded bg-white/[0.06]" />
-        <div className="animate-shimmer h-3 w-1/3 rounded bg-white/[0.05]" />
+        <div className="animate-shimmer h-3.5 w-2/3 bg-white/[0.06]" />
+        <div className="animate-shimmer h-3 w-1/3 bg-white/[0.05]" />
       </div>
     </div>
   );
@@ -164,9 +165,9 @@ export function NewProjectTile({ onClick }: { onClick: () => void }) {
     <button
       type="button"
       onClick={onClick}
-      className="group flex h-full w-full cursor-pointer flex-col items-center justify-center gap-2.5 rounded-xl border border-dashed border-white/20 bg-white/[0.02] py-10 transition-colors hover:border-white/40 hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+      className="group flex h-full w-full cursor-pointer flex-col items-center justify-center gap-2.5 border border-dashed border-white/20 bg-white/[0.02] py-10 transition-colors hover:border-white/40 hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
     >
-      <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white/5 text-white/55 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
+      <span className="flex h-9 w-9 items-center justify-center bg-white/5 text-white/55 transition-colors group-hover:bg-white/15 group-hover:text-white">
         <PlusIcon />
       </span>
       <span className="text-sm font-medium text-white/70">New project</span>
@@ -174,10 +175,10 @@ export function NewProjectTile({ onClick }: { onClick: () => void }) {
   );
 }
 
-function gradientForProject(id: string): string {
+function tintForProject(id: string): string {
   let hash = 0;
   for (let i = 0; i < id.length; i++) {
     hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
   }
-  return PLACEHOLDER_GRADIENTS[hash % PLACEHOLDER_GRADIENTS.length];
+  return PLACEHOLDER_TINTS[hash % PLACEHOLDER_TINTS.length];
 }
diff --git a/frontend/apps/artcraft-webapp/src/pages/video-editor/video-editor.tsx b/frontend/apps/artcraft-webapp/src/pages/video-editor/video-editor.tsx
index 64b094425a..27911ae195 100644
--- a/frontend/apps/artcraft-webapp/src/pages/video-editor/video-editor.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/video-editor/video-editor.tsx
@@ -117,9 +117,7 @@ export default function VideoEditorPage() {
     return (
       <VideoEditorProjectsLanding
         projectStorage={projectStorage}
-        onNewProject={() =>
-          navigate(`/video-editor/${makeLocalProjectId()}`)
-        }
+        onNewProject={() => navigate(`/video-editor/${makeLocalProjectId()}`)}
         onOpenProject={(token) => navigate(`/video-editor/${token}`)}
       />
     );
@@ -215,7 +213,7 @@ function VideoEditorSession({
         </p>
         <button
           onClick={() => navigate("/video-editor")}
-          className="rounded-lg border border-white/15 px-4 py-2 text-sm transition-colors hover:bg-white/10"
+          className="border border-white/15 px-4 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors hover:bg-white/10"
         >
           Back to projects
         </button>
diff --git a/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx b/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
index f632f5a8a6..2998f2261a 100644
--- a/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
@@ -1,4 +1,13 @@
-import { ArrowRightIcon, BoxIcon, CircleCheckIcon, DownloadIcon, ImageIcon, MonitorIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
+import {
+  ArrowRightIcon,
+  BoxIcon,
+  CircleCheckIcon,
+  DownloadIcon,
+  ImageIcon,
+  MonitorIcon,
+  VideoIcon,
+  WandSparklesIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { Button } from "@storyteller/ui-button";
 import { Link } from "react-router-dom";
@@ -11,25 +20,17 @@ const Welcome = () => {
   const downloadUrl = isMacOs ? DOWNLOAD_LINKS.MACOS : DOWNLOAD_LINKS.WINDOWS;
 
   return (
-    <div className="relative min-h-full bg-[#101014] text-white">
+    <div className="relative min-h-full bg-ui-background text-white">
       <Seo
         title="Welcome - ArtCraft"
         description="Welcome to ArtCraft. Get started with your subscription."
       />
 
-      {/* Background gradient — clipped to its own wrapper so the outer
-          page can grow naturally and let SidebarInset handle scrolling. */}
-      <div className="absolute inset-0 overflow-hidden flex items-center justify-center pointer-events-none z-0">
-        <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-primary/40 via-purple-600/30 to-blue-500/20 opacity-30 blur-[120px]"></div>
-      </div>
-
       <main className="relative z-10 pt-12 pb-20 px-4 sm:px-6 lg:px-8">
         {/* Success Header */}
         <div className="text-center mb-12">
-          <div className="inline-flex items-center gap-3 bg-primary/10 border border-primary/30 rounded-full px-6 py-3 mb-6">
-            <CircleCheckIcon
-              
-              className="text-xl text-primary" />
+          <div className="inline-flex items-center gap-3 bg-white/5 border border-white/15 px-6 py-3 mb-6">
+            <CircleCheckIcon className="text-xl text-green-400" />
             <span className="text-white font-medium">
               Account created successfully!
             </span>
@@ -56,12 +57,10 @@ const Welcome = () => {
 
         {/* Create-in-browser CTA — desktop download is optional */}
         <div className="max-w-3xl mx-auto mb-8">
-          <div className="bg-[#1A1A1E] border border-white/10 rounded-3xl p-8 md:p-10">
+          <div className="bg-[#101014] border border-white/15 p-8 md:p-10">
             <div className="flex items-center gap-3 mb-2">
-              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
-                <WandSparklesIcon
-                  
-                  className="text-primary text-lg" />
+              <div className="w-10 h-10 bg-white/10 flex items-center justify-center">
+                <WandSparklesIcon className="text-white/70 text-lg" />
               </div>
               <h2 className="text-2xl font-medium text-white">
                 Start creating right here
@@ -84,18 +83,16 @@ const Welcome = () => {
                 <Link
                   key={item.to}
                   to={item.to}
-                  className="group flex items-center gap-3 bg-[#252529] hover:bg-[#2D2D32] border border-white/[0.06] hover:border-white/[0.12] rounded-xl px-4 py-3 transition-all"
+                  className="group flex items-center gap-3 rounded-[3px] bg-ui-controls hover:bg-white/10 border border-white/15 hover:border-white/30 px-4 py-3 transition-all"
                 >
                   <DynamicIcon
                     icon={item.icon}
-                    className="text-primary text-base shrink-0"
+                    className="text-white/70 text-base shrink-0"
                   />
                   <span className="text-white/90 font-medium flex-1">
                     {item.label}
                   </span>
-                  <ArrowRightIcon
-                    
-                    className="text-white/30 text-[11px] transition-transform group-hover:translate-x-0.5" />
+                  <ArrowRightIcon className="text-white/30 text-[11px] transition-transform group-hover:translate-x-0.5" />
                 </Link>
               ))}
             </div>
@@ -104,12 +101,10 @@ const Welcome = () => {
 
         {/* Desktop app alternative */}
         <div className="max-w-3xl mx-auto">
-          <div className="bg-[#1A1A1E] border border-white/10 rounded-3xl p-8 md:p-10">
+          <div className="bg-[#101014] border border-white/15 p-8 md:p-10">
             <div className="flex items-center gap-3 mb-2">
-              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
-                <MonitorIcon
-                  
-                  className="text-primary text-lg" />
+              <div className="w-10 h-10 bg-white/10 flex items-center justify-center">
+                <MonitorIcon className="text-white/70 text-lg" />
               </div>
               <h2 className="text-2xl font-medium text-white">
                 Want the desktop app too?
@@ -130,9 +125,9 @@ const Welcome = () => {
               ].map((item) => (
                 <div
                   key={item.step}
-                  className="bg-[#252529] p-4 rounded-xl flex items-center gap-4"
+                  className="bg-ui-controls border border-white/15 p-4 flex items-center gap-4"
                 >
-                  <div className="w-8 h-8 shrink-0 rounded-full bg-primary/60 flex items-center justify-center text-sm font-bold text-white">
+                  <div className="w-8 h-8 shrink-0 bg-white/10 border border-white/15 flex items-center justify-center font-mono text-[11px] font-semibold text-white">
                     {item.step}
                   </div>
                   <div className="text-white/90 font-medium">{item.text}</div>
@@ -142,7 +137,7 @@ const Welcome = () => {
 
             {/* Download Contingency */}
             {!isMobile && (
-              <div className="pt-6 border-t border-white/10">
+              <div className="pt-6 border-t border-white/15">
                 <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                   <span className="text-white/50 text-sm">
                     Download didn't start?
@@ -151,9 +146,9 @@ const Welcome = () => {
                     <Button
                       as="link"
                       href={downloadUrl}
-                      className="rounded-full bg-white text-black hover:bg-gray-100 dark:bg-white dark:text-black dark:hover:bg-gray-200 px-6 py-2.5 text-sm font-bold"
+                      className="bg-white text-black hover:bg-white/80 px-6 py-2.5"
                     >
-                      <DownloadIcon  className="mr-2" />
+                      <DownloadIcon className="mr-2" />
                       Download for {isMacOs ? "Mac" : "Windows"}
                     </Button>
                     <div className="flex gap-4 text-sm font-medium text-white/30">
@@ -161,14 +156,14 @@ const Welcome = () => {
                         href={DOWNLOAD_LINKS.WINDOWS}
                         className="hover:text-white transition-colors flex items-center gap-2"
                       >
-                        <span className="w-1.5 h-1.5 rounded-full bg-current"></span>
+                        <span className="w-1.5 h-1.5 bg-current"></span>
                         Windows
                       </a>
                       <a
                         href={DOWNLOAD_LINKS.MACOS}
                         className="hover:text-white transition-colors flex items-center gap-2"
                       >
-                        <span className="w-1.5 h-1.5 rounded-full bg-current"></span>
+                        <span className="w-1.5 h-1.5 bg-current"></span>
                         Mac
                       </a>
                     </div>
@@ -178,9 +173,9 @@ const Welcome = () => {
             )}
 
             {isMobile && (
-              <div className="bg-[#431407] border border-orange-900/50 rounded-2xl p-6 text-orange-200 text-sm leading-relaxed">
+              <div className="bg-[#431407] border border-orange-900/50 p-6 text-orange-200 text-sm leading-relaxed">
                 <div className="flex items-center justify-center mb-3 text-orange-400">
-                  <MonitorIcon  className="text-2xl" />
+                  <MonitorIcon className="text-2xl" />
                 </div>
                 ArtCraft is a powerful desktop experience. <br />
                 Please head to your computer to download and install.
diff --git a/frontend/apps/artcraft-webapp/src/styles.css b/frontend/apps/artcraft-webapp/src/styles.css
index 0f99454da8..6503ac11f2 100644
--- a/frontend/apps/artcraft-webapp/src/styles.css
+++ b/frontend/apps/artcraft-webapp/src/styles.css
@@ -5,36 +5,37 @@
 @layer base {
   :root {
     /* Sidebar tokens (consumed by tailwind colors in tailwind.config.js).
-       Stored as raw hex so we can reference them via theme() if needed. */
-    --sidebar-bg: #1a1a1a;
+       Brutalist system: near-black surfaces, white/15 hairlines, white
+       accent for selection/focus. */
+    --sidebar-bg: #1e1f22;
     --sidebar-fg: rgba(255, 255, 255, 0.72);
-    --sidebar-border: rgba(64, 64, 64, 0.5);
-    --sidebar-accent: rgba(255, 255, 255, 0.06);
+    --sidebar-border: rgba(255, 255, 255, 0.15);
+    --sidebar-accent: rgba(255, 255, 255, 0.08);
     --sidebar-accent-fg: #ffffff;
-    --sidebar-ring: rgba(45, 129, 255, 0.4);
+    --sidebar-ring: rgba(255, 255, 255, 0.4);
 
     /* shadcn design tokens consumed by @storyteller/ui-video-editor.
        Dark-theme palette (the editor only runs in dark mode today).
        --primary matches the webapp's brand blue (#2d81ff). */
-    --background: 0 0% 9%;
+    --background: 240 5% 8%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 12%;
+    --card: 240 11% 7%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 12%;
+    --popover: 240 4% 5%;
     --popover-foreground: 0 0% 98%;
     --primary: 216 100% 59%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 24%;
+    --secondary: 240 4% 9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 18%;
+    --muted: 240 4% 9%;
     --muted-foreground: 0 0% 64%;
-    --accent: 0 0% 16%;
+    --accent: 240 4% 9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 70% 50%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 217 91% 60%;
+    --border: 0 0% 100% / 0.15;
+    --input: 0 0% 100% / 0.15;
+    --ring: 0 0% 100% / 0.6;
 
     /* ── Motion tokens ──────────────────────────────────────────────────
        Shared easing curves + durations so motion across the app feels like
@@ -71,9 +72,25 @@
   }
 }
 
+/* Subtle 3px corners on interactive controls. The brutalist system keeps
+   large surfaces (panels, modals, tables), passive labels, and media tiles
+   square; anything pressable gets a soft corner for affordance. Explicit
+   rounding elsewhere uses the same rounded-[3px] value. Tailwind radius
+   utilities (rounded-full, rounded-none) still win — the utilities layer
+   is emitted after base. */
+@layer base {
+  button,
+  select,
+  textarea,
+  input:not([type="radio"]):not([type="range"]),
+  [role="button"] {
+    border-radius: 3px;
+  }
+}
+
 * {
   scrollbar-width: thin;
-  scrollbar-color: #363636 #171717;
+  scrollbar-color: #2c2c2f #0b0b0c;
 }
 
 *::-webkit-scrollbar {
@@ -81,13 +98,12 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: #171717;
+  background: #0b0b0c;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: #363636;
-  border-radius: 4px;
-  border: 2px solid #171717;
+  background-color: #2c2c2f;
+  border: 2px solid #0b0b0c;
 }
 
 .scrollbar-hidden {
@@ -100,6 +116,9 @@
 }
 
 @layer base {
+  /* Display face: Archivo — an industrial grotesque that matches the
+     hard-edged HUD system better than Bricolage's editorial quirk.
+     Weights still come from per-usage utilities. */
   h1,
   h2,
   h3,
@@ -107,7 +126,7 @@
   h5,
   h6 {
     font-family:
-      "Outfit",
+      "Archivo",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -116,12 +135,19 @@
       "Helvetica Neue",
       Arial,
       sans-serif;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.03em;
+  }
+
+  /* Only display-scale headings run expanded on the wdth axis; compact
+     headings (card titles, section labels) stay at normal width so they
+     don't truncate in tight layouts. */
+  h1,
+  h2 {
+    font-stretch: 118%;
   }
 
   body {
     font-family:
-      "Source Sans 3",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -131,11 +157,21 @@
       Arial,
       sans-serif;
     color: #ffffff;
-    background-color: #121212;
+    background-color: #0b0b0c;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
+  /* Mono HUD micro-label, matching the marketing site's .hud-label. */
+  .hud-label {
+    font-family:
+      "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+
   .font-serif-italic {
     font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
     font-style: italic;
@@ -144,6 +180,15 @@
   }
 }
 
+/* Display utility carries the ax-display reference treatment (Archivo at
+   weight 620, 118% width), matching the marketing site. Plain (unlayered)
+   rule so it wins over font-weight utilities like font-semibold, which are
+   emitted at the top of the file. */
+.font-display {
+  font-stretch: 118%;
+  font-weight: 620;
+}
+
 /* Shared component utilities (matching desktop app theme) */
 .bg-ui-badge {
   background-color: rgba(0, 0, 0, 0.4);
@@ -153,16 +198,11 @@
   filter: invert(1);
 }
 
-/* Gradient panel surface used by pagescene + lib components. */
+/* Panel surface used by pagescene + lib components. Brutalist system:
+   flat near-black, no gradient (class name kept for lib compatibility). */
 .bg-ui-panel-gradient {
-  background:
-    radial-gradient(
-      60.68% 60.68% at 50% 0%,
-      rgba(255, 255, 255, 0.08) 0%,
-      rgba(0, 0, 0, 0) 70%
-    ),
-    #1f1f1f;
-  background-color: #1f1f1f;
+  background: #101014;
+  background-color: #101014;
 }
 
 .prevent-select {
@@ -233,19 +273,18 @@
   }
 }
 
+/* Brutalist system: former "glass" surfaces are now flat near-black panels
+   with white/15 hairline borders (class names kept for lib compatibility). */
 @layer components {
   .glass {
-    @apply relative border border-white/10 shadow-lg backdrop-blur-3xl transition-colors duration-300;
-    @apply bg-[#303032]/90 !important;
+    @apply relative border border-white/15 transition-colors duration-300 rounded-[3px] backdrop-blur-sm;
+    @apply bg-[#1E1F22]/95 !important;
   }
 }
 
 .liquid-glass {
-  background: #232323c0;
-  border: 1px solid #ffffff14;
-  backdrop-filter: blur(18px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.6);
+  background: rgba(11, 11, 12, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.15);
 }
 
 /* Minimal thin scrollbar for prompt textareas */
@@ -264,7 +303,6 @@
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
-  border-radius: 9999px;
 }
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -412,56 +450,6 @@
   @apply bg-center;
 }
 
-@property --angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 0deg;
-}
-
-@keyframes rotate {
-  0% {
-    --angle: 0deg;
-  }
-
-  100% {
-    --angle: 360deg;
-  }
-}
-
-.glow-border-animated {
-  position: relative;
-  overflow: hidden;
-}
-
-.glow-border-animated::before {
-  content: "";
-  position: absolute;
-  inset: -3px;
-  background: conic-gradient(
-    from var(--angle),
-    transparent 0%,
-    transparent 80%,
-    rgba(147, 197, 253, 0.4) 85%,
-    rgba(191, 219, 254, 0.9) 90%,
-    rgba(255, 255, 255, 1) 92.5%,
-    rgba(191, 219, 254, 0.9) 95%,
-    rgba(147, 197, 253, 0.4) 100%,
-    transparent 100%
-  );
-  border-radius: inherit;
-  animation: rotate 2.2s linear infinite;
-  z-index: -1;
-}
-
-.glow-border-animated::after {
-  content: "";
-  position: absolute;
-  inset: 2px;
-  background: inherit;
-  border-radius: inherit;
-  z-index: -1;
-}
-
 /* Mobile bottom-sheet (SettingsDrawer). The shadcn Sheet relies on the
    tailwindcss-animate plugin, which isn't enabled here, so we drive the
    slide ourselves off Radix's data-state. Defining a closed-state animation
diff --git a/frontend/apps/artcraft-webapp/tailwind.config.js b/frontend/apps/artcraft-webapp/tailwind.config.js
index 19f7ad2739..85fee05284 100644
--- a/frontend/apps/artcraft-webapp/tailwind.config.js
+++ b/frontend/apps/artcraft-webapp/tailwind.config.js
@@ -18,8 +18,26 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
+        mono: [
+          "Geist Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Consolas",
+          "monospace",
+        ],
         display: [
-          "Outfit",
+          "Archivo",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "sans-serif",
+        ],
+        sans: [
           "system-ui",
           "-apple-system",
           "BlinkMacSystemFont",
@@ -159,16 +177,20 @@ module.exports = {
         ring: "var(--sidebar-ring)",
       },
       ui: {
-        // Aligned with artcraft app's theme-gray (frontend/apps/artcraft/app/src/styles/base.css)
-        background: "#242424",
-        panel: "#1F1F1F",
-        "panel-border": "#272727",
-        border: "#3f3f3f",
-        controls: "#3e3e41",
-        "controls-button": "#3E3E41",
-        "controls-border": "#3f3f3f",
-        divider: "#272727",
-        modal: "#1F1F1F",
+        // Brutalist system: near-black surfaces with white/15 hairline
+        // borders, aligned with artcraft-website + artcraft-website-next.
+        background: "#121316",
+        panel: "#0b0b0c",
+        "panel-border": "rgb(255 255 255 / 0.15)",
+        border: "rgb(255 255 255 / 0.15)",
+        // Raised control surface — a step above the #0b0b0c page/panel bg
+        // (matches the sidebar's #1e1f22) so buttons and inputs read as
+        // surfaces instead of blending into the background.
+        controls: "#1e1f22",
+        "controls-button": "#1e1f22",
+        "controls-border": "rgb(255 255 255 / 0.15)",
+        divider: "rgb(255 255 255 / 0.15)",
+        modal: "#0b0b0c",
       },
       "axis-x": "#D33242",
       "axis-y": "#308752",
diff --git a/frontend/apps/artcraft-website-next/TUNER.md b/frontend/apps/artcraft-website-next/TUNER.md
index 8f93e11bce..4086adbea9 100644
--- a/frontend/apps/artcraft-website-next/TUNER.md
+++ b/frontend/apps/artcraft-website-next/TUNER.md
@@ -13,8 +13,8 @@ the whole box with `–`, or expand/collapse individual sections.
 
 ## Behavior
 
-- **Live**: physics/lighting/material values are read every frame, so slider
-  changes apply instantly. Formation values (anything that changes the ball
+- **Live**: motion/look values are read every frame, so slider changes
+  apply instantly. Layout values (anything that changes the wall's panel
   arrangement itself) trigger a debounced rebuild (~250 ms after the last
   change).
 - **Persistent**: tuned values are stored in `localStorage`
@@ -48,12 +48,12 @@ Then read values where they're used:
   inside the loop — it's cheap and picks up changes instantly.
 - **Build-time consumers** (values baked into geometry/sampling): read at
   build time and subscribe to `useTunerStore` to trigger a debounced rebuild
-  when the group's values change (see the Formation wiring in
-  `hero-wordmark.tsx`).
+  when the group's values change (see the Wall layout wiring in
+  `hero-wall.tsx`).
 
 The panel picks up new groups automatically — no panel changes needed.
-Registered groups: Formation, Physics, Cursor & Light, Material, Halo (all
-for the hero wordmark; see `src/components/landing/hero-tunables.ts`).
+Registered groups: Wall layout, Wall motion, Wall look (all for the hero
+render wall; see `src/components/landing/hero-tunables.ts`).
 
 ## Shipping tuned values
 
diff --git a/frontend/apps/artcraft-website-next/next.config.ts b/frontend/apps/artcraft-website-next/next.config.ts
index 2f6491cfba..f1b0100002 100644
--- a/frontend/apps/artcraft-website-next/next.config.ts
+++ b/frontend/apps/artcraft-website-next/next.config.ts
@@ -2,6 +2,18 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
+  // Same-origin proxy for large media served from the live site. The hero
+  // rail draws these as WebGL video textures, which need CORS-clean
+  // sources — getartcraft.com serves its videos without
+  // Access-Control-Allow-Origin, so we route them through our own origin.
+  async rewrites() {
+    return [
+      {
+        source: "/ext-media/:path*",
+        destination: "https://getartcraft.com/:path*",
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/frontend/apps/artcraft-website-next/package-lock.json b/frontend/apps/artcraft-website-next/package-lock.json
index a61fa5aadc..4d7641fb77 100644
--- a/frontend/apps/artcraft-website-next/package-lock.json
+++ b/frontend/apps/artcraft-website-next/package-lock.json
@@ -1114,7 +1114,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.6.1.tgz",
       "integrity": "sha512-zF0rsKcVYpcJwbFEnv2HkHX9cvOEgsfQo/X8lwmR2dn13S4qEQJXir9fxf5js2LQFoXqxOY7MDkOkYx2uZ4gSg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/webxr": "*",
@@ -1497,7 +1496,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
       "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1508,7 +1506,6 @@
       "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -1533,7 +1530,6 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.0.tgz",
       "integrity": "sha512-4mY2tZAu0y0B0567w7013BBXSpsP0+Z48NJvmNo4Y/Pf76yCyz6Jw4P3tUVs10WuYNXXZ+wmHyGWpCek3amJxA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -2342,7 +2338,6 @@
       "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.39.4.tgz",
       "integrity": "sha512-oAS/PjAbc/xT3OzjUrGsorJ4J064XwhVD2t0OwKLP/E8QwDMUJ0oOv6ZI1SYMtLchv4g0ySEx+JcLy92+48vlA==",
       "license": "Zlib",
-      "peer": true,
       "peerDependencies": {
         "three": ">= 0.168.0 < 0.186.0"
       }
@@ -2368,7 +2363,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
       "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2378,7 +2372,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
       "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2597,8 +2590,7 @@
       "version": "0.184.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
       "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
diff --git a/frontend/apps/artcraft-website-next/src/app/globals.css b/frontend/apps/artcraft-website-next/src/app/globals.css
index 7cdcc0881c..5d2db3e7e5 100644
--- a/frontend/apps/artcraft-website-next/src/app/globals.css
+++ b/frontend/apps/artcraft-website-next/src/app/globals.css
@@ -35,7 +35,7 @@
 }
 
 :root[data-theme="dark"] {
-  --bg: #0b0b0c;
+  --bg: #121316;
   --bg-raised: #101014;
   --bg-sunken: #060607;
   --ink: #f2f1ee;
@@ -56,7 +56,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #0b0b0c;
+    --bg: #121316;
     --bg-raised: #101014;
     --bg-sunken: #060607;
     --ink: #f2f1ee;
@@ -92,10 +92,11 @@
   --color-invert-fg: var(--invert-fg);
   --color-danger: var(--danger);
 
-  --font-display: var(--font-bricolage), system-ui, sans-serif;
+  --font-display: var(--font-archivo), system-ui, sans-serif;
   --font-serif: var(--font-instrument), Georgia, serif;
   --font-body: var(--font-inter), system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-mono:
+    var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
 
   /* No rounded corners anywhere in this design language. */
   --radius-*: initial;
@@ -125,7 +126,9 @@ body {
 
 /* Signature interaction: label blocks invert on hover/active. */
 .invert-block {
-  transition: background-color 120ms linear, color 120ms linear;
+  transition:
+    background-color 120ms linear,
+    color 120ms linear;
 }
 .invert-block:hover,
 .invert-block[data-active="true"] {
@@ -146,6 +149,17 @@ body {
   }
 }
 
+/* Display type: Archivo at weight 620, slightly expanded on the width
+   axis (the ax-display reference treatment). Declared after the utility
+   layer so it also wins over per-usage font-weight utilities. The hero
+   wordmark opts back out of the stretch inline (canvas rasterization
+   can't apply font-stretch, so its static fallback must match the
+   sampled blocks). */
+.font-display {
+  font-stretch: 118%;
+  font-weight: 620;
+}
+
 /* Mono HUD micro-label. */
 .hud-label {
   font-family: var(--font-mono);
diff --git a/frontend/apps/artcraft-website-next/src/app/layout.tsx b/frontend/apps/artcraft-website-next/src/app/layout.tsx
index 8614d1eb93..a877bc451c 100644
--- a/frontend/apps/artcraft-website-next/src/app/layout.tsx
+++ b/frontend/apps/artcraft-website-next/src/app/layout.tsx
@@ -1,5 +1,11 @@
 import type { Metadata, Viewport } from "next";
-import { Bricolage_Grotesque, Instrument_Serif, Inter, Geist_Mono } from "next/font/google";
+import {
+  Archivo,
+  Archivo_Black,
+  Instrument_Serif,
+  Inter,
+  Geist_Mono,
+} from "next/font/google";
 import SiteNav from "@/components/site-nav";
 import SiteFooter from "@/components/site-footer";
 import MotionProvider from "@/components/motion-provider";
@@ -8,9 +14,21 @@ import "./globals.css";
 
 const SITE_URL = "https://getartcraft.com";
 
-const bricolage = Bricolage_Grotesque({
+// Display face: Archivo with its width axis loaded, so headings can run
+// slightly expanded (font-stretch) for the industrial-grotesque look.
+const archivo = Archivo({
   subsets: ["latin"],
-  variable: "--font-bricolage",
+  variable: "--font-archivo",
+  display: "swap",
+  axes: ["wdth"],
+});
+
+// Wordmark face: Archivo Black, the display family's poster-weight cut
+// (a single-weight family of its own, not Archivo at 900).
+const archivoBlack = Archivo_Black({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-archivo-black",
   display: "swap",
 });
 
@@ -91,7 +109,7 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className={`${bricolage.variable} ${instrumentSerif.variable} ${inter.variable} ${geistMono.variable}`}
+      className={`${archivo.variable} ${archivoBlack.variable} ${instrumentSerif.variable} ${inter.variable} ${geistMono.variable}`}
     >
       <head>
         <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
diff --git a/frontend/apps/artcraft-website-next/src/components/landing/hero-tunables.ts b/frontend/apps/artcraft-website-next/src/components/landing/hero-tunables.ts
index 9967904b3d..d7d2b207f3 100644
--- a/frontend/apps/artcraft-website-next/src/components/landing/hero-tunables.ts
+++ b/frontend/apps/artcraft-website-next/src/components/landing/hero-tunables.ts
@@ -1,62 +1,81 @@
-// Every tweakable constant of the hero wordmark, registered with the dev
+// Every tweakable constant of the hero render wall, registered with the dev
 // tuner (see TUNER.md). Defaults here ARE the shipped values — tune live,
 // copy the JSON from the panel, then update the defaults.
 
 import { defineTunables } from "@/lib/tuner";
 
-export const formationTuner = defineTunables("formation", "Formation", {
-  ballScale: { label: "Ball scale", min: 0.5, max: 2.5, step: 0.05, default: 1 },
-  sizeMin: { label: "Size min ×", min: 0.05, max: 0.6, step: 0.01, default: 0.18 },
-  sizeMax: { label: "Size max ×", min: 0.2, max: 1.4, step: 0.01, default: 0.66 },
-  sizeNoiseScale: { label: "Size noise px", min: 30, max: 400, step: 5, default: 130 },
-  sizeRoughen: { label: "Size roughen", min: 0, max: 1, step: 0.02, default: 0.4 },
-  gap: { label: "Gap px", min: 0, max: 6, step: 0.1, default: 0.6 },
-  depth: { label: "Depth ×", min: 0.2, max: 5, step: 0.1, default: 1.9 },
-  density: { label: "Fill density", min: 0.2, max: 3, step: 0.05, default: 1 },
-  edgeMargin: { label: "Edge margin", min: 0, max: 1, step: 0.05, default: 0.55 },
-  seed: { label: "Seed", min: 1, max: 9999, step: 1, default: 1013 },
+// Wall structure — moving these rebuilds the panel layout (debounced).
+export const wallLayoutTuner = defineTunables("wallLayout", "Wall layout", {
+  rowHeight: {
+    label: "Near row × vh",
+    min: 0.14,
+    max: 0.42,
+    step: 0.01,
+    default: 0.31,
+  },
+  rowScale: {
+    label: "Row shrink",
+    min: 0.5,
+    max: 1,
+    step: 0.01,
+    default: 0.78,
+  },
+  gap: { label: "Gap px", min: 8, max: 80, step: 1, default: 22 },
+  zStep: { label: "Row z step px", min: 0, max: 400, step: 5, default: 170 },
+  yNear: {
+    label: "Near row y × vh",
+    min: -0.5,
+    max: 0.5,
+    step: 0.01,
+    default: -0.17,
+  },
+  yMid: {
+    label: "Mid row y × vh",
+    min: -0.5,
+    max: 0.5,
+    step: 0.01,
+    default: 0.17,
+  },
 });
 
-export const physicsTuner = defineTunables("physics", "Physics", {
-  spring: { label: "Spring", min: 5, max: 140, step: 1, default: 46 },
-  damping: { label: "Damping", min: 1, max: 14, step: 0.1, default: 5.2 },
-  pushRadius: { label: "Push radius", min: 40, max: 450, step: 5, default: 180 },
-  pushStrength: { label: "Push strength", min: 1000, max: 80000, step: 500, default: 23000 },
-  swirl: { label: "Swirl", min: 0, max: 1.5, step: 0.05, default: 0.55 },
-  popZ: { label: "Pop toward viewer", min: 0, max: 2, step: 0.05, default: 0.6 },
-  bobAmp: { label: "Idle bob px", min: 0, max: 8, step: 0.1, default: 1.4 },
-  scatter: { label: "Intro scatter px", min: 0, max: 1400, step: 20, default: 480 },
+export const wallMotionTuner = defineTunables("wallMotion", "Wall motion", {
+  yawDeg: { label: "Yaw °", min: -35, max: 35, step: 0.5, default: -11 },
+  pitchDeg: { label: "Pitch °", min: -12, max: 12, step: 0.25, default: 2.5 },
+  speed: { label: "Drift px/s", min: 0, max: 240, step: 2, default: 42 },
+  speedStep: {
+    label: "Row parallax",
+    min: 0.3,
+    max: 1,
+    step: 0.02,
+    default: 0.62,
+  },
+  dragMax: {
+    label: "Max throw px/s",
+    min: 400,
+    max: 6000,
+    step: 100,
+    default: 2400,
+  },
+  introBurst: { label: "Intro burst ×", min: 1, max: 40, step: 1, default: 16 },
+  parallax: {
+    label: "Pointer tilt rad",
+    min: 0,
+    max: 0.09,
+    step: 0.002,
+    default: 0.024,
+  },
 });
 
-export const lightTuner = defineTunables("light", "Cursor & Light", {
-  intensityDark: { label: "Cursor int (dark)", min: 0, max: 220000, step: 1000, default: 58000 },
-  intensityLight: { label: "Cursor int (light)", min: 0, max: 220000, step: 1000, default: 30000 },
-  idleDim: { label: "Idle dim", min: 0, max: 1, step: 0.05, default: 0.3 },
-  lightZ: { label: "Light z", min: 30, max: 500, step: 5, default: 130 },
-  lightRange: { label: "Light range", min: 100, max: 3000, step: 50, default: 900 },
-  keyIntensity: { label: "Back key (dark)", min: 0, max: 8, step: 0.1, default: 2.2 },
-  counterIntensity: { label: "Counter rim (dark)", min: 0, max: 4, step: 0.05, default: 0.7 },
-  frontFill: { label: "Front fill (dark)", min: 0, max: 1, step: 0.01, default: 0.06 },
-  ambientDark: { label: "Ambient (dark)", min: 0, max: 1, step: 0.01, default: 0.05 },
-  ambientLight: { label: "Ambient (light)", min: 0, max: 2, step: 0.05, default: 0.55 },
-  dirLight: { label: "Key (light)", min: 0, max: 3, step: 0.05, default: 0.75 },
-});
-
-export const materialTuner = defineTunables("material", "Material", {
-  roughnessDark: { label: "Roughness (dark)", min: 0, max: 1, step: 0.02, default: 0.42 },
-  metalnessDark: { label: "Metalness (dark)", min: 0, max: 1, step: 0.02, default: 0.5 },
-  clearcoat: { label: "Clearcoat (dark)", min: 0, max: 1, step: 0.02, default: 0.9 },
-  clearcoatRoughness: { label: "Coat rough (dark)", min: 0, max: 1, step: 0.02, default: 0.22 },
-  roughnessLight: { label: "Roughness (light)", min: 0, max: 1, step: 0.02, default: 0.3 },
-  metalnessLight: { label: "Metalness (light)", min: 0, max: 1, step: 0.02, default: 0.15 },
-  envLight: { label: "Env int (light)", min: 0, max: 2, step: 0.05, default: 0.55 },
-  accentShare: { label: "Accent share", min: 0, max: 0.3, step: 0.005, default: 0.05 },
-});
-
-export const haloTuner = defineTunables("halo", "Halo", {
-  size: { label: "Size px", min: 200, max: 1800, step: 20, default: 720 },
-  alphaDark: { label: "Alpha (dark)", min: 0, max: 1, step: 0.02, default: 0.5 },
-  alphaLight: { label: "Alpha (light)", min: 0, max: 0.6, step: 0.01, default: 0.14 },
-  z: { label: "Z offset", min: -400, max: 0, step: 5, default: -90 },
-  falloff: { label: "Falloff", min: 0.5, max: 6, step: 0.1, default: 2.6 },
+export const wallLookTuner = defineTunables("wallLook", "Wall look", {
+  dimNear: { label: "Near row dim", min: 0, max: 1, step: 0.02, default: 0.86 },
+  dimMid: { label: "Mid row dim", min: 0, max: 1, step: 0.02, default: 0.7 },
+  washLight: { label: "Light wash", min: 0, max: 1, step: 0.02, default: 0.15 },
+  edgeFade: { label: "Edge fade", min: 0, max: 1, step: 0.02, default: 0.65 },
+  frameAlpha: {
+    label: "Frame alpha",
+    min: 0,
+    max: 1,
+    step: 0.02,
+    default: 0.9,
+  },
 });
diff --git a/frontend/apps/artcraft-website-next/src/components/landing/hero-wall.tsx b/frontend/apps/artcraft-website-next/src/components/landing/hero-wall.tsx
new file mode 100644
index 0000000000..22946a683e
--- /dev/null
+++ b/frontend/apps/artcraft-website-next/src/components/landing/hero-wall.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { SEEDANCE_SHOWCASE } from "@/lib/landing-data";
+import type { ThemeColors } from "@/lib/theme-colors";
+import { useTunerStore } from "@/lib/tuner";
+import {
+  wallLayoutTuner,
+  wallLookTuner,
+  wallMotionTuner,
+} from "./hero-tunables";
+
+// The render wall: two film-strip rows of showcase clips forming one
+// yawed, pitched wall behind the wordmark. Rows sit at stepped depths and
+// drift sideways at speeds proportional to their depth — real parallax,
+// like passing a wall of screens — and each row loops seamlessly (panels
+// wrap around offscreen). Near row is full strength; deeper rows dim into
+// the background so the type always owns the composition, and panels
+// vignette out toward the screen edges.
+//
+// A drag anywhere throws the wall with momentum (the hero container feeds
+// drag state in via the WallDrag ref, since the canvas itself is
+// pointer-events: none); the pointer also tilts the whole wall a few
+// degrees. Unattended it drifts at a slow walking pace.
+//
+// The scene is fitted 1 world unit == 1 CSS px at z=0, so layout below is
+// in pixels. Each clip decodes once; panels showing the same clip share
+// one VideoTexture.
+
+// Drag state written by the hero container's pointer handlers and consumed
+// here every frame.
+export type WallDrag = {
+  dragging: boolean;
+  dx: number; // accumulated drag pixels since the wall last consumed them
+  vel: number; // smoothed drag velocity, px/s
+};
+
+export function createWallDrag(): WallDrag {
+  return { dragging: false, dx: 0, vel: 0 };
+}
+
+const ROW_COUNT = 2;
+const FOV = 30; // must match FittedCamera in hero-wordmark.tsx
+
+type WallPanel = {
+  clip: number;
+  w: number;
+  h: number;
+  x0: number; // resting position of the panel center along its row
+  y: number;
+  z: number;
+  row: number;
+  length: number; // total loop length of the row this panel rides
+};
+
+function smoothstep(edge0: number, edge1: number, x: number): number {
+  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+
+export default function HeroWall({
+  pointer,
+  drag,
+  colors,
+}: {
+  pointer: React.RefObject<{ x: number; y: number; active: boolean }>;
+  drag: React.RefObject<WallDrag>;
+  colors: ThemeColors;
+}) {
+  const size = useThree((s) => s.size);
+  const rigRef = useRef<THREE.Group>(null);
+  const groupRefs = useRef<(THREE.Group | null)[]>([]);
+  const state = useRef({
+    offset: 0,
+    speed: 0,
+    wasDragging: false,
+    started: false,
+  });
+  const tilt = useRef({ x: 0, y: 0 });
+
+  const dark = useMemo(() => {
+    const c = new THREE.Color(colors.bg);
+    return c.r + c.g + c.b < 1.5;
+  }, [colors.bg]);
+
+  // One <video> and one shared texture per clip.
+  const videos = useMemo(
+    () =>
+      SEEDANCE_SHOWCASE.map((clip) => {
+        const v = document.createElement("video");
+        v.src = clip.src;
+        v.muted = true;
+        v.loop = true;
+        v.playsInline = true;
+        v.crossOrigin = "anonymous";
+        v.preload = "auto";
+        return v;
+      }),
+    [],
+  );
+  const textures = useMemo(
+    () =>
+      videos.map((v, i) => {
+        const t = new THREE.VideoTexture(v);
+        t.colorSpace = THREE.SRGBColorSpace;
+        // Cover-fit the source into the panel plane (GL has no object-cover):
+        // crop the longer axis via repeat/offset once dimensions are known.
+        const fit = () => {
+          const va = v.videoWidth / v.videoHeight || 16 / 9;
+          const pa = SEEDANCE_SHOWCASE[i].aspect;
+          if (va > pa) {
+            t.repeat.set(pa / va, 1);
+            t.offset.set((1 - pa / va) / 2, 0);
+          } else {
+            t.repeat.set(1, va / pa);
+            t.offset.set(0, (1 - va / pa) / 2);
+          }
+        };
+        if (v.readyState >= 1) fit();
+        else v.addEventListener("loadedmetadata", fit, { once: true });
+        return t;
+      }),
+    [videos],
+  );
+  // Video lifecycle is keyed to the videos/textures alone. Re-arm sources
+  // on every run: React strict mode (and any remount) runs the cleanup,
+  // which unloads the shared <video> elements the memo still holds.
+  useEffect(() => {
+    videos.forEach((v, i) => {
+      if (!v.getAttribute("src")) {
+        v.src = SEEDANCE_SHOWCASE[i].src;
+        v.load();
+      }
+      v.play().catch(() => {});
+    });
+    return () => {
+      textures.forEach((t) => t.dispose());
+      videos.forEach((v) => {
+        v.pause();
+        v.removeAttribute("src");
+        v.load();
+      });
+    };
+  }, [videos, textures]);
+
+  // Layout tunables change the wall's structure — debounce a rebuild.
+  const [layoutVersion, setLayoutVersion] = useState(0);
+  useEffect(() => {
+    let last = JSON.stringify(wallLayoutTuner.read());
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const unsubscribe = useTunerStore.subscribe(() => {
+      const now = JSON.stringify(wallLayoutTuner.read());
+      if (now === last) return;
+      last = now;
+      clearTimeout(timer);
+      timer = setTimeout(() => setLayoutVersion((v) => v + 1), 250);
+    });
+    return () => {
+      clearTimeout(timer);
+      unsubscribe();
+    };
+  }, []);
+
+  // Wall structure: per row, panels are laid end to end with a uniform gap
+  // until they cover the yawed viewport plus one panel of margin, so the
+  // wrap-around teleport always happens offscreen. Rows shrink and recede
+  // with depth; each row draws from its own disjoint slice of the clip
+  // pool, so no clip ever appears in more than one row.
+  const layout = useMemo(() => {
+    const t = wallLayoutTuner.read();
+    const nearH = Math.min(320, Math.max(110, size.height * t.rowHeight));
+    const yFracs = [t.yNear, t.yMid];
+    const clipCount = SEEDANCE_SHOWCASE.length;
+    const perRow = Math.floor(clipCount / ROW_COUNT);
+    const extra = clipCount % ROW_COUNT;
+    const panels: WallPanel[] = [];
+    for (let i = 0; i < ROW_COUNT; i++) {
+      // Remainder clips go to the deeper rows: their panels are smaller, so
+      // they need more of them and repeat soonest without the bigger slice.
+      const extraBefore = Math.max(0, i - (ROW_COUNT - extra));
+      const rowStart = i * perRow + extraBefore;
+      const rowClips = Math.max(1, perRow + (i >= ROW_COUNT - extra ? 1 : 0));
+      const h = nearH * Math.pow(t.rowScale, i);
+      const span = size.width * 1.5 + h * 2.6;
+      let x = 0;
+      let k = 0;
+      const rowPanels: WallPanel[] = [];
+      while (x < span) {
+        const clip = (rowStart + (k % rowClips)) % clipCount;
+        const w = h * SEEDANCE_SHOWCASE[clip].aspect;
+        rowPanels.push({
+          clip,
+          w,
+          h,
+          x0: x + w / 2,
+          y: size.height * yFracs[i],
+          z: -t.zStep * i,
+          row: i,
+          length: 0,
+        });
+        x += w + t.gap;
+        k++;
+      }
+      // The row is a loop, so the seam (last panel wrapping around to meet
+      // the first) is an adjacency too. When the cycle length doesn't divide
+      // the panel count, the seam can pair a clip with itself — bump the
+      // last panel one step along the slice, which is distinct from both
+      // neighbors whenever the slice holds 3+ clips.
+      const last = rowPanels[rowPanels.length - 1];
+      if (rowPanels.length > 1 && rowClips >= 3 && last.clip === rowPanels[0].clip) {
+        const left = last.x0 - last.w / 2;
+        last.clip = rowStart + ((last.clip - rowStart + 1) % rowClips);
+        last.w = last.h * SEEDANCE_SHOWCASE[last.clip].aspect;
+        last.x0 = left + last.w / 2;
+        x = left + last.w + t.gap;
+      }
+      for (const p of rowPanels) p.length = x;
+      panels.push(...rowPanels);
+    }
+    const frames = panels.map(
+      (p) => new THREE.EdgesGeometry(new THREE.PlaneGeometry(p.w, p.h)),
+    );
+    return { panels, frames };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [size.width, size.height, layoutVersion]);
+  useEffect(() => () => layout.frames.forEach((f) => f.dispose()), [layout]);
+
+  // Per-panel materials (panels share clip textures but dim and vignette
+  // independently, so each needs its own color/opacity).
+  const materials = useMemo(
+    () =>
+      layout.panels.map(
+        (p) =>
+          new THREE.MeshBasicMaterial({
+            map: textures[p.clip],
+            transparent: true,
+            toneMapped: false,
+          }),
+      ),
+    [textures, layout],
+  );
+  const frameMaterials = useMemo(
+    () =>
+      layout.panels.map(
+        () => new THREE.LineBasicMaterial({ transparent: true }),
+      ),
+    [layout],
+  );
+  // Frame color follows the theme imperatively — recreating the materials
+  // on a color change would churn the panel meshes for nothing.
+  useEffect(() => {
+    frameMaterials.forEach((m) => m.color.set(colors.lineStrong));
+  }, [frameMaterials, colors.lineStrong]);
+  useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+  useEffect(
+    () => () => frameMaterials.forEach((m) => m.dispose()),
+    [frameMaterials],
+  );
+
+  // Per-panel video readiness, eased: until a clip has decodable frames its
+  // panels stay as empty hairline skeletons, then the footage fades in —
+  // no black rectangles and no pop-in on slow connections.
+  const videoAlpha = useMemo(
+    () => new Float32Array(layout.panels.length),
+    [layout],
+  );
+
+  useFrame((st3, delta) => {
+    const dt = Math.min(delta, 0.05);
+    const st = state.current;
+    const d = drag.current;
+    const mt = wallMotionTuner.read();
+    const lk = wallLookTuner.read();
+
+    // Mount: the wall sweeps in fast and eases down to its walking pace.
+    if (!st.started) {
+      st.started = true;
+      st.speed = mt.speed * mt.introBurst;
+    }
+
+    // Offset advances in near-row pixels; deeper rows consume it scaled by
+    // their parallax factor, so a drag maps 1:1 to the near row's motion.
+    if (d?.dragging) {
+      st.offset -= d.dx;
+      d.dx = 0;
+      st.wasDragging = true;
+    } else {
+      if (st.wasDragging && d) {
+        st.wasDragging = false;
+        st.speed = Math.max(-mt.dragMax, Math.min(mt.dragMax, d.vel));
+      }
+      st.offset += st.speed * dt;
+      st.speed += (mt.speed - st.speed) * (1 - Math.exp(-1.1 * dt));
+    }
+
+    // Pointer tilt, critically damped; unattended, a slow Lissajous drift
+    // keeps the perspective alive.
+    const p = pointer.current ?? { x: 0, y: 0, active: false };
+    const t = st3.clock.elapsedTime;
+    const nx = p.active
+      ? p.x / (size.width / 2)
+      : Math.sin(t * 0.13) * 0.35;
+    const ny = p.active
+      ? p.y / (size.height / 2)
+      : Math.cos(t * 0.09) * 0.3;
+    const k = 1 - Math.exp(-4 * dt);
+    tilt.current.x += (nx - tilt.current.x) * k;
+    tilt.current.y += (ny - tilt.current.y) * k;
+
+    const yaw =
+      THREE.MathUtils.degToRad(mt.yawDeg) + tilt.current.x * mt.parallax;
+    const pitch =
+      THREE.MathUtils.degToRad(mt.pitchDeg) - tilt.current.y * mt.parallax * 0.6;
+    rigRef.current?.rotation.set(pitch, yaw, 0);
+
+    const intro = smoothstep(0, 1, Math.min(1, t / 1.4));
+    const dist = size.height / 2 / Math.tan(THREE.MathUtils.degToRad(FOV / 2));
+    const cosY = Math.cos(yaw);
+    const sinY = Math.sin(yaw);
+    const dims = [lk.dimNear, lk.dimMid];
+
+    for (let i = 0; i < layout.panels.length; i++) {
+      const g = groupRefs.current[i];
+      if (!g) continue;
+      const c = layout.panels[i];
+
+      // Odd rows ride the shared offset mirrored, so the top strip slides
+      // against the near one (and a drag counter-scrolls them).
+      const f = Math.pow(mt.speedStep, c.row) * (c.row % 2 ? -1 : 1);
+      let lx = (c.x0 - st.offset * f) % c.length;
+      if (lx < 0) lx += c.length;
+      lx -= c.length / 2;
+      g.position.set(lx, c.y, c.z);
+
+      // Screen-space vignette: project the panel center through the yaw and
+      // fade panels out toward (and past) the viewport edges, so the wall
+      // dissolves into the background instead of ending in a hard cut.
+      const wx = cosY * lx + sinY * c.z;
+      const wz = -sinY * lx + cosY * c.z;
+      const projX = wx * (dist / (dist - wz));
+      const edge = Math.abs(projX) / (size.width / 2);
+      const vig = 1 - lk.edgeFade * smoothstep(0.72, 1.3, edge);
+
+      const ready = videos[c.clip].readyState >= 2 ? 1 : 0;
+      videoAlpha[i] += (ready - videoAlpha[i]) * (1 - Math.exp(-3 * dt));
+      const va = videoAlpha[i];
+
+      // Depth dimming: dark theme crushes deep rows toward black (the bg);
+      // light theme washes them toward the paper via opacity instead.
+      const dim = dims[c.row];
+      const mat = materials[i];
+      if (dark) {
+        mat.color.setScalar(dim * vig * va);
+        mat.opacity = intro;
+      } else {
+        // Light theme recedes via opacity toward the paper — but only for
+        // depth: the near row keeps nearly full ink (sqrt softens its dim)
+        // and the wash applies per-row, else everything goes pastel.
+        mat.color.setScalar(1);
+        mat.opacity =
+          intro * Math.sqrt(dim) * vig * va * (1 - lk.washLight * c.row);
+      }
+      frameMaterials[i].opacity = lk.frameAlpha * vig * intro;
+    }
+  });
+
+  return (
+    <group ref={rigRef}>
+      {layout.panels.map((c, i) => (
+        <group
+          key={i}
+          ref={(el) => {
+            groupRefs.current[i] = el;
+          }}
+          position={[0, c.y, c.z]}
+        >
+          <mesh material={materials[i]}>
+            <planeGeometry args={[c.w, c.h]} />
+          </mesh>
+          {/* Hairline frame, matching the site's bordered viewport idiom. */}
+          <lineSegments geometry={layout.frames[i]} material={frameMaterials[i]} />
+        </group>
+      ))}
+    </group>
+  );
+}
diff --git a/frontend/apps/artcraft-website-next/src/components/landing/hero-wordmark.tsx b/frontend/apps/artcraft-website-next/src/components/landing/hero-wordmark.tsx
index d40bb6ef9b..d5b3c66d07 100644
--- a/frontend/apps/artcraft-website-next/src/components/landing/hero-wordmark.tsx
+++ b/frontend/apps/artcraft-website-next/src/components/landing/hero-wordmark.tsx
@@ -1,33 +1,10 @@
 "use client";
 
-import {
-  Component,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { Component, useEffect, useRef, useState, type ReactNode } from "react";
+import { Canvas, useThree } from "@react-three/fiber";
 import * as THREE from "three";
-import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 import { watchThemeColors, type ThemeColors } from "@/lib/theme-colors";
-import { useTunerStore } from "@/lib/tuner";
-import {
-  sampleWordmark,
-  WordmarkSim,
-  type SampledWordmark,
-} from "./wordmark-sim";
-import {
-  formationTuner,
-  physicsTuner,
-  lightTuner,
-  materialTuner,
-  haloTuner,
-} from "./hero-tunables";
-
-const WORDMARK = "artcraft";
-const FONT_WEIGHT = 700;
+import HeroWall, { createWallDrag } from "./hero-wall";
 
 type PointerState = {
   x: number;
@@ -35,17 +12,20 @@ type PointerState = {
   active: boolean;
 };
 
-// The hero wordmark: "artcraft" built from small 3D balls. The cursor is both
-// a point light and a push force — the balls part around it, pop toward the
-// viewer, and rejoin on their springs. On mount they assemble from a
-// scattered cloud. Server HTML, reduced-motion visitors, and WebGL failures
-// all get the static display-type wordmark instead.
+// The hero: the wordmark set in the site's display type, floating over a
+// perspective render wall — two film-strip rows of Seedance takes forming
+// one yawed wall behind the word, drifting sideways at parallax speeds.
+// The type is real DOM text (crisp at any size, selectable by crawlers);
+// the wall is the WebGL layer behind it. Dragging anywhere throws the wall
+// with momentum; the pointer tilts it a few degrees. Server HTML,
+// reduced-motion visitors, and WebGL failures all get the plain wordmark
+// on the page background.
 export default function HeroWordmark() {
   const [ready, setReady] = useState(false);
   const [colors, setColors] = useState<ThemeColors | null>(null);
-  const [sample, setSample] = useState<SampledWordmark | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const pointerRef = useRef<PointerState>({ x: 0, y: 0, active: false });
+  const wallDragRef = useRef(createWallDrag());
 
   // Gate: motion allowed and the tab actually foregrounded (a canvas born in
   // a hidden tab can come up blank).
@@ -68,134 +48,137 @@ export default function HeroWordmark() {
     return watchThemeColors(setColors);
   }, [ready]);
 
-  // Rasterize + sample once the display font is really loaded; re-sample when
-  // the container width changes meaningfully (not on mobile URL-bar jitter)
-  // or when a Formation tunable moves in the dev tuner.
-  useEffect(() => {
-    if (!ready) return;
-    const container = containerRef.current;
-    if (!container) return;
-
-    let cancelled = false;
-    let lastWidth = 0;
-    let timer: ReturnType<typeof setTimeout> | undefined;
-
-    const build = async (force = false) => {
-      const width = container.clientWidth;
-      if (!width || (!force && width === lastWidth)) return;
-      lastWidth = width;
-
-      const family = getComputedStyle(container).fontFamily;
-      try {
-        await document.fonts.load(`${FONT_WEIGHT} 100px ${family}`);
-      } catch {
-        // Fall through — canvas will use the fallback font, still legible.
-      }
-      if (cancelled) return;
-
-      const { ballScale, ...formation } = formationTuner.read();
-      const spacing = Math.min(18, Math.max(11, width / 62)) * ballScale;
-      setSample(
-        sampleWordmark({
-          text: WORDMARK,
-          fontFamily: family,
-          fontWeight: FONT_WEIGHT,
-          targetWidth: Math.min(width * 0.88, 1280),
-          spacing,
-          formation,
-        }),
-      );
-    };
-
-    build();
-    const ro = new ResizeObserver(() => {
-      clearTimeout(timer);
-      timer = setTimeout(build, 350);
-    });
-    ro.observe(container);
-
-    // Formation tunables change the arrangement itself — debounce a rebuild.
-    let lastFormation = JSON.stringify(formationTuner.read());
-    const unsubscribe = useTunerStore.subscribe(() => {
-      const now = JSON.stringify(formationTuner.read());
-      if (now === lastFormation) return;
-      lastFormation = now;
-      clearTimeout(timer);
-      timer = setTimeout(() => build(true), 250);
-    });
-
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-      ro.disconnect();
-      unsubscribe();
-    };
-  }, [ready]);
-
-  // Pointer in text-plane coordinates (origin at container center, y up).
+  // Pointer in scene coordinates (origin at container center, y up), plus
+  // drag bookkeeping for the wall: pressing anywhere grabs the wall and
+  // throws it, while pointer movement tilts the whole perspective.
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
+    const dragLast = { x: 0, t: 0 };
     const onMove = (e: PointerEvent) => {
       const rect = container.getBoundingClientRect();
       pointerRef.current.x = e.clientX - rect.left - rect.width / 2;
       pointerRef.current.y = -(e.clientY - rect.top - rect.height / 2);
       pointerRef.current.active = true;
+      const d = wallDragRef.current;
+      if (d.dragging) {
+        const now = performance.now();
+        const dx = e.clientX - dragLast.x;
+        const dt = Math.max(8, now - dragLast.t) / 1000;
+        d.dx += dx;
+        d.vel = d.vel * 0.75 + (-dx / dt) * 0.25;
+        dragLast.x = e.clientX;
+        dragLast.t = now;
+      }
+    };
+    const onDown = (e: PointerEvent) => {
+      onMove(e);
+      const d = wallDragRef.current;
+      d.dragging = true;
+      d.dx = 0;
+      d.vel = 0;
+      dragLast.x = e.clientX;
+      dragLast.t = performance.now();
+      container.setPointerCapture(e.pointerId);
+    };
+    const onUp = () => {
+      wallDragRef.current.dragging = false;
     };
     const onLeave = () => {
       pointerRef.current.active = false;
+      wallDragRef.current.dragging = false;
     };
     container.addEventListener("pointermove", onMove);
-    container.addEventListener("pointerdown", onMove);
+    container.addEventListener("pointerdown", onDown);
+    container.addEventListener("pointerup", onUp);
     container.addEventListener("pointerleave", onLeave);
     container.addEventListener("pointercancel", onLeave);
     return () => {
       container.removeEventListener("pointermove", onMove);
-      container.removeEventListener("pointerdown", onMove);
+      container.removeEventListener("pointerdown", onDown);
+      container.removeEventListener("pointerup", onUp);
       container.removeEventListener("pointerleave", onLeave);
       container.removeEventListener("pointercancel", onLeave);
     };
   }, []);
 
-  const active = ready && colors !== null && sample !== null;
+  const active = ready && colors !== null;
 
   return (
     <div
       ref={containerRef}
-      className="font-display relative h-[52vh] min-h-[340px] w-full touch-pan-y select-none md:h-[62vh]"
+      className="relative h-[64svh] min-h-110 w-full touch-pan-y select-none"
     >
-      {/* Static wordmark: the server-rendered face of the hero, replaced by
-          the ball field once it's live. */}
-      <p
-        aria-hidden={active || undefined}
-        className={`absolute inset-0 flex items-center justify-center font-semibold lowercase tracking-[-0.05em] text-ink-strong ${
-          active ? "invisible" : ""
-        }`}
-        style={{ fontSize: "clamp(4rem, 13.5vw, 13rem)" }}
-      >
-        {WORDMARK}
-      </p>
-
-      {ready && colors && sample && (
+      {active && (
         <CanvasBoundary>
           <Canvas
             aria-hidden
             tabIndex={-1}
             dpr={[1, 2]}
-            gl={{ antialias: true, alpha: true, powerPreference: "high-performance" }}
+            gl={{
+              antialias: true,
+              alpha: true,
+              powerPreference: "high-performance",
+            }}
             style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
           >
             <FittedCamera />
-            <BallField sample={sample} colors={colors} pointer={pointerRef} />
+            <HeroWall pointer={pointerRef} drag={wallDragRef} colors={colors} />
           </Canvas>
         </CanvasBoundary>
       )}
+
+      {/* The wordmark, justified flush to the hero width (the big-type
+          poster treatment): SVG text with textLength stretches the word
+          edge-to-edge at any viewport, so the height rides the width via
+          the viewBox aspect. Still real selectable/crawlable text. The
+          soft drop-shadow is a legibility halo lifting the type off the
+          busy footage, not decoration (vw units so it scales with the
+          word). */}
+      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-4 text-ink-strong md:px-6">
+        <svg
+          className="w-[62%]"
+          viewBox="0 0 720 74"
+          style={{
+            overflow: "visible",
+            filter:
+              "drop-shadow(0 0 0.3vw color-mix(in srgb, var(--bg) 60%, transparent)) drop-shadow(0 0.2vw 1.2vw color-mix(in srgb, var(--bg) 45%, transparent))",
+          }}
+        >
+          <text
+            x="360"
+            y="72"
+            textAnchor="middle"
+            textLength="780"
+            lengthAdjust="spacingAndGlyphs"
+            fill="currentColor"
+            style={{
+              fontFamily:
+                "var(--font-archivo-black), var(--font-archivo), system-ui, sans-serif",
+              fontSize: "100px",
+            }}
+          >
+            ARTCRAFT
+          </text>
+        </svg>
+      </div>
+
+      {active && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 bottom-1.5 z-10 flex items-center justify-between px-6 md:px-10"
+        >
+          <p className="hud-label text-faint">Rendered with Seedance 2.5</p>
+          <p className="hud-label hidden text-faint sm:block">drag to scroll</p>
+        </div>
+      )}
     </div>
   );
 }
 
 // Perspective camera fitted so 1 world unit == 1 CSS pixel on the z=0 plane:
-// raster coordinates, sim coordinates, and pointer coordinates all agree.
+// wall layout and pointer coordinates all agree. FOV must match hero-wall's
+// vignette projection.
 function FittedCamera() {
   const camera = useThree((s) => s.camera) as THREE.PerspectiveCamera;
   const size = useThree((s) => s.size);
@@ -204,278 +187,13 @@ function FittedCamera() {
     const dist = size.height / 2 / Math.tan(THREE.MathUtils.degToRad(fov / 2));
     camera.fov = fov;
     camera.position.set(0, 0, dist);
-    camera.near = Math.max(1, dist - 900);
-    camera.far = dist + 900;
+    camera.near = Math.max(1, dist - 1200);
+    camera.far = dist + 1200;
     camera.updateProjectionMatrix();
   }, [camera, size.height]);
   return null;
 }
 
-// Studio reflections without any network fetch: three's procedural room,
-// prefiltered once per WebGL context. This is what gives the dark "car
-// paint" balls something to mirror.
-function StudioEnvironment() {
-  const gl = useThree((s) => s.gl);
-  const scene = useThree((s) => s.scene);
-  useEffect(() => {
-    const pmrem = new THREE.PMREMGenerator(gl);
-    const env = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
-    scene.environment = env;
-    return () => {
-      scene.environment = null;
-      env.dispose();
-      pmrem.dispose();
-    };
-  }, [gl, scene]);
-  return null;
-}
-
-const HALO_VERTEX = /* glsl */ `
-  varying vec2 vUv;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`;
-
-const HALO_FRAGMENT = /* glsl */ `
-  varying vec2 vUv;
-  uniform vec3 uColor;
-  uniform float uAlpha;
-  uniform float uFalloff;
-  void main() {
-    float d = distance(vUv, vec2(0.5)) * 2.0;
-    float a = pow(clamp(1.0 - d, 0.0, 1.0), uFalloff);
-    gl_FragColor = vec4(uColor, a * uAlpha);
-  }
-`;
-
-function BallField({
-  sample,
-  colors,
-  pointer,
-}: {
-  sample: SampledWordmark;
-  colors: ThemeColors;
-  pointer: React.RefObject<PointerState>;
-}) {
-  const meshRef = useRef<THREE.InstancedMesh>(null);
-  const lightRef = useRef<THREE.PointLight>(null);
-  const haloRef = useRef<THREE.Mesh>(null);
-  const ambientRef = useRef<THREE.AmbientLight>(null);
-  const keyRef = useRef<THREE.DirectionalLight>(null);
-  const counterRef = useRef<THREE.DirectionalLight>(null);
-  const fillRef = useRef<THREE.DirectionalLight>(null);
-  const lightPos = useRef(new THREE.Vector3(0, 120, 0));
-  const sim = useMemo(
-    () => new WordmarkSim(sample, physicsTuner.read().scatter),
-    [sample],
-  );
-  const dummy = useMemo(() => new THREE.Object3D(), []);
-  // Reactive so recoloring reruns when the accent share slider moves.
-  const accentShare = useTunerStore(
-    (s) => s.values["material.accentShare"] ?? 0.05,
-  );
-
-  const dark = useMemo(() => {
-    const c = new THREE.Color(colors.bg);
-    return c.r + c.g + c.b < 1.5;
-  }, [colors.bg]);
-
-  // The halo sits behind the text plane, so the balls eclipse it: bodies go
-  // to silhouette against the glow while their rims catch the back light.
-  const haloMaterial = useMemo(
-    () =>
-      new THREE.ShaderMaterial({
-        vertexShader: HALO_VERTEX,
-        fragmentShader: HALO_FRAGMENT,
-        uniforms: {
-          uColor: {
-            value: new THREE.Color(dark ? "#a8c4ff" : colors.accent),
-          },
-          uAlpha: { value: dark ? 0.5 : 0.14 },
-          uFalloff: { value: 2.6 },
-        },
-        transparent: true,
-        depthWrite: false,
-        blending: dark ? THREE.AdditiveBlending : THREE.NormalBlending,
-      }),
-    [dark, colors.accent],
-  );
-  useEffect(() => () => haloMaterial.dispose(), [haloMaterial]);
-
-  // Per-ball colors. Light theme: ink with slight tonal variety. Dark theme:
-  // near-black lacquer, so shape comes from reflections and the back rim
-  // instead of albedo. Both keep sparse brand-accent balls.
-  useEffect(() => {
-    const mesh = meshRef.current;
-    if (!mesh) return;
-    const bg = new THREE.Color(colors.bg);
-    const ink = new THREE.Color(colors.ink);
-    const accent = new THREE.Color(colors.accent);
-    const base = dark
-      ? bg.clone().lerp(ink, 0.10)
-      : ink.clone();
-    const c = new THREE.Color();
-    const rand = seeded(4242);
-    for (let i = 0; i < sim.n; i++) {
-      if (rand() < accentShare) {
-        c.copy(accent);
-        if (dark) c.multiplyScalar(0.8);
-      } else {
-        c.copy(base).lerp(ink, rand() * (dark ? 0.08 : 0.16));
-      }
-      mesh.setColorAt(i, c);
-    }
-    if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
-  }, [colors, sim, dark, accentShare]);
-
-  useFrame((state, delta) => {
-    const mesh = meshRef.current;
-    if (!mesh) return;
-    const p = pointer.current;
-
-    // Live tuner values — read every frame so slider changes apply instantly.
-    const phys = physicsTuner.read();
-    const lt = lightTuner.read();
-    const mt = materialTuner.read();
-    const ht = haloTuner.read();
-
-    sim.step(delta, p.x, p.y, p.active, phys);
-
-    for (let i = 0; i < sim.n; i++) {
-      dummy.position.set(sim.x[i], sim.y[i], sim.z[i]);
-      dummy.scale.setScalar(sim.r[i]);
-      dummy.updateMatrix();
-      mesh.setMatrixAt(i, dummy.matrix);
-    }
-    mesh.instanceMatrix.needsUpdate = true;
-
-    // The cursor light (and its halo) chase the pointer; unattended they
-    // wander a slow Lissajous path so the relief never goes flat.
-    const t = state.clock.elapsedTime;
-    const targetX = p.active ? p.x : Math.sin(t * 0.22) * 320;
-    const targetY = p.active ? p.y : Math.cos(t * 0.17) * 130;
-    const k = 1 - Math.exp(-6 * delta);
-    lightPos.current.x += (targetX - lightPos.current.x) * k;
-    lightPos.current.y += (targetY - lightPos.current.y) * k;
-    lightRef.current?.position.set(
-      lightPos.current.x,
-      lightPos.current.y,
-      lt.lightZ,
-    );
-    haloRef.current?.position.set(
-      lightPos.current.x,
-      lightPos.current.y,
-      ht.z,
-    );
-
-    // At rest the word sits in near-eclipse; approaching with the cursor
-    // brings the light up to full.
-    const light = lightRef.current;
-    if (light) {
-      light.distance = lt.lightRange;
-      const full = dark ? lt.intensityDark : lt.intensityLight;
-      const target = p.active ? full : full * lt.idleDim;
-      light.intensity += (target - light.intensity) * k;
-    }
-
-    // Rig + material + halo bindings.
-    if (ambientRef.current) {
-      ambientRef.current.intensity = dark ? lt.ambientDark : lt.ambientLight;
-    }
-    if (keyRef.current) {
-      keyRef.current.intensity = dark ? lt.keyIntensity : lt.dirLight;
-    }
-    if (counterRef.current) counterRef.current.intensity = lt.counterIntensity;
-    if (fillRef.current) fillRef.current.intensity = lt.frontFill;
-
-    const mat = mesh.material as THREE.MeshPhysicalMaterial &
-      THREE.MeshStandardMaterial;
-    if (dark) {
-      mat.roughness = mt.roughnessDark;
-      mat.metalness = mt.metalnessDark;
-      mat.clearcoat = mt.clearcoat;
-      mat.clearcoatRoughness = mt.clearcoatRoughness;
-    } else {
-      mat.roughness = mt.roughnessLight;
-      mat.metalness = mt.metalnessLight;
-      mat.envMapIntensity = mt.envLight;
-    }
-
-    haloMaterial.uniforms.uAlpha.value = dark ? ht.alphaDark : ht.alphaLight;
-    haloMaterial.uniforms.uFalloff.value = ht.falloff;
-    haloRef.current?.scale.setScalar(ht.size / 720);
-  });
-
-  return (
-    <>
-      {/* No environment in dark mode: three applies scene.environment at
-          effectively full strength here regardless of envMapIntensity, and
-          any env flood washes the eclipse out. The rim lights are the only
-          broad sources; the cursor light does the revealing. */}
-      {!dark && <StudioEnvironment />}
-
-      {dark ? (
-        // Eclipse rig: almost no front light. A cool key from behind-above
-        // rims the top edges, a faint counter-rim catches the lower-right,
-        // and the cursor light does the actual revealing.
-        <>
-          <ambientLight ref={ambientRef} intensity={0.05} />
-          <directionalLight ref={keyRef} position={[-160, 340, -460]} intensity={2.2} color="#e9f1ff" />
-          <directionalLight ref={counterRef} position={[430, -180, -380]} intensity={0.7} color="#7fa8e8" />
-          <directionalLight ref={fillRef} position={[0, -60, 520]} intensity={0.06} />
-        </>
-      ) : (
-        <>
-          <ambientLight ref={ambientRef} intensity={0.55} />
-          <directionalLight ref={keyRef} position={[-260, 340, 420]} intensity={0.75} />
-          <directionalLight position={[180, 260, -420]} intensity={0.5} color="#eef3ff" />
-        </>
-      )}
-
-      {/* Cursor light: physical inverse-square falloff, so nearby balls are
-          genuinely brighter than distant ones. Intensity is candela-scale
-          because the scene is measured in pixels. */}
-      <pointLight
-        ref={lightRef}
-        position={[0, 120, 130]}
-        intensity={dark ? 42000 : 30000}
-        decay={2}
-        distance={900}
-        color={dark ? "#d6e4ff" : "#ffffff"}
-      />
-
-      <mesh ref={haloRef} position={[0, 120, -90]} material={haloMaterial}>
-        <planeGeometry args={[720, 720]} />
-      </mesh>
-
-      <instancedMesh
-        ref={meshRef}
-        args={[undefined, undefined, sim.n]}
-        frustumCulled={false}
-      >
-        <sphereGeometry args={[1, 24, 16]} />
-        {dark ? (
-          <meshPhysicalMaterial
-            roughness={0.42}
-            metalness={0.5}
-            clearcoat={0.9}
-            clearcoatRoughness={0.22}
-            envMapIntensity={0.05}
-          />
-        ) : (
-          <meshStandardMaterial
-            roughness={0.3}
-            metalness={0.15}
-            envMapIntensity={0.55}
-          />
-        )}
-      </instancedMesh>
-    </>
-  );
-}
-
 class CanvasBoundary extends Component<
   { children: ReactNode },
   { failed: boolean }
@@ -490,14 +208,3 @@ class CanvasBoundary extends Component<
     return this.state.failed ? null : this.props.children;
   }
 }
-
-function seeded(seed: number): () => number {
-  let a = seed >>> 0;
-  return () => {
-    a |= 0;
-    a = (a + 0x6d2b79f5) | 0;
-    let t = Math.imul(a ^ (a >>> 15), 1 | a);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
diff --git a/frontend/apps/artcraft-website-next/src/components/landing/hero.tsx b/frontend/apps/artcraft-website-next/src/components/landing/hero.tsx
index 53c56e4288..e4d8c930eb 100644
--- a/frontend/apps/artcraft-website-next/src/components/landing/hero.tsx
+++ b/frontend/apps/artcraft-website-next/src/components/landing/hero.tsx
@@ -9,15 +9,16 @@ import HeroViewport from "./hero-viewport";
 export default function Hero() {
   return (
     <section className="relative">
-      {/* Full-bleed ball-field wordmark — the brand as an object you can
-          shove apart and watch reassemble. */}
+      {/* Full-bleed hero — crisp display-type wordmark over the render
+          wall: rows of Seedance takes forming one perspective wall that
+          drifts behind the word and answers the cursor. */}
       <HeroWordmark />
 
       <div className="relative mx-auto max-w-[1280px] border-x border-line">
         <div className="flex items-center justify-between gap-4 border-y border-line px-6 py-3 md:px-10">
           <p className="hud-label text-muted">Open-source AI studio</p>
           <p className="hud-label text-accent-ink">
-            Now with Seedance 2.0, Nano Banana 2 &amp; more
+            Now with Seedance 2.5, Nano Banana 2 &amp; more
           </p>
         </div>
 
diff --git a/frontend/apps/artcraft-website-next/src/components/landing/wordmark-sim.ts b/frontend/apps/artcraft-website-next/src/components/landing/wordmark-sim.ts
deleted file mode 100644
index a22cb4051e..0000000000
--- a/frontend/apps/artcraft-website-next/src/components/landing/wordmark-sim.ts
+++ /dev/null
@@ -1,437 +0,0 @@
-// Wordmark ball field: the brand name rasterized to a mask, then filled with
-// small 3D balls by multi-pass dart throwing — big balls land first, smaller
-// ones settle into the gaps, like a pile that collided into the letter shape
-// (a faked impression, not a physics solve; it must run on laptops/phones).
-// The balls separate under the cursor's push and rejoin on their home
-// springs; a 3D collision pass keeps them from intersecting.
-//
-// Units are CSS pixels at the text's z=0 plane — the camera is fitted so one
-// world unit projects to one pixel there, which keeps pointer math trivial.
-
-export type Ball = {
-  x: number;
-  y: number;
-  z: number;
-  r: number;
-};
-
-export type SampledWordmark = {
-  balls: Ball[];
-  width: number;
-  height: number;
-};
-
-// All knobs of the arrangement — registered with the dev tuner in
-// hero-tunables.ts. Size factors are multiples of `spacing`.
-export type FormationParams = {
-  sizeMin: number;
-  sizeMax: number;
-  sizeNoiseScale: number; // px wavelength of the size clusters
-  sizeRoughen: number;    // 0..1 per-ball white-noise contribution
-  gap: number;            // px clearance between resting balls
-  depth: number;          // slab thickness, × spacing
-  density: number;        // dart-attempt multiplier
-  edgeMargin: number;     // 0..1 — how far inside the stroke big balls stay
-  seed: number;
-};
-
-// ————————————————————————————— sampling —————————————————————————————
-
-export function sampleWordmark(opts: {
-  text: string;
-  fontFamily: string;
-  fontWeight: number;
-  targetWidth: number;
-  /** Base unit in px — ball sizes and slab depth scale from this. */
-  spacing: number;
-  formation: FormationParams;
-}): SampledWordmark {
-  const { text, fontFamily, fontWeight, targetWidth, spacing, formation } =
-    opts;
-
-  // Each glyph is measured and drawn individually with a small manual gap:
-  // no shaping ever runs across letters, so the font can't fuse tight pairs
-  // ("ft") into a ligature that would blob together once quantized to balls.
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
-  const glyphs = [...text];
-  const GAP_EM = 0.05;
-
-  ctx.font = `${fontWeight} 100px ${fontFamily}`;
-  const width100 = glyphs.reduce((w, g) => w + ctx.measureText(g).width, 0)
-    + 100 * GAP_EM * (glyphs.length - 1);
-  const fontPx = (100 * targetWidth) / Math.max(1, width100);
-  const gapPx = fontPx * GAP_EM;
-
-  ctx.font = `${fontWeight} ${fontPx}px ${fontFamily}`;
-  let ascent = 0;
-  let descent = 0;
-  for (const g of glyphs) {
-    const m = ctx.measureText(g);
-    ascent = Math.max(ascent, m.actualBoundingBoxAscent);
-    descent = Math.max(descent, m.actualBoundingBoxDescent);
-  }
-
-  const pad = spacing;
-  const width = Math.ceil(targetWidth + pad * 2);
-  const height = Math.ceil(ascent + descent + pad * 2);
-  canvas.width = width;
-  canvas.height = height;
-  ctx.font = `${fontWeight} ${fontPx}px ${fontFamily}`;
-  ctx.fillStyle = "#fff";
-  let penX = pad;
-  for (const g of glyphs) {
-    ctx.fillText(g, penX, pad + ascent);
-    penX += ctx.measureText(g).width + gapPx;
-  }
-  const alpha = ctx.getImageData(0, 0, width, height).data;
-  const covered = (x: number, y: number) => {
-    if (x < 0 || y < 0 || x >= width || y >= height) return false;
-    return alpha[(y * width + x) * 4 + 3] > 127;
-  };
-
-  // Fast "random point inside the ink" sampling: collect covered pixels on a
-  // coarse stride once, then darts pick from that list with subpixel jitter.
-  const inkCells: number[] = [];
-  for (let y = 0; y < height; y += 2) {
-    for (let x = 0; x < width; x += 2) {
-      if (covered(x, y)) inkCells.push(y * width + x);
-    }
-  }
-  if (!inkCells.length) return { balls: [], width, height };
-
-  const rand = mulberry32(formation.seed);
-  const sizeNoise = makeValueNoise(formation.seed + 41);
-  const rMin = spacing * formation.sizeMin;
-  const rMax = spacing * formation.sizeMax;
-  const halfDepth = (spacing * formation.depth) / 2;
-
-  // Organic sizing: smooth spatial noise drifts the size in clusters across
-  // the word; white noise roughens it per ball.
-  const desiredRadius = (x: number, y: number) => {
-    const n = Math.pow(
-      sizeNoise(x / formation.sizeNoiseScale, y / formation.sizeNoiseScale),
-      1.15,
-    );
-    const roughened =
-      n * (1 - formation.sizeRoughen) + rand() * formation.sizeRoughen;
-    return rMin + (rMax - rMin) * roughened;
-  };
-
-  // A ball only counts as "inside the letter" if its center plus four cross
-  // points at ~edgeMargin·r are on ink — big balls stay inside the strokes,
-  // small ones may nestle right up to the edge, keeping letterforms crisp.
-  const insideStroke = (x: number, y: number, r: number) => {
-    const m = r * formation.edgeMargin;
-    return (
-      covered(Math.round(x), Math.round(y)) &&
-      covered(Math.round(x + m), Math.round(y)) &&
-      covered(Math.round(x - m), Math.round(y)) &&
-      covered(Math.round(x), Math.round(y + m)) &&
-      covered(Math.round(x), Math.round(y - m))
-    );
-  };
-
-  // Dart throwing with a 3D hash for overlap rejection. Three passes with a
-  // descending size floor: the big balls claim their spots first and the
-  // smaller ones settle into the leftover gaps — the arrangement reads like
-  // a settled pile instead of a grid.
-  const balls: Ball[] = [];
-  const cell = rMax * 2 + formation.gap;
-  const grid = new Map<number, number[]>();
-  const key = (x: number, y: number, z: number) =>
-    (Math.floor(x / cell) * 73856093) ^
-    (Math.floor(y / cell) * 19349663) ^
-    (Math.floor(z / cell) * 83492791);
-
-  const fits = (x: number, y: number, z: number, r: number) => {
-    for (let gz = -1; gz <= 1; gz++) {
-      for (let gy = -1; gy <= 1; gy++) {
-        for (let gx = -1; gx <= 1; gx++) {
-          const bucket = grid.get(
-            key(x + gx * cell, y + gy * cell, z + gz * cell),
-          );
-          if (!bucket) continue;
-          for (const j of bucket) {
-            const o = balls[j];
-            const dx = o.x - x;
-            const dy = o.y - y;
-            const dz = o.z - z;
-            const min = o.r + r + formation.gap;
-            if (dx * dx + dy * dy + dz * dz < min * min) return false;
-          }
-        }
-      }
-    }
-    return true;
-  };
-
-  const passes = [0.7, 0.35, 0]; // descending floor on the size range
-  const attemptsPerPass = Math.floor(
-    inkCells.length * 0.9 * formation.density,
-  );
-  for (const floor of passes) {
-    for (let a = 0; a < attemptsPerPass; a++) {
-      const c = inkCells[(rand() * inkCells.length) | 0];
-      const x = (c % width) + rand() * 2 - 1;
-      const y = Math.floor(c / width) + rand() * 2 - 1;
-      const z = (rand() * 2 - 1) * halfDepth;
-      let r = desiredRadius(x, y);
-      const passMin = rMin + (rMax - rMin) * floor;
-      if (r < passMin) r = passMin + (r - rMin) * 0.2;
-      if (!insideStroke(x, y, r)) continue;
-      if (!fits(x, y, z, r)) continue;
-      balls.push({ x, y, z, r });
-      const k = key(x, y, z);
-      const bucket = grid.get(k);
-      if (bucket) bucket.push(balls.length - 1);
-      else grid.set(k, [balls.length - 1]);
-    }
-  }
-
-  return { balls, width, height };
-}
-
-// Deterministic bilinear value noise, 0..1 — smooth variation across space.
-function makeValueNoise(seed: number): (x: number, y: number) => number {
-  const hash = (ix: number, iy: number) => {
-    let h = ix * 374761393 + iy * 668265263 + seed * 2246822519;
-    h = (h ^ (h >>> 13)) * 1274126177;
-    return ((h ^ (h >>> 16)) >>> 0) / 4294967295;
-  };
-  const smooth = (t: number) => t * t * (3 - 2 * t);
-  return (x, y) => {
-    const ix = Math.floor(x);
-    const iy = Math.floor(y);
-    const fx = smooth(x - ix);
-    const fy = smooth(y - iy);
-    const a = hash(ix, iy);
-    const b = hash(ix + 1, iy);
-    const c = hash(ix, iy + 1);
-    const d = hash(ix + 1, iy + 1);
-    return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
-  };
-}
-
-function mulberry32(seed: number): () => number {
-  let a = seed >>> 0;
-  return () => {
-    a |= 0;
-    a = (a + 0x6d2b79f5) | 0;
-    let t = Math.imul(a ^ (a >>> 15), 1 | a);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-// ————————————————————————————— simulation —————————————————————————————
-
-export type SimParams = {
-  spring: number;       // pull toward home, 1/s²
-  damping: number;      // exponential velocity decay, 1/s
-  pushRadius: number;   // cursor influence radius, px
-  pushStrength: number; // px/s² at cursor center
-  swirl: number;        // tangential (xy) fraction of the push
-  popZ: number;         // fraction of the push biased toward the viewer
-  bobAmp: number;       // idle breathing amplitude, px
-};
-
-export const DEFAULT_PARAMS: SimParams = {
-  spring: 46,
-  damping: 5.2,
-  pushRadius: 180,
-  pushStrength: 23000,
-  swirl: 0.55,
-  popZ: 0.6,
-  bobAmp: 1.4,
-};
-
-export class WordmarkSim {
-  readonly n: number;
-  readonly r: Float32Array;
-  readonly x: Float32Array;
-  readonly y: Float32Array;
-  readonly z: Float32Array;
-  private readonly hx: Float32Array;
-  private readonly hy: Float32Array;
-  private readonly hz: Float32Array;
-  private readonly vx: Float32Array;
-  private readonly vy: Float32Array;
-  private readonly vz: Float32Array;
-  private readonly phase: Float32Array;
-  private readonly cell: number;
-  private readonly grid = new Map<number, number[]>();
-  private time = 0;
-
-  // Balls are handed over in raster coordinates; homes are re-centered so the
-  // wordmark sits centered on the origin. Live positions start scattered in a
-  // loose shell so the mount plays an "assemble" — the balls fly in and join.
-  constructor(sample: SampledWordmark, scatter = 480) {
-    const { balls, width, height } = sample;
-    this.n = balls.length;
-    this.r = new Float32Array(this.n);
-    this.x = new Float32Array(this.n);
-    this.y = new Float32Array(this.n);
-    this.z = new Float32Array(this.n);
-    this.hx = new Float32Array(this.n);
-    this.hy = new Float32Array(this.n);
-    this.hz = new Float32Array(this.n);
-    this.vx = new Float32Array(this.n);
-    this.vy = new Float32Array(this.n);
-    this.vz = new Float32Array(this.n);
-    this.phase = new Float32Array(this.n);
-
-    let rMax = 1;
-    const rand = mulberry32(7177);
-    for (let i = 0; i < this.n; i++) {
-      const b = balls[i];
-      this.hx[i] = b.x - width / 2;
-      this.hy[i] = -(b.y - height / 2);
-      this.hz[i] = b.z;
-      const dir = randomUnit(rand);
-      const dist = scatter * (0.55 + rand() * 0.9);
-      this.x[i] = this.hx[i] + dir[0] * dist;
-      this.y[i] = this.hy[i] + dir[1] * dist * 0.7;
-      this.z[i] = this.hz[i] + dir[2] * dist * 0.55;
-      this.r[i] = b.r;
-      if (b.r > rMax) rMax = b.r;
-      this.phase[i] = (i * 2.399963) % (Math.PI * 2);
-    }
-    this.cell = rMax * 2 + 2;
-  }
-
-  step(
-    dt: number,
-    pointerX: number,
-    pointerY: number,
-    pointerActive: boolean,
-    params: SimParams = DEFAULT_PARAMS,
-  ) {
-    const clamped = Math.min(dt, 1 / 30);
-    this.time += clamped;
-    const { spring, damping, pushRadius, pushStrength, swirl, popZ, bobAmp } =
-      params;
-    const decay = Math.exp(-damping * clamped);
-    const t = this.time;
-
-    for (let i = 0; i < this.n; i++) {
-      const bob = bobAmp;
-      const homeX = this.hx[i] + Math.sin(t * 0.9 + this.phase[i]) * bob;
-      const homeY = this.hy[i] + Math.cos(t * 0.7 + this.phase[i] * 1.7) * bob;
-      const homeZ = this.hz[i] + Math.sin(t * 0.8 + this.phase[i] * 2.3) * bob;
-      let fx = (homeX - this.x[i]) * spring;
-      let fy = (homeY - this.y[i]) * spring;
-      let fz = (homeZ - this.z[i]) * spring;
-
-      if (pointerActive) {
-        // The cursor lives on the z=0 plane; distance is measured in 3D so
-        // front-layer balls feel it sooner than back-layer ones.
-        const dx = this.x[i] - pointerX;
-        const dy = this.y[i] - pointerY;
-        const dz = this.z[i];
-        const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
-        if (dist < pushRadius) {
-          const f = 1 - dist / pushRadius;
-          const inv = dist > 1e-4 ? 1 / dist : 0;
-          const nx = dx * inv;
-          const ny = dy * inv;
-          const nz = dz * inv;
-          const s = f * f * pushStrength;
-          fx += (nx + -ny * swirl) * s;
-          fy += (ny + nx * swirl) * s;
-          // Radial z plus a toward-the-viewer bias: the crowd parts *and*
-          // pops out of the page instead of only sliding sideways.
-          fz += (nz + popZ) * s * 0.55;
-        }
-      }
-
-      this.vx[i] = this.vx[i] * decay + fx * clamped;
-      this.vy[i] = this.vy[i] * decay + fy * clamped;
-      this.vz[i] = this.vz[i] * decay + fz * clamped;
-      this.x[i] += this.vx[i] * clamped;
-      this.y[i] += this.vy[i] * clamped;
-      this.z[i] += this.vz[i] * clamped;
-    }
-
-    this.resolveCollisions();
-  }
-
-  // One positional-relaxation pass over a 3D spatial hash. The rest pose is
-  // already gap-free by construction; this keeps shoved balls from tunneling
-  // through neighbors, which is what makes them read as solid.
-  private resolveCollisions() {
-    const { grid, cell } = this;
-    grid.clear();
-    const key = (x: number, y: number, z: number) =>
-      (Math.floor(x / cell) * 73856093) ^
-      (Math.floor(y / cell) * 19349663) ^
-      (Math.floor(z / cell) * 83492791);
-
-    for (let i = 0; i < this.n; i++) {
-      const k = key(this.x[i], this.y[i], this.z[i]);
-      const bucket = grid.get(k);
-      if (bucket) bucket.push(i);
-      else grid.set(k, [i]);
-    }
-
-    for (let i = 0; i < this.n; i++) {
-      for (let gz = -1; gz <= 1; gz++) {
-        for (let gy = -1; gy <= 1; gy++) {
-          for (let gx = -1; gx <= 1; gx++) {
-            const bucket = grid.get(
-              key(
-                this.x[i] + gx * cell,
-                this.y[i] + gy * cell,
-                this.z[i] + gz * cell,
-              ),
-            );
-            if (!bucket) continue;
-            for (const j of bucket) {
-              if (j <= i) continue;
-              const dx = this.x[j] - this.x[i];
-              const dy = this.y[j] - this.y[i];
-              const dz = this.z[j] - this.z[i];
-              const minDist = this.r[i] + this.r[j] + 0.4;
-              const d2 = dx * dx + dy * dy + dz * dz;
-              if (d2 >= minDist * minDist || d2 < 1e-6) continue;
-              const d = Math.sqrt(d2);
-              const push = (minDist - d) / d;
-              const px = dx * push * 0.5;
-              const py = dy * push * 0.5;
-              const pz = dz * push * 0.5;
-              this.x[i] -= px;
-              this.y[i] -= py;
-              this.z[i] -= pz;
-              this.x[j] += px;
-              this.y[j] += py;
-              this.z[j] += pz;
-              const nx = dx / d;
-              const ny = dy / d;
-              const nz = dz / d;
-              const rel =
-                (this.vx[j] - this.vx[i]) * nx +
-                (this.vy[j] - this.vy[i]) * ny +
-                (this.vz[j] - this.vz[i]) * nz;
-              if (rel < 0) {
-                const imp = rel * 0.5;
-                this.vx[i] += nx * imp;
-                this.vy[i] += ny * imp;
-                this.vz[i] += nz * imp;
-                this.vx[j] -= nx * imp;
-                this.vy[j] -= ny * imp;
-                this.vz[j] -= nz * imp;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-function randomUnit(rand: () => number): [number, number, number] {
-  const theta = rand() * Math.PI * 2;
-  const cosPhi = rand() * 2 - 1;
-  const sinPhi = Math.sqrt(1 - cosPhi * cosPhi);
-  return [Math.cos(theta) * sinPhi, Math.sin(theta) * sinPhi, cosPhi];
-}
diff --git a/frontend/apps/artcraft-website-next/src/components/ui/button.tsx b/frontend/apps/artcraft-website-next/src/components/ui/button.tsx
index cbd5bd93de..301f8c4dcc 100644
--- a/frontend/apps/artcraft-website-next/src/components/ui/button.tsx
+++ b/frontend/apps/artcraft-website-next/src/components/ui/button.tsx
@@ -25,7 +25,7 @@ type ButtonVariant =
 type ButtonSize = "sm" | "md" | "lg";
 
 const BASE_CLASSES =
-  "inline-flex w-fit items-center justify-center gap-2 rounded-none font-mono font-bold uppercase tracking-[0.15em] whitespace-nowrap transition-colors duration-150";
+  "inline-flex w-fit items-center justify-center gap-2 rounded-none font-mono font-bold uppercase tracking-[0.12em] whitespace-nowrap transition-colors duration-150";
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
   primary: "bg-invert-bg text-invert-fg transition-opacity hover:opacity-80",
@@ -43,7 +43,8 @@ const SIZE_CLASSES: Record<ButtonSize, string> = {
 };
 
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel"> {
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -86,10 +87,17 @@ export function Button({
   );
 
   if (href) {
-    const anchorProps = rest as unknown as AnchorHTMLAttributes<HTMLAnchorElement>;
+    const anchorProps =
+      rest as unknown as AnchorHTMLAttributes<HTMLAnchorElement>;
     if (external || /^(https?:\/\/|mailto:)/.test(href)) {
       return (
-        <a href={href} target={target} rel={rel} className={classes} {...anchorProps}>
+        <a
+          href={href}
+          target={target}
+          rel={rel}
+          className={classes}
+          {...anchorProps}
+        >
           {content}
         </a>
       );
diff --git a/frontend/apps/artcraft-website-next/src/lib/landing-data.ts b/frontend/apps/artcraft-website-next/src/lib/landing-data.ts
index 1d53829cfb..aad973d568 100644
--- a/frontend/apps/artcraft-website-next/src/lib/landing-data.ts
+++ b/frontend/apps/artcraft-website-next/src/lib/landing-data.ts
@@ -72,6 +72,30 @@ export const FEATURES: Feature[] = [
 export const HERO_VIDEO_URL =
   "https://pub-f7441936e5804042a1ea2bdc92e4dc71.r2.dev/website-commercial-2026.05.mp4";
 
+// Clips for the hero's render wall. `aspect` is width/height of the panel
+// plane (the texture is cover-fitted, so any source aspect works).
+// Served through the /ext-media same-origin proxy (see next.config.ts) —
+// WebGL video textures require CORS-clean sources. PLACEHOLDERS: these
+// currently reuse the feature footage — swap each path for an exported
+// Seedance 2.5 clip when the renders are ready; the wall adapts to any
+// count and mix of aspects.
+export type SeedanceClip = {
+  src: string;
+  aspect: number;
+};
+
+export const SEEDANCE_SHOWCASE: SeedanceClip[] = [
+  { src: "/videos/1.mp4", aspect: 16 / 9 },
+  { src: "/videos/2.mp4", aspect: 16 / 9 },
+  { src: "/videos/3.mp4", aspect: 16 / 9 },
+  { src: "/videos/4.mp4", aspect: 16 / 9 },
+  { src: "/videos/5.mp4", aspect: 16 / 9 },
+  { src: "/videos/6.mp4", aspect: 16 / 9 },
+  { src: "/videos/7.mp4", aspect: 16 / 9 },
+  { src: "/videos/8.mp4", aspect: 16 / 9 },
+  { src: "/videos/9.mp4", aspect: 16 / 9 },
+];
+
 export const MADE_WITH_YOUTUBE_IDS = [
   "HDdsKJl92H4",
   "oqoCWdOwr2U",
@@ -79,7 +103,7 @@ export const MADE_WITH_YOUTUBE_IDS = [
 ];
 
 export const TICKER_ITEMS = [
-  "Seedance 2.0",
+  "Seedance 2.5",
   "Nano Banana 2",
   "Image to Location",
   "3D Compositing",
diff --git a/frontend/apps/artcraft-website/src/pages/landing-prototype0/components/prototype-navbar.tsx b/frontend/apps/artcraft-website/src/pages/landing-prototype0/components/prototype-navbar.tsx
index 55e65e54e5..a18f1e333f 100644
--- a/frontend/apps/artcraft-website/src/pages/landing-prototype0/components/prototype-navbar.tsx
+++ b/frontend/apps/artcraft-website/src/pages/landing-prototype0/components/prototype-navbar.tsx
@@ -51,14 +51,14 @@ const NAV_ITEMS: NavEntry[] = [
 
 // Marathon-style: the neon highlight sits on the label only, not the whole cell.
 const NAV_LINK_CLASSES =
-  "group flex h-full items-center px-2.5 font-mono text-xs font-medium uppercase tracking-[0.15em] whitespace-nowrap";
+  "group flex h-full items-center px-2.5 font-mono text-xs font-medium uppercase tracking-[0.12em] whitespace-nowrap";
 const NAV_LABEL_CLASSES =
   "flex items-center gap-1.5 px-1.5 py-0.5 group-hover:bg-white group-hover:text-black";
 const NAV_LABEL_ACTIVE_CLASSES = "bg-white text-black";
 const DROPDOWN_ITEM_CLASSES =
-  "group flex px-3 py-2.5 font-mono text-xs font-medium uppercase tracking-[0.15em] whitespace-nowrap";
+  "group flex px-3 py-2.5 font-mono text-xs font-medium uppercase tracking-[0.12em] whitespace-nowrap";
 const SOLID_CTA_CLASSES =
-  "flex h-full items-center border-l border-white/15 bg-white px-5 font-mono text-xs font-bold uppercase tracking-[0.15em] text-black hover:bg-white/80";
+  "flex h-full items-center border-l border-white/15 bg-white px-5 font-mono text-xs font-bold uppercase tracking-[0.12em] text-black hover:bg-white/80";
 
 const isExternalHref = (href: string) => /^https?:\/\//.test(href);
 
@@ -540,7 +540,7 @@ export default function PrototypeNavbar() {
                   <DisclosureButton
                     as="a"
                     href={WEBAPP_URL}
-                    className="flex h-11 items-center justify-center bg-white px-4 font-mono text-xs font-bold uppercase tracking-[0.15em] text-black active:bg-white/80"
+                    className="flex h-11 items-center justify-center bg-white px-4 font-mono text-xs font-bold uppercase tracking-[0.12em] text-black active:bg-white/80"
                   >
                     Launch App
                   </DisclosureButton>
@@ -549,7 +549,7 @@ export default function PrototypeNavbar() {
                   <DisclosureButton
                     as={Link}
                     to="/pricing"
-                    className="flex flex-1 h-10 items-center justify-center gap-1.5 border-r border-white/15 font-mono text-[11px] font-medium uppercase tracking-[0.15em] text-white/70 active:bg-white active:text-black"
+                    className="flex flex-1 h-10 items-center justify-center gap-1.5 border-r border-white/15 font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/70 active:bg-white active:text-black"
                   >
                     Pricing
                   </DisclosureButton>
@@ -558,7 +558,7 @@ export default function PrototypeNavbar() {
                     href={SOCIAL_LINKS.DISCORD}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex flex-1 h-10 items-center justify-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.15em] text-white/70 active:bg-white active:text-black"
+                    className="flex flex-1 h-10 items-center justify-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/70 active:bg-white active:text-black"
                   >
                     <DiscordIcon className="text-[10px]" />
                     Discord
@@ -567,7 +567,7 @@ export default function PrototypeNavbar() {
                     <DisclosureButton
                       as="a"
                       href={webappUrl("/referrals")}
-                      className="flex flex-1 h-10 items-center justify-center gap-1.5 border-l border-white/15 font-mono text-[11px] font-medium uppercase tracking-[0.15em] text-white/70 active:bg-white active:text-black"
+                      className="flex flex-1 h-10 items-center justify-center gap-1.5 border-l border-white/15 font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/70 active:bg-white active:text-black"
                     >
                       <GiftIcon className="text-[10px]" />
                       Referrals
@@ -586,7 +586,7 @@ export default function PrototypeNavbar() {
                   <DisclosureButton
                     as="button"
                     onClick={handleLogout}
-                    className="flex h-8 shrink-0 items-center px-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.15em] text-red-400 active:bg-red-500 active:text-white"
+                    className="flex h-8 shrink-0 items-center px-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-red-400 active:bg-red-500 active:text-white"
                   >
                     Sign out
                   </DisclosureButton>
@@ -597,7 +597,7 @@ export default function PrototypeNavbar() {
                 <DisclosureButton
                   as="a"
                   href={WEBAPP_URL}
-                  className="flex h-11 items-center justify-center bg-white px-4 font-mono text-xs font-bold uppercase tracking-[0.15em] text-black active:bg-white/80"
+                  className="flex h-11 items-center justify-center bg-white px-4 font-mono text-xs font-bold uppercase tracking-[0.12em] text-black active:bg-white/80"
                 >
                   Launch App
                 </DisclosureButton>
@@ -606,14 +606,14 @@ export default function PrototypeNavbar() {
                   <DisclosureButton
                     as={Link}
                     to="/login"
-                    className="flex h-11 flex-1 items-center justify-center border-r border-white/15 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-white/80 active:bg-white active:text-black"
+                    className="flex h-11 flex-1 items-center justify-center border-r border-white/15 font-mono text-xs font-semibold uppercase tracking-[0.12em] text-white/80 active:bg-white active:text-black"
                   >
                     Login
                   </DisclosureButton>
                   <DisclosureButton
                     as={Link}
                     to="/signup"
-                    className="flex h-11 flex-1 items-center justify-center bg-white font-mono text-xs font-bold uppercase tracking-[0.15em] text-black active:bg-white/80"
+                    className="flex h-11 flex-1 items-center justify-center bg-white font-mono text-xs font-bold uppercase tracking-[0.12em] text-black active:bg-white/80"
                   >
                     Sign up
                   </DisclosureButton>
diff --git a/frontend/apps/genhub/src/components/ui/checkbox.tsx b/frontend/apps/genhub/src/components/ui/checkbox.tsx
index 9fa1d696e7..11e5454dcf 100644
--- a/frontend/apps/genhub/src/components/ui/checkbox.tsx
+++ b/frontend/apps/genhub/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 
-import { cn } from "~/lib/utils"
-import { CheckIcon } from "lucide-react"
+import { cn } from "~/lib/utils";
+import { CheckIcon } from "lucide-react";
 
 function Checkbox({
   className,
@@ -12,8 +12,8 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
-        className
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[3px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
       )}
       {...props}
     >
@@ -21,11 +21,10 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/frontend/libs/components/button-icon/src/lib/button-icon.tsx b/frontend/libs/components/button-icon/src/lib/button-icon.tsx
index 9e14128acb..9e100ee6d7 100644
--- a/frontend/libs/components/button-icon/src/lib/button-icon.tsx
+++ b/frontend/libs/components/button-icon/src/lib/button-icon.tsx
@@ -20,12 +20,12 @@ export const ButtonIcon = ({
   ...rest
 }: ButtonIconProps) => {
   const className = twMerge(
-    "box-content flex h-8 w-8 items-center justify-center rounded-none transition-colors duration-150",
+    "box-content flex h-8 w-8 items-center justify-center rounded-[3px] transition-colors duration-150",
     bgFill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
     disabled && "opacity-50 hover:bg-transparent",
-    propsClassName
+    propsClassName,
   );
 
   return (
diff --git a/frontend/libs/components/button-link/src/lib/button-link.tsx b/frontend/libs/components/button-link/src/lib/button-link.tsx
index 893a6c01ca..ba898c5021 100644
--- a/frontend/libs/components/button-link/src/lib/button-link.tsx
+++ b/frontend/libs/components/button-link/src/lib/button-link.tsx
@@ -28,7 +28,7 @@ export const ButtonLink = ({
     }
   }
   const baseClassName =
-    "font-mono text-xs font-semibold uppercase tracking-[0.15em] whitespace-nowrap rounded-none px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150";
+    "font-mono text-xs font-semibold uppercase tracking-[0.12em] whitespace-nowrap rounded-[3px] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150";
   const variantClassNames = getVariantClassNames(variant);
   const className = twMerge(baseClassName, variantClassNames, propsClassName);
   // END TODO
diff --git a/frontend/libs/components/button/src/lib/ToggleButton.tsx b/frontend/libs/components/button/src/lib/ToggleButton.tsx
index 64d664e0b4..5aa9c6e66c 100644
--- a/frontend/libs/components/button/src/lib/ToggleButton.tsx
+++ b/frontend/libs/components/button/src/lib/ToggleButton.tsx
@@ -27,13 +27,15 @@ export const ToggleButton = ({
     <Button
       className={twMerge(
         // 34px matches the sibling toolbar controls (GenerateButton, the
-        // PopoverMenu triggers); the 2px border is inside the box.
-        "flex h-[34px] items-center justify-center rounded-none border-2 border-transparent text-sm text-white backdrop-blur-lg transition-all",
+        // PopoverMenu triggers). Flat control surface + hairline border,
+        // same idiom as the PopoverMenu triggers beside it — the old glassy
+        // backdrop-blur look predates the brutalist system.
+        "flex h-[34px] items-center justify-center rounded-[3px] border border-ui-controls-border bg-ui-controls text-sm text-white transition-colors",
         hasLabel ? "px-3" : "w-[34px]",
         isActive
-          ? "border-white/20 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
-          : "bg-[#5F5F68]/60 hover:bg-[#5F5F68]/90",
-        className
+          ? "border-white/30 bg-brand-primary/40 hover:bg-brand-primary/40"
+          : "hover:border-white/30 hover:bg-ui-controls/80",
+        className,
       )}
       variant="secondary"
       onClick={onClick}
diff --git a/frontend/libs/components/button/src/lib/button.tsx b/frontend/libs/components/button/src/lib/button.tsx
index 1d95111447..7a18492129 100644
--- a/frontend/libs/components/button/src/lib/button.tsx
+++ b/frontend/libs/components/button/src/lib/button.tsx
@@ -39,7 +39,9 @@ export const Button = ({
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
-        return "bg-transparent text-base-fg border border-ui-controls-border hover:bg-white/10 hover:border-white/30";
+        // Resting bg-white/5 tint (matching the home grid cards) so the
+        // button reads as a surface, not a bare outline on the page bg.
+        return "bg-white/5 text-base-fg border border-ui-controls-border hover:bg-white/10 hover:border-white/30";
       }
       case "action": {
         return "bg-ui-controls text-base-fg border border-ui-controls-border hover:bg-ui-controls/80";
@@ -62,7 +64,7 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "w-fit rounded-none font-mono text-xs font-semibold uppercase tracking-[0.15em] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150 flex gap-2 items-center justify-center",
+    "w-fit rounded-[3px] font-mono text-xs font-semibold uppercase tracking-[0.12em] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150 flex gap-2 items-center justify-center",
     getVariantClassNames(propsVariant),
     propsClassName,
     disabledClass,
diff --git a/frontend/libs/components/checkbox/src/lib/checkbox.tsx b/frontend/libs/components/checkbox/src/lib/checkbox.tsx
index c290cd6493..fa9413b11d 100644
--- a/frontend/libs/components/checkbox/src/lib/checkbox.tsx
+++ b/frontend/libs/components/checkbox/src/lib/checkbox.tsx
@@ -97,7 +97,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <span
           aria-hidden
           className={twMerge(
-            "relative inline-block shrink-0 rounded-none border transition-colors",
+            "relative inline-block shrink-0 rounded-[3px] border transition-colors",
             boxDims,
             isChecked
               ? "border-white bg-white text-black"
diff --git a/frontend/libs/components/close-button/src/lib/close-button.tsx b/frontend/libs/components/close-button/src/lib/close-button.tsx
index 57565b2c67..8845850177 100644
--- a/frontend/libs/components/close-button/src/lib/close-button.tsx
+++ b/frontend/libs/components/close-button/src/lib/close-button.tsx
@@ -22,9 +22,9 @@ export const CloseButton = ({
     <button
       onClick={onClick}
       className={twMerge(
-        "flex items-center justify-center rounded-none bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
+        "flex items-center justify-center rounded-[3px] bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
         sizeClasses[size],
-        className
+        className,
       )}
     >
       <XIcon />
diff --git a/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx b/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
index 864fd101d7..859d1cb43c 100644
--- a/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
@@ -25,7 +25,7 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
         onClick={() => onSetColor(c)}
         style={{ backgroundColor: c }}
         className={twMerge(
-          "h-5 w-5 border border-black/20 transition-transform hover:scale-110",
+          "h-5 w-5 rounded-[3px] border border-black/20 transition-transform hover:scale-110",
           colorCode === c &&
             "ring-2 ring-white ring-offset-1 ring-offset-ui-panel",
         )}
@@ -37,16 +37,16 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
       aria-label="Clear color"
       onClick={() => onSetColor(null)}
       className={twMerge(
-        "flex h-5 w-5 items-center justify-center border border-ui-panel-border text-base-fg/50 hover:text-base-fg",
+        "flex h-5 w-5 items-center justify-center rounded-[3px] border border-ui-panel-border text-base-fg/50 hover:text-base-fg",
         !colorCode && "ring-2 ring-white ring-offset-1 ring-offset-ui-panel",
       )}
     >
-      <XIcon  className="text-[10px]" />
+      <XIcon className="text-[10px]" />
     </button>
     {/* Custom hex (native picker) */}
     <label
       title="Custom color"
-      className="relative h-5 w-5 cursor-pointer overflow-hidden border border-ui-panel-border"
+      className="relative h-5 w-5 cursor-pointer overflow-hidden rounded-[3px] border border-ui-panel-border"
       style={{
         background:
           "conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red)",
@@ -55,7 +55,9 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
       <input
         type="color"
         value={
-          colorCode && /^#[0-9a-fA-F]{6}$/.test(colorCode) ? colorCode : "#888888"
+          colorCode && /^#[0-9a-fA-F]{6}$/.test(colorCode)
+            ? colorCode
+            : "#888888"
         }
         onChange={(e) => onSetColor(e.target.value)}
         className="absolute -inset-1 h-[150%] w-[150%] cursor-pointer opacity-0"
diff --git a/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx b/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
index 6fbdf1869d..d60d529cfc 100644
--- a/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
@@ -62,7 +62,7 @@ export const FolderNameDialog: React.FC<FolderNameDialogProps> = ({
           onKeyDown={(e) => {
             if (e.key === "Enter") submit();
           }}
-          className="w-full border border-ui-panel-border bg-ui-controls/40 px-3 py-1.5 text-sm text-base-fg outline-none focus:ring-1 focus:ring-primary/50"
+          className="w-full rounded-[3px] border border-ui-panel-border bg-ui-controls/40 px-3 py-1.5 text-sm text-base-fg outline-none focus:ring-1 focus:ring-primary/50"
           autoFocus
         />
         <div className="flex justify-end gap-2">
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
index 8526e4d635..a1b8f82f45 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
@@ -1,9 +1,4 @@
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { CheckIcon, EllipsisIcon, MusicIcon, UploadIcon } from "lucide-react";
 import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
@@ -273,9 +268,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
           <div className="flex h-full w-full flex-col bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02]">
             <div className="flex min-h-0 flex-1 items-center justify-center">
               <div className="flex h-11 w-11 items-center justify-center bg-white/10 ring-1 ring-white/15">
-                <MusicIcon
-                  
-                  className="text-lg text-white/70" />
+                <MusicIcon className="text-lg text-white/70" />
               </div>
             </div>
             <p className="line-clamp-2 shrink-0 px-2.5 pb-2.5 text-left text-xs leading-snug text-white/75">
@@ -316,8 +309,8 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
           </>
         )}
         {selected && (
-          <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center bg-primary">
-            <CheckIcon  className="text-sm" />
+          <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-[3px] bg-primary">
+            <CheckIcon className="text-sm" />
           </div>
         )}
         {disabled && (
@@ -356,9 +349,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             position="bottom"
             align="end"
             mode="default"
-            triggerIcon={
-              <EllipsisIcon  className="text-base-fg" />
-            }
+            triggerIcon={<EllipsisIcon className="text-base-fg" />}
             buttonClassName="h-7 w-7 p-0 bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg border border-ui-controls-border"
             panelClassName="w-max min-w-44 p-1"
             closeOnUnhover
@@ -394,7 +385,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             />
             <div
               ref={ctxPanelRef}
-              className="fixed z-[9999] w-max min-w-44 border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+              className="fixed z-[9999] w-max min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
               style={{ left: ctxMenu.x, top: ctxMenu.y }}
             >
               <GalleryItemMenuItems
@@ -418,7 +409,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       {mode !== "select" && onBulkSelectToggle && (
         <div
           className={twMerge(
-            "absolute left-2 top-2 z-[2] flex h-5 w-5 items-center justify-center border-2 cursor-pointer transition-all duration-100",
+            "absolute left-2 top-2 z-[2] flex h-5 w-5 items-center justify-center rounded-[3px] border-2 cursor-pointer transition-all duration-100",
             bulkSelected
               ? "bg-primary border-primary"
               : "border-white/60 bg-black/40 hover:border-white",
@@ -432,11 +423,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             onBulkSelectToggle?.();
           }}
         >
-          {bulkSelected && (
-            <CheckIcon
-              
-              className="text-[10px] text-white" />
-          )}
+          {bulkSelected && <CheckIcon className="text-[10px] text-white" />}
         </div>
       )}
       {/* Media class badge on hover — bottom-left */}
@@ -452,7 +439,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       {/* Upload badge — bottom-right (always visible, even in select mode) */}
       {item.isUpload && (
         <div className="pointer-events-none absolute right-2 bottom-2 z-[1] flex h-5 w-5 items-center justify-center bg-black/50 backdrop-blur-lg text-white">
-          <UploadIcon  className="text-[10px]" />
+          <UploadIcon className="text-[10px]" />
         </div>
       )}
       {/* Conditionally wrap with Tooltip — hidden when selecting or in bulk mode */}
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
index 7c829b8e51..f0ff2e97fb 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
@@ -67,7 +67,7 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
       }}
       style={colorCode ? { borderColor: colorCode } : undefined}
       className={twMerge(
-        "group/chip relative w-full aspect-square overflow-hidden border-2 border-ui-controls/40 bg-ui-controls/20 transition-[transform,border-color,background-color,box-shadow] duration-200 ease-out cursor-pointer hover:border-primary/60",
+        "group/chip relative w-full aspect-square overflow-hidden rounded-[3px] border-2 border-ui-controls/40 bg-ui-controls/20 transition-[transform,border-color,background-color,box-shadow] duration-200 ease-out cursor-pointer hover:border-primary/60",
         // A dragged item hovering the folder makes it lift and glow — clear,
         // tactile "drop here" feedback rather than a flat color swap.
         "[&.folder-drag-over]:scale-[1.04] [&.folder-drag-over]:border-primary [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:ring-2 [&.folder-drag-over]:ring-primary/40",
@@ -102,9 +102,9 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
       ) : (
         <div className="absolute inset-0 flex items-center justify-center">
           <FolderIcon
-            
             className={colorCode ? "text-4xl" : "text-4xl text-primary"}
-            style={colorCode ? { color: colorCode } : undefined} />
+            style={colorCode ? { color: colorCode } : undefined}
+          />
         </div>
       )}
 
@@ -115,9 +115,7 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
 
       {/* Star (favorite) */}
       {hasStar && (
-        <StarIcon
-          
-          className="absolute left-2 top-2 text-sm text-amber-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]" />
+        <StarIcon className="absolute left-2 top-2 text-sm text-amber-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]" />
       )}
 
       {/* Name + subfolder count */}
@@ -127,12 +125,12 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
               still reads as a folder. */}
           {hasArt && (
             <FolderIcon
-              
               className={twMerge(
                 "flex-shrink-0 text-sm drop-shadow-[0_1px_2px_rgba(0,0,0,0.7)]",
                 colorCode ? "" : "text-primary",
               )}
-              style={colorCode ? { color: colorCode } : undefined} />
+              style={colorCode ? { color: colorCode } : undefined}
+            />
           )}
           <span
             className={twMerge(
@@ -168,9 +166,9 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
             e.stopPropagation();
             openMenuAt(e.currentTarget as HTMLElement);
           }}
-          className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center bg-black/40 text-white opacity-0 transition-opacity hover:bg-black/60 group-hover/chip:opacity-100 [@media(pointer:coarse)]:opacity-100"
+          className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-[3px] bg-black/40 text-white opacity-0 transition-opacity hover:bg-black/60 group-hover/chip:opacity-100 [@media(pointer:coarse)]:opacity-100"
         >
-          <EllipsisIcon  className="text-sm" />
+          <EllipsisIcon className="text-sm" />
         </span>
       )}
     </button>
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
index c3be2895dc..8fe9332f18 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
@@ -1,5 +1,14 @@
 import React, { useState } from "react";
-import { ChevronRightIcon, EyeIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  ChevronRightIcon,
+  EyeIcon,
+  FolderIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
+  PencilIcon,
+  PlusIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import { GalleryItem } from "./gallery-modal";
 import { GalleryFolder } from "./GalleryDraggableItem";
@@ -28,7 +37,7 @@ export interface GalleryItemMenuItemsProps {
 }
 
 const ROW =
-  "flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap";
+  "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap";
 
 /**
  * The gallery-tile menu body (Open / Edit / Add to Folder ▸ / Remove from
@@ -60,7 +69,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             onOpen();
           }}
         >
-          <EyeIcon  className="text-base-fg w-4" />
+          <EyeIcon className="text-base-fg w-4" />
           <span>
             {item.mediaClass === "video"
               ? "View video"
@@ -85,7 +94,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             close();
           }}
         >
-          <PencilIcon  className="text-base-fg w-4" />
+          <PencilIcon className="text-base-fg w-4" />
           <span>Edit image</span>
         </button>
       )}
@@ -103,22 +112,22 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
         >
           <button
             type="button"
-            className="flex w-full items-center justify-between gap-2 px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap"
+            className="flex w-full items-center justify-between gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap"
             onClick={(e) => {
               e.stopPropagation();
               setFolderSubmenuOpen((v) => !v);
             }}
           >
             <div className="flex items-center gap-2">
-              <FolderPlusIcon  className="text-base-fg w-4" />
+              <FolderPlusIcon className="text-base-fg w-4" />
               <span>Add to Folder</span>
             </div>
             <ChevronRightIcon
-              
               className={twMerge(
                 "text-[10px] text-base-fg/50 transition-transform",
                 COARSE_POINTER && folderSubmenuOpen && "rotate-90",
-              )} />
+              )}
+            />
           </button>
           {folderSubmenuOpen &&
             (COARSE_POINTER ? (
@@ -138,7 +147,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
               </div>
             ) : (
               <div className="absolute left-full top-0 -ml-1 pl-2 z-50">
-                <div className="max-h-64 overflow-y-auto w-max min-w-36 border border-ui-panel-border bg-ui-panel p-1 shadow-xl">
+                <div className="max-h-64 overflow-y-auto w-max min-w-36 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl">
                   <FolderList
                     item={item}
                     folders={folders}
@@ -165,7 +174,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             close();
           }}
         >
-          <FolderMinusIcon  className="text-base-fg w-4" />
+          <FolderMinusIcon className="text-base-fg w-4" />
           <span>Remove from folder</span>
         </button>
       )}
@@ -173,14 +182,14 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
       {onDelete && (
         <button
           type="button"
-          className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm whitespace-nowrap"
+          className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm whitespace-nowrap"
           onClick={(e) => {
             e.stopPropagation();
             close();
             onDelete();
           }}
         >
-          <Trash2Icon  className="text-red w-4" />
+          <Trash2Icon className="text-red w-4" />
           <span className="text-red">Delete</span>
         </button>
       )}
@@ -209,7 +218,7 @@ const FolderList = ({
       <button
         key={folder.id}
         type="button"
-        className="flex w-full items-center gap-2 px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg text-sm"
+        className="flex w-full items-center gap-2 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg text-sm"
         onClick={(e) => {
           e.stopPropagation();
           onAddToFolder?.([item.id], folder.id);
@@ -217,9 +226,9 @@ const FolderList = ({
         }}
       >
         <FolderIcon
-          
           className={folder.colorCode ? "text-xs" : "text-primary text-xs"}
-          style={folder.colorCode ? { color: folder.colorCode } : undefined} />
+          style={folder.colorCode ? { color: folder.colorCode } : undefined}
+        />
         <span className="truncate">{folder.name}</span>
       </button>
     ))}
@@ -228,14 +237,14 @@ const FolderList = ({
     )}
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg/70 text-sm whitespace-nowrap"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg/70 text-sm whitespace-nowrap"
       onClick={(e) => {
         e.stopPropagation();
         closeAll();
         onCreateFolderFromMenu?.();
       }}
     >
-      <PlusIcon  className="text-xs w-4" />
+      <PlusIcon className="text-xs w-4" />
       <span>New Folder</span>
     </button>
   </>
diff --git a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
index b627ff3586..eb59056585 100644
--- a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
@@ -523,14 +523,14 @@ const FolderContextMenuItems = ({
 }) => (
   <div
     className={twMerge(
-      "min-w-44 border border-ui-panel-border bg-ui-panel p-1 shadow-xl z-[59]",
+      "min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl z-[59]",
       className,
     )}
     style={style}
   >
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onToggleStar(folderId, !hasStar)}
     >
       <StarIcon
@@ -548,7 +548,7 @@ const FolderContextMenuItems = ({
     <div className="mx-1.5 my-1 border-t border-ui-panel-border" />
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onNewSubfolder(folderId)}
     >
       <FolderPlusIcon className="w-4" />
@@ -556,7 +556,7 @@ const FolderContextMenuItems = ({
     </button>
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onRename(folderId)}
     >
       <PencilIcon className="w-4" />
@@ -564,7 +564,7 @@ const FolderContextMenuItems = ({
     </button>
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 hover:bg-ui-controls/60 text-sm text-red"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-red"
       onClick={() => onDelete(folderId)}
     >
       <Trash2Icon className="w-4" />
@@ -2601,14 +2601,14 @@ export const GalleryModal = React.memo(
               <div className="flex flex-wrap justify-between items-center gap-y-2">
                 <div className="flex items-center gap-3 flex-wrap gap-y-1">
                   {(mode === "view" || mode === "select") && (
-                    <div className="flex items-center gap-0.5 bg-ui-controls/40 p-0.5 relative z-[51]">
+                    <div className="flex items-center gap-0.5 rounded-[3px] bg-ui-controls/40 p-0.5 relative z-[51]">
                       {(["unsorted", "folders"] as const).map((t) => (
                         <button
                           key={t}
                           type="button"
                           onClick={() => switchGalleryTab(t)}
                           className={twMerge(
-                            " px-3 py-1 text-sm font-medium transition-colors",
+                            "rounded-[3px] px-3 py-1 text-sm font-medium transition-colors",
                             galleryTab === t
                               ? "bg-ui-controls text-base-fg"
                               : "text-base-fg/60 hover:text-base-fg",
@@ -2625,7 +2625,7 @@ export const GalleryModal = React.memo(
                       <button
                         type="button"
                         onClick={() => handleOpenNewFolderModal(null)}
-                        className="flex items-center gap-2 bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-base-fg hover:bg-ui-controls/90 transition-colors relative z-[51]"
+                        className="flex items-center gap-2 rounded-[3px] bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-base-fg hover:bg-ui-controls/90 transition-colors relative z-[51]"
                       >
                         <FolderPlusIcon className="text-xs" />
                         New folder
@@ -2654,7 +2654,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={handleCloseTagView}
                         aria-label="Close tag view"
-                        className="flex h-7 w-7 items-center justify-center hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                        className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                       >
                         <XIcon className="text-sm" />
                       </button>
@@ -2668,7 +2668,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={handleCloseTagView}
                         aria-label="Close tags"
-                        className="flex h-7 w-7 items-center justify-center hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                        className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                       >
                         <XIcon className="text-sm" />
                       </button>
@@ -2714,7 +2714,7 @@ export const GalleryModal = React.memo(
                         />
                       ) : (
                         <h2
-                          className="text-lg font-semibold cursor-pointer hover:bg-ui-controls/30 px-1.5 py-0 transition-colors truncate max-w-[20rem]"
+                          className="text-lg font-semibold cursor-pointer rounded-[3px] hover:bg-ui-controls/30 px-1.5 py-0 transition-colors truncate max-w-[20rem]"
                           onClick={() => handleStartRename(activeFolderId!)}
                         >
                           {activeFolder.name}
@@ -2732,7 +2732,7 @@ export const GalleryModal = React.memo(
                         <button
                           type="button"
                           onClick={() => setFolderMenuOpen((v) => !v)}
-                          className="flex h-7 w-7 items-center justify-center hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                          className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                         >
                           <EllipsisIcon className="text-sm" />
                         </button>
@@ -2916,7 +2916,7 @@ export const GalleryModal = React.memo(
                             }
                           }}
                           className={twMerge(
-                            "flex items-center justify-between gap-2 px-2.5 py-1.5 text-sm transition-colors",
+                            "flex items-center justify-between gap-2 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                             isActive &&
                               !activeFolderId &&
                               !activeTagToken &&
@@ -2949,7 +2949,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={() => handleOpenNewFolderModal(null)}
                         aria-label="New folder"
-                        className="flex h-5 w-5 items-center justify-center text-base-fg/50 hover:bg-ui-controls/60 hover:text-base-fg transition-colors"
+                        className="flex h-5 w-5 items-center justify-center rounded-[3px] text-base-fg/50 hover:bg-ui-controls/60 hover:text-base-fg transition-colors"
                       >
                         <PlusIcon className="text-[10px]" />
                       </button>
@@ -2982,7 +2982,7 @@ export const GalleryModal = React.memo(
                               : undefined
                           }
                           className={twMerge(
-                            "flex w-full flex-shrink-0 items-center gap-2.5 px-2.5 py-1.5 text-sm transition-colors [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:text-base-fg",
+                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:text-base-fg",
                             activeRootFolderId === folder.id
                               ? "bg-ui-controls/60 text-base-fg font-medium"
                               : "text-base-fg/70 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3025,7 +3025,7 @@ export const GalleryModal = React.memo(
                               handleOpenTagFromSidebar(tag.tag_token)
                             }
                             className={twMerge(
-                              "flex w-full flex-shrink-0 items-center gap-2.5 px-2.5 py-1.5 text-sm transition-colors",
+                              "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                               activeTagToken === tag.tag_token
                                 ? "bg-ui-controls/60 text-base-fg font-medium"
                                 : "text-base-fg/70 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3042,7 +3042,7 @@ export const GalleryModal = React.memo(
                           type="button"
                           onClick={handleOpenTagBrowser}
                           className={twMerge(
-                            "flex w-full flex-shrink-0 items-center gap-2.5 px-2.5 py-1.5 text-sm transition-colors",
+                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                             tagBrowserOpen && !activeTagToken
                               ? "bg-ui-controls/60 text-base-fg font-medium"
                               : "text-base-fg/50 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3341,7 +3341,7 @@ export const GalleryModal = React.memo(
                           </div>
                           {onLoginClick ? (
                             <button
-                              className=" bg-primary px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                              className="rounded-[3px] bg-primary px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                               onClick={() => onLoginClick()}
                             >
                               Log in
@@ -3576,7 +3576,7 @@ export const GalleryModal = React.memo(
                           className="fixed inset-0 z-[59]"
                           onClick={() => setBulkFolderPopoverOpen(false)}
                         />
-                        <div className="absolute bottom-full mb-2 right-0 w-56 border border-ui-panel-border bg-ui-panel p-2 shadow-xl z-[60]">
+                        <div className="absolute bottom-full mb-2 right-0 w-56 rounded-[3px] border border-ui-panel-border bg-ui-panel p-2 shadow-xl z-[60]">
                           {/* Folders */}
                           <div className="text-[11px] font-semibold uppercase tracking-wider text-base-fg/40 px-2 py-1">
                             Folders
@@ -3592,7 +3592,7 @@ export const GalleryModal = React.memo(
                               <button
                                 key={folder.id}
                                 type="button"
-                                className="flex w-full items-center gap-2.5 px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg transition-colors"
+                                className="flex w-full items-center gap-2.5 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg transition-colors"
                                 onClick={() => {
                                   const ids = Array.from(bulkSelectedIds);
                                   requestFolderDrop(ids, folder.id);
@@ -3607,7 +3607,7 @@ export const GalleryModal = React.memo(
                           <div className="mx-1.5 my-1 border-t border-ui-panel-border" />
                           <button
                             type="button"
-                            className="flex w-full items-center gap-2.5 px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg/70 transition-colors"
+                            className="flex w-full items-center gap-2.5 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg/70 transition-colors"
                             onClick={() => {
                               const ids = Array.from(bulkSelectedIds);
                               setBulkFolderPopoverOpen(false);
@@ -3633,7 +3633,7 @@ export const GalleryModal = React.memo(
                   )}
                   <button
                     onClick={clearBulkSelection}
-                    className="flex h-8 w-8 items-center justify-center bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg transition-colors"
+                    className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg transition-colors"
                     aria-label="Clear selection"
                   >
                     <XIcon className="text-base" />
diff --git a/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx b/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
index 30c0f553e7..e59beba7f5 100644
--- a/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
+++ b/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
@@ -37,7 +37,7 @@ export function CopyPromptButton({
         type="button"
         onClick={handleCopy}
         aria-label="Copy prompt"
-        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-white/40 transition-colors hover:bg-white/10 hover:text-white"
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[3px] text-white/40 transition-colors hover:bg-white/10 hover:text-white"
       >
         <DynamicIcon icon={copied ? CheckIcon : CopyIcon} className="text-sm" />
       </button>
diff --git a/frontend/libs/components/generation-list/src/lib/FailedCard.tsx b/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
index d9d3e98b6a..a3cd76eb89 100644
--- a/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
@@ -32,7 +32,7 @@ export const FailedCard = memo(function FailedCard({
   const iconPath = modelId ? getCreatorIconPathForModelId(modelId) : null;
 
   return (
-    <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-red-500/10">
+    <div className="relative aspect-square w-full overflow-hidden rounded-[3px] bg-red-500/10">
       {refImageUrl && (
         <img
           src={refImageUrl}
@@ -42,9 +42,7 @@ export const FailedCard = memo(function FailedCard({
         />
       )}
       <div className="relative flex h-full flex-col items-center justify-center gap-2 px-4 sm:px-6">
-        <CircleAlertIcon
-          
-          className="text-2xl text-red-400" />
+        <CircleAlertIcon className="text-2xl text-red-400" />
         <span className="text-center text-xs font-medium text-red-400">
           {failureReason || "Generation failed"}
         </span>
@@ -58,7 +56,7 @@ export const FailedCard = memo(function FailedCard({
           <button
             type="button"
             onClick={() => onDismiss(id)}
-            className="flex items-center gap-1.5 rounded-md bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
+            className="flex items-center gap-1.5 rounded-[3px] bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
           >
             <XIcon />
             Dismiss
diff --git a/frontend/libs/components/generation-list/src/lib/FailedRow.tsx b/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
index 28afb25037..4435d2ee28 100644
--- a/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
@@ -35,9 +35,9 @@ export const FailedRow = memo(function FailedRow({
   const iconPath = modelId ? getCreatorIconPathForModelId(modelId) : null;
 
   return (
-    <div className="flex items-center gap-3 rounded-lg px-2.5 py-2">
+    <div className="flex items-center gap-3 px-2.5 py-2">
       {/* Error thumbnail — ref image (if any) faded behind the warning icon */}
-      <div className="relative flex size-[100px] shrink-0 items-center justify-center overflow-hidden rounded-md bg-red-500/10 leading-none">
+      <div className="relative flex size-[100px] shrink-0 items-center justify-center overflow-hidden bg-red-500/10 leading-none">
         {refImageUrl && (
           <img
             src={refImageUrl}
@@ -46,9 +46,7 @@ export const FailedRow = memo(function FailedRow({
             className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-10"
           />
         )}
-        <CircleAlertIcon
-          
-          className="relative text-2xl text-red-400" />
+        <CircleAlertIcon className="relative text-2xl text-red-400" />
       </div>
 
       {/* Reason + prompt + model */}
@@ -87,7 +85,7 @@ export const FailedRow = memo(function FailedRow({
       <button
         type="button"
         onClick={() => onDismiss(id)}
-        className="flex shrink-0 items-center gap-1.5 rounded-md bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
+        className="flex shrink-0 items-center gap-1.5 rounded-[3px] bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
       >
         <XIcon />
         Dismiss
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx b/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
index f36a987cd3..01306910be 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
@@ -24,7 +24,7 @@ export function GalleryAutoplayToggle() {
     <div
       role="group"
       aria-label="Video preview playback"
-      className="flex items-center gap-0.5 rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5"
+      className="flex items-center gap-0.5 rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5"
     >
       {OPTIONS.map(({ autoplay, icon, label }) => {
         const active = autoplayVideos === autoplay;
@@ -35,7 +35,7 @@ export function GalleryAutoplayToggle() {
               aria-label={label}
               aria-pressed={active}
               onClick={() => setAutoplayVideos(autoplay)}
-              className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+              className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
                 active
                   ? "bg-white/10 text-white"
                   : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx b/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
index 3f8e94aca5..a50ef6c0e3 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
@@ -1,5 +1,11 @@
 import { memo, useCallback, useState, type ReactNode } from "react";
-import { BoxIcon, CheckIcon, ImageIcon, MusicIcon, VideoIcon } from "lucide-react";
+import {
+  BoxIcon,
+  CheckIcon,
+  ImageIcon,
+  MusicIcon,
+  VideoIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import {
   getCreatorIconPathForModelId,
@@ -162,7 +168,7 @@ export const GalleryCard = memo(function GalleryCard({
     <div
       role="button"
       tabIndex={0}
-      className={`group relative block w-full rounded-lg bg-ui-controls/40 leading-none transition-shadow hover:ring-2 hover:ring-primary-400/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 cursor-pointer ${isSquare ? "aspect-square" : ""} ${selected ? "ring-2 ring-primary-400" : ""}`}
+      className={`group relative block w-full rounded-[3px] bg-ui-controls/40 leading-none transition-shadow hover:ring-2 hover:ring-primary-400/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 cursor-pointer ${isSquare ? "aspect-square" : ""} ${selected ? "ring-2 ring-primary-400" : ""}`}
       style={outerStyle}
       onClick={handleCardClick}
       onKeyDown={handleCardKeyDown}
@@ -184,9 +190,7 @@ export const GalleryCard = memo(function GalleryCard({
             </p>
             <div className="flex min-h-0 flex-1 items-center justify-center">
               <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
-                <MusicIcon
-                  
-                  className="text-xl text-white/70" />
+                <MusicIcon className="text-xl text-white/70" />
               </div>
             </div>
             {item.fullImage && (
@@ -213,25 +217,25 @@ export const GalleryCard = memo(function GalleryCard({
       {/* Selection checkbox chip (select mode only) */}
       {selectMode && item.fullImage && (
         <div
-          className={`pointer-events-none absolute left-2 top-2 z-10 flex h-5 w-5 items-center justify-center rounded-md border transition-colors ${
+          className={`pointer-events-none absolute left-2 top-2 z-10 flex h-5 w-5 items-center justify-center rounded-[3px] border transition-colors ${
             selected
               ? "border-primary-400 bg-primary-400 text-white"
               : "border-white/60 bg-black/40 text-transparent"
           }`}
         >
-          <CheckIcon  className="text-[10px]" />
+          <CheckIcon className="text-[10px]" />
         </div>
       )}
 
       {/* Hover overlay with media type + model badges and quick actions */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t rounded-b-lg from-black/70 to-transparent px-2 pb-2 pt-6 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t rounded-b-[3px] from-black/70 to-transparent px-2 pb-2 pt-6 opacity-0 transition-opacity group-hover:opacity-100">
         <div className="pointer-events-auto flex min-w-0 flex-wrap items-center gap-1.5">
-          <div className="flex items-center gap-1.5 rounded-lg bg-black/60 px-2.5 py-1 text-xs font-medium text-white/90">
+          <div className="flex items-center gap-1.5 bg-black/60 px-2.5 py-1 text-xs font-medium text-white/90">
             <DynamicIcon icon={mediaIcon} className="text-[10px]" />
             {mediaLabel}
           </div>
           {modelDisplayName && modelIconPath && (
-            <div className="flex items-center gap-1 rounded-lg bg-black/60 px-2 py-1 text-[10px] text-white/80">
+            <div className="flex items-center gap-1 bg-black/60 px-2 py-1 text-[10px] text-white/80">
               <img
                 src={modelIconPath}
                 alt=""
@@ -243,7 +247,7 @@ export const GalleryCard = memo(function GalleryCard({
         </div>
 
         {actionsSlot && !selectMode && (
-          <div className="pointer-events-auto flex shrink-0 items-center gap-0.5 rounded-lg bg-black/60 p-1 backdrop-blur-sm">
+          <div className="pointer-events-auto flex shrink-0 items-center gap-0.5 rounded-[3px] bg-black/60 p-1 backdrop-blur-sm">
             {actionsSlot}
           </div>
         )}
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx b/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
index f01fd20980..3959e6cbae 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
@@ -1,5 +1,12 @@
 import { memo, useCallback, type ReactNode } from "react";
-import { BoxIcon, CheckIcon, ImageIcon, MusicIcon, PlayIcon, VideoIcon } from "lucide-react";
+import {
+  BoxIcon,
+  CheckIcon,
+  ImageIcon,
+  MusicIcon,
+  PlayIcon,
+  VideoIcon,
+} from "lucide-react";
 import {
   getCreatorIconPathForModelId,
   getModelDisplayName,
@@ -51,7 +58,13 @@ export const GalleryRow = memo(function GalleryRow({
       : isAudio
         ? MusicIcon
         : ImageIcon;
-  const mediaLabel = isVideo ? "Video" : is3D ? "3D" : isAudio ? "Audio" : "Image";
+  const mediaLabel = isVideo
+    ? "Video"
+    : is3D
+      ? "3D"
+      : isAudio
+        ? "Audio"
+        : "Image";
 
   const effectiveModelId = modelId ?? item.modelId;
   const modelDisplayName = effectiveModelId
@@ -87,23 +100,23 @@ export const GalleryRow = memo(function GalleryRow({
       tabIndex={0}
       onClick={handleRowClick}
       onKeyDown={handleRowKeyDown}
-      className={`group flex cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 transition-colors hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60 ${selected ? "bg-primary-400/10" : ""}`}
+      className={`group flex cursor-pointer items-center gap-3 rounded-[3px] px-2.5 py-2 transition-colors hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60 ${selected ? "bg-primary-400/10" : ""}`}
     >
       {/* Selection checkbox (select mode only) */}
       {selectMode && (
         <div
-          className={`pointer-events-none flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors ${
+          className={`pointer-events-none flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] border transition-colors ${
             selected
               ? "border-primary-400 bg-primary-400 text-white"
               : "border-white/60 bg-black/40 text-transparent"
           } ${item.fullImage ? "" : "invisible"}`}
         >
-          <CheckIcon  className="text-[10px]" />
+          <CheckIcon className="text-[10px]" />
         </div>
       )}
 
       {/* Thumbnail */}
-      <div className="relative size-[100px] shrink-0 overflow-hidden rounded-md bg-ui-controls/40 leading-none">
+      <div className="relative size-[100px] shrink-0 overflow-hidden bg-ui-controls/40 leading-none">
         <GalleryThumbnail
           thumbnail={item.thumbnail}
           stillThumbnail={item.stillThumbnail}
@@ -116,9 +129,7 @@ export const GalleryRow = memo(function GalleryRow({
         {isVideo && item.thumbnail && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
             <span className="flex h-6 w-6 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm">
-              <PlayIcon
-                
-                className="ml-0.5 text-[9px] text-white/90" />
+              <PlayIcon className="ml-0.5 text-[9px] text-white/90" />
             </span>
           </div>
         )}
@@ -127,7 +138,7 @@ export const GalleryRow = memo(function GalleryRow({
       {/* Title + model / media meta */}
       <div className="min-w-0 flex-1">
         {loading ? (
-          <div className="relative h-4 w-2/3 max-w-[280px] overflow-hidden rounded bg-white/[0.06]">
+          <div className="relative h-4 w-2/3 max-w-[280px] overflow-hidden bg-white/[0.06]">
             <div className="animate-shimmer absolute inset-0" />
           </div>
         ) : (
@@ -144,7 +155,7 @@ export const GalleryRow = memo(function GalleryRow({
           </div>
         )}
         {isAudio && item.fullImage && (
-          <div className="mt-1.5 max-w-md rounded-md bg-white/[0.04]">
+          <div className="mt-1.5 max-w-md bg-white/[0.04]">
             <WaveformAudioPlayer
               src={item.fullImage}
               durationMillis={item.durationMillis}
diff --git a/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx b/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
index d4f11616df..4cdcafc3c3 100644
--- a/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
@@ -11,14 +11,14 @@ export function GallerySelectToggle() {
   const label = active ? "Exit selection" : "Select items";
 
   return (
-    <div className="flex items-center rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5">
+    <div className="flex items-center rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5">
       <Tooltip content={label} position="bottom" delay={300}>
         <button
           type="button"
           aria-label={label}
           aria-pressed={active}
           onClick={() => setActive(!active)}
-          className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+          className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
             active
               ? "bg-white/10 text-white"
               : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx b/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
index b6623d50f0..e7e1667444 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
@@ -26,7 +26,7 @@ export function GalleryViewToggle() {
     <div
       role="group"
       aria-label="Gallery layout"
-      className="flex items-center gap-0.5 rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5"
+      className="flex items-center gap-0.5 rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5"
     >
       {OPTIONS.map(({ mode, icon, label }) => {
         const active = viewMode === mode;
@@ -37,7 +37,7 @@ export function GalleryViewToggle() {
               aria-label={label}
               aria-pressed={active}
               onClick={() => setViewMode(mode)}
-              className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+              className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
                 active
                   ? "bg-white/10 text-white"
                   : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/PendingCard.tsx b/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
index e09c2c7305..b9d7273dad 100644
--- a/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
@@ -36,18 +36,16 @@ export const PendingCard = memo(function PendingCard({
   const iconPath = getCreatorIconPathForModelId(modelId);
 
   return (
-    <div className="group relative aspect-square w-full overflow-hidden rounded-lg bg-white/[0.03]">
+    <div className="group relative aspect-square w-full overflow-hidden rounded-[3px] bg-white/[0.03]">
       <div className="animate-shimmer h-full w-full" />
       {batchCount != null && batchCount > 1 && (
-        <div className="absolute left-2 right-2 top-2 z-10 rounded-md bg-black/60 px-2.5 py-1.5 text-center text-[10px] leading-snug text-white/70 backdrop-blur-sm">
+        <div className="absolute left-2 right-2 top-2 z-10 bg-black/60 px-2.5 py-1.5 text-center text-[10px] leading-snug text-white/70 backdrop-blur-sm">
           Generating {batchCount} {batchNoun(mediaClass)} · Results may appear
           one at a time
         </div>
       )}
       <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
-        <LoaderCircleIcon
-          
-          className="animate-spin text-2xl text-white/20" />
+        <LoaderCircleIcon className="animate-spin text-2xl text-white/20" />
         {progressPercent != null && (
           <span className="text-xs tabular-nums text-white/40">
             {progressPercent}%
diff --git a/frontend/libs/components/generation-list/src/lib/PendingRow.tsx b/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
index 44ce7f7e06..3328aa3392 100644
--- a/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
@@ -38,9 +38,9 @@ export const PendingRow = memo(function PendingRow({
   const iconPath = getCreatorIconPathForModelId(modelId);
 
   return (
-    <div className="group flex items-center gap-3 rounded-lg px-2.5 py-2">
+    <div className="group flex items-center gap-3 px-2.5 py-2">
       {/* Thumbnail placeholder */}
-      <div className="relative size-[100px] shrink-0 overflow-hidden rounded-md bg-white/[0.03] leading-none">
+      <div className="relative size-[100px] shrink-0 overflow-hidden bg-white/[0.03] leading-none">
         <div className="animate-shimmer h-full w-full" />
         <div className="absolute inset-0 flex items-center justify-center">
           <LoaderCircleIcon
diff --git a/frontend/libs/components/input/src/lib/input.tsx b/frontend/libs/components/input/src/lib/input.tsx
index aba7991917..f178c806d2 100644
--- a/frontend/libs/components/input/src/lib/input.tsx
+++ b/frontend/libs/components/input/src/lib/input.tsx
@@ -28,7 +28,7 @@ export const Input = React.forwardRef(
       errorMessage,
       ...rest
     }: InputProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     return (
       <div className={twMerge("flex flex-col", className)}>
@@ -45,13 +45,13 @@ export const Input = React.forwardRef(
             ref={ref}
             id={id ? id : label ? label : undefined}
             className={twMerge(
-              "h-10 w-full rounded-none px-3 py-2.5 outline-none",
+              "h-10 w-full rounded-[3px] px-3 py-2.5 outline-none",
               "bg-ui-panel text-base-fg placeholder-base-fg/40",
               "border border-ui-panel-border transition-colors duration-150 ease-in-out hover:border-white/40 focus:border-white focus:!outline-none",
               "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-ui-panel-border",
               icon && "pl-10",
               isError && "border-red-500 focus:border-red-500",
-              inputClassName
+              inputClassName,
             )}
             onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
               if (onFocus) {
@@ -71,7 +71,7 @@ export const Input = React.forwardRef(
         </div>
       </div>
     );
-  }
+  },
 );
 
 Input.displayName = "Input";
diff --git a/frontend/libs/components/modal/src/lib/modal.tsx b/frontend/libs/components/modal/src/lib/modal.tsx
index d0ed199059..e8d6d9ba31 100644
--- a/frontend/libs/components/modal/src/lib/modal.tsx
+++ b/frontend/libs/components/modal/src/lib/modal.tsx
@@ -147,19 +147,13 @@ const ExpandButton = ({ className, size = "md" }: ExpandButtonProps) => {
       aria-label={expanded ? "Restore modal size" : "Expand modal"}
       onClick={toggleExpanded}
       className={twMerge(
-        "flex items-center justify-center rounded-none bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
+        "flex items-center justify-center rounded-[3px] bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
         sizeClasses[size],
         "relative z-[70]",
         className,
       )}
     >
-      <DynamicIcon
-        icon={
-          expanded
-            ? Minimize2Icon
-            : Maximize2Icon
-        }
-      />
+      <DynamicIcon icon={expanded ? Minimize2Icon : Maximize2Icon} />
     </button>
   );
 };
diff --git a/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx b/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
index 288d933fac..8ebde6dd9f 100644
--- a/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
+++ b/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
@@ -107,7 +107,7 @@ function ProviderTooltipContent({
               onFinished?.();
             }}
             type="button"
-            className={`group flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 transition-all ${
+            className={`group flex cursor-pointer items-center justify-between rounded-[3px] px-2 py-2 transition-all ${
               selectedProvider === p
                 ? "bg-ui-controls/70 border-l-4 border-primary"
                 : "hover:bg-ui-controls/50"
@@ -229,7 +229,7 @@ export function ClassyModelSelector({
                     : undefined;
                   const iconProvider = prov ?? allowedProviders[0];
                   return iconProvider ? (
-                    <div className="mr-1 rounded-md p-1.5 bg-ui-controls/60 group-hover:bg-ui-controls/80 transition-colors">
+                    <div className="mr-1 p-1.5 bg-ui-controls/60 group-hover:bg-ui-controls/80 transition-colors">
                       <span className="text-base-fg/70 group-hover:text-base-fg/90 text-lg">
                         {getProviderIcon(iconProvider)}
                       </span>
@@ -241,7 +241,7 @@ export function ClassyModelSelector({
             isSameModel(item.model as Model | undefined, selectedModel) &&
             selectedProvider &&
             hasMultipleProviders ? (
-              <div className="mr-1 rounded-md p-1.5 bg-primary/60 group-hover:bg-primary/80 transition-colors">
+              <div className="mr-1 p-1.5 bg-primary/60 group-hover:bg-primary/80 transition-colors">
                 <span className="text-base-fg/70 group-hover:text-base-fg/90 text-lg">
                   {getProviderIcon(selectedProvider)}
                 </span>
@@ -313,7 +313,7 @@ export function ClassyModelSelector({
         mode="hoverSelect"
         maxListHeight={maxListHeight}
         {...popoverProps}
-        buttonClassName="rounded-xl bg-ui-controls/90 hover:bg-ui-controls text-left shadow-sm px-3 py-1 gap-3 border border-ui-controls-border"
+        buttonClassName="rounded-[3px] bg-ui-controls/90 hover:bg-ui-controls text-left shadow-sm px-3 py-1 gap-3 border border-ui-controls-border"
         renderTrigger={(selectedItem) => {
           const modelTitle =
             selectedItem?.label ?? selectedModel?.selectorName ?? "";
@@ -340,9 +340,7 @@ export function ClassyModelSelector({
                   </span>
                 </div>
               </div>
-              <ChevronUpIcon
-                
-                className="text-base text-base-fg/70 self-center" />
+              <ChevronUpIcon className="text-base text-base-fg/70 self-center" />
             </div>
           );
         }}
diff --git a/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx b/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
index 2943361c66..d17ab83ab0 100644
--- a/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
+++ b/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
@@ -81,9 +81,11 @@ export const BoardGrid = ({
   const [viewportH, setViewportH] = useState(0);
   const [marquee, setMarquee] = useState<Marquee | null>(null);
   const [focusedId, setFocusedId] = useState<string | null>(null);
-  const marqueeRef = useRef<{ active: boolean; moved: boolean; additive: boolean }>(
-    { active: false, moved: false, additive: false },
-  );
+  const marqueeRef = useRef<{
+    active: boolean;
+    moved: boolean;
+    additive: boolean;
+  }>({ active: false, moved: false, additive: false });
 
   useLayoutEffect(() => {
     const el = scrollRef.current;
@@ -103,7 +105,10 @@ export const BoardGrid = ({
   const groups = useMemo<SectionGroup[] | null>(() => {
     if (!sections || sections.length === 0) return null;
     const known = new Set(sections.map((s) => s.id));
-    const bySection = new Map<string | null, Array<{ id: string; aspect: number }>>();
+    const bySection = new Map<
+      string | null,
+      Array<{ id: string; aspect: number }>
+    >();
     for (const it of items) {
       const key = it.sectionId && known.has(it.sectionId) ? it.sectionId : null;
       const entry = { id: it.id, aspect: it.aspect };
@@ -119,7 +124,10 @@ export const BoardGrid = ({
     }));
     const ungrouped = bySection.get(null) ?? [];
     return ungrouped.length > 0
-      ? [{ id: null, name: "Ungrouped", collapsed: false, items: ungrouped }, ...named]
+      ? [
+          { id: null, name: "Ungrouped", collapsed: false, items: ungrouped },
+          ...named,
+        ]
       : named;
   }, [items, sections]);
 
@@ -313,7 +321,7 @@ export const BoardGrid = ({
         })}
         {marquee && marqueeRef.current.moved && (
           <div
-            className="pointer-events-none absolute rounded-[4px] border border-primary bg-primary/10"
+            className="pointer-events-none absolute rounded-[3px] border border-primary bg-primary/10"
             style={{
               left: Math.min(marquee.x0, marquee.x1),
               top: Math.min(marquee.y0, marquee.y1),
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
index 5d1abbeaf4..ecf413eb2f 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
@@ -1,6 +1,12 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { FilmIcon, PlusIcon, RepeatIcon, SplineIcon, XIcon } from "lucide-react";
+import {
+  FilmIcon,
+  PlusIcon,
+  RepeatIcon,
+  SplineIcon,
+  XIcon,
+} from "lucide-react";
 import { EngineContext } from "../../contexts/EngineContext/EngineContext";
 import {
   addBakedClipToObject,
@@ -11,16 +17,17 @@ import {
   setClipLoop,
   setClipTransitionEasing,
 } from "../../actions";
-import {
-  usePageSceneStore,
-  type ClipLane,
-} from "../../PageSceneStore";
+import { usePageSceneStore, type ClipLane } from "../../PageSceneStore";
 import {
   DEFAULT_EASING,
   DEFAULT_TIMELINE_FPS,
 } from "../../engine/timeline/types";
 import { ToastTypes } from "../../enums";
-import { fractionToTime, quantizeToFrame, timeToFraction } from "./timelineUtils";
+import {
+  fractionToTime,
+  quantizeToFrame,
+  timeToFraction,
+} from "./timelineUtils";
 
 interface TimelineClipRowProps {
   objectUuid: string;
@@ -62,9 +69,7 @@ export const TimelineClipRow = ({
   // effectively invisible.
   const [pickerAnchor, setPickerAnchor] = useState<DOMRect | null>(null);
   const pickerMenuRef = useRef<HTMLDivElement>(null);
-  const selectedLaneId = usePageSceneStore(
-    (s) => s.timelineSelectedClipLaneId,
-  );
+  const selectedLaneId = usePageSceneStore((s) => s.timelineSelectedClipLaneId);
 
   // A fixed-position popup can't follow its button, so any outside scroll
   // or resize closes it (scrolling INSIDE the popup's own list is exempt).
@@ -154,14 +159,14 @@ export const TimelineClipRow = ({
   return (
     <div className="flex items-center gap-3 py-0.5">
       <div className="flex w-32 shrink-0 items-center gap-2 truncate ps-6 text-xs text-base-fg/50">
-        <FilmIcon  className="h-3 w-3 opacity-60" />
+        <FilmIcon className="h-3 w-3 opacity-60" />
         <span className="truncate">Animation</span>
         {bakedClips && bakedClips.length > 0 && (
           <div className="shrink-0">
             <button
               type="button"
               title="Add one of this object's baked animations"
-              className={`flex h-4 w-4 items-center justify-center rounded-[4px] transition-colors ${
+              className={`flex h-4 w-4 items-center justify-center rounded-[3px] transition-colors ${
                 pickerAnchor
                   ? "bg-brand-primary text-white"
                   : "bg-white/10 text-base-fg/70 hover:bg-white/20 hover:text-base-fg"
@@ -172,7 +177,7 @@ export const TimelineClipRow = ({
                 )
               }
             >
-              <PlusIcon  className="h-2.5 w-2.5" />
+              <PlusIcon className="h-2.5 w-2.5" />
             </button>
             {pickerAnchor &&
               ReactDOM.createPortal(
@@ -283,7 +288,7 @@ export const TimelineClipRow = ({
                   editor && setClipLoop(editor, lane.id, !strip.loop)
                 }
               >
-                <RepeatIcon  className="h-2.5 w-2.5" />
+                <RepeatIcon className="h-2.5 w-2.5" />
               </button>
 
               <span className="min-w-0 flex-1 truncate">{strip.name}</span>
@@ -305,7 +310,7 @@ export const TimelineClipRow = ({
                       .setTimelineSelectedClipLane(null);
                   }}
                 >
-                  <XIcon  className="h-2.5 w-2.5" />
+                  <XIcon className="h-2.5 w-2.5" />
                 </button>
               )}
 
@@ -359,7 +364,7 @@ export const TimelineClipRow = ({
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={() => toggleTransition(lane)}
               >
-                <SplineIcon  className="h-2 w-2" />
+                <SplineIcon className="h-2 w-2" />
               </button>
             );
           })}
diff --git a/frontend/libs/components/popover/src/lib/popover.tsx b/frontend/libs/components/popover/src/lib/popover.tsx
index 5fb7f04141..1f5e496aac 100644
--- a/frontend/libs/components/popover/src/lib/popover.tsx
+++ b/frontend/libs/components/popover/src/lib/popover.tsx
@@ -15,7 +15,14 @@ import {
 } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
 import { Button } from "@storyteller/ui-button";
-import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, InfoIcon } from "lucide-react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CircleCheckIcon,
+  InfoIcon,
+} from "lucide-react";
 import { Model, ModelInfo } from "@storyteller/model-list";
 import { Tooltip } from "@storyteller/ui-tooltip";
 
@@ -136,7 +143,7 @@ function PortalTooltip({
               zIndex: 9999,
             }}
             className={twMerge(
-              "pointer-events-auto rounded-none bg-ui-panel p-3 border border-ui-panel-border text-base-fg",
+              "pointer-events-auto rounded-[3px] bg-ui-panel p-3 border border-ui-panel-border text-base-fg",
               className,
             )}
           >
@@ -237,7 +244,7 @@ function InfoHint({ content }: { content: ReactNode }) {
           if (!pinnedRef.current) setOpen(false);
         }}
       >
-        <InfoIcon  className="h-3.5 w-3.5" />
+        <InfoIcon className="h-3.5 w-3.5" />
       </button>
       {open &&
         createPortal(
@@ -253,7 +260,7 @@ function InfoHint({ content }: { content: ReactNode }) {
               transform: "translate(-50%, -100%)",
               zIndex: 10000,
             }}
-            className="pointer-events-auto rounded-none border border-ui-panel-border bg-ui-panel px-3 py-1.5 text-center text-xs leading-relaxed text-base-fg"
+            className="pointer-events-auto rounded-[3px] border border-ui-panel-border bg-ui-panel px-3 py-1.5 text-center text-xs leading-relaxed text-base-fg"
             onClick={(e) => e.stopPropagation()}
             onMouseEnter={() => {
               if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
@@ -349,7 +356,7 @@ function RichListRow({
         if (!item.disabled) onClick?.();
       }}
       className={twMerge(
-        "group flex cursor-pointer items-center gap-3 rounded-none px-2 py-2 transition-colors",
+        "group flex cursor-pointer items-center gap-3 rounded-[3px] px-2 py-2 transition-colors",
         item.selected ? "bg-ui-controls/70" : "hover:bg-ui-controls/50",
         !item.selected && active ? "bg-ui-controls/50" : "",
         item.disabled ? "!cursor-not-allowed opacity-50" : "",
@@ -404,10 +411,8 @@ function RichListRow({
       {rightNode ??
         (item.selected &&
           (item.selectedRight ?? (
-            <span className="ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-none bg-white">
-              <CheckIcon
-
-                className="text-[11px] font-bold text-black" />
+            <span className="ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] bg-white">
+              <CheckIcon className="text-[11px] font-bold text-black" />
             </span>
           )))}
     </div>
@@ -629,7 +634,7 @@ function SubmenuFlyout({
               transform: "translateY(-50%)",
               zIndex: 9999,
             }}
-            className="pointer-events-auto w-[340px] rounded-none border border-ui-panel-border bg-ui-panel p-1.5 text-base-fg"
+            className="pointer-events-auto w-[340px] rounded-[3px] border border-ui-panel-border bg-ui-panel p-1.5 text-base-fg"
           >
             <div className="mb-1 mt-0.5 px-1.5 text-sm font-normal text-base-fg opacity-70">
               {item.label}
@@ -643,9 +648,7 @@ function SubmenuFlyout({
                   canScrollUp ? "opacity-100" : "opacity-0",
                 )}
               >
-                <ChevronUpIcon
-                  
-                  className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                <ChevronUpIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
               </div>
               <div
                 ref={scrollRef}
@@ -695,9 +698,7 @@ function SubmenuFlyout({
                   canScrollDown ? "opacity-100" : "opacity-0",
                 )}
               >
-                <ChevronDownIcon
-                  
-                  className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                <ChevronDownIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
               </div>
             </div>
           </div>,
@@ -850,7 +851,7 @@ export const PopoverMenu = ({
   };
 
   const className = twMerge(
-    "text-sm font-medium rounded-none px-2.5 py-1.5",
+    "text-sm font-medium rounded-[3px] px-2.5 py-1.5",
     "flex gap-2 items-center justify-center outline-none",
     "transition-colors duration-150",
     "bg-ui-controls px-3 text-base-fg hover:bg-ui-controls/80 border border-ui-controls-border",
@@ -1051,9 +1052,7 @@ export const PopoverMenu = ({
                         <span className="opacity-70">{triggerLabel}</span>
                         <div className="flex items-center gap-2">
                           <span className="truncate">{selectedItem.label}</span>
-                          <ChevronUpIcon
-                            
-                            className="text-sm" />
+                          <ChevronUpIcon className="text-sm" />
                         </div>
                       </div>
                     ) : null}
@@ -1091,7 +1090,7 @@ export const PopoverMenu = ({
                   <div
                     ref={panelContentRef}
                     className={twMerge(
-                      "z-10 min-w-48 mt-2 rounded-none bg-ui-panel p-1.5 border border-ui-panel-border overflow-visible",
+                      "z-10 min-w-48 mt-2 rounded-[3px] bg-ui-panel p-1.5 border border-ui-panel-border overflow-visible",
                       position === "top" ? "mb-2" : "mt-2",
                       panelClassName,
                     )}
@@ -1130,9 +1129,7 @@ export const PopoverMenu = ({
                             canScrollUp ? "opacity-100" : "opacity-0",
                           )}
                         >
-                          <ChevronUpIcon
-                            
-                            className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                          <ChevronUpIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
                         </div>
                         <div
                           ref={scrollContainerRef}
@@ -1164,9 +1161,7 @@ export const PopoverMenu = ({
                                       item={item}
                                       active={openTooltipIdx === index}
                                       rightNode={
-                                        <ChevronRightIcon
-                                          
-                                          className="ml-1 shrink-0 text-xs text-base-fg/50" />
+                                        <ChevronRightIcon className="ml-1 shrink-0 text-xs text-base-fg/50" />
                                       }
                                     />
                                   </SubmenuFlyout>
@@ -1231,18 +1226,14 @@ export const PopoverMenu = ({
                             canScrollDown ? "opacity-100" : "opacity-0",
                           )}
                         >
-                          <ChevronDownIcon
-                            
-                            className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                          <ChevronDownIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
                         </div>
                       </div>
                     ) : mode === "hoverSelect" ? (
                       <div className="relative flex flex-col text-sm text-base-fg overflow-visible">
                         {maxListHeight && canScrollUp && (
                           <div className="absolute top-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-b from-ui-panel via-ui-panel/80 to-transparent py-1.5 pointer-events-none">
-                            <ChevronUpIcon
-                              
-                              className="text-base-fg/60 text-xs animate-bounce" />
+                            <ChevronUpIcon className="text-base-fg/60 text-xs animate-bounce" />
                           </div>
                         )}
                         <div
@@ -1280,7 +1271,7 @@ export const PopoverMenu = ({
                                   }
                                 }}
                                 className={twMerge(
-                                  "group flex cursor-pointer items-start gap-2 rounded-none px-2 py-2 transition-all",
+                                  "group flex cursor-pointer items-start gap-2 rounded-[3px] px-2 py-2 transition-all",
                                   item.selected
                                     ? "bg-white/10 border-l-2 border-white"
                                     : "hover:bg-ui-controls/50",
@@ -1375,7 +1366,7 @@ export const PopoverMenu = ({
                                       position="right"
                                       delay={item.tooltipDelayMs ?? 300}
                                       interactive
-                                      className="!pointer-events-auto z-50 min-w-48 rounded-none bg-ui-panel p-1.5 border border-ui-panel-border"
+                                      className="!pointer-events-auto z-50 min-w-48 rounded-[3px] bg-ui-panel p-1.5 border border-ui-panel-border"
                                       onOpenChange={(open) =>
                                         setOpenTooltipIdx((prev) =>
                                           open
@@ -1401,9 +1392,7 @@ export const PopoverMenu = ({
                         </div>
                         {maxListHeight && canScrollDown && (
                           <div className="absolute bottom-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-t from-ui-panel via-ui-panel/80 to-transparent py-1.5 pointer-events-none">
-                            <ChevronDownIcon
-                              
-                              className="text-base-fg/60 text-xs animate-bounce" />
+                            <ChevronDownIcon className="text-base-fg/60 text-xs animate-bounce" />
                           </div>
                         )}
                         {showAddButton && onAdd && (
@@ -1440,7 +1429,7 @@ export const PopoverMenu = ({
                                 position="right"
                                 delay={item.tooltipDelayMs ?? 1000}
                                 interactive
-                                className="!pointer-events-auto z-50 min-w-48 rounded-none bg-ui-panel p-1.5 border border-ui-panel-border"
+                                className="!pointer-events-auto z-50 min-w-48 rounded-[3px] bg-ui-panel p-1.5 border border-ui-panel-border"
                                 onOpenChange={(open) =>
                                   setOpenTooltipIdx((prev) =>
                                     open ? index : prev === index ? null : prev,
@@ -1450,6 +1439,7 @@ export const PopoverMenu = ({
                                 <Button
                                   className={twMerge(
                                     "flex w-full items-center shadow-none justify-between px-1.5",
+                                    "font-sans text-sm font-medium normal-case tracking-normal",
                                     "bg-transparent hover:bg-ui-controls/60",
                                     openTooltipIdx === index
                                       ? "bg-ui-controls/60"
@@ -1504,16 +1494,14 @@ export const PopoverMenu = ({
                                   {mode === "toggle" && (
                                     <span
                                       className={twMerge(
-                                        "ml-2 h-5 w-5 rounded-none border flex items-center justify-center transition-colors",
+                                        "ml-2 h-5 w-5 rounded-[3px] border flex items-center justify-center transition-colors",
                                         item.selected
                                           ? "border-white bg-white"
                                           : "border-transparent bg-transparent",
                                       )}
                                     >
                                       {item.selected && (
-                                        <CheckIcon
-                                          
-                                          className="text-black text-xs font-bold" />
+                                        <CheckIcon className="text-black text-xs font-bold" />
                                       )}
                                     </span>
                                   )}
@@ -1523,6 +1511,7 @@ export const PopoverMenu = ({
                               <Button
                                 className={twMerge(
                                   "flex w-full items-center shadow-none justify-between px-1.5",
+                                  "font-sans text-sm font-medium normal-case tracking-normal",
                                   "bg-transparent hover:bg-ui-controls/60",
                                   mode === "toggle" && item.selected
                                     ? "hover:bg-ui-controls/80"
@@ -1567,16 +1556,14 @@ export const PopoverMenu = ({
                                 {mode === "toggle" && (
                                   <span
                                     className={twMerge(
-                                      "ml-2 h-5 w-5 rounded-none border flex items-center justify-center transition-colors",
+                                      "ml-2 h-5 w-5 rounded-[3px] border flex items-center justify-center transition-colors",
                                       item.selected
                                         ? "border-white bg-white"
                                         : "border-transparent bg-transparent",
                                     )}
                                   >
                                     {item.selected && (
-                                      <CheckIcon
-                                        
-                                        className="text-black text-xs font-bold" />
+                                      <CheckIcon className="text-black text-xs font-bold" />
                                     )}
                                   </span>
                                 )}
diff --git a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
index b64f776b40..73369ca93e 100644
--- a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
+++ b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
@@ -42,7 +42,8 @@ interface PricingContentProps {
 export function PricingContent({ title, subtitle }: PricingContentProps) {
   const subscriptionStore = useSubscriptionState();
   const hasActiveSub = subscriptionStore.hasPaidPlan();
-  const activePlanId = subscriptionStore.subscriptionInfo?.productSlug || "free";
+  const activePlanId =
+    subscriptionStore.subscriptionInfo?.productSlug || "free";
 
   const [billingType, setBillingType] = useState("yearly");
   const isYearly = billingType === "yearly";
@@ -58,7 +59,7 @@ export function PricingContent({ title, subtitle }: PricingContentProps) {
 
   const handleUpdatePaymentMethod = async () => {
     await invoke(
-      "storyteller_open_customer_portal_update_payment_method_command"
+      "storyteller_open_customer_portal_update_payment_method_command",
     );
   };
 
@@ -170,7 +171,7 @@ export function PricingContent({ title, subtitle }: PricingContentProps) {
             tabs={billingTabs}
             activeTab={billingType}
             onTabChange={setBillingType}
-            className="w-fit rounded-none border border-white/15 bg-white/5"
+            className="w-fit rounded-[3px] border border-white/15 bg-white/5"
             tabClassName="w-24 text-md"
           />
           <span className="pointer-events-none absolute -left-6 -top-3 rounded-none bg-primary px-3 py-0.5 text-sm font-medium text-white">
@@ -403,7 +404,7 @@ const Feature = ({
           : "border border-white/20 text-transparent",
       )}
     >
-      {included && <CheckIcon  className="text-xs" />}
+      {included && <CheckIcon className="text-xs" />}
     </div>
     <span
       className={twMerge(
diff --git a/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx b/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
index 7d0fcf4b3a..9616d64106 100644
--- a/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
+++ b/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
@@ -320,7 +320,7 @@ const CharacterListView = ({
           {Array.from({ length: 8 }).map((_, i) => (
             <div
               key={i}
-              className="flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05]"
+              className="flex flex-col overflow-hidden rounded-[3px] border border-transparent bg-base-fg/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden">
                 <div
@@ -332,7 +332,7 @@ const CharacterListView = ({
               </div>
               <div className="px-2 py-1.5 flex justify-center bg-base-fg/[0.04]">
                 <div
-                  className="h-3 w-2/3 rounded bg-base-fg/[0.08]"
+                  className="h-3 w-2/3 bg-base-fg/[0.08]"
                   style={{
                     animation: `charPulse 1.8s ease-in-out ${i * 0.07 + 0.1}s infinite`,
                   }}
@@ -352,7 +352,7 @@ const CharacterListView = ({
           {/* Create New card */}
           <button
             onClick={onCreateClick}
-            className="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border-2 border-dashed border-base-fg/10 bg-base-fg/[0.05] text-base-fg/60 transition-colors hover:border-base-fg/25 hover:text-base-fg/80"
+            className="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-[3px] border-2 border-dashed border-base-fg/10 bg-base-fg/[0.05] text-base-fg/60 transition-colors hover:border-base-fg/25 hover:text-base-fg/80"
           >
             <div className="flex aspect-square w-full flex-col items-center justify-center gap-2">
               <PlusIcon  className="text-lg" />
@@ -364,7 +364,7 @@ const CharacterListView = ({
           {pendingCharacters.map((pending) => (
             <div
               key={`pending-${pending.name}`}
-              className="relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05]"
+              className="relative flex flex-col overflow-hidden rounded-[3px] border border-transparent bg-base-fg/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden bg-base-fg/[0.05]">
                 {pending.previewUrl ? (
@@ -401,7 +401,7 @@ const CharacterListView = ({
             return (
               <div
                 key={character.token}
-                className="group relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05] transition-colors hover:border-base-fg/25 hover:bg-base-fg/10"
+                className="group relative flex flex-col overflow-hidden rounded-[3px] border border-transparent bg-base-fg/[0.05] transition-colors hover:border-base-fg/25 hover:bg-base-fg/10"
               >
                 <button
                   onClick={() => onSelectCharacter?.(character)}
@@ -570,7 +570,7 @@ const EditCharacterView = ({
 
         {/* Avatar preview */}
         {character.maybe_avatar?.cdn_url && (
-          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-base-fg/[0.05]">
+          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden bg-base-fg/[0.05]">
             <img
               src={character.maybe_avatar.cdn_url}
               alt={character.name}
@@ -605,7 +605,7 @@ const EditCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
+            className="w-full resize-none rounded-[3px] px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
           />
         </div>
       </div>
@@ -829,7 +829,7 @@ const NewCharacterView = ({
         <div
           ref={dropZoneRef}
           className={twMerge(
-            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-base-fg/20 bg-base-fg/[0.05] transition-colors overflow-hidden",
+            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-[3px] border-2 border-dashed border-base-fg/20 bg-base-fg/[0.05] transition-colors overflow-hidden",
             isDragging && "border-blue-400 bg-blue-500/10",
           )}
           onDragEnter={handleDragEnter}
@@ -880,14 +880,14 @@ const NewCharacterView = ({
               >
                 <button
                   onClick={() => setIsGalleryOpen(true)}
-                  className="flex items-center gap-2 rounded-lg bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
+                  className="flex items-center gap-2 rounded-[3px] bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
                 >
                   <ImagesIcon  className="text-xs" />
                   Choose from Library
                 </button>
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2 rounded-lg bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
+                  className="flex items-center gap-2 rounded-[3px] bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
                 >
                   <UploadIcon  className="text-xs" />
                   Upload Image
@@ -931,7 +931,7 @@ const NewCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
+            className="w-full resize-none rounded-[3px] px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
           />
         </div>
       </div>
diff --git a/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx b/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
index baf06ab243..a6421b27a7 100644
--- a/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
@@ -115,7 +115,7 @@ const AudioRefTile = ({
   }, []);
 
   return (
-    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer flex items-center justify-center">
+    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer flex items-center justify-center">
       <button
         onClick={handleTogglePlay}
         className="flex items-center justify-center w-full h-full"
@@ -255,7 +255,7 @@ export const ImagePromptRow = ({
         style={style}
         {...(allowReorder ? { ...attributes, ...listeners } : {})}
         className={twMerge(
-          "glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 transition-opacity group",
+          "glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 transition-opacity group",
           allowReorder
             ? "cursor-move hover:border-white/80"
             : "cursor-pointer hover:border-white/80",
@@ -845,7 +845,7 @@ export const ImagePromptRow = ({
       )}
       <div
         className={twMerge(
-          "absolute left-0 glass w-full rounded-t-2xl flex",
+          "absolute left-0 glass w-full rounded-t-[3px] flex",
           showVideoReferenceSection ? "-top-[144px]" : "-top-[72px]",
           className,
         )}
@@ -916,7 +916,7 @@ export const ImagePromptRow = ({
                     .map((image, index) => (
                       <div
                         key={image.id}
-                        className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
+                        className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
                         onClick={() => onImageClick?.(image)}
                       >
                         <img
@@ -953,7 +953,7 @@ export const ImagePromptRow = ({
                     return (
                       <div
                         key={id}
-                        className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30"
+                        className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30"
                       >
                         <div className="absolute inset-0">
                           <img
@@ -1006,7 +1006,7 @@ export const ImagePromptRow = ({
                   >
                     <Button
                       variant="action"
-                      className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                      className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                       onClick={() => {
                         if (allowUpload) handleUploadClickStart();
                         else {
@@ -1045,7 +1045,7 @@ export const ImagePromptRow = ({
                 <div className="flex gap-2 items-center">
                   {endFrameImage ? (
                     <div
-                      className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
+                      className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
                       onClick={() => onImageClick?.(endFrameImage)}
                     >
                       <img
@@ -1066,7 +1066,7 @@ export const ImagePromptRow = ({
                       </button>
                     </div>
                   ) : uploadingEnd ? (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30">
                       <div className="absolute inset-0">
                         <img
                           src={URL.createObjectURL(uploadingEnd.file)}
@@ -1115,7 +1115,7 @@ export const ImagePromptRow = ({
                     >
                       <Button
                         variant="action"
-                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                         onClick={() => {
                           if (allowUploadEnd) handleUploadClickEnd();
                           else {
@@ -1156,7 +1156,7 @@ export const ImagePromptRow = ({
                   {referenceVideos.map((video) => (
                     <div
                       key={video.id}
-                      className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer"
+                      className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer"
                     >
                       <video
                         src={video.url}
@@ -1181,7 +1181,7 @@ export const ImagePromptRow = ({
                     </div>
                   ))}
                   {uploadingVideo && (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30">
                       <div className="absolute inset-0">
                         <video
                           src={URL.createObjectURL(uploadingVideo.file)}
@@ -1231,7 +1231,7 @@ export const ImagePromptRow = ({
                       >
                         <Button
                           variant="action"
-                          className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                          className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                           onClick={handleUploadClickVideo}
                         >
                           <PlusIcon
@@ -1271,7 +1271,7 @@ export const ImagePromptRow = ({
                     />
                   ))}
                   {uploadingAudio && (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 flex items-center justify-center">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 flex items-center justify-center">
                       <LoaderCircleIcon
                         
                         className="h-6 w-6 animate-spin text-white" />
@@ -1281,7 +1281,7 @@ export const ImagePromptRow = ({
                     !uploadingAudio && (
                       <Button
                         variant="action"
-                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                         onClick={handleUploadClickAudio}
                       >
                         <PlusIcon
@@ -1296,7 +1296,7 @@ export const ImagePromptRow = ({
         </div>
         <div className="flex items-center">
           <div className="w-[1px] h-full bg-white/10" />
-          <div className="flex items-center gap-2 w-[1px] h-full bg-base-fg/20 dark:bg-base-fg/10 rounded-lg" />
+          <div className="flex items-center gap-2 w-[1px] h-full bg-base-fg/20 dark:bg-base-fg/10" />
           <div className="p-2">
             <Button
               variant="action"
diff --git a/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx b/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
index 6ac3b1b6aa..7643772bd7 100644
--- a/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
+++ b/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
@@ -20,7 +20,7 @@ const ANCHOR_GAP = 4;
 const OPEN_GRACE_MS = 700;
 
 const MENU_ROW =
-  "flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-base-fg transition-colors hover:bg-ui-controls/60 cursor-pointer";
+  "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 text-sm text-base-fg transition-colors hover:bg-ui-controls/60 cursor-pointer";
 
 // Header subtitle and empty-replace-list copy per chip type.
 const TYPE_COPY: Record<MentionItem["type"], { title: string; empty: string }> =
@@ -182,7 +182,7 @@ export function MentionChipMenu({
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
       className={twMerge(
-        "fixed z-[9999] w-56 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl",
+        "fixed z-[9999] w-56 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl",
         "transform-gpu transition duration-75 ease-out",
         entered
           ? "translate-y-0 opacity-100"
@@ -210,7 +210,7 @@ export function MentionChipMenu({
               onClick={onPreview}
               title="View full size"
               aria-label={`View ${currentName}`}
-              className="group/avatar relative shrink-0 cursor-pointer overflow-hidden rounded-md"
+              className="group/avatar relative shrink-0 cursor-pointer overflow-hidden rounded-[3px]"
             >
               <ChipAvatar
                 preview={currentPreview}
@@ -255,7 +255,7 @@ export function MentionChipMenu({
           <div className="flex items-center gap-2 px-2 py-1.5">
             <button
               type="button"
-              className="flex h-6 w-6 items-center justify-center rounded-md text-base-fg/60 transition-colors hover:bg-ui-controls/60 hover:text-base-fg"
+              className="flex h-6 w-6 items-center justify-center rounded-[3px] text-base-fg/60 transition-colors hover:bg-ui-controls/60 hover:text-base-fg"
               onClick={() => setView("menu")}
               aria-label="Back"
             >
@@ -312,7 +312,7 @@ function ChipAvatar({
 }) {
   const FallbackIcon = type === "character" ? UserIcon : ImageIcon;
   return (
-    <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-white/10 bg-black/20">
+    <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden border border-white/10 bg-black/20">
       {preview ? (
         <img src={preview} alt={name} className="h-full w-full object-cover" />
       ) : (
diff --git a/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx b/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
index 2ea9b38072..8013fbbabb 100644
--- a/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
+++ b/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
@@ -83,9 +83,9 @@ interface ChipMenuState {
 // itself bg-ui-controls, so the default bg-ui-controls/80 chip disappears
 // against it.
 const CHIP_CLASS =
-  "mention-chip mx-0.5 inline-flex max-w-[10rem] cursor-pointer items-center gap-1 rounded-md border border-white/10 bg-ui-controls/80 px-1.5 py-0.5 align-middle leading-tight transition-colors hover:border-white/25 hover:bg-white/15 [@media(hover:none)]:bg-black/30 [@media(hover:none)]:border-white/15";
+  "mention-chip mx-0.5 inline-flex max-w-[10rem] cursor-pointer items-center gap-1 rounded-[3px] border border-white/10 bg-ui-controls/80 px-1.5 py-0.5 align-middle leading-tight transition-colors hover:border-white/25 hover:bg-white/15 [@media(hover:none)]:bg-black/30 [@media(hover:none)]:border-white/15";
 const CHIP_IMG_CLASS =
-  "pointer-events-none h-4 w-4 shrink-0 rounded object-cover select-none";
+  "pointer-events-none h-4 w-4 shrink-0 object-cover select-none";
 const CHIP_NAME_CLASS = "pointer-events-none truncate";
 
 /** Coarse-pointer (touch) device — no hover, on-screen keyboard. */
@@ -496,7 +496,7 @@ function MentionDropdown({
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
       onScroll={() => (lastScrollTs.current = performance.now())}
-      className="fixed z-[9999] w-64 max-w-[calc(100vw-2rem)] max-h-72 overflow-y-auto rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+      className="fixed z-[9999] w-64 max-w-[calc(100vw-2rem)] max-h-72 overflow-y-auto rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
       style={{
         pointerEvents: "auto",
         ...(placement
@@ -523,7 +523,7 @@ function MentionDropdown({
             key={item.token ?? `${item.label}-${i}`}
             type="button"
             className={twMerge(
-              "flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-base-fg transition-colors cursor-pointer",
+              "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 text-sm text-base-fg transition-colors cursor-pointer",
               i === activeIndex ? "bg-ui-controls/80" : "hover:bg-ui-controls/60",
             )}
             // Selection happens on pointerup, not click: on mobile the
@@ -570,7 +570,7 @@ function MentionDropdown({
             onClick={() => onSelect(item)}
             onMouseEnter={() => onHover(i)}
           >
-            <div className="h-8 w-8 flex-shrink-0 overflow-hidden rounded-md border border-white/10 flex items-center justify-center bg-black/20">
+            <div className="h-8 w-8 flex-shrink-0 overflow-hidden border border-white/10 flex items-center justify-center bg-black/20">
               {item.type === "character" && item.preview ? (
                 <img
                   src={item.preview}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx b/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
index ad1b6cadbd..0d15137bdc 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
@@ -388,7 +388,7 @@ export const PromptBox2D = ({
         )}
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full rounded-[3px] p-4",
             selectedImageModel?.canUseImagePrompt &&
               isImageRowVisible &&
               "rounded-t-none",
@@ -433,7 +433,7 @@ export const PromptBox2D = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe your image..."
-                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
+                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -580,14 +580,14 @@ export const PromptBox2D = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage as any}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Describe your image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx b/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
index b8ec498a3f..0321544ff6 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
@@ -704,7 +704,7 @@ export const PromptBox3D = ({
         )}
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full rounded-[3px] p-4",
             isPromptBoxFocused ? "!border !border-primary" : "",
             selectedImageModel?.canUseImagePrompt &&
               isImageRowVisible &&
@@ -755,7 +755,7 @@ export const PromptBox3D = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe your image..."
-                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[300px]" : "max-h-[5.5em]"}`}
+                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[300px]" : "max-h-[5.5em]"}`}
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -1052,14 +1052,14 @@ export const PromptBox3D = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage as any}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Describe your image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
index 5be20879ed..d072d3f595 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
@@ -544,7 +544,7 @@ export const PromptBoxAudio = ({
       <div className="relative z-20 flex flex-col">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full rounded-[3px] p-4",
             isFocused
               ? "ring-1 ring-primary border-primary"
               : "ring-1 ring-transparent",
@@ -565,7 +565,7 @@ export const PromptBoxAudio = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe the music or sound you want..."
-                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
+                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -666,7 +666,7 @@ export const PromptBoxAudio = ({
       >
         <textarea
           placeholder="Describe the music or sound you want..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
index aa467897d6..e2169cacf3 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
@@ -330,7 +330,7 @@ export const PromptBoxEdit = ({
         {(supportsMaskedInpainting || isNanoBananaModel) && (
           <div
             className={twMerge(
-              "glass w-fit mx-auto rounded-xl px-2 py-2 flex items-center gap-3",
+              "glass w-fit mx-auto rounded-[3px] px-2 py-2 flex items-center gap-3",
               selectedImageModel?.canUseImagePrompt &&
                 isImageRowVisible &&
                 "mb-[72px]",
@@ -346,7 +346,7 @@ export const PromptBoxEdit = ({
               <Tooltip content="Undo" position="top" delay={200}>
                 <button
                   onClick={onUndo}
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="flex h-8 w-8 items-center justify-center rounded-[3px] text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                   disabled={!onUndo}
                 >
                   <RotateCcwIcon  className="h-4 w-4" />
@@ -355,7 +355,7 @@ export const PromptBoxEdit = ({
               <Tooltip content="Redo" position="top" delay={200}>
                 <button
                   onClick={onRedo}
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="flex h-8 w-8 items-center justify-center rounded-[3px] text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                   disabled={!onRedo}
                 >
                   <Redo2Icon  className="h-4 w-4" />
@@ -383,7 +383,7 @@ export const PromptBoxEdit = ({
           )}
           <div
             className={twMerge(
-              "glass relative w-[860px] rounded-xl p-4",
+              "glass relative w-[860px] rounded-[3px] p-4",
               isFocused && "ring-1 ring-primary border-primary",
               selectedImageModel?.canUseImagePrompt &&
                 isImageRowVisible &&
@@ -428,7 +428,7 @@ export const PromptBoxEdit = ({
                   ref={textareaRef}
                   rows={1}
                   placeholder="Write what you want to change in your image and click generate..."
-                  className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
+                  className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
                   value={prompt}
                   onChange={handleChange}
                   onPaste={handlePaste}
@@ -583,14 +583,14 @@ export const PromptBoxEdit = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Write what you want to change in your image and click generate..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
index 91f741a611..922487612b 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
@@ -24,7 +24,7 @@ export class PromptBoxErrorBoundary extends Component<Props, State> {
   override render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center rounded-xl border border-red-500/30 bg-red-500/10 px-6 py-4 text-sm text-red-300">
+        <div className="flex items-center justify-center rounded-[3px] border border-red-500/30 bg-red-500/10 px-6 py-4 text-sm text-red-300">
           <span>Something went wrong with the prompt box.&nbsp;</span>
           <button
             className="underline hover:text-red-200"
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
index 2199ec854d..3131a9b62d 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
@@ -455,7 +455,7 @@ export const PromptBoxImage = ({
       <div className="relative z-20 flex flex-col">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full rounded-[3px] p-4",
             isFocused
               ? "ring-1 ring-primary border-primary"
               : "ring-1 ring-transparent",
@@ -476,7 +476,7 @@ export const PromptBoxImage = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe what you want in the image..."
-                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
+                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -613,7 +613,7 @@ export const PromptBoxImage = ({
       >
         <textarea
           placeholder="Describe what you want in the image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
index 6415b79e1e..5df7752974 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
@@ -1307,7 +1307,7 @@ export const PromptBoxVideo = ({
       <button
         type="button"
         onClick={() => setIsCharactersModalOpen(true)}
-        className="flex h-9 items-center justify-center gap-1 rounded-lg border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
+        className="flex h-9 items-center justify-center gap-1 rounded-[3px] border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
       >
         @Characters
       </button>
@@ -1332,7 +1332,7 @@ export const PromptBoxVideo = ({
       <div className="relative z-20 flex flex-col gap-3">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full rounded-[3px] p-4",
             isFocused
               ? "ring-1 ring-primary border-primary"
               : "ring-1 ring-transparent",
@@ -1347,7 +1347,7 @@ export const PromptBoxVideo = ({
             keyframeMode={!isReferenceMode}
           />
           {selectedModel?.textToVideoSupported === false && (
-            <div className="mb-2 flex items-center gap-1.5 rounded-md bg-ui-controls/60 px-2.5 py-1.5 text-xs text-base-fg/70">
+            <div className="mb-2 flex items-center gap-1.5 bg-ui-controls/60 px-2.5 py-1.5 text-xs text-base-fg/70">
               <InfoIcon
                 
                 className="h-3 w-3 shrink-0" />
@@ -1374,7 +1374,7 @@ export const PromptBoxVideo = ({
                       ? "Use @Image1, @Video1, @Audio1... to reference uploads in prompt..."
                       : "Describe what you want to happen in the video..."
                   }
-                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg"
+                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg"
                   onKeyDown={(e) => {
                     if (e.key !== "Enter") return;
                     const isSubmitCombo = enterToGenerate && !e.shiftKey;
@@ -1397,7 +1397,7 @@ export const PromptBoxVideo = ({
                   ref={textareaRef}
                   rows={1}
                   placeholder="Describe what you want to happen in the video..."
-                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
+                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded-[3px] bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
                   value={prompt}
                   onChange={handleChange}
                   onPaste={handlePaste}
@@ -1638,13 +1638,13 @@ export const PromptBoxVideo = ({
                 ? "Use @Image1, @Video1, @Audio1... to reference uploads in prompt..."
                 : "Describe what you want to happen in the video..."
             }
-            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg"
+            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg"
             style={{ resize: "none" }}
           />
         ) : (
           <textarea
             placeholder="Describe what you want to happen in the video..."
-            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
             value={prompt}
             onChange={handleChange}
             onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx b/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
index ed8ff48ede..475035538d 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
@@ -16,7 +16,7 @@ import { twMerge } from "tailwind-merge";
 // `buttonClassName` to PopoverMenu triggers (e.g. the generation count
 // picker) so they match this button.
 export const PROMPT_TOOLBAR_ICON_BUTTON_CLASSES =
-  "flex h-9 w-9 items-center justify-center rounded-lg border-0 bg-transparent px-0 text-base-fg/50 shadow-none transition-colors hover:bg-base-fg/10 hover:text-base-fg/90";
+  "flex h-9 w-9 items-center justify-center rounded-[3px] border-0 bg-transparent px-0 text-base-fg/50 shadow-none transition-colors hover:bg-base-fg/10 hover:text-base-fg/90";
 
 interface PromptClearAllButtonProps {
   onClick: () => void;
diff --git a/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx b/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
index ce61bdaf67..d533c3ba11 100644
--- a/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
@@ -242,7 +242,7 @@ export const AudioReferenceRow = forwardRef<
               type="button"
               onClick={() => audioInputRef.current?.click()}
               disabled={isUploadingAudio}
-              className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+              className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
             >
               <PlusIcon  className="h-3 w-3" />
               {isUploadingAudio ? "Uploading…" : "Add audio"}
@@ -252,7 +252,7 @@ export const AudioReferenceRow = forwardRef<
                 type="button"
                 onClick={onPickAudioFromLibrary}
                 disabled={isUploadingAudio}
-                className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+                className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
               >
                 <FolderOpenIcon  className="h-3 w-3" />
                 From library
@@ -270,7 +270,7 @@ export const AudioReferenceRow = forwardRef<
             {referenceImages.map((image) => (
               <div
                 key={image.id}
-                className="group relative h-9 w-9 overflow-hidden rounded-lg border border-ui-controls-border"
+                className="group relative h-9 w-9 overflow-hidden rounded-[3px] border border-ui-controls-border"
               >
                 <img
                   src={image.url}
@@ -294,7 +294,7 @@ export const AudioReferenceRow = forwardRef<
                 type="button"
                 onClick={() => imageInputRef.current?.click()}
                 disabled={isUploadingImage}
-                className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+                className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
               >
                 <PlusIcon  className="h-3 w-3" />
                 {isUploadingImage ? "Uploading…" : "Add image"}
@@ -337,7 +337,7 @@ function AudioRefTile({
   }, [audio.url, isPlaying]);
 
   return (
-    <div className="group flex h-9 items-center gap-2 rounded-lg border border-ui-controls-border bg-ui-controls px-2.5">
+    <div className="group flex h-9 items-center gap-2 rounded-[3px] border border-ui-controls-border bg-ui-controls px-2.5">
       <button
         type="button"
         aria-label={isPlaying ? "Stop" : "Play"}
@@ -356,7 +356,7 @@ function AudioRefTile({
         type="button"
         aria-label="Remove audio"
         onClick={() => onRemove(audio.id)}
-        className="flex h-4 w-4 items-center justify-center rounded text-base-fg/40 transition-colors hover:text-base-fg"
+        className="flex h-4 w-4 items-center justify-center rounded-[3px] text-base-fg/40 transition-colors hover:text-base-fg"
       >
         <XIcon  className="h-2.5 w-2.5" />
       </button>
diff --git a/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx b/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
index 4b00d0e85a..a42a5086b7 100644
--- a/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
@@ -64,7 +64,7 @@ export function AudioTuningPopover({
                   key={hz}
                   type="button"
                   onClick={() => onSampleRateChange?.(hz)}
-                  className={`rounded-md border px-2 py-1 text-xs font-medium transition-colors ${
+                  className={`rounded-[3px] border px-2 py-1 text-xs font-medium transition-colors ${
                     hz === sampleRateHz
                       ? "border-white/30 bg-white/15 text-base-fg"
                       : "border-transparent bg-white/5 text-base-fg/60 hover:bg-white/10 hover:text-base-fg"
diff --git a/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx b/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
index ddfaed0239..d01dafada8 100644
--- a/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
@@ -77,7 +77,7 @@ export function SoundsSettingsPopover({
                   <button
                     type="button"
                     onClick={() => onBpmChange?.(null)}
-                    className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
+                    className="rounded-[3px] bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
                   >
                     Auto
                   </button>
@@ -107,7 +107,7 @@ export function SoundsSettingsPopover({
                   type="button"
                   title={entry.label}
                   onClick={() => onMusicalKeyChange?.(entry.value)}
-                  className={`rounded-md border px-1.5 py-1 text-xs font-medium transition-colors ${
+                  className={`rounded-[3px] border px-1.5 py-1 text-xs font-medium transition-colors ${
                     entry.value === musicalKey
                       ? "border-white/30 bg-white/15 text-base-fg"
                       : "border-transparent bg-white/5 text-base-fg/60 hover:bg-white/10 hover:text-base-fg"
diff --git a/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx b/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
index b8729b238b..ccfe190beb 100644
--- a/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
@@ -43,7 +43,7 @@ export function StylePromptRow({
           type="button"
           aria-label="Clear style"
           onClick={() => onChange("")}
-          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-base-fg/40 transition-colors hover:bg-white/10 hover:text-base-fg"
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] text-base-fg/40 transition-colors hover:bg-white/10 hover:text-base-fg"
         >
           <XIcon  className="h-3 w-3" />
         </button>
diff --git a/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx b/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
index b25e8c1d3a..a6952c3242 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
@@ -88,7 +88,7 @@ export const DeckCard = ({
   return (
     <div
       className={twMerge(
-        "glass group relative aspect-square w-14 shrink-0 overflow-hidden rounded-lg border-2 border-white/30 transition-all duration-200",
+        "glass group relative aspect-square w-14 shrink-0 overflow-hidden rounded-[3px] border-2 border-white/30 transition-all duration-200",
         !item.uploading &&
           "cursor-pointer hover:border-white/80 hover:cursor-zoom-in",
         item.kind === "audio" && "hover:cursor-pointer",
@@ -143,12 +143,12 @@ export const DeckCard = ({
       )}
 
       {item.kind === "video" && (
-        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center rounded bg-black/60 text-white">
+        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center bg-black/60 text-white">
           <VideoIcon  className="h-2.5 w-2.5" />
         </div>
       )}
       {item.kind === "audio" && (
-        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center rounded bg-black/60 text-white">
+        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center bg-black/60 text-white">
           <MusicIcon  className="h-2.5 w-2.5" />
         </div>
       )}
@@ -235,7 +235,7 @@ export const DeckAddMenu = ({
               key={action.key}
               type="button"
               onClick={action.onSelect}
-              className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-[13px] font-medium text-base-fg transition-colors hover:bg-white/10"
+              className="flex w-full items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-left text-[13px] font-medium text-base-fg transition-colors hover:bg-white/10"
             >
               <DynamicIcon
                 icon={
@@ -274,13 +274,13 @@ export const DeckPreviewModal = ({ item, onClose }: DeckPreviewModalProps) => (
           src={item.previewUrl ?? item.url}
           controls
           autoPlay
-          className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          className="max-h-[90vh] max-w-[90vw] object-contain"
         />
       ) : (
         <img
           src={item.previewUrl ?? item.url}
           alt={item.name}
-          className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          className="max-h-[90vh] max-w-[90vw] object-contain"
         />
       ))}
   </Modal>
diff --git a/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx b/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
index b8f01cabfe..95f43873f2 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
@@ -142,7 +142,7 @@ export const DeckSlotCard = ({
       type="button"
       onClick={() => enabledActions[0]?.onSelect()}
       className={twMerge(
-        "glass flex aspect-square w-14 flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:z-10 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25",
+        "glass flex aspect-square w-14 flex-col items-center justify-center gap-0.5 rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:z-10 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25",
         tiltClass,
       )}
     >
diff --git a/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx b/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
index ca5f54fc27..7f44ecc4cc 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
@@ -252,7 +252,7 @@ export const ReferenceDeck = ({
           <button
             type="button"
             onClick={handleAddClick}
-            className="glass flex aspect-square w-14 -rotate-6 flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25"
+            className="glass flex aspect-square w-14 -rotate-6 flex-col items-center justify-center gap-0.5 rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25"
           >
             <PlusIcon className="text-lg opacity-80" />
             <span className="text-[9px] font-medium leading-none opacity-70">
@@ -270,7 +270,7 @@ export const ReferenceDeck = ({
   const expandedPanel = (
     <div
       className={twMerge(
-        "glass w-max rounded-xl border border-white/10 p-2 shadow-2xl",
+        "glass w-max rounded-[3px] border border-white/10 p-2 shadow-2xl",
         // In-flow (fullscreen modal): cap at the container width so the
         // cards wrap into rows instead of overflowing the modal.
         alwaysExpanded
@@ -296,7 +296,7 @@ export const ReferenceDeck = ({
           <button
             type="button"
             onClick={onClearAll}
-            className="flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-base-fg/60 transition-colors hover:text-red-400"
+            className="flex items-center gap-1 rounded-[3px] px-1 py-0.5 text-[11px] text-base-fg/60 transition-colors hover:text-red-400"
           >
             <Trash2Icon className="h-2.5 w-2.5" />
             Clear all
@@ -362,7 +362,7 @@ export const ReferenceDeck = ({
             <button
               type="button"
               onClick={handleAddClick}
-              className="glass flex aspect-square w-14 shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all hover:bg-ui-controls/60 dark:border-white/25"
+              className="glass flex aspect-square w-14 shrink-0 items-center justify-center rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all hover:bg-ui-controls/60 dark:border-white/25"
             >
               <PlusIcon className="text-xl opacity-80" />
             </button>,
diff --git a/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx b/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
index 8472c33b63..0ffd8c0300 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
@@ -444,7 +444,7 @@ export function PromptBoxDropOverlay({
   return (
     <div
       className={twMerge(
-        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed bg-[#161618]/85 backdrop-blur-sm",
+        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 rounded-[3px] border-2 border-dashed bg-[#161618]/85 backdrop-blur-sm",
         rejected ? "border-red-400/80" : "border-primary",
       )}
     >
@@ -452,7 +452,7 @@ export function PromptBoxDropOverlay({
         {kinds.map((kind, i) => (
           <div
             key={kind.label}
-            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-base-fg/90"
+            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center bg-white/10 text-base-fg/90"
             style={{ animationDelay: `${i * 50}ms` }}
           >
             <DynamicIcon icon={kind.icon} className="text-sm" />
diff --git a/frontend/libs/components/select/src/lib/select.tsx b/frontend/libs/components/select/src/lib/select.tsx
index 973b2c48b1..330a4c1783 100644
--- a/frontend/libs/components/select/src/lib/select.tsx
+++ b/frontend/libs/components/select/src/lib/select.tsx
@@ -28,7 +28,7 @@ export const Select = ({
   className,
 }: ListDropdownProps) => {
   const selectedOption = options.find(
-    (option: SelectOption) => option.value === value
+    (option: SelectOption) => option.value === value,
   ) || { label: placeholder || "", value: "" };
 
   return (
@@ -38,7 +38,7 @@ export const Select = ({
           <>
             <ListboxButton
               id={id}
-              className="relative h-10 w-full cursor-pointer rounded-none bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-colors duration-150 ease-in-out sm:text-sm focus:!outline-none hover:border-white/40"
+              className="relative h-10 w-full cursor-pointer rounded-[3px] bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-colors duration-150 ease-in-out sm:text-sm focus:!outline-none hover:border-white/40"
             >
               <span
                 className={twMerge("block truncate", !value && "opacity-50")}
@@ -46,7 +46,7 @@ export const Select = ({
                 {selectedOption.label}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5">
-                <ChevronDownIcon  aria-hidden="true" />
+                <ChevronDownIcon aria-hidden="true" />
               </span>
             </ListboxButton>
 
@@ -57,7 +57,7 @@ export const Select = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-none bg-ui-panel border border-ui-panel-border text-base focus:outline-none sm:text-sm">
+              <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[3px] bg-ui-panel border border-ui-panel-border text-base focus:outline-none sm:text-sm">
                 {options.map((option, itemIdx) => (
                   <ListboxOption
                     key={itemIdx}
@@ -66,7 +66,7 @@ export const Select = ({
                         "relative cursor-pointer select-none py-2 pl-7 pr-2 transition-colors duration-150 ease-in-out",
                         !selected ? "text-base-fg/90" : "text-base-fg",
                         selected && "bg-white/10",
-                        focus && "bg-white text-black"
+                        focus && "bg-white text-black",
                       )
                     }
                     value={option.value}
@@ -82,10 +82,7 @@ export const Select = ({
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-2.5">
-                            <CheckIcon
-                              
-                              aria-hidden="true"
-                              className="text-xs" />
+                            <CheckIcon aria-hidden="true" className="text-xs" />
                           </span>
                         ) : null}
                       </>
diff --git a/frontend/libs/components/switch/src/lib/switch.tsx b/frontend/libs/components/switch/src/lib/switch.tsx
index 07f0cf444f..0542fcb361 100644
--- a/frontend/libs/components/switch/src/lib/switch.tsx
+++ b/frontend/libs/components/switch/src/lib/switch.tsx
@@ -9,13 +9,18 @@ interface SwitchProps {
   offClassName?: string;
 }
 
-export function Switch({ enabled, setEnabled, className, offClassName }: SwitchProps) {
+export function Switch({
+  enabled,
+  setEnabled,
+  className,
+  offClassName,
+}: SwitchProps) {
   return (
     <HeadlessSwitch checked={enabled} onChange={setEnabled} as={Fragment}>
       {({ checked, disabled }) => (
         <button
           className={clsx(
-            "group inline-flex h-6 w-11 items-center rounded-none border transition-colors",
+            "group inline-flex h-6 w-11 items-center rounded-[3px] border transition-colors",
             checked
               ? "border-white bg-white"
               : (offClassName ?? "border-ui-controls-border bg-transparent"),
@@ -26,8 +31,10 @@ export function Switch({ enabled, setEnabled, className, offClassName }: SwitchP
           <span className="sr-only">Enable notifications</span>
           <span
             className={clsx(
-              "size-4 rounded-none transition",
-              checked ? "translate-x-[22px] bg-black" : "translate-x-1 bg-white/70",
+              "size-4 rounded-[2px] transition",
+              checked
+                ? "translate-x-[22px] bg-black"
+                : "translate-x-1 bg-white/70",
             )}
           />
         </button>
diff --git a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
index 98e727f946..b1146bee82 100644
--- a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
+++ b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
@@ -72,14 +72,14 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
       <TabGroup selectedIndex={selectedIndex} onChange={handleTabChange}>
         <TabList
           className={twMerge(
-            "glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-none p-0.5 py-1 !shadow-none",
+            "glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-[3px] p-0.5 py-1 !shadow-none",
             listClassName,
           )}
         >
           {/* Animated indicator */}
           <div
             className={twMerge(
-              "absolute top-1 z-10 h-[calc(100%-8px)] rounded-none bg-white transition-all duration-200 ease-in-out",
+              "absolute top-1 z-10 h-[calc(100%-8px)] rounded-[2px] bg-white transition-all duration-200 ease-in-out",
               indicatorClassName,
             )}
             style={{
@@ -99,7 +99,7 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
               disabled={disabled}
               className={({ selected }) =>
                 twMerge(
-                  "relative z-20 mx-0.5 min-w-max rounded-none border-2 border-transparent px-4 py-0.5 text-center text-sm font-semibold transition-all duration-200 ease-in-out",
+                  "relative z-20 mx-0.5 min-w-max rounded-[2px] border-2 border-transparent px-4 py-0.5 text-center text-sm font-semibold transition-all duration-200 ease-in-out",
                   "focus-visible:outline-none focus-visible:ring-0",
                   selected
                     ? twMerge("text-black", selectedTabClassName)
diff --git a/frontend/libs/components/toaster/src/lib/toaster.tsx b/frontend/libs/components/toaster/src/lib/toaster.tsx
index 955c4fc6f9..20e1c8a1c0 100644
--- a/frontend/libs/components/toaster/src/lib/toaster.tsx
+++ b/frontend/libs/components/toaster/src/lib/toaster.tsx
@@ -57,6 +57,9 @@ export function Toaster({
     <RHToaster
       position={position}
       toastOptions={{
+        style: {
+          borderRadius: "3px",
+        },
         success: {
           style: {
             background: "#ffffff",
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.tsx b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
index 6f427520c5..5a054b9932 100644
--- a/frontend/libs/components/tooltip/src/lib/tooltip.tsx
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
@@ -175,7 +175,8 @@ export const Tooltip = ({
       // in Chromium/WebKit (our glass surfaces use backdrop-blur), so a fixed
       // tooltip inside one would otherwise be positioned/clipped incorrectly.
       const backdropFilter =
-        cs.backdropFilter || (cs as unknown as Record<string, string>)["webkitBackdropFilter"];
+        cs.backdropFilter ||
+        (cs as unknown as Record<string, string>)["webkitBackdropFilter"];
       if (
         cs.transform !== "none" ||
         cs.willChange === "transform" ||
@@ -342,54 +343,54 @@ export const Tooltip = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-        <div
-          ref={setTooltipRef}
-          {...(portal ? { "data-modal-outside-safe": "" } : {})}
-          onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
-          onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
-          onClick={() => {
-            if (closeOnClick) {
-              setIsShowing(false);
-            }
-          }}
-          style={{
-            ...getStyleForPosition(),
-            transitionDelay: `${delay}ms`,
-            transitionProperty: "opacity",
-            transitionDuration: "200ms",
-            transitionTimingFunction: "ease-out",
-            zIndex,
-          }}
-          className={twMerge(
-            isFixed ? "fixed" : "absolute",
-            "w-max rounded-none bg-ui-panel border border-ui-panel-border",
-            interactive
-              ? "pointer-events-auto p-3"
-              : "px-2.5 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.1em] pointer-events-none",
-            "text-base-fg",
-            className ? className : "",
-          )}
-        >
-          {interactive ? (
-            content
-          ) : (
-            <div className="flex flex-col gap-1">
-              {content}
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt="tooltip"
-                  className="mb-1 aspect-square w-56 rounded-none"
-                />
-              )}
-              {description && (
-                <p className="font-sans text-xs font-normal normal-case tracking-normal text-base-fg/80">
-                  {description}
-                </p>
-              )}
-            </div>
-          )}
-        </div>
+      <div
+        ref={setTooltipRef}
+        {...(portal ? { "data-modal-outside-safe": "" } : {})}
+        onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
+        onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
+        onClick={() => {
+          if (closeOnClick) {
+            setIsShowing(false);
+          }
+        }}
+        style={{
+          ...getStyleForPosition(),
+          transitionDelay: `${delay}ms`,
+          transitionProperty: "opacity",
+          transitionDuration: "200ms",
+          transitionTimingFunction: "ease-out",
+          zIndex,
+        }}
+        className={twMerge(
+          isFixed ? "fixed" : "absolute",
+          "w-max rounded-[3px] bg-ui-panel border border-ui-panel-border",
+          interactive
+            ? "pointer-events-auto p-3"
+            : "px-2.5 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.1em] pointer-events-none",
+          "text-base-fg",
+          className ? className : "",
+        )}
+      >
+        {interactive ? (
+          content
+        ) : (
+          <div className="flex flex-col gap-1">
+            {content}
+            {imageSrc && (
+              <img
+                src={imageSrc}
+                alt="tooltip"
+                className="mb-1 aspect-square w-56 rounded-none"
+              />
+            )}
+            {description && (
+              <p className="font-sans text-xs font-normal normal-case tracking-normal text-base-fg/80">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
     </Transition>
   );