diff --git a/packages/studio/src/captions/components/CaptionAnimationPanel.tsx b/packages/studio/src/captions/components/CaptionAnimationPanel.tsx
index e426404c38c..03964ccf1fc 100644
--- a/packages/studio/src/captions/components/CaptionAnimationPanel.tsx
+++ b/packages/studio/src/captions/components/CaptionAnimationPanel.tsx
@@ -171,7 +171,7 @@ function AnimationPhase({
               }}
               className="flex-1 accent-studio-accent disabled:opacity-40"
             />
-            <span className="text-2xs text-neutral-400 font-mono w-8 text-right shrink-0">
+            <span className="text-2xs text-text-secondary font-mono w-8 text-right shrink-0">
               {intensity.toFixed(2)}
             </span>
           </div>
@@ -239,7 +239,7 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
   if (!group || !resolvedGroupId || !animation) {
     return (
       <div className="flex items-center justify-center h-full px-4 text-center">
-        <p className="text-xs text-neutral-500">Select a caption word to edit animations</p>
+        <p className="text-xs text-text-tertiary">Select a caption word to edit animations</p>
       </div>
     );
   }
@@ -286,13 +286,13 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
       </div>
 
       {/* Footer */}
-      <div className="shrink-0 px-3 py-2 border-t border-neutral-800">
+      <div className="shrink-0 px-3 py-2 border-t border-border-button-default">
         <button
           type="button"
           onClick={handleApplyToAll}
           disabled={gated}
           title={gated ? "Disabled until animation editing is applied to playback" : undefined}
-          className="w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-accent-ink transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300"
+          className="w-full py-1.5 rounded-sm border border-border-button-default text-2xs text-text-primary hover:border-studio-accent/50 hover:text-accent-ink transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-border-button-hover disabled:hover:text-text-primary"
         >
           Apply to all groups
         </button>
diff --git a/packages/studio/src/captions/components/CaptionOverlay.tsx b/packages/studio/src/captions/components/CaptionOverlay.tsx
index 1b30bff8c81..c9a40724516 100644
--- a/packages/studio/src/captions/components/CaptionOverlay.tsx
+++ b/packages/studio/src/captions/components/CaptionOverlay.tsx
@@ -407,7 +407,7 @@ export const CaptionOverlay = memo(function CaptionOverlay({ iframeRef }: Captio
     >
       {wordBoxes.length === 0 && model && model.segments.size > 0 && (
         <div className="absolute inset-x-0 top-3 flex justify-center pointer-events-none">
-          <span className="px-2.5 py-1 rounded-full bg-black/60 border border-neutral-700 text-2xs text-neutral-300">
+          <span className="px-2.5 py-1 rounded-full bg-black/60 border border-border-button-default text-2xs text-text-primary">
             No captions visible at this frame. Scrub to a caption, or select one in the track below
           </span>
         </div>
diff --git a/packages/studio/src/captions/components/CaptionPropertyPanel.tsx b/packages/studio/src/captions/components/CaptionPropertyPanel.tsx
index f1ea71f41c3..119ed9cd05c 100644
--- a/packages/studio/src/captions/components/CaptionPropertyPanel.tsx
+++ b/packages/studio/src/captions/components/CaptionPropertyPanel.tsx
@@ -188,7 +188,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
   if (selectedSegmentIds.size === 0) {
     return (
       <div className="flex items-center justify-center h-full px-4 text-center">
-        <p className="text-xs text-neutral-500">Select caption words to edit their style</p>
+        <p className="text-xs text-text-tertiary">Select caption words to edit their style</p>
       </div>
     );
   }
@@ -213,9 +213,9 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* Header */}
-      <div className="px-3 py-2 border-b border-neutral-800 shrink-0">
+      <div className="px-3 py-2 border-b border-border-button-default shrink-0">
         <div className="flex items-center justify-between mb-1.5">
-          <span className="text-2xs text-neutral-500">{countLabel}</span>
+          <span className="text-2xs text-text-tertiary">{countLabel}</span>
         </div>
         {/* Tab switcher */}
         <div className="flex gap-1" role="tablist" aria-label="Caption editing tabs">
@@ -228,7 +228,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "style"
                 ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50"
-                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+                : "text-text-tertiary border border-border-button-default hover:text-text-primary hover:border-border-button-hover",
             ].join(" ")}
           >
             Style
@@ -242,7 +242,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "animation"
                 ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50"
-                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+                : "text-text-tertiary border border-border-button-default hover:text-text-primary hover:border-border-button-hover",
             ].join(" ")}
           >
             Animation
diff --git a/packages/studio/src/captions/components/shared.tsx b/packages/studio/src/captions/components/shared.tsx
index 0ac98bb2c1b..ce5d29b251b 100644
--- a/packages/studio/src/captions/components/shared.tsx
+++ b/packages/studio/src/captions/components/shared.tsx
@@ -2,13 +2,13 @@ import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
 export const inputCls =
-  "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-hidden focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
+  "w-full bg-background-tertiary-default border border-border-button-default rounded-sm px-1.5 py-0.5 text-2xs text-text-primary font-mono outline-hidden focus:border-border-button-active disabled:opacity-40 disabled:cursor-not-allowed";
 
 export function Section({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="mb-3">
       <div className="flex items-center gap-1.5 mt-2 mb-1.5">
-        <span className="text-2xs font-medium text-neutral-500 uppercase tracking-wider">
+        <span className="text-2xs font-medium text-text-tertiary uppercase tracking-wider">
           {label}
         </span>
       </div>
@@ -20,7 +20,7 @@ export function Section({ label, children }: { label: string; children: React.Re
 export function Row({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center gap-2">
-      <span className="text-2xs text-neutral-600 w-14 text-right shrink-0">{label}</span>
+      <span className="text-2xs text-text-tertiary w-14 text-right shrink-0">{label}</span>
       <div className="flex-1 min-w-0">{children}</div>
     </div>
   );
diff --git a/packages/studio/src/components/AskAgentModal.tsx b/packages/studio/src/components/AskAgentModal.tsx
index f29a11c4551..a4ac2305318 100644
--- a/packages/studio/src/components/AskAgentModal.tsx
+++ b/packages/studio/src/components/AskAgentModal.tsx
@@ -1,6 +1,8 @@
 import { useState, useRef, type CSSProperties } from "react";
 import { useMountEffect } from "../hooks/useMountEffect";
 import { type AgentModalAnchorPoint, clampNumber } from "../utils/studioHelpers";
+import { Button, cn } from "./ui";
+import { DialogHeader, dialogClasses } from "./ui/Dialog";
 import { useDialogBehavior } from "./ui/useDialogBehavior";
 
 function getAgentModalPositionStyle(
@@ -64,11 +66,7 @@ export function AskAgentModal({
 
   return (
     <div
-      className={
-        anchorPoint
-          ? "hf-backdrop-in fixed inset-0 z-100 bg-black/60 backdrop-blur-xs"
-          : "hf-backdrop-in fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs"
-      }
+      className={cn(dialogClasses.backdrop, !anchorPoint && dialogClasses.centered)}
       onClick={requestClose}
     >
       <div
@@ -77,42 +75,21 @@ export function AskAgentModal({
         aria-modal="true"
         aria-label="Copy prompt to AI agent"
         tabIndex={-1}
-        className={`w-[480px] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden ${
-          anchorPoint ? "fixed" : ""
-        }`}
+        className={cn(dialogClasses.panel, "w-[480px]", anchorPoint && "fixed")}
         style={modalPositionStyle}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
-          <div>
-            <h3 className="text-sm font-medium text-neutral-200">Copy prompt to AI agent</h3>
-            <p className="text-xs text-neutral-500 mt-0.5">
-              {selectionLabel.length > 50 ? `${selectionLabel.slice(0, 49)}…` : selectionLabel}
-            </p>
-          </div>
-          <button
-            className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 active:scale-[0.98]"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-        <div className="px-5 py-4 space-y-3">
+        <DialogHeader
+          title="Copy prompt to AI agent"
+          description={
+            selectionLabel.length > 50 ? `${selectionLabel.slice(0, 49)}…` : selectionLabel
+          }
+          onClose={onClose}
+        />
+        <div className={cn(dialogClasses.body, "space-y-3")}>
           <textarea
             ref={inputRef}
-            className="w-full h-24 px-3 py-2 rounded-lg border border-neutral-800 bg-neutral-900/60 text-sm text-neutral-200 placeholder-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+            className={cn(dialogClasses.field, "h-24 resize-none")}
             placeholder="Describe what you want to change…"
             value={value}
             onChange={(e) => setValue(e.target.value)}
@@ -124,26 +101,22 @@ export function AskAgentModal({
           />
           {contextPreview && (
             <details className="group">
-              <summary className="text-[11px] text-neutral-500 cursor-pointer select-none hover:text-neutral-400">
+              <summary className="cursor-pointer select-none text-caption-1-medium text-text-secondary hover:text-text-primary">
                 Context included in prompt
               </summary>
-              <pre className="mt-2 max-h-40 overflow-auto rounded-lg bg-neutral-900/80 px-3 py-2 text-[11px] leading-relaxed text-neutral-500 whitespace-pre-wrap wrap-break-word border border-neutral-800/50">
+              <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap wrap-break-word rounded-2lg bg-background-tertiary-default px-3 py-2 text-caption-1-regular text-text-secondary">
                 {contextPreview}
               </pre>
             </details>
           )}
         </div>
-        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
-          <span className="text-[11px] text-neutral-600">
+        <div className={dialogClasses.footer}>
+          <span className={dialogClasses.hint}>
             {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
           </span>
-          <button
-            className="px-4 py-1.5 rounded-lg bg-accent text-xs font-medium text-on-accent hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed"
-            disabled={!value.trim()}
-            onClick={handleSubmit}
-          >
+          <Button variant="primary" disabled={!value.trim()} onClick={handleSubmit}>
             Copy prompt
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/packages/studio/src/components/CompositionMissingBanner.tsx b/packages/studio/src/components/CompositionMissingBanner.tsx
index 9dd645fcac9..8a87dc9d6c4 100644
--- a/packages/studio/src/components/CompositionMissingBanner.tsx
+++ b/packages/studio/src/components/CompositionMissingBanner.tsx
@@ -1,3 +1,5 @@
+import { Banner } from "./ui/Dialog";
+
 interface CompositionMissingBannerProps {
   /** The composition this tab has open, that the server can no longer find. */
   path: string;
@@ -20,13 +22,10 @@ interface CompositionMissingBannerProps {
  */
 export function CompositionMissingBanner({ path }: CompositionMissingBannerProps) {
   return (
-    <div
-      role="alert"
-      className="hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-amber-500/30 bg-amber-950/85 px-4 py-2 text-[12px] font-medium text-amber-100 shadow-lg shadow-black/30"
-    >
+    <Banner tone="warning">
       <span>
         <strong>{path}</strong> is no longer on disk. Select another composition to keep editing.
       </span>
-    </div>
+    </Banner>
   );
 }
diff --git a/packages/studio/src/components/EditorShell.tsx b/packages/studio/src/components/EditorShell.tsx
index c312569550a..73bfe6694fc 100644
--- a/packages/studio/src/components/EditorShell.tsx
+++ b/packages/studio/src/components/EditorShell.tsx
@@ -338,9 +338,12 @@ function EditorShellBody({
             onSelectTimelineElement={onSelectTimelineElement}
             timelineFooter={
               captionEditMode ? (
-                <div className="border-t border-neutral-800/30 shrink-0" style={{ height: 60 }}>
+                <div
+                  className="border-t border-border-button-default shrink-0"
+                  style={{ height: 60 }}
+                >
                   <div className="flex items-center gap-1.5 px-2 py-0.5">
-                    <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                    <span className="text-[9px] font-medium text-text-tertiary uppercase tracking-wider">
                       Captions
                     </span>
                   </div>
diff --git a/packages/studio/src/components/ExternalFileConflictBanner.tsx b/packages/studio/src/components/ExternalFileConflictBanner.tsx
index 57a76f89c78..82b7f8ec404 100644
--- a/packages/studio/src/components/ExternalFileConflictBanner.tsx
+++ b/packages/studio/src/components/ExternalFileConflictBanner.tsx
@@ -3,6 +3,8 @@ import type {
   ExternalFileChangeBlockedState,
   ExternalFileChangeCoordinatorHandle,
 } from "../hooks/useExternalFileChangeCoordinator";
+import { Button, cn } from "./ui";
+import { Banner, DialogHeader, dialogClasses } from "./ui/Dialog";
 import { useDialogBehavior } from "./ui/useDialogBehavior";
 
 function errorMessage(error: unknown): string {
@@ -31,63 +33,54 @@ function ConflictReview({
   const studio = conflict.error.attemptedContent;
 
   return (
-    <div
-      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
-      onClick={onClose}
-    >
+    <div className={cn(dialogClasses.backdrop, dialogClasses.centered, "z-110")} onClick={onClose}>
       <div
         ref={containerRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby="external-conflict-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-5xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
+        className={cn(dialogClasses.panel, "max-h-[88vh] w-full max-w-5xl overflow-auto")}
         onClick={(event) => event.stopPropagation()}
       >
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h2 id="external-conflict-title" className="text-base font-semibold">
-              Review both versions of {conflict.error.filePath}
-            </h2>
-            <p className="mt-1 text-xs text-neutral-400">
-              Reviewing or exporting does not change either version.
-            </p>
-          </div>
-          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
-            Close
-          </button>
-        </div>
-        <div className="mt-4 grid gap-4 md:grid-cols-2">
+        <DialogHeader
+          titleId="external-conflict-title"
+          title={<>Review both versions of {conflict.error.filePath}</>}
+          description="Reviewing or exporting does not change either version."
+          onClose={onClose}
+        />
+        <div className="grid gap-4 px-5 pb-5 md:grid-cols-2">
           {[
             { title: "File on disk", content: external, suffix: "external" },
             { title: "Unsaved Studio version", content: studio, suffix: "studio" },
           ].map((side) => (
             <section key={side.suffix} aria-label={side.title}>
               <div className="mb-2 flex items-center justify-between gap-2">
-                <h3 className="text-sm font-medium">{side.title}</h3>
+                <h3 className="text-body-medium">{side.title}</h3>
                 <div className="flex gap-2">
-                  <button
-                    type="button"
-                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
+                  <Button
+                    size="sm"
                     onClick={() => void navigator.clipboard.writeText(side.content)}
                   >
                     Copy
-                  </button>
-                  <button
-                    type="button"
-                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
+                  </Button>
+                  <Button
+                    size="sm"
                     onClick={() =>
                       downloadText(`${conflict.error.filePath}.${side.suffix}.html`, side.content)
                     }
                   >
                     Download
-                  </button>
+                  </Button>
                 </div>
               </div>
               <textarea
                 readOnly
                 value={side.content}
-                className="h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+                className={cn(
+                  dialogClasses.field,
+                  "h-80 resize-y font-mono text-caption-1-regular",
+                )}
               />
             </section>
           ))}
@@ -109,52 +102,37 @@ function FailedDraftReview({
   const containerRef = useRef<HTMLDivElement>(null);
   useDialogBehavior({ open: true, onClose, containerRef });
   return (
-    <div
-      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
-      onClick={onClose}
-    >
+    <div className={cn(dialogClasses.backdrop, dialogClasses.centered, "z-110")} onClick={onClose}>
       <div
         ref={containerRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby="failed-draft-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-3xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
+        className={cn(dialogClasses.panel, "max-h-[88vh] w-full max-w-3xl overflow-auto")}
         onClick={(event) => event.stopPropagation()}
       >
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h2 id="failed-draft-title" className="text-base font-semibold">
-              Recover unsaved Studio draft for {path}
-            </h2>
-            <p className="mt-1 text-xs text-neutral-400">
-              Copy or download this draft before choosing to discard it.
-            </p>
-          </div>
-          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
-            Close
-          </button>
-        </div>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
-            onClick={() => void navigator.clipboard.writeText(content)}
-          >
+        <DialogHeader
+          titleId="failed-draft-title"
+          title={<>Recover unsaved Studio draft for {path}</>}
+          description="Copy or download this draft before choosing to discard it."
+          onClose={onClose}
+        />
+        <div className="flex justify-end gap-2 px-5">
+          <Button size="sm" onClick={() => void navigator.clipboard.writeText(content)}>
             Copy
-          </button>
-          <button
-            type="button"
-            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
-            onClick={() => downloadText(`${path}.studio.html`, content)}
-          >
+          </Button>
+          <Button size="sm" onClick={() => downloadText(`${path}.studio.html`, content)}>
             Download
-          </button>
+          </Button>
         </div>
         <textarea
           readOnly
           value={content}
-          className="mt-2 h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+          className={cn(
+            dialogClasses.field,
+            "mx-5 mt-2 mb-5 h-80 w-auto resize-y font-mono text-caption-1-regular",
+          )}
         />
       </div>
     </div>
@@ -174,40 +152,34 @@ export function ExternalFileConflictBanner({
   const failure = blocked.status === "failed" ? blocked : null;
   return (
     <>
-      <div
-        role="alert"
-        className="absolute left-1/2 top-14 z-94 flex max-w-[calc(100vw-32px)] -translate-x-1/2 flex-wrap items-center gap-3 rounded-md border border-amber-400/30 bg-amber-950/95 px-4 py-2 text-[12px] font-medium text-amber-50 shadow-lg"
-      >
+      <Banner tone="warning" className="z-94 flex-wrap">
         <span>
           {conflict
             ? `${conflict.error.filePath} changed outside Studio. Preview is paused so neither version is lost.`
             : `Studio could not safely finish local saves: ${errorMessage(blocked.error)}. Preview is paused.`}
         </span>
         {conflict && (
-          <button type="button" onClick={() => setReviewing(true)} className="underline">
+          <Button size="sm" variant="ghost" onClick={() => setReviewing(true)}>
             Review or export both
-          </button>
+          </Button>
         )}
         {failure?.studioContent != null && (
-          <button type="button" onClick={() => setReviewing(true)} className="underline">
+          <Button size="sm" variant="ghost" onClick={() => setReviewing(true)}>
             Review or export Studio draft
-          </button>
+          </Button>
         )}
         {failure && !failure.recovered && failure.studioContent != null && (
-          <button type="button" onClick={() => void coordinator.retry()} className="underline">
+          <Button size="sm" variant="ghost" onClick={() => void coordinator.retry()}>
             Retry save
-          </button>
+          </Button>
         )}
-        <button
-          type="button"
-          onClick={() => void coordinator.useExternalFile()}
-          className="rounded-sm border border-amber-200/30 px-2 py-1"
-        >
+        <Button size="sm" onClick={() => void coordinator.useExternalFile()}>
           Discard Studio edits and reload file
-        </button>
+        </Button>
         {conflict && (
-          <button
-            type="button"
+          <Button
+            size="sm"
+            variant="danger"
             onClick={() => {
               if (
                 window.confirm(
@@ -217,14 +189,14 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with Studio version
-          </button>
+          </Button>
         )}
         {failure?.recovered && failure.studioContent != null && (
-          <button
-            type="button"
+          <Button
+            size="sm"
+            variant="danger"
             onClick={() => {
               if (
                 window.confirm(
@@ -234,12 +206,11 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with recovered Studio draft
-          </button>
+          </Button>
         )}
-      </div>
+      </Banner>
       {reviewing && conflict && (
         <ConflictReview conflict={conflict} onClose={() => setReviewing(false)} />
       )}
diff --git a/packages/studio/src/components/LintModal.tsx b/packages/studio/src/components/LintModal.tsx
index 22e0def8623..804f697eef4 100644
--- a/packages/studio/src/components/LintModal.tsx
+++ b/packages/studio/src/components/LintModal.tsx
@@ -1,6 +1,13 @@
 import { useRef, useState } from "react";
-import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
+import {
+  RiArrowRightSLine,
+  RiCheckboxCircleFill,
+  RiErrorWarningFill,
+  RiErrorWarningLine,
+} from "@remixicon/react";
 import { copyTextToClipboard } from "../utils/clipboard";
+import { Button, cn } from "./ui";
+import { DialogHeader, dialogClasses } from "./ui/Dialog";
 import { useDialogBehavior } from "./ui/useDialogBehavior";
 
 export interface LintFinding {
@@ -56,70 +63,47 @@ export function LintModal({
     }
   };
 
+  const summary = hasIssues
+    ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}`
+    : "All checks passed";
+
   return (
-    <div
-      className="hf-backdrop-in fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs"
-      onClick={requestClose}
-    >
+    <div className={cn(dialogClasses.backdrop, dialogClasses.centered)} onClick={requestClose}>
       <div
         ref={containerRef}
         role="dialog"
         aria-modal="true"
         aria-label={title}
         tabIndex={-1}
-        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden outline-hidden"
+        className={cn(dialogClasses.panel, "w-full max-w-xl")}
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800">
-          <div className="flex items-center gap-3">
-            {hasIssues ? (
-              <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center">
-                <WarningIcon size={18} className="text-danger-ink" weight="fill" />
-              </div>
+        <DialogHeader
+          title={summary}
+          description={title}
+          onClose={onClose}
+          leading={
+            hasIssues ? (
+              <RiErrorWarningFill className="mt-0.5 size-6 shrink-0 text-foreground-icon-error" />
             ) : (
-              <div className="w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center">
-                <CheckCircleIcon size={18} className="text-accent-ink" weight="fill" />
-              </div>
-            )}
-            <div>
-              <h2 className="text-sm font-semibold text-neutral-200">
-                {hasIssues
-                  ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}`
-                  : "All checks passed"}
-              </h2>
-              <p className="text-xs text-neutral-500">{title}</p>
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            aria-label="Close"
-            className="p-1.5 rounded-lg text-neutral-500 hover:text-neutral-200 hover:bg-neutral-800 transition-colors active:scale-[0.98]"
-          >
-            <XIcon size={16} />
-          </button>
-        </div>
-
-        {/* Copy to agent + findings */}
+              <RiCheckboxCircleFill className="mt-0.5 size-6 shrink-0 text-accent-500" />
+            )
+          }
+        />
         {hasIssues && (
-          <div className="flex items-center justify-end px-5 py-2 border-b border-neutral-800/50">
-            <button
+          <div className="flex justify-end px-5 pb-2">
+            <Button
+              variant={copyFailed ? "danger" : "primary"}
+              size="sm"
               onClick={handleCopyToAgent}
-              className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${
-                copied
-                  ? "bg-accent text-on-accent"
-                  : copyFailed
-                    ? "bg-danger text-on-danger"
-                    : "bg-accent hover:bg-accent-hover text-on-accent"
-              }`}
             >
               {copied ? "Copied!" : copyFailed ? "Copy failed. Check permissions" : "Copy to Agent"}
-            </button>
+            </Button>
           </div>
         )}
-        <div className="flex-1 overflow-y-auto px-5 py-3">
+        <div className={cn(dialogClasses.body, "pb-5")}>
           {!hasIssues && (
-            <div className="py-8 text-center text-neutral-500 text-sm">
+            <div className="py-8 text-center text-body-regular text-text-secondary">
               No errors or warnings found. Your composition looks good!
             </div>
           )}
@@ -136,25 +120,28 @@ export function LintModal({
 }
 
 function LintFindingRow({ finding, tone }: { finding: LintFinding; tone: "error" | "warning" }) {
+  const Icon = tone === "error" ? RiErrorWarningFill : RiErrorWarningLine;
   return (
-    <div className="py-3 border-b border-border last:border-0">
+    <div className="border-b border-border-button-default py-3 last:border-0">
       <div className="flex items-start gap-2">
-        <WarningIcon
-          size={14}
-          className={`${tone === "error" ? "text-danger-ink" : "text-warning-ink"} shrink-0 mt-0.5`}
-          weight={tone === "error" ? "fill" : undefined}
+        <Icon
+          className={`mt-0.5 size-4 shrink-0 ${tone === "error" ? "text-foreground-icon-error" : "text-warning-ink"}`}
         />
         <div className="min-w-0">
-          <p className={`text-sm ${tone === "error" ? "text-text-0" : "text-text-2"}`}>
+          <p
+            className={`text-body-regular ${tone === "error" ? "text-text-primary" : "text-text-secondary"}`}
+          >
             {finding.message}
           </p>
           {finding.file && (
-            <p className="text-xs text-text-muted font-mono mt-0.5">{finding.file}</p>
+            <p className="mt-0.5 font-mono text-caption-1-regular text-text-tertiary">
+              {finding.file}
+            </p>
           )}
           {finding.fixHint && (
-            <div className="flex items-start gap-1 mt-1.5">
-              <CaretRightIcon size={10} className="text-accent-ink shrink-0 mt-0.5" />
-              <p className="text-xs text-accent-ink">{finding.fixHint}</p>
+            <div className="mt-1.5 flex items-start gap-1">
+              <RiArrowRightSLine className="mt-0.5 size-3.5 shrink-0 text-accent-500" />
+              <p className="text-caption-1-regular text-text-secondary">{finding.fixHint}</p>
             </div>
           )}
         </div>
diff --git a/packages/studio/src/components/MediaPreview.tsx b/packages/studio/src/components/MediaPreview.tsx
index 06c2b00176f..0cbe403a23b 100644
--- a/packages/studio/src/components/MediaPreview.tsx
+++ b/packages/studio/src/components/MediaPreview.tsx
@@ -5,7 +5,7 @@ import { encodeUrlPath } from "@hyperframes/parsers";
 
 function MediaErrorPanel({ name, filePath }: { name: string; filePath: string }) {
   return (
-    <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2">
+    <div className="flex flex-col items-center justify-center h-full p-4 bg-background-tertiary-default gap-2">
       <svg
         width="40"
         height="40"
@@ -13,16 +13,16 @@ function MediaErrorPanel({ name, filePath }: { name: string; filePath: string })
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="text-neutral-600"
+        className="text-text-tertiary"
         aria-hidden="true"
       >
         <circle cx="12" cy="12" r="10" />
         <line x1="12" y1="8" x2="12" y2="12" strokeLinecap="round" />
         <line x1="12" y1="16" x2="12.01" y2="16" strokeLinecap="round" />
       </svg>
-      <span className="text-sm text-neutral-400 font-medium">{name}</span>
-      <span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
-      <span className="text-[10px] text-neutral-500">
+      <span className="text-sm text-text-secondary font-medium">{name}</span>
+      <span className="text-caption-2-regular text-text-tertiary font-mono">{filePath}</span>
+      <span className="text-[10px] text-text-tertiary">
         Couldn't load this file. It may be missing or corrupt
       </span>
     </div>
@@ -46,35 +46,35 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
 
   if (IMAGE_EXT.test(filePath)) {
     return (
-      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950">
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-background-tertiary-default">
         <img
           src={serveUrl}
           alt={name}
           onError={setFailed}
-          className="max-w-full max-h-[70%] object-contain rounded-sm border border-neutral-800"
+          className="max-w-full max-h-[70%] object-contain rounded-sm border border-border-button-default"
         />
-        <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
+        <span className="mt-3 text-caption-2-regular text-text-tertiary font-mono">{filePath}</span>
       </div>
     );
   }
 
   if (VIDEO_EXT.test(filePath)) {
     return (
-      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950">
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-background-tertiary-default">
         <video
           src={serveUrl}
           controls
           onError={setFailed}
-          className="max-w-full max-h-[70%] rounded-sm border border-neutral-800"
+          className="max-w-full max-h-[70%] rounded-sm border border-border-button-default"
         />
-        <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
+        <span className="mt-3 text-caption-2-regular text-text-tertiary font-mono">{filePath}</span>
       </div>
     );
   }
 
   if (AUDIO_EXT.test(filePath)) {
     return (
-      <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3">
+      <div className="flex flex-col items-center justify-center h-full p-4 bg-background-tertiary-default gap-3">
         <svg
           width="48"
           height="48"
@@ -82,21 +82,21 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
           fill="none"
           stroke="currentColor"
           strokeWidth="1.5"
-          className="text-neutral-600"
+          className="text-text-tertiary"
         >
           <path d="M9 18V5l12-2v13" strokeLinecap="round" strokeLinejoin="round" />
           <circle cx="6" cy="18" r="3" />
           <circle cx="18" cy="16" r="3" />
         </svg>
         <audio src={serveUrl} controls onError={setFailed} className="w-full max-w-[280px]" />
-        <span className="text-[11px] text-neutral-500 font-mono">{filePath}</span>
+        <span className="text-caption-2-regular text-text-tertiary font-mono">{filePath}</span>
       </div>
     );
   }
 
   // Fonts and other binary — show info instead of binary dump
   return (
-    <div className="flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2">
+    <div className="flex flex-col items-center justify-center h-full p-4 bg-background-tertiary-default gap-2">
       <svg
         width="40"
         height="40"
@@ -104,7 +104,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="text-neutral-600"
+        className="text-text-tertiary"
       >
         <path
           d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
@@ -113,9 +113,9 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
         />
         <polyline points="14 2 14 8 20 8" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
-      <span className="text-sm text-neutral-400 font-medium">{name}</span>
-      <span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
-      <span className="text-[10px] text-neutral-600">Binary file: preview not available</span>
+      <span className="text-sm text-text-secondary font-medium">{name}</span>
+      <span className="text-caption-2-regular text-text-tertiary font-mono">{filePath}</span>
+      <span className="text-[10px] text-text-tertiary">Binary file: preview not available</span>
     </div>
   );
 }
diff --git a/packages/studio/src/components/ProjectUnreachableBanner.tsx b/packages/studio/src/components/ProjectUnreachableBanner.tsx
index a491b28e045..b9a44db6bc3 100644
--- a/packages/studio/src/components/ProjectUnreachableBanner.tsx
+++ b/packages/studio/src/components/ProjectUnreachableBanner.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { Button } from "./ui";
+import { Banner } from "./ui/Dialog";
 
 interface ServedProject {
   id: string;
@@ -59,10 +61,7 @@ export function ProjectUnreachableBanner({ projectId }: ProjectUnreachableBanner
   const servedLabel = soleProject?.title ?? soleProject?.id;
 
   return (
-    <div
-      role="alert"
-      className="hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-amber-500/30 bg-amber-950/85 px-4 py-2 text-[12px] font-medium text-amber-100 shadow-lg shadow-black/30"
-    >
+    <Banner tone="warning">
       {soleProject ? (
         <>
           <span>
@@ -73,17 +72,13 @@ export function ProjectUnreachableBanner({ projectId }: ProjectUnreachableBanner
               to the project this server actually serves. That is the same
               fallback a fresh load performs, so the button promises nothing
               beyond what a reload already does. */}
-          <button
-            type="button"
-            onClick={() => window.location.reload()}
-            className="shrink-0 rounded-sm border border-amber-300/20 px-2 py-1 text-[11px] text-amber-100 transition-colors hover:bg-amber-400/10 active:scale-[0.98]"
-          >
+          <Button size="sm" className="shrink-0" onClick={() => window.location.reload()}>
             Open {servedLabel}
-          </button>
+          </Button>
         </>
       ) : (
         <span>Couldn&apos;t open this project. It may have been renamed, moved, or deleted.</span>
       )}
-    </div>
+    </Banner>
   );
 }
diff --git a/packages/studio/src/components/SaveQueuePausedBanner.tsx b/packages/studio/src/components/SaveQueuePausedBanner.tsx
index 178af7dc2f0..cab4486d80c 100644
--- a/packages/studio/src/components/SaveQueuePausedBanner.tsx
+++ b/packages/studio/src/components/SaveQueuePausedBanner.tsx
@@ -1,3 +1,6 @@
+import { Button } from "./ui";
+import { Banner } from "./ui/Dialog";
+
 interface SaveQueuePausedBannerProps {
   message: string;
   /** Resets the save-queue circuit breaker so persistence resumes. */
@@ -7,18 +10,11 @@ interface SaveQueuePausedBannerProps {
 /** Alert shown when the DOM-edit save queue circuit breaker pauses persistence. */
 export function SaveQueuePausedBanner({ message, onRetry }: SaveQueuePausedBannerProps) {
   return (
-    <div
-      className="hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-red-500/30 bg-red-950/85 px-4 py-2 text-[12px] font-medium text-red-100 shadow-lg shadow-black/30"
-      role="alert"
-    >
+    <Banner tone="error">
       <span>{message}</span>
-      <button
-        type="button"
-        onClick={onRetry}
-        className="rounded-sm border border-red-300/20 px-2 py-1 text-[11px] text-red-100 transition-colors hover:bg-red-400/10 active:scale-[0.98]"
-      >
+      <Button size="sm" onClick={onRetry}>
         Retry saving
-      </button>
-    </div>
+      </Button>
+    </Banner>
   );
 }
diff --git a/packages/studio/src/components/StudioErrorBoundary.tsx b/packages/studio/src/components/StudioErrorBoundary.tsx
index 4dbf1ca2d92..4bb2d2691bc 100644
--- a/packages/studio/src/components/StudioErrorBoundary.tsx
+++ b/packages/studio/src/components/StudioErrorBoundary.tsx
@@ -31,9 +31,9 @@ export class StudioErrorBoundary extends Component<Props, State> {
     if (!this.state.error) return this.props.children;
 
     return (
-      <div className="fixed inset-0 flex flex-col items-center justify-center gap-4 bg-neutral-950 font-sans text-neutral-200">
+      <div className="fixed inset-0 flex flex-col items-center justify-center gap-4 bg-background-tertiary-default font-sans text-text-primary">
         <div className="text-lg font-semibold">Something went wrong</div>
-        <div className="max-w-[480px] text-center text-[13px] text-neutral-500">
+        <div className="max-w-[480px] text-center text-[13px] text-text-tertiary">
           {this.state.error.message}
         </div>
         <div className="mt-2 flex items-center gap-2">
@@ -47,7 +47,7 @@ export class StudioErrorBoundary extends Component<Props, State> {
               is the recovery path that always works. */}
           <button
             onClick={() => window.location.reload()}
-            className="rounded-md border border-neutral-700 px-5 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-neutral-800 active:scale-[0.98]"
+            className="rounded-md border border-border-button-default px-5 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-background-primary-hover active:scale-[0.98]"
           >
             Reload Studio
           </button>
diff --git a/packages/studio/src/components/StudioHeader.dom.test.tsx b/packages/studio/src/components/StudioHeader.dom.test.tsx
index b6012407126..6e0fe188c84 100644
--- a/packages/studio/src/components/StudioHeader.dom.test.tsx
+++ b/packages/studio/src/components/StudioHeader.dom.test.tsx
@@ -129,7 +129,7 @@ it("no longer renders Undo or Redo in the header", () => {
 
 it("groups Capture and Inspector in one bordered segment, Export outside it", () => {
   const host = mount();
-  const group = query(host, '[aria-label="Capture current frame"]').closest(".divide-x");
+  const group = query(host, '[aria-label="Capture current frame"]').closest('[role="group"]');
 
   expect(group?.contains(query(host, '[aria-label="Inspector"]'))).toBe(true);
   expect(group?.contains(query(host, '[data-testid="header-export"]'))).toBe(false);
@@ -152,16 +152,14 @@ it("shows Inspector pressed and filled only when on", () => {
   const host = mount({ inspectorButtonActive: true });
   const on = query(host, '[aria-label="Inspector"]');
   expect(on.getAttribute("aria-pressed")).toBe("true");
-  expect(hasToken(on.className, "text-accent-ink")).toBe(true);
-  expect(hasToken(on.className, "bg-on")).toBe(true);
+  expect(hasToken(on.className, "bg-background-primary-hover")).toBe(true);
   act(() => mounted?.root.unmount());
   mounted?.host.remove();
   mounted = null;
 
   const off = query(mount(), '[aria-label="Inspector"]');
   expect(off.getAttribute("aria-pressed")).toBe("false");
-  expect(hasToken(off.className, "text-accent-ink")).toBe(false);
-  expect(hasToken(off.className, "bg-on")).toBe(false);
+  expect(hasToken(off.className, "bg-background-primary-hover")).toBe(false);
 });
 
 it("keeps Capture a real download link rather than a button", () => {
@@ -172,8 +170,7 @@ it("keeps Capture a real download link rather than a button", () => {
 
   expect(capture.tagName).toBe("A");
   expect(capture.getAttribute("download")).toBe("frame.png");
-  // h-full replaces the md height: the group's own h-ctl sets the shared control height.
-  expectRecipe(capture, "px-2", "text-body-medium");
+  expectRecipe(capture, "h-[30px]", "px-2", "text-body-medium");
 });
 
 it("classifies the new header controls for the hotkey filters as the old ones were (KTD13)", () => {
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index 1e2bcb59ad4..87a3a019592 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -1,11 +1,11 @@
 import { memo, useContext, type MouseEvent } from "react";
-import { Camera } from "../icons/SystemIcons";
+import { RiCameraLine, RiLayoutRightLine, RiLoader4Line } from "@remixicon/react";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
+import { Button, cn, Tooltip } from "./ui";
+import { ButtonGroup, ButtonGroupItem } from "../boardui/components/base/buttons/button-group";
 import { Dock } from "./dock/Dock";
-import { InspectorIcon } from "./icons/InspectorIcon";
 import { PromptwiseMark } from "../promptwise/PromptwiseMark";
 import { ShowThemeToggle, ThemeToggle } from "./ThemeToggle";
 
@@ -34,6 +34,10 @@ export function shouldOpenInspector(
   return rightCollapsed || !inspectorPanelActive;
 }
 
+/** BoardUI's small button-group item, for the one item that has to be a link. */
+const groupLink =
+  "inline-flex h-[30px] items-center justify-center gap-1 whitespace-nowrap px-2 text-body-medium text-text-primary bg-background-primary-default select-none transition-[background-color,color] duration-150 outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus-ring";
+
 // fallow-ignore-next-line complexity
 export const StudioHeader = memo(function StudioHeader({
   captureFrameHref,
@@ -52,23 +56,17 @@ export const StudioHeader = memo(function StudioHeader({
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
-    <div className="flex items-center justify-between h-10 px-3 bg-surface border-b border-border-strong shrink-0">
-      {/* Left: logo + project name */}
+    <div className="flex h-12 shrink-0 items-center justify-between border-b border-border-button-default bg-background-primary-default px-3">
       <div className="flex items-center gap-3">
         <PromptwiseMark />
-        <span className="text-text-5 select-none" aria-hidden="true">
-          |
-        </span>
-        <span className="text-step-11 font-medium text-text-1">{projectId}</span>
+        <span className="h-4 w-px bg-border-button-default" aria-hidden="true" />
+        <span className="text-body-medium text-text-primary">{projectId}</span>
       </div>
-      {/* Right: toolbar buttons */}
-      <div className="flex items-center gap-3">
-        <div className="flex h-ctl items-center divide-x divide-border-strong overflow-hidden rounded-md border border-border-strong bg-bg-2">
+      <div className="flex items-center gap-2">
+        <ButtonGroup size="small">
           <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
-            {/* A real download link, so it wears Button's recipe rather than being
-              one: `download` on an <a> is what saves the frame, and no <button>
-              can do that. `enabled:` never matches a link, so the ghost
-              variant's hover look is repeated unprefixed here. */}
+            {/* A real download link, so it wears the group item's look rather than being one:
+              `download` on an <a> is what saves the frame, and no <button> can do that. */}
             <a
               href={captureFrameHref}
               download={captureFrameFilename}
@@ -84,54 +82,28 @@ export const StudioHeader = memo(function StudioHeader({
               onPointerDown={refreshCaptureFrameTime}
               aria-disabled={capturing || undefined}
               className={cn(
-                buttonBase,
-                buttonVariants.ghost,
-                buttonSizes.md,
-                "h-full rounded-none max-[1000px]:px-2",
+                groupLink,
                 capturing
-                  ? "text-text-4 cursor-default"
-                  : "hover:bg-hover hover:text-text-0 active:scale-[0.98]",
+                  ? "cursor-default text-text-tertiary"
+                  : "hover:bg-background-primary-hover active:bg-background-primary-active",
               )}
               aria-label={capturing ? "Capturing frame" : "Capture current frame"}
             >
               {capturing ? (
-                <svg
-                  className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  aria-hidden="true"
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                  />
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                  />
-                </svg>
+                <RiLoader4Line className="size-[18px] animate-spin motion-reduce:animate-none" />
               ) : (
-                <Camera size={14} />
+                <RiCameraLine className="size-[18px]" />
               )}
               <span className="max-[1000px]:hidden">{capturing ? "Capturing…" : "Capture"}</span>
             </a>
           </Tooltip>
           <Tooltip label="Inspector" side="bottom">
-            <Button
-              variant="ghost"
+            <ButtonGroupItem
+              size="small"
               aria-label="Inspector"
               aria-pressed={inspectorButtonActive}
-              className={cn(
-                "h-full rounded-none",
-                inspectorButtonActive &&
-                  "bg-on text-accent-ink enabled:hover:bg-on-hover enabled:hover:text-accent-ink",
-              )}
-              icon={<InspectorIcon size={16} />}
+              selected={inspectorButtonActive}
+              leadingIcon={RiLayoutRightLine}
               onClick={() => {
                 if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
                   trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
@@ -146,9 +118,9 @@ export const StudioHeader = memo(function StudioHeader({
               }}
             >
               Inspector
-            </Button>
+            </ButtonGroupItem>
           </Tooltip>
-        </div>
+        </ButtonGroup>
         {showThemeToggle && <ThemeToggle />}
         <Dock.WindowMenu />
         <Tooltip
diff --git a/packages/studio/src/components/StudioLeftPanels.tsx b/packages/studio/src/components/StudioLeftPanels.tsx
index 1015278c599..c80c74d3432 100644
--- a/packages/studio/src/components/StudioLeftPanels.tsx
+++ b/packages/studio/src/components/StudioLeftPanels.tsx
@@ -125,7 +125,7 @@ export const StudioLeftPanels = memo(function StudioLeftPanels({
         <PanelColumn footer={lintButton}>
           <div className="flex min-h-0 flex-1">
             {fileTree.length > 0 && (
-              <div className="w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto">
+              <div className="w-[160px] shrink-0 border-r border-border-button-default overflow-y-auto">
                 <FileTree
                   files={fileTree}
                   activeFile={editingFile?.path ?? null}
@@ -174,7 +174,7 @@ function CodeBody({
 }) {
   if (!editingFile) {
     return (
-      <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+      <div className="flex items-center justify-center h-full text-text-tertiary text-sm">
         Select a file to edit
       </div>
     );
@@ -186,7 +186,7 @@ function CodeBody({
   // empty document over the real file.
   if (editingFile.content == null) {
     return (
-      <div className="flex h-full items-center justify-center text-[11px] text-neutral-600">
+      <div className="flex h-full items-center justify-center text-caption-2-regular text-text-tertiary">
         Loading {editingFile.path}…
       </div>
     );
diff --git a/packages/studio/src/components/StudioSplash.tsx b/packages/studio/src/components/StudioSplash.tsx
index 7d00db8504d..f6a1cebf125 100644
--- a/packages/studio/src/components/StudioSplash.tsx
+++ b/packages/studio/src/components/StudioSplash.tsx
@@ -1,18 +1,18 @@
 export function StudioSplash({ waiting }: { waiting?: boolean }) {
   return (
-    <div className="h-full w-full bg-neutral-950 flex items-center justify-center">
+    <div className="h-full w-full bg-background-tertiary-default flex items-center justify-center">
       {waiting ? (
         <div className="flex flex-col items-center gap-3 text-center px-6" role="status">
-          <div className="w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" />
-          <p className="text-xs text-neutral-600">
+          <div className="w-4 h-4 rounded-full border-2 border-border-button-default border-t-text-secondary animate-spin motion-reduce:animate-none" />
+          <p className="text-xs text-text-tertiary">
             Waiting for preview server… run{" "}
-            <code className="text-neutral-500 font-mono">npm run dev</code>
+            <code className="text-text-tertiary font-mono">npm run dev</code>
           </p>
         </div>
       ) : (
         <div className="flex flex-col items-center gap-3 text-center px-6" role="status">
           <div className="w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" />
-          <p className="text-xs text-neutral-600">Connecting to project…</p>
+          <p className="text-xs text-text-tertiary">Connecting to project…</p>
         </div>
       )}
     </div>
diff --git a/packages/studio/src/components/StudioToast.tsx b/packages/studio/src/components/StudioToast.tsx
index a00fb1b08aa..0ecf5034627 100644
--- a/packages/studio/src/components/StudioToast.tsx
+++ b/packages/studio/src/components/StudioToast.tsx
@@ -1,3 +1,5 @@
+import { CloseButton } from "../boardui/components/base/buttons/close-button";
+
 interface StudioToastProps {
   message: string;
   tone?: "error" | "info";
@@ -14,37 +16,20 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
       className={`motion-reduce:animate-none ${leaving ? "hf-toast-exit" : "hf-toast-enter"}`}
     >
       <div
-        className={`relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px] ${toastSurface(isError)}`}
+        className={`relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-xl py-2 ps-4 pe-2 text-body-regular ${toastSurface(isError)}`}
       >
         <span
-          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-danger-ink" : "text-text-0"}`}
+          className={`min-w-0 wrap-break-word ${isError ? "text-text-destructive" : "text-text-primary"}`}
         >
           {message}
         </span>
-        {onDismiss && (
-          <button
-            type="button"
-            onClick={onDismiss}
-            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-hover hover:text-neutral-300"
-            aria-label="Dismiss"
-          >
-            <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-            >
-              <path d="M2 2l6 6M8 2l-6 6" />
-            </svg>
-          </button>
-        )}
+        {onDismiss && <CloseButton aria-label="Dismiss" size="sm" onClick={onDismiss} />}
       </div>
     </div>
   );
 }
 
+/** BoardUI's toast card; an error keeps the card and tints its edge. */
 export function toastSurface(isError: boolean): string {
-  return `border shadow-popover bg-raised ${isError ? "border-danger/40" : "border-border"}`;
+  return `border bg-background-primary-default shadow-dropdown ${isError ? "border-border-error-default" : "border-border-button-default"}`;
 }
diff --git a/packages/studio/src/components/ThemeToggle.tsx b/packages/studio/src/components/ThemeToggle.tsx
index eaaddac457c..ce86eff2c4b 100644
--- a/packages/studio/src/components/ThemeToggle.tsx
+++ b/packages/studio/src/components/ThemeToggle.tsx
@@ -1,4 +1,5 @@
 import { createContext } from "react";
+import { RiMoonLine, RiSunLine } from "@remixicon/react";
 import { setStudioTheme, useShownStudioTheme } from "../utils/studioTheme";
 import { IconButton, Tooltip } from "./ui";
 
@@ -39,18 +40,6 @@ function cannotReveal(): boolean {
   );
 }
 
-const iconProps = {
-  width: "14",
-  height: "14",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  "aria-hidden": true,
-} as const;
-
 export function ThemeToggle() {
   const isDark = useShownStudioTheme() === "dark";
   const label = `Switch to ${isDark ? "light" : "dark"} theme`;
@@ -74,25 +63,7 @@ export function ThemeToggle() {
       <IconButton
         onClick={toggle}
         aria-label={label}
-        icon={
-          isDark ? (
-            <svg {...iconProps}>
-              <circle cx="12" cy="12" r="5" />
-              <line x1="12" y1="1" x2="12" y2="3" />
-              <line x1="12" y1="21" x2="12" y2="23" />
-              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-              <line x1="1" y1="12" x2="3" y2="12" />
-              <line x1="21" y1="12" x2="23" y2="12" />
-              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-            </svg>
-          ) : (
-            <svg {...iconProps}>
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-            </svg>
-          )
-        }
+        icon={isDark ? <RiSunLine /> : <RiMoonLine />}
       />
     </Tooltip>
   );
diff --git a/packages/studio/src/components/TimelineToolbar.tsx b/packages/studio/src/components/TimelineToolbar.tsx
index ded2c43b8de..5f93035e9ca 100644
--- a/packages/studio/src/components/TimelineToolbar.tsx
+++ b/packages/studio/src/components/TimelineToolbar.tsx
@@ -225,13 +225,13 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   }, []);
 
   return (
-    <div className="border-b border-neutral-800/60">
+    <div className="border-b border-border-button-default">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
           {showHistory && <TimelineHistoryButtons {...history} />}
           <TimelineToolPicker showSelectAroundPlayhead={showSelectAroundPlayhead} />
           {/* Divider: tool-mode | editing-actions */}
-          <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
+          <div aria-hidden="true" className="mx-1 h-4 w-px bg-background-tertiary-default" />
           <LinkedSelectionToggle />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
             <button
@@ -323,8 +323,8 @@ export const TimelineToolbar = memo(function TimelineToolbar({
                           keyframeState === "active"
                             ? "text-accent-ink"
                             : keyframeState === "inactive"
-                              ? "text-neutral-400 hover:text-accent-ink"
-                              : "text-neutral-600 hover:text-neutral-400"
+                              ? "text-text-secondary hover:text-accent-ink"
+                              : "text-text-tertiary hover:text-text-secondary"
                         }`
                   }
                 >
@@ -357,7 +357,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
                   className={`${flatBtn} active:scale-[0.98] hover:bg-hover ${
                     autoKeyframeEnabled
                       ? "text-danger-ink"
-                      : "text-neutral-600 hover:text-neutral-400"
+                      : "text-text-tertiary hover:text-text-secondary"
                   }`}
                 >
                   <svg width="16" height="16" viewBox="0 0 10 10" fill="none">
@@ -490,10 +490,10 @@ export const TimelineToolbar = memo(function TimelineToolbar({
               }
               aria-pressed={thumbnailsVisible}
               onClick={() => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive")}
-              className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
+              className={`h-7 px-2 rounded-md text-caption-2-medium transition-colors ${
                 thumbnailsVisible
                   ? "bg-studio-accent/10 text-accent-ink"
-                  : "text-neutral-400 hover:bg-hover hover:text-neutral-200"
+                  : "text-text-secondary hover:bg-hover hover:text-text-primary"
               }`}
             >
               <Image size={16} aria-hidden="true" />
@@ -524,10 +524,10 @@ export const TimelineToolbar = memo(function TimelineToolbar({
               onClick={() => setZoomMode("fit")}
               aria-label="Fit timeline to width"
               aria-pressed={zoomMode === "fit"}
-              className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
+              className={`h-7 px-2 rounded-md text-caption-2-medium transition-colors ${
                 zoomMode === "fit"
                   ? "bg-studio-accent/10 text-accent-ink"
-                  : "text-neutral-400 hover:bg-hover hover:text-neutral-200"
+                  : "text-text-secondary hover:bg-hover hover:text-text-primary"
               }`}
             >
               <ArrowsOutLineHorizontal size={16} aria-hidden="true" />
@@ -571,7 +571,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           </Tooltip>
           {/* Numeric zoom readout (main-parity): "Fit" in fit mode, N% in manual. */}
           <span
-            className="ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none"
+            className="ml-1 w-[38px] text-right font-mono text-caption-2-regular tabular-nums text-text-tertiary select-none"
             aria-label="Timeline zoom level"
           >
             {showsFit ? "Fit" : `${displayedTimelineZoomPercent}%`}
diff --git a/packages/studio/src/components/dock/Dock.test.tsx b/packages/studio/src/components/dock/Dock.test.tsx
index fb1fd53467a..b31fa1d23d3 100644
--- a/packages/studio/src/components/dock/Dock.test.tsx
+++ b/packages/studio/src/components/dock/Dock.test.tsx
@@ -268,8 +268,9 @@ describe("a host's dock", () => {
     expect(dockApi?.getPanel("assets")?.group.id).not.toBe(dockApi?.getPanel("renders")?.group.id);
     const menu = [...host.querySelectorAll("button")].find((b) => b.textContent === "Window");
     act(() => menu?.click());
-    const items = [...host.querySelectorAll('[role="menuitemcheckbox"]')].map((i) => i.textContent);
-    expect(items).toEqual(["✓Preview", "✓Timeline", "✓Assets", "✓Renders"]);
+    const items = [...host.querySelectorAll('[role="menuitemcheckbox"]')];
+    expect(items.map((i) => i.textContent)).toEqual(["Preview", "Timeline", "Assets", "Renders"]);
+    expect(items.every((i) => i.getAttribute("aria-checked") === "true")).toBe(true);
   });
 
   it("keeps its layout alone under its own key, never in Studio's preferences", () => {
diff --git a/packages/studio/src/components/dock/Dock.tsx b/packages/studio/src/components/dock/Dock.tsx
index 98122f64516..60786776b9e 100644
--- a/packages/studio/src/components/dock/Dock.tsx
+++ b/packages/studio/src/components/dock/Dock.tsx
@@ -31,7 +31,9 @@ import {
   type PanelId,
 } from "./panelRegistry";
 import "./dock.css";
+import { RiArrowDownSLine, RiCheckLine } from "@remixicon/react";
 import { menuClasses } from "../ui/menuStyle";
+import { buttonBase, buttonSizes, buttonVariants, cn } from "../ui";
 
 const PERSIST_DEBOUNCE_MS = 250;
 
@@ -284,12 +286,13 @@ function WindowMenu() {
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={() => setOpen((value) => !value)}
-        className="h-7 px-2.5 rounded-md text-[11px] font-medium text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+        className={cn(buttonBase, buttonVariants.ghost, buttonSizes.md)}
       >
         Window
+        <RiArrowDownSLine aria-hidden />
       </button>
       {open && (
-        <div role="menu" className={`${menuClasses.panel} absolute right-0 top-8 z-50 w-44`}>
+        <div role="menu" className={`${menuClasses.panel} absolute right-0 top-9 z-50 w-48`}>
           {panels.map((id) => (
             <button
               key={id}
@@ -299,7 +302,9 @@ function WindowMenu() {
               onClick={() => togglePanel(id)}
               className={`${menuClasses.row} ${menuClasses.rowEnabled} flex items-center gap-2`}
             >
-              <span className="w-3 text-accent-ink">{openPanels.has(id) ? "✓" : ""}</span>
+              <span className="flex size-4 text-text-primary">
+                {openPanels.has(id) && <RiCheckLine className="size-4" aria-hidden />}
+              </span>
               {PANEL_DEFINITIONS[id].title}
             </button>
           ))}
diff --git a/packages/studio/src/components/editor/AnimationCard.tsx b/packages/studio/src/components/editor/AnimationCard.tsx
index 64a5bde7239..3c4380631ab 100644
--- a/packages/studio/src/components/editor/AnimationCard.tsx
+++ b/packages/studio/src/components/editor/AnimationCard.tsx
@@ -174,16 +174,16 @@ export const AnimationCard = memo(function AnimationCard({
     setKeys.every((k) => k === "x" || k === "y" || k === "immediateRender")
   )
     return (
-      <div className="border-b border-neutral-800 pb-2">
+      <div className="border-b border-border-button-default pb-2">
         <div className="flex items-center gap-2 py-1.5">
-          <span className="rounded-sm bg-neutral-800 px-1.5 py-0.5 text-[10px] font-medium text-neutral-400">
+          <span className="rounded-sm bg-background-tertiary-default px-1.5 py-0.5 text-[10px] font-medium text-text-secondary">
             Position
           </span>
-          <span className="text-[11px] text-neutral-500">
+          <span className="text-caption-2-regular text-text-tertiary">
             x: {Math.round(Number(animation.properties.x ?? 0))}, y:{" "}
             {Math.round(Number(animation.properties.y ?? 0))}
           </span>
-          <span className="ml-auto text-[9px] text-neutral-600">drag to move</span>
+          <span className="ml-auto text-[9px] text-text-tertiary">drag to move</span>
         </div>
       </div>
     );
@@ -195,7 +195,7 @@ export const AnimationCard = memo(function AnimationCard({
       className={
         flat
           ? "border-b border-l-2 border-panel-accent/40 border-b-panel-hairline pb-3 pl-2"
-          : "border-b border-neutral-800 pb-3"
+          : "border-b border-border-button-default pb-3"
       }
     >
       <button
@@ -211,7 +211,7 @@ export const AnimationCard = memo(function AnimationCard({
           {methodLabel}
         </span>
         <span
-          className={`text-[11px] font-medium ${flat ? "text-panel-text-3" : "text-neutral-400"}`}
+          className={`text-caption-2-medium ${flat ? "text-panel-text-3" : "text-text-secondary"}`}
           title="When this effect plays"
         >
           {typeof animation.position === "number"
@@ -220,7 +220,7 @@ export const AnimationCard = memo(function AnimationCard({
           to {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
         </span>
         <span
-          className={`ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-neutral-500"}`}
+          className={`ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-text-tertiary"}`}
           title={headerEase ?? "Mixed"}
           data-card-ease
         >
@@ -231,7 +231,7 @@ export const AnimationCard = memo(function AnimationCard({
           height="10"
           viewBox="0 0 10 10"
           fill="currentColor"
-          className={`shrink-0 transition-transform ${flat ? "text-panel-text-5" : "text-neutral-500"} ${expanded ? "" : "-rotate-90"}`}
+          className={`shrink-0 transition-transform ${flat ? "text-panel-text-5" : "text-text-tertiary"} ${expanded ? "" : "-rotate-90"}`}
         >
           <path d="M2 3l3 4 3-4z" />
         </svg>
@@ -246,9 +246,9 @@ export const AnimationCard = memo(function AnimationCard({
             />
             <div className="flex items-start gap-2">
               <div className="flex-1">
-                <p className="text-[10px] leading-relaxed text-neutral-400 italic">{summary}</p>
+                <p className="text-[10px] leading-relaxed text-text-secondary italic">{summary}</p>
                 {animation.keyframes && (
-                  <p className="mt-1 text-[9px] text-neutral-500">
+                  <p className="mt-1 text-[9px] text-text-tertiary">
                     <span
                       className="inline-block w-2 h-2 mr-1 align-middle"
                       style={{
@@ -260,7 +260,7 @@ export const AnimationCard = memo(function AnimationCard({
                   </p>
                 )}
                 {runEase && runEase !== "none" && (
-                  <p className="mt-1 text-[9px] text-neutral-500" data-card-run-ease>
+                  <p className="mt-1 text-[9px] text-text-tertiary" data-card-run-ease>
                     Run ease: {easeDisplayName(runEase)}
                   </p>
                 )}
@@ -272,7 +272,7 @@ export const AnimationCard = memo(function AnimationCard({
                   setCopied(true);
                   setTimeout(() => setCopied(false), 1500);
                 }}
-                className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+                className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
                 title="Copy description for agent prompts"
               >
                 {copied ? "Copied" : "Copy"}
@@ -388,7 +388,7 @@ export const AnimationCard = memo(function AnimationCard({
                     onAdd={(prop) => onAddFromProperty?.(animation.id, prop)}
                     onOpen={() => setAddingFromProp(true)}
                     onClose={() => setAddingFromProp(false)}
-                    buttonClassName="text-[11px] font-medium text-warning-ink transition-colors hover:text-text-0"
+                    buttonClassName="text-caption-2-medium text-warning-ink transition-colors hover:text-text-0"
                   />
                 </div>
               </div>
@@ -422,7 +422,7 @@ export const AnimationCard = memo(function AnimationCard({
               (animation.properties.x != null ||
                 animation.properties.y != null ||
                 animation.keyframes) && (
-                <div className="border-t border-neutral-800 pt-3">
+                <div className="border-t border-border-button-default pt-3">
                   <ArcPathControls
                     arcPath={
                       animation.arcPath ?? { enabled: false, autoRotate: false, segments: [] }
@@ -460,12 +460,12 @@ export const AnimationCard = memo(function AnimationCard({
                 onAdd={(prop) => onAddProperty(animation.id, prop)}
                 onOpen={() => setAddingProp(true)}
                 onClose={() => setAddingProp(false)}
-                buttonClassName="text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
+                buttonClassName="text-caption-2-medium text-text-secondary transition-colors hover:text-text-primary"
               />
               <button
                 type="button"
                 onClick={() => onDeleteAnimation(animation.id)}
-                className="ml-auto text-[11px] font-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15"
+                className="ml-auto text-caption-2-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15"
                 title="Remove this animation"
               >
                 Remove
diff --git a/packages/studio/src/components/editor/AnimationCardParts.tsx b/packages/studio/src/components/editor/AnimationCardParts.tsx
index e06c94c077e..2c0d1aceab0 100644
--- a/packages/studio/src/components/editor/AnimationCardParts.tsx
+++ b/packages/studio/src/components/editor/AnimationCardParts.tsx
@@ -46,7 +46,7 @@ function RemoveButton({ onClick, title }: { onClick: () => void; title: string }
     <button
       type="button"
       onClick={onClick}
-      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-danger-ink active:scale-[0.95]"
+      className="relative shrink-0 rounded-sm p-1.5 text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-danger-ink active:scale-[0.95]"
       title={title}
       aria-label={title}
     >
@@ -82,8 +82,8 @@ export function PropertyRow({
     const isVisible = val === "visible" || val === 1;
     return (
       <div className="flex items-center gap-1">
-        <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
-          <span className="flex-1 text-[11px] font-medium text-neutral-500">
+        <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-background-tertiary-default border border-border-button-default">
+          <span className="flex-1 text-caption-2-medium text-text-tertiary">
             {PROP_LABELS[prop] ?? prop}
           </span>
           <button
@@ -116,14 +116,14 @@ export function PropertyRow({
     return (
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-1">
-          <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
-            <span className="shrink-0 text-[11px] font-medium text-neutral-500">
+          <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-background-tertiary-default border border-border-button-default">
+            <span className="shrink-0 text-caption-2-medium text-text-tertiary">
               {PROP_LABELS[prop] ?? prop}
             </span>
             <input
               type="text"
               defaultValue={String(val)}
-              className="flex-1 bg-transparent text-[11px] text-neutral-200 outline-hidden"
+              className="flex-1 bg-transparent text-caption-2-regular text-text-primary outline-hidden"
               onBlur={(e) => onCommit(e.currentTarget.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") e.currentTarget.blur();
@@ -139,7 +139,7 @@ export function PropertyRow({
                 key={p.value}
                 type="button"
                 onClick={() => onCommit(p.value)}
-                className="px-1.5 py-0.5 rounded-sm text-[9px] font-medium text-neutral-500 bg-neutral-800/50 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
+                className="px-1.5 py-0.5 rounded-sm text-[9px] font-medium text-text-tertiary bg-background-tertiary-default hover:bg-background-primary-hover hover:text-text-primary transition-colors"
               >
                 {p.label}
               </button>
@@ -190,7 +190,7 @@ export function AddPropertyTrigger({
     return (
       <select
         autoFocus
-        className="min-w-0 rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-[11px] text-neutral-100 outline-hidden"
+        className="min-w-0 rounded-lg border border-border-button-default bg-background-tertiary-default px-2 py-1 text-caption-2-regular text-text-primary outline-hidden"
         defaultValue=""
         onChange={(e) => {
           if (e.target.value) onAdd(e.target.value);
diff --git a/packages/studio/src/components/editor/ArcPathControls.tsx b/packages/studio/src/components/editor/ArcPathControls.tsx
index df6aac0d362..43ffef81e71 100644
--- a/packages/studio/src/components/editor/ArcPathControls.tsx
+++ b/packages/studio/src/components/editor/ArcPathControls.tsx
@@ -31,8 +31,8 @@ export const ArcPathControls = memo(function ArcPathControls({
 
   if (segmentCount < 1) {
     return (
-      <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-3 py-2">
-        <p className="text-[11px] text-neutral-500">
+      <div className="rounded-md border border-border-button-default bg-background-tertiary-default px-3 py-2">
+        <p className="text-caption-2-regular text-text-tertiary">
           Add at least 2 position keyframes to enable arc motion.
         </p>
       </div>
@@ -111,7 +111,7 @@ export const ArcPathControls = memo(function ArcPathControls({
                   <button
                     type="button"
                     onClick={() => onUpdateSegment(i, { cp1: undefined, cp2: undefined })}
-                    className="text-[9px] font-medium text-neutral-500 transition-colors hover:text-neutral-300"
+                    className="text-[9px] font-medium text-text-tertiary transition-colors hover:text-text-primary"
                     title="Reset to auto-generated control points"
                   >
                     Reset
diff --git a/packages/studio/src/components/editor/BlockParamsPanel.tsx b/packages/studio/src/components/editor/BlockParamsPanel.tsx
index dc073dbee49..6eff9264f88 100644
--- a/packages/studio/src/components/editor/BlockParamsPanel.tsx
+++ b/packages/studio/src/components/editor/BlockParamsPanel.tsx
@@ -138,13 +138,13 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800">
-        <div className="text-[11px] font-semibold text-neutral-200 truncate">{blockTitle}</div>
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border-button-default">
+        <div className="text-caption-2-semibold text-text-primary truncate">{blockTitle}</div>
         <button
           type="button"
           onClick={onClose}
           aria-label="Close block parameters"
-          className="p-1.5 -m-1 text-neutral-500 hover:text-neutral-300 active:scale-[0.97] transition-colors"
+          className="p-1.5 -m-1 text-text-tertiary hover:text-text-primary active:scale-[0.97] transition-colors"
         >
           <svg
             width="14"
@@ -163,11 +163,13 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
       </div>
 
       <div className="flex-1 overflow-y-auto p-3 space-y-3">
-        <div className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+        <div className="text-[9px] font-medium text-text-tertiary uppercase tracking-wider">
           Parameters
         </div>
         {params.length === 0 && (
-          <div className="text-[10px] text-neutral-500">This block has no editable parameters.</div>
+          <div className="text-[10px] text-text-tertiary">
+            This block has no editable parameters.
+          </div>
         )}
         {!fileManager && params.length > 0 && (
           <div className="text-[10px] text-warning-ink">
@@ -184,7 +186,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           />
         ))}
         {commitState.tone === "saving" && (
-          <div className="text-[10px] text-neutral-500" role="status">
+          <div className="text-[10px] text-text-tertiary" role="status">
             Saving…
           </div>
         )}
@@ -216,7 +218,7 @@ function ParamControl({
 }) {
   return (
     <div className="space-y-1">
-      <label className="text-[10px] font-medium text-neutral-400">{param.label}</label>
+      <label className="text-[10px] font-medium text-text-secondary">{param.label}</label>
 
       {param.type === "color" && (
         <div className="flex items-center gap-2">
@@ -226,7 +228,7 @@ function ParamControl({
             disabled={disabled}
             aria-label={`${param.label} color`}
             onChange={(e) => onChange(e.target.value)}
-            className="w-7 h-7 rounded-sm border border-neutral-700 bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-7 h-7 rounded-sm border border-border-button-default bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
           />
           <input
             type="text"
@@ -234,7 +236,7 @@ function ParamControl({
             disabled={disabled}
             aria-label={`${param.label} value`}
             onChange={(e) => onChange(e.target.value)}
-            className="flex-1 bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex-1 bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-[10px] text-text-primary font-mono focus:outline-hidden focus:border-border-button-active disabled:cursor-not-allowed disabled:opacity-50"
           />
         </div>
       )}
@@ -252,7 +254,9 @@ function ParamControl({
             onChange={(e) => onChange(e.target.value)}
             className="flex-1 disabled:cursor-not-allowed disabled:opacity-50"
           />
-          <span className="text-[10px] text-neutral-400 w-8 text-right tabular-nums">{value}</span>
+          <span className="text-[10px] text-text-secondary w-8 text-right tabular-nums">
+            {value}
+          </span>
         </div>
       )}
 
@@ -263,7 +267,7 @@ function ParamControl({
           disabled={disabled}
           aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-[10px] text-text-primary focus:outline-hidden focus:border-border-button-active disabled:cursor-not-allowed disabled:opacity-50"
         />
       )}
 
@@ -273,7 +277,7 @@ function ParamControl({
           disabled={disabled}
           aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-[10px] text-text-primary focus:outline-hidden focus:border-border-button-active disabled:cursor-not-allowed disabled:opacity-50"
         >
           {param.options.map((opt) => (
             <option key={opt.value} value={opt.value}>
diff --git a/packages/studio/src/components/editor/BorderRadiusEditor.tsx b/packages/studio/src/components/editor/BorderRadiusEditor.tsx
index 01ec966a515..2726bed9aed 100644
--- a/packages/studio/src/components/editor/BorderRadiusEditor.tsx
+++ b/packages/studio/src/components/editor/BorderRadiusEditor.tsx
@@ -85,7 +85,7 @@ export function BorderRadiusEditor({
 
         <button
           type="button"
-          className="flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+          className="flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
           onClick={handleToggleLinked}
           disabled={disabled}
           title={linked ? "Unlink corners" : "Link all corners"}
diff --git a/packages/studio/src/components/editor/CanvasContextMenu.tsx b/packages/studio/src/components/editor/CanvasContextMenu.tsx
index 1c13c50e45d..f6553e71d5c 100644
--- a/packages/studio/src/components/editor/CanvasContextMenu.tsx
+++ b/packages/studio/src/components/editor/CanvasContextMenu.tsx
@@ -230,8 +230,8 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
               type="button"
               className={`w-full flex items-center px-3 py-1.5 text-xs text-left ${
                 enabled
-                  ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
-                  : "text-neutral-600 cursor-not-allowed"
+                  ? "text-text-primary hover:bg-background-primary-hover cursor-pointer"
+                  : "text-text-tertiary cursor-not-allowed"
               }`}
               disabled={!enabled}
               // Act on pointerDown, not click: a pointerDown that reaches the
@@ -258,7 +258,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
       {hasDelete && (
         <button
           type="button"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 cursor-pointer text-left"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-background-primary-hover cursor-pointer text-left"
           onPointerDown={(e) => {
             if (e.button !== 0) return;
             e.preventDefault();
@@ -267,7 +267,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
           }}
         >
           <span>Delete</span>
-          <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
+          <span className="text-text-tertiary text-[10px] ml-3">⌫</span>
         </button>
       )}
     </div>,
diff --git a/packages/studio/src/components/editor/ComputedTweenNotice.tsx b/packages/studio/src/components/editor/ComputedTweenNotice.tsx
index 7aaaf1c5620..667fa7c1d7d 100644
--- a/packages/studio/src/components/editor/ComputedTweenNotice.tsx
+++ b/packages/studio/src/components/editor/ComputedTweenNotice.tsx
@@ -16,20 +16,20 @@ export function ComputedTweenNotice({
   if (editability === "direct") return null;
   if (editability === "source") {
     return (
-      <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
+      <div className="rounded-md border border-border-button-default bg-background-tertiary-default px-2 py-1.5 text-[9px] text-text-secondary">
         Computed value. Edit it in the Code tab.
       </div>
     );
   }
   const source = provenance?.fn ? `${provenance.fn}()` : "a loop";
   return (
-    <div className="flex items-center justify-between gap-2 rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
+    <div className="flex items-center justify-between gap-2 rounded-md border border-border-button-default bg-background-tertiary-default px-2 py-1.5 text-[9px] text-text-secondary">
       <span>Generated by {source}, not directly editable.</span>
       {onUnroll && (
         <button
           type="button"
           onClick={onUnroll}
-          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-neutral-800"
+          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-background-primary-hover"
           title="Rewrite the helper/loop into explicit tweens so this keyframe edits directly"
         >
           Unroll to edit
diff --git a/packages/studio/src/components/editor/CropPresetBar.tsx b/packages/studio/src/components/editor/CropPresetBar.tsx
index e830d40ab28..1d90889e129 100644
--- a/packages/studio/src/components/editor/CropPresetBar.tsx
+++ b/packages/studio/src/components/editor/CropPresetBar.tsx
@@ -37,7 +37,7 @@ export function CropPresetBar({
       role="toolbar"
       aria-label="Crop presets"
       data-dom-edit-crop-bar="true"
-      className="pointer-events-auto absolute z-20 flex gap-1 rounded-md border border-white/15 bg-neutral-900/95 p-1 shadow-lg"
+      className="pointer-events-auto absolute z-20 flex gap-1 rounded-md border border-white/15 bg-background-tertiary-default p-1 shadow-lg"
       style={{ left, top: Math.max(4, top - 34), transform: "translateX(-50%)" }}
       onPointerDown={(event) => event.stopPropagation()}
     >
diff --git a/packages/studio/src/components/editor/EaseCurveSection.tsx b/packages/studio/src/components/editor/EaseCurveSection.tsx
index 5a2c7d6041d..272fe3b6884 100644
--- a/packages/studio/src/components/editor/EaseCurveSection.tsx
+++ b/packages/studio/src/components/editor/EaseCurveSection.tsx
@@ -132,13 +132,13 @@ function EaseTypeDropdown({
         className="flex w-full items-center gap-2 rounded-md border border-border bg-input px-2 py-1.5 text-left transition-colors hover:border-border-strong"
       >
         <MiniCurveSvg ease={ease} active size={16} />
-        <span className="text-[11px] text-neutral-200">{label}</span>
+        <span className="text-caption-2-regular text-text-primary">{label}</span>
         <svg
           width="8"
           height="8"
           viewBox="0 0 10 10"
           fill="currentColor"
-          className={`ml-auto text-neutral-500 transition-transform ${open ? "rotate-180" : ""}`}
+          className={`ml-auto text-text-tertiary transition-transform ${open ? "rotate-180" : ""}`}
         >
           <path d="M2 3l3 4 3-4z" />
         </svg>
@@ -392,10 +392,10 @@ export function EaseCurveSection({
   const label = resolveEditorLabel(displayedEase, springBounce, isWiggle);
 
   return (
-    <div className="rounded-lg bg-neutral-900/50 p-2">
+    <div className="rounded-lg bg-background-tertiary-default p-2">
       <EaseTypeDropdown kind={mode} ease={displayedEase} label={label} onSelect={commitEase} />
       {collidingAnimationTargets && collidingAnimationTargets.length > 1 && (
-        <p className="mb-1 text-[9px] text-neutral-500">
+        <p className="mb-1 text-[9px] text-text-tertiary">
           Applies to {collidingAnimationTargets.length} animations
         </p>
       )}
@@ -540,7 +540,7 @@ export function EaseCurveSection({
           />
         </>
       ) : (
-        <p className="px-0.5 py-1.5 text-[10px] leading-relaxed text-neutral-500">
+        <p className="px-0.5 py-1.5 text-[10px] leading-relaxed text-text-tertiary">
           {label} preset: switch to Curve, Spring, or Wiggle above to shape it by hand.
         </p>
       )}
diff --git a/packages/studio/src/components/editor/EaseModeControls.tsx b/packages/studio/src/components/editor/EaseModeControls.tsx
index e69a17812d7..228a6a2f224 100644
--- a/packages/studio/src/components/editor/EaseModeControls.tsx
+++ b/packages/studio/src/components/editor/EaseModeControls.tsx
@@ -52,14 +52,16 @@ export const EasePresetGrid = function EasePresetGrid({
             tabIndex={isActive ? 0 : -1}
             onClick={() => onSelect(preset.ease)}
             className={`flex flex-col items-center gap-0.5 rounded-md p-1 transition-colors ${
-              isActive ? "bg-panel-accent/10 ring-1 ring-panel-accent/30" : "hover:bg-neutral-800"
+              isActive
+                ? "bg-panel-accent/10 ring-1 ring-panel-accent/30"
+                : "hover:bg-background-primary-hover"
             }`}
             title={preset.label}
           >
             <MiniCurveSvg ease={preset.ease} active={isActive} />
             <span
               className={`text-center text-[8px] leading-none ${
-                isActive ? "text-accent-ink" : "text-neutral-500"
+                isActive ? "text-accent-ink" : "text-text-tertiary"
               }`}
             >
               {preset.label}
@@ -98,7 +100,9 @@ export function EaseModeToggle({
               onCommit(DEFAULT_EASE_BY_MODE[candidateMode]);
             }}
             className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
-              active ? "bg-neutral-700 text-neutral-100" : "text-neutral-500 hover:text-neutral-300"
+              active
+                ? "bg-background-tertiary-default text-text-primary"
+                : "text-text-tertiary hover:text-text-primary"
             }`}
           >
             {MODE_LABELS[candidateMode]}
diff --git a/packages/studio/src/components/editor/EaseParamFields.tsx b/packages/studio/src/components/editor/EaseParamFields.tsx
index 5173dc7d1a9..a600c44ccbe 100644
--- a/packages/studio/src/components/editor/EaseParamFields.tsx
+++ b/packages/studio/src/components/editor/EaseParamFields.tsx
@@ -93,7 +93,7 @@ export function EaseBezierField({
             }
           }}
           onBlur={(event) => commit(event.currentTarget.value)}
-          className={`w-full rounded border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${
+          className={`w-full rounded border bg-input px-1.5 py-1 font-mono text-[10px] text-text-primary outline-hidden ${
             error
               ? "border-danger-ink/70 focus:border-danger-ink"
               : "border-border focus:border-panel-accent/50"
@@ -171,7 +171,7 @@ export function SpringBounceField({
   onCommit: (ease: string) => void;
 }) {
   return (
-    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-text-secondary">
       <span aria-hidden="true">Bounce</span>
       <NumericCommitInput
         label="Spring bounce"
@@ -183,7 +183,7 @@ export function SpringBounceField({
           const bounce = parseSpringBounce(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         }}
-        className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+        className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-text-primary outline-hidden focus:border-panel-accent/50"
       />
     </div>
   );
@@ -198,7 +198,7 @@ export function WiggleField({
 }) {
   const amplitude = config.amplitude ?? WIGGLE_DEFAULT_AMPLITUDE[config.type];
   return (
-    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-text-secondary">
       <div className="flex items-center gap-1">
         <span aria-hidden="true">Count</span>
         <NumericCommitInput
@@ -207,7 +207,7 @@ export function WiggleField({
           min={1}
           step={1}
           onCommit={(value) => commitWiggle(onCommit, value, config.type, amplitude)}
-          className="w-14 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="w-14 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-text-primary outline-hidden focus:border-panel-accent/50"
         />
       </div>
       <div className="flex items-center gap-1">
@@ -220,7 +220,7 @@ export function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           }}
-          className="rounded-sm border border-border bg-input px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="rounded-sm border border-border bg-input px-1.5 py-1 text-[10px] text-text-primary outline-hidden focus:border-panel-accent/50"
         >
           {WIGGLE_TYPES.map((type) => (
             <option key={type} value={type}>
@@ -238,7 +238,7 @@ export function WiggleField({
           max={1}
           step={0.01}
           onCommit={(value) => commitWiggle(onCommit, config.wiggles, config.type, value)}
-          className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-text-primary outline-hidden focus:border-panel-accent/50"
         />
       </div>
     </div>
diff --git a/packages/studio/src/components/editor/FileTree.tsx b/packages/studio/src/components/editor/FileTree.tsx
index a4156a09be4..0b17779652e 100644
--- a/packages/studio/src/components/editor/FileTree.tsx
+++ b/packages/studio/src/components/editor/FileTree.tsx
@@ -235,14 +235,14 @@ export const FileTree = memo(function FileTree({
     <div className="flex flex-col h-full min-h-0">
       {/* FILES header with action buttons */}
       {hasFileOps && (
-        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-neutral-800/50 shrink-0">
-          <span className="text-[10px] font-semibold tracking-wider text-neutral-600 uppercase">
+        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-border-button-default shrink-0">
+          <span className="text-[10px] font-semibold tracking-wider text-text-tertiary uppercase">
             Files
           </span>
           <div className="flex items-center gap-0.5">
             <button
               onClick={() => handleNewFile("")}
-              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-background-primary-hover text-text-tertiary hover:text-text-secondary active:scale-[0.97] transition-colors"
               title="New File"
               aria-label="New File"
             >
@@ -250,7 +250,7 @@ export const FileTree = memo(function FileTree({
             </button>
             <button
               onClick={() => handleNewFolder("")}
-              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-background-primary-hover text-text-tertiary hover:text-text-secondary active:scale-[0.97] transition-colors"
               title="New Folder"
               aria-label="New Folder"
             >
@@ -292,7 +292,7 @@ export const FileTree = memo(function FileTree({
             />
           )}
         {children.length === 0 && !inlineInput && (
-          <div className="px-3 py-4 text-center text-[11px] text-neutral-600">
+          <div className="px-3 py-4 text-center text-caption-2-regular text-text-tertiary">
             No files yet{hasFileOps ? ". Use + above to create one" : ""}.
           </div>
         )}
diff --git a/packages/studio/src/components/editor/FileTreeNodes.tsx b/packages/studio/src/components/editor/FileTreeNodes.tsx
index bc2283cb53e..2cd6d4b8177 100644
--- a/packages/studio/src/components/editor/FileTreeNodes.tsx
+++ b/packages/studio/src/components/editor/FileTreeNodes.tsx
@@ -24,7 +24,7 @@ export type { ContextMenuState, InlineInputState };
 export { buildTree, sortChildren, isActiveInSubtree } from "./FileTreeIcons";
 
 const SZ_ICON = 14;
-const ROW = `${menuClasses.row} ${menuClasses.rowEnabled} flex items-center gap-2 active:bg-neutral-700`;
+const ROW = `${menuClasses.row} ${menuClasses.rowEnabled} flex items-center gap-2 active:bg-background-primary-active`;
 const DANGER_ROW = `${menuClasses.row} ${menuClasses.rowDanger} flex items-center gap-2 active:bg-danger/25`;
 
 // ── Context Menu Component ──
@@ -117,7 +117,7 @@ export function ContextMenu({
               onClose();
             }}
           >
-            <FilePlus size={12} weight="duotone" className="text-neutral-500" />
+            <FilePlus size={12} weight="duotone" className="text-text-tertiary" />
             New File
           </button>
           <button
@@ -128,7 +128,7 @@ export function ContextMenu({
               onClose();
             }}
           >
-            <FolderSimplePlus size={12} weight="duotone" className="text-neutral-500" />
+            <FolderSimplePlus size={12} weight="duotone" className="text-text-tertiary" />
             New Folder
           </button>
           <div className={menuClasses.divider} />
@@ -144,7 +144,7 @@ export function ContextMenu({
               onClose();
             }}
           >
-            <FilePlus size={12} weight="duotone" className="text-neutral-500" />
+            <FilePlus size={12} weight="duotone" className="text-text-tertiary" />
             New File
           </button>
           <div className={menuClasses.divider} />
@@ -158,7 +158,7 @@ export function ContextMenu({
           onClose();
         }}
       >
-        <PencilSimple size={12} weight="duotone" className="text-neutral-500" />
+        <PencilSimple size={12} weight="duotone" className="text-text-tertiary" />
         Rename
       </button>
       {!state.targetIsFolder && (
@@ -170,7 +170,7 @@ export function ContextMenu({
             onClose();
           }}
         >
-          <Copy size={12} weight="duotone" className="text-neutral-500" />
+          <Copy size={12} weight="duotone" className="text-text-tertiary" />
           Duplicate
         </button>
       )}
@@ -282,8 +282,8 @@ export function InlineInput({
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
           aria-invalid={error ? true : undefined}
-          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${
-            error ? "border-danger-ink" : "border-neutral-600 focus:border-accent-ink"
+          className={`w-full min-w-0 bg-background-tertiary-default text-text-primary text-xs px-1.5 py-0.5 rounded border outline-hidden ${
+            error ? "border-danger-ink" : "border-border-button-default focus:border-accent-ink"
           }`}
           spellCheck={false}
         />
@@ -331,24 +331,24 @@ export function DeleteConfirm({
   return (
     <div
       ref={ref}
-      className="mx-1 my-0.5 p-2 bg-neutral-800 border border-neutral-700 rounded-md text-xs"
+      className="mx-1 my-0.5 p-2 bg-background-tertiary-default border border-border-button-default rounded-md text-xs"
     >
-      <p className="text-neutral-300 mb-2">
+      <p className="text-text-primary mb-2">
         {isFolder ? (
           <>
-            Delete folder <span className="font-medium text-neutral-100">{name}</span> and
+            Delete folder <span className="font-medium text-text-primary">{name}</span> and
             everything inside it?
           </>
         ) : (
           <>
-            Delete <span className="font-medium text-neutral-100">{name}</span>?
+            Delete <span className="font-medium text-text-primary">{name}</span>?
           </>
         )}
       </p>
       <div className="flex gap-1.5">
         <button
           onClick={onCancel}
-          className="flex-1 px-2 py-1 rounded-sm bg-hover text-neutral-300 hover:bg-press transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-hover text-text-primary hover:bg-press transition-colors"
         >
           Cancel
         </button>
@@ -414,8 +414,8 @@ export const TreeFile = memo(function TreeFile({
       }}
       className={`w-full flex items-center gap-2 py-1 min-h-7 text-left transition-all text-xs ${
         isActive
-          ? "bg-neutral-800/60 text-neutral-200"
-          : "text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300"
+          ? "bg-background-tertiary-default text-text-primary"
+          : "text-text-tertiary hover:bg-background-primary-hover hover:text-text-primary"
       }`}
       style={{ paddingLeft: `${8 + depth * 12 + 14}px` }}
     >
@@ -508,14 +508,14 @@ export const TreeFolder = memo(function TreeFolder({
           onDrop(e, node.fullPath);
         }}
         onDragLeave={onDragLeave}
-        className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${
+        className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-text-secondary hover:bg-background-primary-hover hover:text-text-primary transition-colors ${
           isDragOver
             ? "bg-accent/10 outline-solid outline-1 outline-accent-ink -outline-offset-1"
             : ""
         }`}
         style={{ paddingLeft: `${8 + depth * 12}px` }}
       >
-        <Chevron size={10} className="shrink-0 text-neutral-600" />
+        <Chevron size={10} className="shrink-0 text-text-tertiary" />
         <span className="truncate font-medium">{node.name}</span>
       </button>
       {isOpen && (
diff --git a/packages/studio/src/components/editor/GestureRecordControl.tsx b/packages/studio/src/components/editor/GestureRecordControl.tsx
index 54ff70d452f..b77c5d78698 100644
--- a/packages/studio/src/components/editor/GestureRecordControl.tsx
+++ b/packages/studio/src/components/editor/GestureRecordControl.tsx
@@ -41,7 +41,7 @@ export function GestureRecordPanelButton({
           track("button", "Gesture recording");
           onToggleRecording();
         }}
-        className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
+        className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-caption-2-medium transition-colors ${
           recording
             ? "bg-red-500/15 text-danger-ink border border-red-500/30 animate-pulse"
             : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"
@@ -78,7 +78,7 @@ export function GestureRecordBadge({
       className={`pointer-events-auto absolute z-20 flex h-7 w-7 items-center justify-center rounded-full border shadow-lg transition-colors ${
         recording
           ? "border-danger/60 bg-danger text-on-danger animate-pulse"
-          : "border-studio-accent/60 bg-neutral-950 text-accent-ink hover:bg-neutral-900"
+          : "border-studio-accent/60 bg-background-tertiary-default text-accent-ink hover:bg-background-primary-hover"
       }`}
       style={{
         left: Math.max(0, rect.left + rect.width + 8),
diff --git a/packages/studio/src/components/editor/GsapAddAnimationControl.tsx b/packages/studio/src/components/editor/GsapAddAnimationControl.tsx
index 062a7828cf9..8651b559b34 100644
--- a/packages/studio/src/components/editor/GsapAddAnimationControl.tsx
+++ b/packages/studio/src/components/editor/GsapAddAnimationControl.tsx
@@ -3,15 +3,15 @@ import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimation
 const STYLES = {
   classic: {
     method:
-      "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
-    cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300",
-    trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200",
+      "rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 py-1.5 text-caption-2-medium text-text-primary transition-colors hover:border-border-button-hover hover:text-text-0",
+    cancel: "px-1.5 text-caption-2-regular text-text-tertiary hover:text-text-primary",
+    trigger: "text-caption-2-medium text-text-secondary transition-colors hover:text-text-primary",
   },
   flat: {
     method:
-      "rounded-lg border border-panel-border-input bg-panel-input px-2.5 py-1.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:border-panel-text-4 hover:text-panel-text-0",
-    cancel: "px-1.5 text-[11px] text-panel-text-3 hover:text-panel-text-1",
-    trigger: "text-[11px] font-medium text-panel-text-3 transition-colors hover:text-panel-text-1",
+      "rounded-lg border border-panel-border-input bg-panel-input px-2.5 py-1.5 text-caption-2-medium text-panel-text-2 transition-colors hover:border-panel-text-4 hover:text-panel-text-0",
+    cancel: "px-1.5 text-caption-2-regular text-panel-text-3 hover:text-panel-text-1",
+    trigger: "text-caption-2-medium text-panel-text-3 transition-colors hover:text-panel-text-1",
   },
 };
 
diff --git a/packages/studio/src/components/editor/GsapAnimationList.tsx b/packages/studio/src/components/editor/GsapAnimationList.tsx
index e1b3ef6ab38..6f68a8f2e5e 100644
--- a/packages/studio/src/components/editor/GsapAnimationList.tsx
+++ b/packages/studio/src/components/editor/GsapAnimationList.tsx
@@ -62,7 +62,7 @@ export function GsapAnimationList({
   return (
     <div className="space-y-2">
       {animations.length === 0 && (
-        <p className="text-[11px] leading-4 text-neutral-500">
+        <p className="text-caption-2-regular leading-4 text-text-tertiary">
           No animations on this element yet. Add an effect below to animate it.
         </p>
       )}
diff --git a/packages/studio/src/components/editor/GsapAnimationSection.tsx b/packages/studio/src/components/editor/GsapAnimationSection.tsx
index 19cb8e98a9c..a944eaf2b92 100644
--- a/packages/studio/src/components/editor/GsapAnimationSection.tsx
+++ b/packages/studio/src/components/editor/GsapAnimationSection.tsx
@@ -24,13 +24,13 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   return (
     <Section title="Animation" icon={<Film size={15} />}>
       {multipleTimelines && (
-        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-caption-2-regular leading-relaxed text-warning-ink">
           This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss.
           Consolidate into a single timeline to enable editing.
         </p>
       )}
       {unsupportedTimelinePattern && (
-        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-caption-2-regular leading-relaxed text-warning-ink">
           This timeline uses a computed key (window.__timelines[variable]) the editor can&apos;t
           resolve statically. Use a string-literal key (window.__timelines[&quot;id&quot;]) or a
           variable declaration (const tl = gsap.timeline()) to enable editing.
diff --git a/packages/studio/src/components/editor/InspectorHeaderActions.tsx b/packages/studio/src/components/editor/InspectorHeaderActions.tsx
index ceacadeaf04..71add8e6c16 100644
--- a/packages/studio/src/components/editor/InspectorHeaderActions.tsx
+++ b/packages/studio/src/components/editor/InspectorHeaderActions.tsx
@@ -37,7 +37,7 @@ export function InspectorHeaderActions({
             track("toggle", "Element visibility");
             void onToggleHidden(selectedElementId, !selectedElementHidden);
           }}
-          className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+          className="flex h-6 w-6 items-center justify-center rounded-sm text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
         >
           {selectedElementHidden ? (
             <EyeSlash size={13} weight="bold" aria-hidden="true" />
@@ -54,7 +54,7 @@ export function InspectorHeaderActions({
             onUngroup();
           }}
           title="Ungroup (⌘⇧G)"
-          className="flex h-6 items-center rounded-sm px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
+          className="flex h-6 items-center rounded-sm px-2 text-caption-2-medium text-text-secondary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
         >
           Ungroup
         </button>
@@ -68,7 +68,7 @@ export function InspectorHeaderActions({
         className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
           copied
             ? "text-accent-ink"
-            : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
+            : "text-text-tertiary hover:bg-background-primary-hover hover:text-text-primary"
         }`}
         title={copied ? "Copied!" : "Copy element info to clipboard"}
       >
@@ -91,7 +91,7 @@ export function InspectorHeaderActions({
           track("button", "Clear selection");
           onClear();
         }}
-        className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+        className="flex h-6 w-6 items-center justify-center rounded-sm text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
       >
         <X size={13} />
       </button>
diff --git a/packages/studio/src/components/editor/KeyframeEaseList.tsx b/packages/studio/src/components/editor/KeyframeEaseList.tsx
index 7cc11bbe574..618c02950b4 100644
--- a/packages/studio/src/components/editor/KeyframeEaseList.tsx
+++ b/packages/studio/src/components/editor/KeyframeEaseList.tsx
@@ -65,7 +65,7 @@ export function KeyframeEaseList({
   return (
     <div className="space-y-1">
       <div className="flex items-center gap-2">
-        <p className="text-[9px] font-semibold uppercase tracking-wider text-neutral-500">
+        <p className="text-[9px] font-semibold uppercase tracking-wider text-text-tertiary">
           Per-keyframe easing
         </p>
         {onApplyAll && (
@@ -77,7 +77,7 @@ export function KeyframeEaseList({
               const next = e.target.value;
               if (next) onApplyAll(next);
             }}
-            className="ml-auto cursor-pointer rounded-sm bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-hidden hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
+            className="ml-auto cursor-pointer rounded-sm bg-background-tertiary-default px-1.5 py-0.5 text-[9px] text-text-primary outline-hidden hover:bg-background-primary-hover focus:ring-1 focus:ring-panel-accent/40"
           >
             <option value="" disabled>
               Set all…
@@ -102,7 +102,7 @@ export function KeyframeEaseList({
           <div
             key={`${i}-${kf.percentage}`}
             data-ease-segment-pct={kf.percentage}
-            className="rounded-md bg-neutral-900/50"
+            className="rounded-md bg-background-tertiary-default"
           >
             <button
               type="button"
@@ -110,14 +110,14 @@ export function KeyframeEaseList({
               aria-expanded={isExpanded}
               className="flex w-full items-center gap-2 px-2 py-1.5 text-left active:scale-[0.99]"
             >
-              <span className="text-[10px] font-medium text-neutral-400">{label}</span>
-              <span className="ml-auto text-[9px] text-neutral-500">{easeLabel}</span>
+              <span className="text-[10px] font-medium text-text-secondary">{label}</span>
+              <span className="ml-auto text-[9px] text-text-tertiary">{easeLabel}</span>
               <svg
                 width="8"
                 height="8"
                 viewBox="0 0 10 10"
                 fill="currentColor"
-                className={`text-neutral-500 transition-transform duration-150 ${isExpanded ? "" : "-rotate-90"}`}
+                className={`text-text-tertiary transition-transform duration-150 ${isExpanded ? "" : "-rotate-90"}`}
               >
                 <path d="M2 3l3 4 3-4z" />
               </svg>
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
index 793c9bb493c..96ad0de0458 100644
--- a/packages/studio/src/components/editor/LayersPanel.tsx
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -418,7 +418,9 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
       <div className="flex h-full flex-col items-center justify-center bg-panel-bg px-6 text-center">
         <Layers size={18} className="mb-3 text-panel-text-5" />
         <p className="text-sm font-medium text-panel-text-1">No layers</p>
-        <p className="mt-1 text-xs text-neutral-500">Load a composition to see its element tree</p>
+        <p className="mt-1 text-xs text-text-tertiary">
+          Load a composition to see its element tree
+        </p>
       </div>
     );
   }
@@ -428,7 +430,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
       className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg"
       onPointerLeave={() => handleLayerHover(null)}
     >
-      <div className="border-b border-panel-border px-3 py-2 text-[11px] text-panel-text-3">
+      <div className="border-b border-panel-border px-3 py-2 text-caption-2-regular text-panel-text-3">
         {layers.length} layer{layers.length === 1 ? "" : "s"}
       </div>
       <div
@@ -442,7 +444,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
           <button
             type="button"
             onClick={() => setActiveGroupElement(null)}
-            className="mx-1 flex w-[calc(100%-0.5rem)] items-center gap-1.5 rounded-md px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1"
+            className="mx-1 flex w-[calc(100%-0.5rem)] items-center gap-1.5 rounded-md px-2 py-1 text-left text-caption-2-regular text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1"
           >
             <span aria-hidden="true">←</span>
             <span className="truncate">
@@ -498,7 +500,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
                   onClick={(e) => toggleCollapse(layer.key, e)}
                   aria-expanded={!isCollapsed}
                   aria-label={isCollapsed ? "Expand children" : "Collapse children"}
-                  className="relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
+                  className="relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-text-tertiary hover:text-text-primary before:absolute before:-inset-1.5 before:content-['']"
                 >
                   <svg
                     width="8"
@@ -524,7 +526,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
               >
                 <KindIcon size={12} />
               </span>
-              <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
+              <span className="min-w-0 flex-1 truncate text-caption-2-regular">{layer.label}</span>
               {hasChildren && (
                 <span className="text-[9px] tabular-nums text-panel-text-5">
                   {layer.childCount}
diff --git a/packages/studio/src/components/editor/PromotableControl.tsx b/packages/studio/src/components/editor/PromotableControl.tsx
index 552382ca2ca..775d293c472 100644
--- a/packages/studio/src/components/editor/PromotableControl.tsx
+++ b/packages/studio/src/components/editor/PromotableControl.tsx
@@ -97,7 +97,7 @@ export function PromotableControl({
             e.stopPropagation();
             promote.promote();
           }}
-          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-raised/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-accent-ink hover:opacity-100"
+          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-raised/80 px-1 py-px font-mono text-[8px] font-medium text-text-secondary opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-accent-ink hover:opacity-100"
         >
           ◇ var
         </button>
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 957606ffa5c..b754231cf05 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -296,10 +296,12 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
         <div className="px-4 py-3">
           <div className="flex items-center justify-between gap-4">
             <div className="min-w-0">
-              <div className="truncate text-[13px] font-semibold text-neutral-100">
+              <div className="truncate text-[13px] font-semibold text-text-primary">
                 {element.label}
               </div>
-              <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
+              <div className="mt-0.5 truncate text-caption-2-regular text-text-tertiary">
+                {sourceLabel}
+              </div>
             </div>
             <InspectorHeaderActions
               element={element}
@@ -517,7 +519,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
               onLivePreviewProps={createGsapLivePreview(iframeRef)}
             />
             <div className="mt-3">
-              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-text-tertiary">
                 Stacking
               </div>
               <MetricField
diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
index a706196f484..067d9068210 100644
--- a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
@@ -20,12 +20,12 @@ function FlatEmptyState() {
         </svg>
       </span>
       <div className="text-[13px] font-semibold text-panel-text-0">Nothing selected</div>
-      <div className="max-w-[250px] text-[11px] leading-normal text-panel-text-3">
+      <div className="max-w-[250px] text-caption-2-regular leading-normal text-panel-text-3">
         Click any element on the canvas to edit it, or drag to select several.
       </div>
       <div className="mt-2 flex w-full flex-col gap-1.5">
         <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
-          <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
+          <span className="flex items-center gap-2 text-caption-2-regular text-panel-text-2">
             <span className="text-danger-ink">●</span>
             Record a gesture
           </span>
@@ -37,7 +37,7 @@ function FlatEmptyState() {
           <button
             type="button"
             onClick={askPromptwiseAgent}
-            className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-3 py-2 text-[11px] text-panel-text-2 hover:bg-hover"
+            className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-3 py-2 text-caption-2-regular text-panel-text-2 hover:bg-hover"
           >
             <span className="text-accent-ink">✦</span>
             Describe a change to the agent
@@ -121,7 +121,7 @@ function FlatMultiSelectState({
               >
                 {glyph}
               </span>
-              <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
+              <span className="min-w-0 flex-1 truncate text-caption-2-regular text-panel-text-1">
                 {element.label}
               </span>
               <span className="shrink-0 font-mono text-[9px] text-panel-text-4">
@@ -148,7 +148,7 @@ function FlatMultiSelectState({
               onGroupSelection();
               trackInput("button", "group-selection");
             }}
-            className="flex h-[34px] flex-1 items-center justify-center gap-2 rounded-lg bg-panel-hover text-[11px] font-semibold text-panel-text-0"
+            className="flex h-[34px] flex-1 items-center justify-center gap-2 rounded-lg bg-panel-hover text-caption-2-semibold text-panel-text-0"
           >
             <Layers size={13} />
             Group selection
@@ -161,7 +161,7 @@ function FlatMultiSelectState({
               onHideAllSelected();
               trackInput("button", "hide-all");
             }}
-            className="flex h-[34px] items-center gap-1.5 rounded-lg border border-panel-border-input bg-panel-input px-3 text-[11px] font-medium text-panel-text-2"
+            className="flex h-[34px] items-center gap-1.5 rounded-lg border border-panel-border-input bg-panel-input px-3 text-caption-2-medium text-panel-text-2"
           >
             <Eye size={13} />
             Hide all
@@ -205,26 +205,26 @@ export function PropertyPanelEmptyState({
   }
 
   return (
-    <div className="flex h-full flex-col bg-neutral-900">
+    <div className="flex h-full flex-col bg-background-tertiary-default">
       <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
         {multiSelectCount > 1 ? (
           <>
-            <Layers size={18} className="mb-3 text-neutral-600" />
-            <p className="text-sm font-medium text-neutral-200">
+            <Layers size={18} className="mb-3 text-text-tertiary" />
+            <p className="text-sm font-medium text-text-primary">
               {multiSelectCount} elements selected
             </p>
-            <p className="mt-2 max-w-[260px] text-xs leading-5 text-neutral-500">
+            <p className="mt-2 max-w-[260px] text-xs leading-5 text-text-tertiary">
               Select a single element to edit its properties. Click an element in the preview or use
               the timeline layer panel.
             </p>
           </>
         ) : (
           <>
-            <Eye size={18} className="mb-3 text-neutral-600" />
-            <p className="text-sm font-medium text-neutral-200">
+            <Eye size={18} className="mb-3 text-text-tertiary" />
+            <p className="text-sm font-medium text-text-primary">
               Select an element in the preview.
             </p>
-            <p className="mt-2 max-w-[260px] text-xs leading-5 text-neutral-500">
+            <p className="mt-2 max-w-[260px] text-xs leading-5 text-text-tertiary">
               The inspector is tuned for element edits with safer geometry controls, color picking,
               and cleaner grouped layer controls.
             </p>
diff --git a/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx b/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
index cf876562600..c4bd5fa9b99 100644
--- a/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
@@ -33,7 +33,7 @@ export function PropertyPanelFlatFooter({
           onAskAgent?.();
         }}
         disabled={!onAskAgent}
-        className="flex items-center gap-[7px] text-[11px] font-medium text-panel-text-2 disabled:cursor-not-allowed"
+        className="flex items-center gap-[7px] text-caption-2-medium text-panel-text-2 disabled:cursor-not-allowed"
       >
         <svg
           width="13"
diff --git a/packages/studio/src/components/editor/SnapToolbar.tsx b/packages/studio/src/components/editor/SnapToolbar.tsx
index 511f2901edc..8d5c72a2d55 100644
--- a/packages/studio/src/components/editor/SnapToolbar.tsx
+++ b/packages/studio/src/components/editor/SnapToolbar.tsx
@@ -214,7 +214,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
                     updatePrefs({ gridSpacing: val });
                   }
                 }}
-                className="w-16 rounded-sm bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-hidden focus:border-studio-accent"
+                className="w-16 rounded-sm bg-background-tertiary-default border border-border-button-default px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-hidden focus:border-border-button-active"
               />
             </label>
             <label className="flex items-center gap-2 text-xs text-white/80 cursor-pointer">
diff --git a/packages/studio/src/components/editor/Transform3DCube.tsx b/packages/studio/src/components/editor/Transform3DCube.tsx
index 335e4c1e751..db0cf28819c 100644
--- a/packages/studio/src/components/editor/Transform3DCube.tsx
+++ b/packages/studio/src/components/editor/Transform3DCube.tsx
@@ -183,7 +183,7 @@ export function Transform3DCube({
   };
 
   return (
-    <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-linear-to-b from-neutral-900 to-neutral-950">
+    <div className="relative overflow-hidden rounded-lg border border-border-button-default bg-linear-to-b from-neutral-900 to-neutral-950">
       <svg
         ref={svgRef}
         viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
@@ -294,7 +294,7 @@ export function Transform3DCube({
           onClick={onRecenter}
           title="Reset 3D orientation"
           aria-label="Reset 3D orientation"
-          className="absolute right-1.5 top-1.5 rounded-sm p-0.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
+          className="absolute right-1.5 top-1.5 rounded-sm p-0.5 text-text-tertiary hover:bg-background-primary-hover hover:text-text-primary"
         >
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <circle cx="12" cy="12" r="9" strokeWidth="2" />
@@ -313,8 +313,8 @@ export function Transform3DCube({
           }
           aria-label="Keyframe 3D transform"
           aria-pressed={keyframed}
-          className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
-            keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
+          className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-background-primary-hover ${
+            keyframed ? "text-accent-ink" : "text-text-tertiary hover:text-text-primary"
           }`}
         >
           <svg
diff --git a/packages/studio/src/components/editor/propertyPanel3dTransform.tsx b/packages/studio/src/components/editor/propertyPanel3dTransform.tsx
index 84cb344bd63..c326f784977 100644
--- a/packages/studio/src/components/editor/propertyPanel3dTransform.tsx
+++ b/packages/studio/src/components/editor/propertyPanel3dTransform.tsx
@@ -178,7 +178,7 @@ function Cube3dControl({
           onKeyframe={onKeyframe}
           keyframed={keyframed}
         />
-        <p className="mt-1 text-center text-[9px] leading-snug text-neutral-600">
+        <p className="mt-1 text-center text-[9px] leading-snug text-text-tertiary">
           Drag to tilt · Shift-drag to roll · Scroll for depth
         </p>
       </div>
@@ -318,12 +318,12 @@ export function PropertyPanel3dTransform({
   };
 
   return (
-    <div className="mt-3 border-t border-neutral-800/40 pt-3">
+    <div className="mt-3 border-t border-border-button-default pt-3">
       <button
         type="button"
         onClick={() => setCollapsed((v) => !v)}
         aria-expanded={!collapsed}
-        className="mb-2 flex w-full items-center justify-between text-[10px] font-medium uppercase tracking-wider text-neutral-600 hover:text-neutral-400 active:scale-[0.99]"
+        className="mb-2 flex w-full items-center justify-between text-[10px] font-medium uppercase tracking-wider text-text-tertiary hover:text-text-secondary active:scale-[0.99]"
       >
         <span>3D Transform</span>
         <svg
diff --git a/packages/studio/src/components/editor/propertyPanelColor.tsx b/packages/studio/src/components/editor/propertyPanelColor.tsx
index 6984e1aa8fe..7bd54bce852 100644
--- a/packages/studio/src/components/editor/propertyPanelColor.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColor.tsx
@@ -68,7 +68,7 @@ function ColorSlider({
     <div className="grid gap-1.5">
       <div className="flex items-center justify-between">
         <span className={LABEL}>{label}</span>
-        <span className="text-[10px] font-medium text-neutral-400">{displayValue}</span>
+        <span className="text-[10px] font-medium text-text-secondary">{displayValue}</span>
       </div>
       <div
         ref={trackRef}
@@ -79,7 +79,7 @@ function ColorSlider({
         aria-valuemax={max}
         aria-valuenow={value}
         aria-disabled={disabled}
-        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-hidden focus:border-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
+        className={`relative h-4 rounded-full border border-border-button-default shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-hidden focus:border-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
           disabled ? "cursor-not-allowed opacity-50" : "cursor-ew-resize"
         }`}
         style={{ background }}
@@ -328,16 +328,16 @@ export function ColorField({
           role="dialog"
           aria-label={`${label} color picker`}
           tabIndex={-1}
-          className="fixed z-9999 w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50 outline-hidden"
+          className="fixed z-9999 w-[292px] overflow-hidden rounded-2xl border border-border-button-default bg-background-tertiary-default shadow-2xl shadow-black/50 outline-hidden"
           style={{
             left: panelPosition?.left ?? -9999,
             top: panelPosition?.top ?? -9999,
           }}
         >
-          <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+          <div className="flex items-center justify-between border-b border-border-button-default px-3 py-2">
             <div className="min-w-0">
-              <div className="truncate text-[11px] font-medium text-neutral-100">{label}</div>
-              <div className="text-[9px] uppercase tracking-[0.16em] text-neutral-600">Color</div>
+              <div className="truncate text-caption-2-medium text-text-primary">{label}</div>
+              <div className="text-[9px] uppercase tracking-[0.16em] text-text-tertiary">Color</div>
             </div>
             <button
               type="button"
@@ -345,7 +345,7 @@ export function ColorField({
                 settleColorGesture();
                 setOpen(false);
               }}
-              className="flex h-7 w-7 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+              className="flex h-7 w-7 items-center justify-center rounded-lg text-text-tertiary transition-colors hover:bg-background-primary-hover hover:text-text-primary"
               aria-label="Close color picker"
             >
               <X size={13} />
@@ -353,7 +353,7 @@ export function ColorField({
           </div>
           <div className="space-y-3 p-3">
             <div
-              className="relative h-36 cursor-crosshair overflow-hidden rounded-xl border border-neutral-700 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
+              className="relative h-36 cursor-crosshair overflow-hidden rounded-xl border border-border-button-default shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
               style={{ backgroundColor: hueColor }}
               onPointerDown={(event) => {
                 beginColorGesture();
@@ -389,14 +389,14 @@ export function ColorField({
 
             <div className="flex min-w-0 items-center gap-3">
               <div
-                className="h-9 w-9 shrink-0 rounded-xl border border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
+                className="h-9 w-9 shrink-0 rounded-xl border border-border-button-default shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
                 style={{ backgroundColor: currentColor }}
               />
               <div className="min-w-0 flex-1">
-                <div className="truncate text-[11px] font-medium text-neutral-100">
+                <div className="truncate text-caption-2-medium text-text-primary">
                   {currentColor}
                 </div>
-                <div className="mt-0.5 text-[9px] text-neutral-600">
+                <div className="mt-0.5 text-[9px] text-text-tertiary">
                   S {saturationPercent}% · B {brightnessPercent}% · A {alphaPercent}%
                 </div>
               </div>
@@ -442,7 +442,7 @@ export function ColorField({
                 value={hexDraft}
                 onChange={(event) => handleHexChange(event.target.value)}
                 onBlur={settleColorGesture}
-                className={`${FIELD} h-10 w-full text-[11px] font-medium outline-hidden`}
+                className={`${FIELD} h-10 w-full text-caption-2-medium outline-hidden`}
                 spellCheck={false}
               />
             </label>
@@ -464,7 +464,7 @@ export function ColorField({
   if (flat) {
     return (
       <div className="flex min-h-[30px] items-center justify-between">
-        <span className="text-[11px] text-panel-text-2">{label}</span>
+        <span className="text-caption-2-regular text-panel-text-2">{label}</span>
         <button
           type="button"
           data-flat-color-trigger="true"
@@ -478,7 +478,7 @@ export function ColorField({
             className="h-4 w-4 shrink-0 rounded-[4px]"
             style={{ backgroundColor: open ? currentColor : value || "transparent" }}
           />
-          <span className="font-mono text-[11px] text-panel-text-0">
+          <span className="font-mono text-caption-2-regular text-panel-text-0">
             {open ? currentColor : value}
           </span>
           {mixed && (
@@ -516,13 +516,13 @@ export function ColorField({
         aria-label={`Pick ${label.toLowerCase()} color`}
         ref={buttonRef}
         onClick={openPicker}
-        className={`${FIELD} flex items-center gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed ${open ? "border-neutral-600" : ""}`}
+        className={`${FIELD} flex items-center gap-3 text-left hover:border-border-button-hover disabled:cursor-not-allowed ${open ? "border-border-button-default" : ""}`}
       >
         <div
-          className="relative h-7 w-7 shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+          className="relative h-7 w-7 shrink-0 overflow-hidden rounded-lg border border-border-button-default bg-background-tertiary-default shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
           style={{ backgroundColor: value || "transparent" }}
         />
-        <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100">
+        <span className="min-w-0 flex-1 truncate text-caption-2-medium text-text-primary">
           {value}
         </span>
         {mixed && (
diff --git a/packages/studio/src/components/editor/propertyPanelColorGradingControls.tsx b/packages/studio/src/components/editor/propertyPanelColorGradingControls.tsx
index 94ee565af89..5b813dc03c5 100644
--- a/packages/studio/src/components/editor/propertyPanelColorGradingControls.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColorGradingControls.tsx
@@ -328,7 +328,7 @@ export function ColorGradingControls({
         <select
           value={String(grading.preset ?? "neutral")}
           onChange={(event) => applyPreset(event.target.value)}
-          className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden"
+          className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-caption-2-medium text-panel-text-1 outline-hidden"
         >
           {HF_COLOR_GRADING_PRESETS.map((preset) => (
             <option key={preset.id} value={preset.id}>
@@ -353,7 +353,7 @@ export function ColorGradingControls({
       <div className="min-w-0 rounded-md border border-panel-border/70 bg-panel-input/15">
         <button
           type="button"
-          className="flex h-8 w-full min-w-0 items-center gap-1.5 px-2 text-left text-[11px] font-medium text-panel-text-3 transition-colors hover:bg-panel-hover/60 hover:text-panel-text-1"
+          className="flex h-8 w-full min-w-0 items-center gap-1.5 px-2 text-left text-caption-2-medium text-panel-text-3 transition-colors hover:bg-panel-hover/60 hover:text-panel-text-1"
           onClick={() => setLutOpen((value) => !value)}
           aria-expanded={lutOpen}
         >
@@ -378,7 +378,7 @@ export function ColorGradingControls({
                     nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,
                   );
                 }}
-                className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden"
+                className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-caption-2-medium text-panel-text-1 outline-hidden"
                 title="Uploaded .cube LUT"
               >
                 <option value="">None</option>
diff --git a/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
index bb44f6edc20..a97370997cf 100644
--- a/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
@@ -44,7 +44,7 @@ function HdrMediaWarning({ metadata }: { metadata: MediaMetadata | null }) {
     .join(" · ");
 
   return (
-    <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-warning-ink">
+    <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-caption-2-regular leading-4 text-warning-ink">
       <div className="mb-1 flex min-w-0 items-center justify-between gap-2">
         <span className="font-semibold">{metadata.color.label} source</span>
         <span className="rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink">
@@ -218,7 +218,7 @@ export function ColorGradingSection({
               setApplyScope(event.currentTarget.value as typeof applyScope);
             }}
             disabled={applyBusy}
-            className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-caption-2-medium text-panel-text-1 outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
             title="Choose where to copy these color grading settings"
           >
             <option value="source-file">Current file media</option>
@@ -232,7 +232,7 @@ export function ColorGradingSection({
               track("button", "Apply color grading scope");
               void applyToScope();
             }}
-            className="h-8 rounded-md bg-panel-input px-3 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
+            className="h-8 rounded-md bg-panel-input px-3 text-caption-2-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
             title="Copy these color grading settings to the selected scope"
           >
             {applyBusy ? "Applying" : "Apply"}
diff --git a/packages/studio/src/components/editor/propertyPanelColorScopes.tsx b/packages/studio/src/components/editor/propertyPanelColorScopes.tsx
index 7d2298a579b..05f7caa884d 100644
--- a/packages/studio/src/components/editor/propertyPanelColorScopes.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColorScopes.tsx
@@ -207,7 +207,7 @@ export function PropertyPanelColorScopes({
           onClick={() => setOpen((value) => !value)}
           className="flex min-h-7 flex-1 items-center justify-between text-left"
         >
-          <span className="text-[11px] text-panel-text-2">Scopes</span>
+          <span className="text-caption-2-regular text-panel-text-2">Scopes</span>
           <span className="text-[9px] text-panel-text-5">{open ? status : "Off"}</span>
         </button>
         <span className="flex items-center gap-2">
diff --git a/packages/studio/src/components/editor/propertyPanelCommitField.tsx b/packages/studio/src/components/editor/propertyPanelCommitField.tsx
index feda8fdea0b..9537331ef09 100644
--- a/packages/studio/src/components/editor/propertyPanelCommitField.tsx
+++ b/packages/studio/src/components/editor/propertyPanelCommitField.tsx
@@ -213,7 +213,7 @@ export function CommitField({
       }}
       onKeyDown={handleKeyDown}
       title={parseNumericToken(value) ? "Scroll or use Arrow keys to adjust" : undefined}
-      className={`min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600 ${
+      className={`min-w-0 w-full bg-transparent text-caption-2-medium text-text-primary outline-hidden disabled:cursor-not-allowed disabled:text-text-tertiary ${
         align === "right" ? "text-right" : "text-left"
       }`}
     />
diff --git a/packages/studio/src/components/editor/propertyPanelFill.tsx b/packages/studio/src/components/editor/propertyPanelFill.tsx
index eb7c9da6cfe..9c4bf5ce93c 100644
--- a/packages/studio/src/components/editor/propertyPanelFill.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFill.tsx
@@ -150,10 +150,10 @@ export function ImageFillField({
             type="button"
             disabled={disabled || uploading}
             onClick={() => fileInputRef.current?.click()}
-            className={`inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${
+            className={`inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-caption-2-medium text-text-primary transition-colors ${
               disabled || uploading
-                ? "cursor-not-allowed text-neutral-600"
-                : "cursor-pointer hover:border-neutral-600 hover:text-text-0"
+                ? "cursor-not-allowed text-text-tertiary"
+                : "cursor-pointer hover:border-border-button-hover hover:text-text-0"
             }`}
           >
             <Plus size={12} className="shrink-0" />
@@ -180,11 +180,11 @@ export function ImageFillField({
         {imageAssets.length > 0 ? (
           <div className="space-y-3">
             {selectedAsset && (
-              <div className="overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80">
+              <div className="overflow-hidden rounded-xl border border-border-button-default bg-background-tertiary-default">
                 <img
                   src={buildProjectApiPath(projectId, `/preview/${encodeUrlPath(selectedAsset)}`)}
                   alt={selectedAsset.split("/").pop() ?? selectedAsset}
-                  className="h-28 w-full object-contain bg-neutral-950/80"
+                  className="h-28 w-full object-contain bg-background-tertiary-default"
                 />
               </div>
             )}
@@ -201,7 +201,7 @@ export function ImageFillField({
                   }
                   commitImage(toProjectRootAssetPath(next), true);
                 }}
-                className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
+                className="min-w-0 w-full appearance-none bg-transparent text-caption-2-medium text-text-primary outline-hidden disabled:cursor-not-allowed disabled:text-text-tertiary"
               >
                 <option value="" disabled={isImage}>
                   None
@@ -215,7 +215,7 @@ export function ImageFillField({
             </div>
           </div>
         ) : (
-          <div className="rounded-xl border border-dashed border-neutral-800 bg-neutral-900/50 px-3 py-3 text-[11px] leading-5 text-neutral-500">
+          <div className="rounded-xl border border-dashed border-border-button-default bg-background-tertiary-default px-3 py-3 text-caption-2-regular leading-5 text-text-tertiary">
             No image assets yet. Upload one here and Studio will also add it to the Assets tab.
           </div>
         )}
@@ -285,7 +285,7 @@ export function GradientField({
       <div className={`${FIELD} space-y-3 p-3`}>
         <div
           ref={previewRef}
-          className="relative h-11 overflow-hidden rounded-lg border border-neutral-700"
+          className="relative h-11 overflow-hidden rounded-lg border border-border-button-default"
           style={previewStyle}
           onClick={(event) => {
             if (disabled) return;
@@ -355,7 +355,7 @@ export function GradientField({
               { label: "Conic", value: "conic" },
             ]}
           />
-          <label className="flex items-center gap-2 text-[11px] font-medium text-neutral-400">
+          <label className="flex items-center gap-2 text-caption-2-medium text-text-secondary">
             <input
               type="checkbox"
               checked={parsed.repeating}
@@ -364,7 +364,7 @@ export function GradientField({
                 track("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               }}
-              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-accent-ink focus:ring-panel-accent"
+              className="h-4 w-4 rounded-sm border-border-button-default bg-background-tertiary-default text-accent-ink focus:ring-panel-accent"
             />
             Repeat
           </label>
@@ -381,7 +381,7 @@ export function GradientField({
                 })),
               });
             }}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-caption-2-medium text-text-primary transition-colors hover:border-border-button-hover hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-tertiary"
           >
             <ReverseGradientIcon size={16} />
             Reverse
@@ -466,7 +466,7 @@ export function GradientField({
             disabled={disabled || parsed.stops.length >= 6}
             onClick={() => addStop()}
             title={parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop"}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-caption-2-medium text-text-primary transition-colors hover:border-border-button-hover hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-text-tertiary"
           >
             <Plus size={12} />
             Add stop
@@ -498,7 +498,7 @@ export function GradientField({
                 type="button"
                 disabled={disabled || parsed.stops.length <= 2}
                 onClick={() => removeStop(index)}
-                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off"
+                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-border-button-default bg-background-tertiary-default text-text-secondary transition-colors hover:border-border-button-hover hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off"
                 aria-label={`Remove stop ${index + 1}`}
               >
                 <X size={12} />
diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
index 419a547c739..9a5fe02ac28 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
@@ -380,7 +380,7 @@ export function FlatColorGradingSection({
           onClick={() => setLutOpen((v) => !v)}
           className="flex min-h-[30px] w-full items-center justify-between text-left"
         >
-          <span className="text-[11px] text-panel-text-2">Custom LUT</span>
+          <span className="text-caption-2-regular text-panel-text-2">Custom LUT</span>
           <svg
             width="10"
             height="10"
@@ -492,7 +492,7 @@ export function FlatColorGradingSection({
 
       {onApplyScopeAvailable && (
         <div className="flex items-center justify-between gap-2 border-t border-panel-hairline pt-1.5">
-          <span className="flex items-center gap-1.5 text-[11px] text-panel-text-2">
+          <span className="flex items-center gap-1.5 text-caption-2-regular text-panel-text-2">
             Copy grade to
             <select
               aria-label="Copy grade to"
@@ -502,7 +502,7 @@ export function FlatColorGradingSection({
                 onSetApplyScope(e.target.value as "source-file" | "project");
               }}
               disabled={applyBusy}
-              className="border-b border-panel-border-input/50 bg-transparent font-mono text-[11px] text-panel-text-0 outline-hidden hover:border-panel-border-input disabled:opacity-50"
+              className="border-b border-panel-border-input/50 bg-transparent font-mono text-caption-2-regular text-panel-text-0 outline-hidden hover:border-panel-border-input disabled:opacity-50"
             >
               <option value="source-file">Current file media</option>
               <option value="project">All project media</option>
@@ -516,7 +516,7 @@ export function FlatColorGradingSection({
               track("button", "Apply grade to scope");
               onApplyToScope();
             }}
-            className="text-[11px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50"
+            className="text-caption-2-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {applyBusy ? "Applying" : "Apply"}
           </button>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx
index 41fff64c6fd..56ea5ecc6ae 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx
@@ -193,7 +193,7 @@ export function FlatEffectsSection({
         ) : (
           <>
             <div className="flex items-center justify-between">
-              <span className="text-[11px] text-panel-text-3">Custom palette</span>
+              <span className="text-caption-2-regular text-panel-text-3">Custom palette</span>
               <button
                 type="button"
                 title="Use default palette"
@@ -291,9 +291,7 @@ export function FlatEffectsSection({
           className="space-y-1 border-l-2 border-panel-border-input pl-2.5"
         >
           <div className="flex min-h-[26px] items-center justify-between gap-2">
-            <span className="text-[11px] font-medium text-panel-text-1">
-              {selectedEffect.label}
-            </span>
+            <span className="text-caption-2-medium text-panel-text-1">{selectedEffect.label}</span>
             <span className="flex items-center gap-2">
               <button
                 type="button"
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
index f4f149bb112..02ef0c9c09a 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
@@ -166,7 +166,7 @@ export function FlatMediaSection({
       <div className="flex min-h-8 items-center justify-between gap-2">
         <span className="flex min-w-0 items-center gap-2">
           <span className="h-5 w-8 shrink-0 rounded-[3px] bg-panel-surface" />
-          <span className="min-w-0 truncate font-mono text-[11px] text-panel-text-0">
+          <span className="min-w-0 truncate font-mono text-caption-2-regular text-panel-text-0">
             {srcAttr}
           </span>
         </span>
@@ -190,7 +190,7 @@ export function FlatMediaSection({
         <div className="ml-px border-l-2 border-panel-border-input py-1 pl-[10px]">
           <div className="flex min-h-6 items-center justify-between">
             <span className="flex items-baseline gap-[7px]">
-              <span className="text-[11px] font-semibold text-panel-text-1">Cutout</span>
+              <span className="text-caption-2-semibold text-panel-text-1">Cutout</span>
               <span className="font-mono text-[9px] text-panel-text-4">
                 transparent {isVideo ? "WebM" : "PNG"}
               </span>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
index 6fefd85e4bf..92442136425 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
@@ -81,7 +81,7 @@ export function FlatTimingRow({
   const cell = (label: string, value: string, onCommit: (next: string) => void) => (
     <div className="grid gap-px">
       <span className="text-[9px] text-panel-text-4">{label}</span>
-      <span className="border-b border-panel-border-input/50 font-mono text-[11px] text-panel-text-0 hover:border-panel-border-input">
+      <span className="border-b border-panel-border-input/50 font-mono text-caption-2-regular text-panel-text-0 hover:border-panel-border-input">
         <CommitField
           value={value}
           onCommit={(next) => {
@@ -148,13 +148,13 @@ export function FlatMotionSection({
       {showEffects && (
         <>
           {multipleTimelines && (
-            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
+            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-caption-2-regular leading-relaxed text-warning-ink">
               This file has multiple GSAP timelines. Animation editing is disabled to prevent data
               loss. Consolidate into a single timeline to enable editing.
             </p>
           )}
           {unsupportedTimelinePattern && (
-            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
+            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-caption-2-regular leading-relaxed text-warning-ink">
               This timeline uses a computed key the editor can&apos;t resolve statically.
             </p>
           )}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index b93ca69fe6d..9e10c4640b0 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -45,11 +45,11 @@ export function FlatRow({
   const track = useTrackDesignInput();
   return (
     <div className="group flex min-h-[30px] items-center justify-between gap-3" title={tooltip}>
-      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
+      <span className={`text-caption-2-regular ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
       <span className="flex min-w-0 shrink-0 items-center gap-1.5">
         <span
           data-flat-row-value="true"
-          className={`min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${
+          className={`min-w-0 border-b pb-px font-mono text-caption-2-regular ${VALUE_TIER_VALUE_CLASS[tier]} ${
             tier === "explicitCustom"
               ? "border-panel-accent/30 group-hover:border-panel-accent/70"
               : "border-panel-border-input/50 group-hover:border-panel-border-input"
@@ -130,7 +130,7 @@ export function FlatSegmentedRow({
   const track = useTrackDesignInput();
   return (
     <div className="flex min-h-[32px] items-center justify-between">
-      <span className="text-[11px] text-panel-text-3">{label}</span>
+      <span className="text-caption-2-regular text-panel-text-3">{label}</span>
       <span className="flex items-center gap-0.5">
         {options.map((option, index) => (
           <span key={option.key} className="flex items-center">
@@ -144,7 +144,7 @@ export function FlatSegmentedRow({
                 if (!option.active) track("segmented", label);
                 onChange(option.key);
               }}
-              className={`px-1.5 py-1 text-[11px] transition-colors disabled:cursor-not-allowed ${
+              className={`px-1.5 py-1 text-caption-2-regular transition-colors disabled:cursor-not-allowed ${
                 option.active
                   ? "border-b-2 border-panel-accent text-panel-text-0"
                   : "border-b-2 border-transparent text-panel-text-4 hover:text-panel-text-2"
@@ -203,7 +203,7 @@ export function FlatGroupHeader({
         className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 w-full shrink-0 items-center justify-between gap-2 border-b border-panel-hairline bg-panel-bg px-4 text-left`}
       >
         <span className="flex min-w-0 items-center gap-2">
-          <span className="text-[12px] font-medium text-panel-text-2">{title}</span>
+          <span className="text-caption-1-medium text-panel-text-2">{title}</span>
           {summary && (
             <span className="min-w-0 truncate font-mono text-[9px] text-panel-text-4">
               {summary}
@@ -227,7 +227,7 @@ export function FlatGroupHeader({
     <div
       className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 shrink-0 items-center justify-between bg-panel-bg px-4`}
     >
-      <span className="text-[12px] font-semibold text-panel-text-0">{title}</span>
+      <span className="text-caption-1-semibold text-panel-text-0">{title}</span>
       <span className="flex items-center gap-2.5 text-panel-text-5">
         {accessory}
         <button type="button" onClick={onToggleOpen} title="Collapse" className="text-panel-text-3">
@@ -422,7 +422,7 @@ export function FlatSlider({
 
   return (
     <div className="flex min-h-[28px] items-center gap-2.5">
-      <span className="w-[86px] shrink-0 text-[11px] text-panel-text-3">{label}</span>
+      <span className="w-[86px] shrink-0 text-caption-2-regular text-panel-text-3">{label}</span>
       <div
         data-flat-slider-track="true"
         role="slider"
diff --git a/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
index 604210ec0ed..d725eac8015 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
@@ -51,7 +51,7 @@ export function FlatSelectRow({
       : normalizedOptions;
   return (
     <div className="group flex min-h-[30px] items-center justify-between">
-      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
+      <span className={`text-caption-2-regular ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
       <span className="flex items-center gap-2">
         <label
           className={`flex items-center gap-1.5 border-b pb-px ${
@@ -68,7 +68,7 @@ export function FlatSelectRow({
               track("select", trackName);
               onChange(e.target.value);
             }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
+            className={`appearance-none bg-transparent text-right font-mono text-caption-2-regular outline-hidden disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
             {renderedOptions.map((option) => (
               <option key={option.value} value={option.value}>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
index 0a4bb8f3ae7..d182aa86d6d 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
@@ -122,7 +122,7 @@ function FlatTextFieldEditor({
               track("select", "Weight");
               onSetTextFieldStyle(field.key, "font-weight", e.target.value);
             }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden ${
+            className={`appearance-none bg-transparent text-right font-mono text-caption-2-regular outline-hidden ${
               VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
             }`}
           >
@@ -393,7 +393,7 @@ export function FlatTextLayerList({
                 className="h-3 w-3 shrink-0 rounded-xs"
                 style={{ backgroundColor: getTextFieldColor(field, styles) }}
               />
-              <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
+              <span className="min-w-0 flex-1 truncate text-caption-2-regular text-panel-text-1">
                 {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
               </span>
               <span className="shrink-0 font-mono text-[9px] text-panel-text-4">
diff --git a/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx b/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx
index 9f739f53dcd..53b542baf41 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx
@@ -22,7 +22,7 @@ export function FlatToggle({
     <div className="flex min-h-[30px] items-center justify-between">
       <span
         data-flat-toggle-label="true"
-        className={`text-[11px] ${checked ? "text-panel-text-2" : "text-panel-text-3"}`}
+        className={`text-caption-2-regular ${checked ? "text-panel-text-2" : "text-panel-text-3"}`}
       >
         {label}
       </span>
diff --git a/packages/studio/src/components/editor/propertyPanelFont.tsx b/packages/studio/src/components/editor/propertyPanelFont.tsx
index 16c8ae77da8..2b42c0d8407 100644
--- a/packages/studio/src/components/editor/propertyPanelFont.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFont.tsx
@@ -409,8 +409,8 @@ export function FontFamilyField({
   };
 
   const dropdown = open && (
-    <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
-      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
+    <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-border-button-default bg-background-tertiary-default shadow-2xl">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-border-button-default p-2">
         <input
           ref={inputRef}
           type="text"
@@ -450,14 +450,14 @@ export function FontFamilyField({
           role="combobox"
           aria-expanded={open}
           aria-autocomplete="list"
-          className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-hidden placeholder:text-neutral-600 focus:border-neutral-600"
+          className="min-w-0 rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 py-2 text-caption-2-medium text-text-primary outline-hidden placeholder:text-text-tertiary focus:border-border-button-active"
         />
         {canQueryLocalFonts && (
           <button
             type="button"
             disabled={disabled || loadingLocalFonts}
             onClick={loadBrowserLocalFonts}
-            className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off"
+            className="rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-[10px] font-medium text-text-secondary transition-colors hover:border-border-button-hover hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-off"
           >
             {loadingLocalFonts ? "..." : "Local"}
           </button>
@@ -466,7 +466,7 @@ export function FontFamilyField({
           type="button"
           disabled={disabled || importingFonts || !onImportFonts}
           onClick={() => fontInputRef.current?.click()}
-          className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off"
+          className="rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-[10px] font-medium text-text-secondary transition-colors hover:border-border-button-hover hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-off"
         >
           {importingFonts ? "..." : "Import"}
         </button>
@@ -485,13 +485,13 @@ export function FontFamilyField({
         />
       </div>
       {fontNotice && (
-        <div className="border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500">
+        <div className="border-b border-border-button-default px-3 py-2 text-[10px] leading-4 text-text-tertiary">
           {fontNotice}
         </div>
       )}
       <div className="max-h-64 overflow-y-auto p-1">
         {filteredOptions.length === 0 ? (
-          <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
+          <div className="px-2 py-3 text-caption-2-regular text-text-tertiary">No fonts found.</div>
         ) : (
           filteredOptions.map((option, index) => (
             <button
@@ -499,12 +499,12 @@ export function FontFamilyField({
               type="button"
               data-font-option-index={index}
               onClick={() => commitFamily(option)}
-              className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
+              className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-caption-2-regular transition-colors ${
                 index === activeIndex
-                  ? "bg-neutral-800 text-neutral-50"
+                  ? "bg-background-tertiary-default text-text-primary"
                   : option.family === currentFamily
-                    ? "bg-studio-accent/15 text-neutral-50"
-                    : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
+                    ? "bg-studio-accent/15 text-text-primary"
+                    : "text-text-primary hover:bg-background-primary-hover hover:text-text-primary"
               }`}
             >
               <span className="flex min-w-0 items-center gap-1.5">
@@ -512,12 +512,12 @@ export function FontFamilyField({
                   {option.family}
                 </span>
                 {renderAliasFor(option.family) && (
-                  <span className="shrink-0 text-[9px] text-neutral-500">
+                  <span className="shrink-0 text-[9px] text-text-tertiary">
                     → {renderAliasFor(option.family)}
                   </span>
                 )}
               </span>
-              <span className="shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
+              <span className="shrink-0 text-[9px] uppercase tracking-[0.14em] text-text-tertiary">
                 {option.source}
               </span>
             </button>
@@ -530,7 +530,7 @@ export function FontFamilyField({
   if (flat) {
     return (
       <div ref={containerRef} className="relative flex min-h-[30px] items-center justify-between">
-        <span className="text-[11px] text-panel-text-2">Font</span>
+        <span className="text-caption-2-regular text-panel-text-2">Font</span>
         <button
           type="button"
           data-flat-font-trigger="true"
@@ -539,7 +539,7 @@ export function FontFamilyField({
           className="flex items-center gap-1.5 disabled:cursor-not-allowed"
         >
           <span
-            className="max-w-[200px] truncate font-mono text-[11px] text-panel-text-0"
+            className="max-w-[200px] truncate font-mono text-caption-2-regular text-panel-text-0"
             style={{ fontFamily: value }}
           >
             {currentFamily}
@@ -566,15 +566,15 @@ export function FontFamilyField({
         type="button"
         disabled={disabled}
         onClick={() => setOpen((next) => !next)}
-        className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`}
+        className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-border-button-hover disabled:cursor-not-allowed`}
       >
         <span
-          className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100"
+          className="min-w-0 flex-1 truncate text-caption-2-medium text-text-primary"
           style={{ fontFamily: value }}
         >
           {currentFamily}
         </span>
-        <span className="shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
+        <span className="shrink-0 text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
           Font
         </span>
       </button>
diff --git a/packages/studio/src/components/editor/propertyPanelFxEqModule.tsx b/packages/studio/src/components/editor/propertyPanelFxEqModule.tsx
index d76aa0d26b4..9b24350f077 100644
--- a/packages/studio/src/components/editor/propertyPanelFxEqModule.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFxEqModule.tsx
@@ -151,7 +151,7 @@ export function FxEqModule({
       <div className="hf-fx-node-head flex items-center gap-1.5 px-1.5 py-1">
         <button
           type="button"
-          className={`hf-fx-node-name flex-1 text-left text-[11px] text-panel-text-0 ${FX_FAMILY_TYPE.smart}`}
+          className={`hf-fx-node-name flex-1 text-left text-caption-2-regular text-panel-text-0 ${FX_FAMILY_TYPE.smart}`}
           aria-expanded={open}
           onClick={onToggleOpen}
         >
@@ -160,7 +160,7 @@ export function FxEqModule({
         <span className="font-mono text-[9px] text-panel-text-2">{bands.length}-band</span>
         <button
           type="button"
-          className="hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-danger-ink"
+          className="hf-fx-remove px-1 text-caption-2-regular text-panel-text-2 hover:text-danger-ink"
           aria-label="Remove Tone"
           disabled={disabled}
           onClick={onRemove}
@@ -190,7 +190,7 @@ export function FxEqModule({
       ) : (
         // Closed, it reads like every other module: a sentence about the sound
         // rather than a list of values.
-        <p className="hf-fx-eq-summary px-2 pb-1.5 text-[11px] text-panel-text-2">
+        <p className="hf-fx-eq-summary px-2 pb-1.5 text-caption-2-regular text-panel-text-2">
           {audioEqSummary(bands)}
         </p>
       )}
diff --git a/packages/studio/src/components/editor/propertyPanelFxNodeRow.tsx b/packages/studio/src/components/editor/propertyPanelFxNodeRow.tsx
index 7d5a960dd2d..518b835aebd 100644
--- a/packages/studio/src/components/editor/propertyPanelFxNodeRow.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFxNodeRow.tsx
@@ -184,7 +184,7 @@ function FxNodeHeader({
       ) : null}
       <button
         type="button"
-        className={`hf-fx-node-name flex-1 truncate text-left text-[11px] text-panel-text-1 hover:text-panel-text-0 ${family}`}
+        className={`hf-fx-node-name flex-1 truncate text-left text-caption-2-regular text-panel-text-1 hover:text-panel-text-0 ${family}`}
         // Truncated in the same narrow column as the param labels below, so it
         // needs the same fallback to the full text on hover.
         title={label}
@@ -217,7 +217,7 @@ function FxNodeHeader({
       />
       <button
         type="button"
-        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
+        className="hf-fx-remove px-1 font-mono text-caption-2-regular text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
         title="Remove"
         disabled={disabled}
         onClick={onRemove}
diff --git a/packages/studio/src/components/editor/propertyPanelFxPresetRun.tsx b/packages/studio/src/components/editor/propertyPanelFxPresetRun.tsx
index deddff5b2ab..85ec92b51a2 100644
--- a/packages/studio/src/components/editor/propertyPanelFxPresetRun.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFxPresetRun.tsx
@@ -194,7 +194,7 @@ export function FxPresetRun({
         </button>
         <button
           type="button"
-          className="hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
+          className="hf-fx-preset-run-remove px-1 font-mono text-caption-2-regular text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
           title={`Remove ${preset.label}`}
           disabled={disabled}
           onClick={onRemoveRun}
diff --git a/packages/studio/src/components/editor/propertyPanelFxRackChain.tsx b/packages/studio/src/components/editor/propertyPanelFxRackChain.tsx
index 428afe96c3c..a8856e12d3e 100644
--- a/packages/studio/src/components/editor/propertyPanelFxRackChain.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFxRackChain.tsx
@@ -155,7 +155,7 @@ export function FxRackChain({
         />
       ))}
       {handBuiltCount === 0 && eqIds.length === 0 ? (
-        <p className="hf-fx-empty py-1 text-[11px] text-panel-text-2">
+        <p className="hf-fx-empty py-1 text-caption-2-regular text-panel-text-2">
           {showCarve
             ? `No other effects on this ${signalPath.subject}.`
             : `No effects on this ${signalPath.subject}.`}
diff --git a/packages/studio/src/components/editor/propertyPanelFxSection.tsx b/packages/studio/src/components/editor/propertyPanelFxSection.tsx
index 94412b210ea..8f8a9b76f79 100644
--- a/packages/studio/src/components/editor/propertyPanelFxSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFxSection.tsx
@@ -560,7 +560,7 @@ export function FxSection({
       <div className="flex flex-col gap-1">
         <button
           type="button"
-          className="hf-fx-preset w-full rounded-[4px] border border-panel-text-0 py-1.5 text-[11px] font-semibold text-panel-text-0 disabled:opacity-40"
+          className="hf-fx-preset w-full rounded-[4px] border border-panel-text-0 py-1.5 text-caption-2-semibold text-panel-text-0 disabled:opacity-40"
           aria-expanded={picking}
           disabled={disabled}
           onClick={() => {
diff --git a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
index dc0a66250fa..f9ad6502061 100644
--- a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
@@ -144,7 +144,7 @@ export function MediaSection({
         {srcAttr && (
           <div className="min-w-0">
             <div className="flex items-center justify-between gap-2">
-              <div className="text-[11px] font-medium text-neutral-500">Source</div>
+              <div className="text-caption-2-medium text-text-tertiary">Source</div>
               <button
                 type="button"
                 onClick={() => {
@@ -153,14 +153,14 @@ export function MediaSection({
                     setTimeout(() => setCopied(false), 1500);
                   });
                 }}
-                className="flex h-6 items-center gap-1 rounded-lg border border-neutral-700 bg-neutral-950 px-2 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-200"
+                className="flex h-6 items-center gap-1 rounded-lg border border-border-button-default bg-background-tertiary-default px-2 text-[10px] font-medium text-text-secondary transition-colors hover:border-border-button-hover hover:text-text-primary"
               >
                 {copied ? <Check size={11} /> : <ClipboardList size={11} />}
                 <span>{copied ? "Copied" : "Copy"}</span>
               </button>
             </div>
             <div
-              className="mt-1 truncate text-[11px] font-medium text-neutral-300"
+              className="mt-1 truncate text-caption-2-medium text-text-primary"
               title={absoluteSrc}
             >
               {absoluteSrc}
@@ -184,7 +184,7 @@ export function MediaSection({
                   event.stopPropagation();
                   void runBackgroundRemoval();
                 }}
-                className="flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-caption-2-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
                 title={
                   canRemoveBackground
                     ? "Remove background and save a transparent asset"
diff --git a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
index 591e36c3fa7..11b1422199c 100644
--- a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
@@ -70,21 +70,21 @@ export function MetricField({
     scrub && !disabled
       ? ({
           className:
-            "shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
+            "shrink-0 text-caption-2-medium text-text-tertiary cursor-ew-resize select-none",
           onPointerDown: handleScrubPointerDown,
           onPointerMove: handleScrubPointerMove,
           onPointerUp: handleScrubPointerUp,
           onPointerCancel: handleScrubPointerUp,
           onLostPointerCapture: handleScrubPointerUp,
         } as const)
-      : ({ className: "shrink-0 text-[11px] font-medium text-neutral-500" } as const);
+      : ({ className: "shrink-0 text-caption-2-medium text-text-tertiary" } as const);
 
   return (
     <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
         <CommitField value={value} disabled={disabled} liveCommit={liveCommit} onCommit={commit} />
-        {suffix && <span className="shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
+        {suffix && <span className="shrink-0 text-[10px] text-text-tertiary">{suffix}</span>}
       </div>
     </div>
   );
@@ -196,7 +196,7 @@ export function SliderControl({
         // and the thumb 10px, only the pointer box grows.
         className="h-6 min-w-0 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-panel-border [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0C0C0E,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
       />
-      <div className="min-w-[44px] rounded-md bg-panel-input px-2 py-1.5 text-right text-[11px] font-medium text-panel-text-1 tabular-nums">
+      <div className="min-w-[44px] rounded-md bg-panel-input px-2 py-1.5 text-right text-caption-2-medium text-panel-text-1 tabular-nums">
         {formatDisplayValue?.(draft) ?? displayValue}
       </div>
     </div>
@@ -232,7 +232,7 @@ export function SegmentedControl({
             onChange(option.value);
           }}
           aria-pressed={option.value === value}
-          className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
+          className={`min-w-0 truncate rounded px-2 py-[5px] text-caption-2-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
               ? "bg-panel-hover text-text-0"
               : "text-panel-text-4 hover:text-panel-text-2"
@@ -262,7 +262,7 @@ export function SelectField({
   const renderedOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
     <label className={`${FIELD} flex items-center gap-3`}>
-      <span className="shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
+      <span className="shrink-0 text-caption-2-medium text-text-tertiary">{label}</span>
       <select
         value={value}
         disabled={disabled}
@@ -270,7 +270,7 @@ export function SelectField({
           track("select", label);
           onChange(e.target.value);
         }}
-        className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
+        className="min-w-0 w-full appearance-none bg-transparent text-caption-2-medium text-text-primary outline-hidden disabled:cursor-not-allowed disabled:text-text-tertiary"
       >
         {renderedOptions.map((option) => (
           <option key={option} value={option}>
@@ -321,7 +321,7 @@ export function Section({
             aria-expanded={!collapsed}
             className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
           >
-            <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
+            <h3 className="text-caption-1-semibold text-panel-text-1">{title}</h3>
             {collapseIcon}
           </button>
           {accessory && <div className="flex shrink-0 items-center">{accessory}</div>}
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index 4c95a26eaf2..88c11357e87 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -147,7 +147,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="field-sizing-content max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-hidden disabled:cursor-not-allowed disabled:text-panel-text-4"
+          className="field-sizing-content max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-caption-2-regular leading-normal text-panel-text-0 outline-hidden disabled:cursor-not-allowed disabled:text-panel-text-4"
         />
       </div>
     );
@@ -165,7 +165,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="field-sizing-content max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="field-sizing-content max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-caption-2-medium text-text-primary outline-hidden disabled:cursor-not-allowed disabled:text-text-tertiary"
         />
       </div>
     </label>
@@ -189,7 +189,7 @@ function FontWeightField({
   return (
     <div className={FIELD}>
       <div className="flex min-w-0 items-center gap-3">
-        <span className="shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
+        <span className="shrink-0 text-caption-2-medium text-text-tertiary">Weight</span>
         <select
           value={value}
           disabled={disabled}
@@ -197,7 +197,7 @@ function FontWeightField({
             track("select", "Weight");
             onCommit(e.target.value);
           }}
-          className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="min-w-0 w-full appearance-none bg-transparent text-caption-2-medium text-text-primary outline-hidden disabled:cursor-not-allowed disabled:text-text-tertiary"
         >
           {displayOptions.map((o) => (
             <option key={o} value={o}>
@@ -311,10 +311,10 @@ function TextFieldEditor({
     <div className="space-y-3">
       <div className={showRemove ? "flex min-w-0 items-center justify-between gap-2" : "min-w-0"}>
         <div className="min-w-0">
-          <div className="truncate text-[11px] font-medium text-neutral-100">
+          <div className="truncate text-caption-2-medium text-text-primary">
             {formatTextFieldPreview(field.value) || "Text"}
           </div>
-          <div className="text-[10px] text-neutral-500">{field.tagName}</div>
+          <div className="text-[10px] text-text-tertiary">{field.tagName}</div>
         </div>
         {showRemove && (
           <button
@@ -323,7 +323,7 @@ function TextFieldEditor({
               track("button", "Remove text field");
               onRemoveTextField(field.key);
             }}
-            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0"
+            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-caption-2-medium text-text-primary transition-colors hover:border-border-button-hover hover:text-text-0"
           >
             Remove
           </button>
@@ -474,7 +474,7 @@ export function TextSection({
                 if (nextKey) setActiveTextFieldKey(nextKey);
               });
             }}
-            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0"
+            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-border-button-default bg-background-tertiary-default px-2.5 text-caption-2-medium text-text-primary transition-colors hover:border-border-button-hover hover:text-text-0"
           >
             <Plus size={12} className="shrink-0" />
             <span className="truncate">Add text</span>
@@ -491,20 +491,20 @@ export function TextSection({
                 className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
                   active
                     ? "border-studio-accent/50 bg-studio-accent/10"
-                    : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
+                    : "border-border-button-default bg-background-tertiary-default hover:border-border-button-hover hover:bg-background-primary-hover"
                 }`}
               >
                 <div className="flex min-w-0 items-center justify-between gap-2">
                   <div className="flex min-w-0 items-center gap-2">
                     <span
-                      className="h-4 w-4 shrink-0 rounded-sm border border-neutral-700 bg-neutral-950"
+                      className="h-4 w-4 shrink-0 rounded-sm border border-border-button-default bg-background-tertiary-default"
                       style={{ backgroundColor: getTextFieldColor(field, styles) }}
                     />
-                    <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
+                    <span className="min-w-0 truncate text-caption-2-medium text-text-primary">
                       {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                     </span>
                   </div>
-                  <span className="shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
+                  <span className="shrink-0 rounded-md border border-border-button-default bg-background-tertiary-default px-1.5 py-0.5 text-[10px] text-text-tertiary">
                     {field.tagName}
                   </span>
                 </div>
diff --git a/packages/studio/src/components/editor/propertyPanelTimingSection.tsx b/packages/studio/src/components/editor/propertyPanelTimingSection.tsx
index f0448c6be51..81354b23b05 100644
--- a/packages/studio/src/components/editor/propertyPanelTimingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelTimingSection.tsx
@@ -83,7 +83,7 @@ export function TimingSection({
         />
       </div>
       {derived && (
-        <p className="mt-2 text-[10px] leading-snug text-neutral-500">
+        <p className="mt-2 text-[10px] leading-snug text-text-tertiary">
           Inferred from this element’s animation. Edit to pin an explicit clip range.
         </p>
       )}
diff --git a/packages/studio/src/components/feedback/StudioFeedbackCard.tsx b/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
index 9ed8f7ad482..6ea4498ef4a 100644
--- a/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
+++ b/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
@@ -217,7 +217,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
       >
         <div className="flex items-start gap-3">
           <p
-            className={`min-w-0 flex-1 text-[12px] leading-5 ${failed ? "text-danger-ink" : "text-text-0"}`}
+            className={`min-w-0 flex-1 text-caption-1-regular leading-5 ${failed ? "text-danger-ink" : "text-text-0"}`}
           >
             {step === "thanks" ? "Thanks, that helps." : title}
           </p>
@@ -231,7 +231,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                 close("sent");
               }}
-              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-border-strong bg-hover px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-text-muted hover:bg-press active:scale-[0.97] motion-reduce:transition-none"
+              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-border-strong bg-hover px-2.5 text-caption-2-regular leading-6 text-text-primary transition-[background-color,border-color,transform] duration-150 ease-out hover:border-text-muted hover:bg-press active:scale-[0.97] motion-reduce:transition-none"
             >
               Talk to us, 30 min
             </a>
@@ -239,7 +239,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
           <button
             type="button"
             onClick={() => close("close")}
-            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-press hover:text-neutral-200"
+            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-text-tertiary transition-colors duration-150 hover:bg-press hover:text-text-primary"
             aria-label="Dismiss"
           >
             <svg
@@ -258,7 +258,9 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
         {/* The failure text the user already saw, quoted back so the report
             carries it without asking them to retype the error. */}
         {failed && request.detail && step !== "thanks" && (
-          <p className="line-clamp-2 text-[11px] leading-4 text-danger-ink">{request.detail}</p>
+          <p className="line-clamp-2 text-caption-2-regular leading-4 text-danger-ink">
+            {request.detail}
+          </p>
         )}
 
         {step === "rating" && (
@@ -271,7 +273,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   key={n}
                   // A resting fill, so the row reads as eleven controls rather
                   // than as a line of text that happens to be clickable.
-                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-hover text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-press hover:text-neutral-100 active:scale-[0.97] has-checked:bg-text-0 has-checked:text-bg-0 has-focus-visible:ring-1 has-focus-visible:ring-ring motion-reduce:transition-none"
+                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-hover text-caption-2-regular tabular-nums text-text-secondary transition-[background-color,color,transform] duration-150 ease-out hover:bg-press hover:text-text-primary active:scale-[0.97] has-checked:bg-text-0 has-checked:text-bg-0 has-focus-visible:ring-1 has-focus-visible:ring-ring motion-reduce:transition-none"
                 >
                   <input
                     type="radio"
@@ -285,7 +287,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 </label>
               ))}
             </fieldset>
-            <div className="flex justify-between text-[10px] leading-none text-neutral-500">
+            <div className="flex justify-between text-[10px] leading-none text-text-tertiary">
               <span>Not likely</span>
               <span>Extremely likely</span>
             </div>
@@ -314,10 +316,10 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   // chip under the pointer is the one the hint line is talking
                   // about, so if you cannot tell which is hovered, the hint is
                   // attached to nothing.
-                  className={`h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
+                  className={`h-6 rounded-full border px-2.5 text-caption-2-regular transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
                     failed
                       ? "border-danger/30 bg-danger/10 text-danger-ink hover:border-danger/60 hover:bg-danger/20"
-                      : "border-border bg-hover text-neutral-300 hover:border-text-muted hover:bg-press hover:text-text-0"
+                      : "border-border bg-hover text-text-primary hover:border-text-muted hover:bg-press hover:text-text-0"
                   }`}
                 >
                   {preset.label}
@@ -328,7 +330,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 so a bubble above the chips lands on top of the question and a
                 bubble below lands on the input. One reserved line occludes
                 nothing and needs no hover delay to be readable. */}
-            <p className="h-3.5 truncate text-[10.5px] leading-[14px] text-neutral-500">
+            <p className="h-3.5 truncate text-[10.5px] leading-[14px] text-text-tertiary">
               {hint ?? "Tap one, or write your own."}
             </p>
             <div className="flex items-center gap-2">
@@ -343,12 +345,12 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 placeholder={followUp.placeholder}
                 aria-label={followUp.prompt}
                 maxLength={500}
-                className="h-7 min-w-0 flex-1 rounded-md border border-border bg-input px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-ring"
+                className="h-7 min-w-0 flex-1 rounded-md border border-border bg-input px-2 text-caption-2-regular text-text-primary outline-hidden transition-colors duration-150 placeholder:text-text-tertiary focus:border-ring"
               />
               <button
                 type="button"
                 onClick={() => submit()}
-                className="h-7 shrink-0 rounded-md bg-press px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-on active:scale-[0.97] motion-reduce:transition-none"
+                className="h-7 shrink-0 rounded-md bg-press px-2.5 text-caption-2-regular text-text-primary transition-[background-color,transform] duration-150 ease-out hover:bg-on active:scale-[0.97] motion-reduce:transition-none"
               >
                 Send
               </button>
diff --git a/packages/studio/src/components/icons/InspectorIcon.tsx b/packages/studio/src/components/icons/InspectorIcon.tsx
deleted file mode 100644
index e793694409a..00000000000
--- a/packages/studio/src/components/icons/InspectorIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export function InspectorIcon({ size = 16 }: { size?: number | string }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="1.5" y="2" width="13" height="12" rx="1.5" />
-      <path d="M4 6h8M6 4.5v3M4 10h8m-2-1.5v3" />
-    </svg>
-  );
-}
diff --git a/packages/studio/src/components/nle/AssetPreviewOverlay.tsx b/packages/studio/src/components/nle/AssetPreviewOverlay.tsx
index 3b1c35cbbf1..3b7ed6e8121 100644
--- a/packages/studio/src/components/nle/AssetPreviewOverlay.tsx
+++ b/packages/studio/src/components/nle/AssetPreviewOverlay.tsx
@@ -70,7 +70,7 @@ function AssetPreviewMedia({
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="text-neutral-500"
+        className="text-text-tertiary"
       >
         <path d="M9 18V5l12-2v13" strokeLinecap="round" strokeLinejoin="round" />
         <circle cx="6" cy="18" r="3" />
@@ -137,7 +137,7 @@ export function AssetPreviewOverlay() {
     >
       {/* Floating preview card — compact, canvas stays visible around it */}
       <div
-        className="relative flex flex-col items-center gap-2 max-w-[58%] rounded-lg border border-neutral-800 bg-neutral-950/95 p-2 pt-8 shadow-2xl"
+        className="relative flex flex-col items-center gap-2 max-w-[58%] rounded-lg border border-border-button-default bg-background-tertiary-default p-2 pt-8 shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Close button */}
@@ -166,7 +166,7 @@ export function AssetPreviewOverlay() {
         <AssetPreviewMedia kind={resolveAssetKind(previewAsset)} serveUrl={serveUrl} name={name} />
 
         {/* Filename label */}
-        <span className="text-[12px] text-neutral-400 truncate max-w-full px-2 text-center">
+        <span className="text-caption-1-regular text-text-secondary truncate max-w-full px-2 text-center">
           {name}
         </span>
       </div>
diff --git a/packages/studio/src/components/nle/AudioMeterStrip.tsx b/packages/studio/src/components/nle/AudioMeterStrip.tsx
index 5c24c56afa9..4446f0a28c9 100644
--- a/packages/studio/src/components/nle/AudioMeterStrip.tsx
+++ b/packages/studio/src/components/nle/AudioMeterStrip.tsx
@@ -268,7 +268,7 @@ function ClipLight({ clip }: { clip: RefObject<ClipLatch> }) {
 
 function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
   return (
-    <div className="scheme-dark relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900">
+    <div className="scheme-dark relative h-full w-[18px] overflow-hidden rounded-[2px] bg-background-tertiary-default">
       <div
         className="absolute inset-x-0 bottom-0 bg-green-500"
         style={{ height: `${AMBER_AT * 100}%` }}
@@ -284,7 +284,7 @@ function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<
       <div
         ref={maskRef}
         data-testid="meter-mask"
-        className="absolute inset-x-0 top-0 bg-neutral-900"
+        className="absolute inset-x-0 top-0 bg-background-tertiary-default"
         style={{ height: "100%" }}
       />
       <div
@@ -379,7 +379,7 @@ function Fader({
         onCommit(audioFaderPositionToGain(clampNumber(next, AUDIO_GAIN_FADER_MIN, maxPosition)));
         e.preventDefault();
       }}
-      className="relative h-full w-2 shrink-0 cursor-ns-resize touch-none rounded-full bg-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+      className="relative h-full w-2 shrink-0 cursor-ns-resize touch-none rounded-full bg-background-tertiary-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
     >
       <div
         className="absolute inset-x-[-3px] h-1.5 -translate-y-1/2 rounded-full bg-neutral-200"
@@ -432,7 +432,7 @@ function MeterStrip({
           onLive={(v) => onLive(strip.id, v)}
           onCommit={(v) => onCommit(strip.id, v)}
         />
-        <div className="relative w-5 font-mono text-[9px] leading-none text-neutral-500">
+        <div className="relative w-5 font-mono text-[9px] leading-none text-text-tertiary">
           {METER_DB_MARKS.map((db) => (
             <span
               key={db}
@@ -448,7 +448,7 @@ function MeterStrip({
           <Bar maskRef={refs[2]} peakRef={refs[3]} />
         </div>
       </div>
-      <span className="max-w-full truncate text-[10px] text-neutral-400" title={strip.label}>
+      <span className="max-w-full truncate text-[10px] text-text-secondary" title={strip.label}>
         {strip.label}
       </span>
     </div>
@@ -482,7 +482,7 @@ function MeterStripBody({ previewIframeRef }: AudioMeterStripProps) {
   return (
     <div
       data-testid="audio-meter-strip"
-      className="flex shrink-0 overflow-x-auto border-l border-neutral-800/50 bg-neutral-950"
+      className="flex shrink-0 overflow-x-auto border-l border-border-button-default bg-background-tertiary-default"
     >
       {strips.map((strip) => (
         <MeterStrip
diff --git a/packages/studio/src/components/nle/NLEPreview.tsx b/packages/studio/src/components/nle/NLEPreview.tsx
index e162a36e674..209ec90c99a 100644
--- a/packages/studio/src/components/nle/NLEPreview.tsx
+++ b/packages/studio/src/components/nle/NLEPreview.tsx
@@ -496,7 +496,7 @@ export const NLEPreview = memo(function NLEPreview({
     <div className="flex flex-col h-full min-h-0">
       <div
         ref={viewportRef}
-        className="relative flex-1 flex items-center justify-center overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-[var(--studio-preview-bg,var(--color-neutral-950))]"
+        className="relative flex-1 flex items-center justify-center overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-border-focus-ring bg-[var(--studio-preview-bg,var(--color-neutral-950))]"
         tabIndex={0}
         aria-label="Composition preview"
       >
diff --git a/packages/studio/src/components/nle/PreviewOverlays.tsx b/packages/studio/src/components/nle/PreviewOverlays.tsx
index a0e865d154b..3c217bf1434 100644
--- a/packages/studio/src/components/nle/PreviewOverlays.tsx
+++ b/packages/studio/src/components/nle/PreviewOverlays.tsx
@@ -92,11 +92,11 @@ export function PreviewOverlays({
         {/* Mode indicator + explicit exit */}
         <div className="pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
           <span className="h-1.5 w-1.5 rounded-full bg-studio-accent" aria-hidden="true" />
-          <span className="text-2xs text-neutral-200">Editing captions</span>
+          <span className="text-2xs text-text-primary">Editing captions</span>
           <button
             type="button"
             onClick={exitCaptionMode}
-            className="rounded-sm text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
+            className="rounded-sm text-2xs text-text-secondary underline underline-offset-2 hover:text-text-primary focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
           >
             Exit
           </button>
@@ -152,7 +152,7 @@ export function PreviewOverlays({
         <button
           type="button"
           onClick={enterCaptionMode}
-          className="pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
+          className="pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-border-button-default bg-black/60 px-2.5 py-1 text-2xs text-text-primary transition-colors hover:border-studio-accent/50 hover:text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
         >
           Edit captions
         </button>
diff --git a/packages/studio/src/components/nle/TimelinePane.tsx b/packages/studio/src/components/nle/TimelinePane.tsx
index 37bc32c796f..5e40afc745f 100644
--- a/packages/studio/src/components/nle/TimelinePane.tsx
+++ b/packages/studio/src/components/nle/TimelinePane.tsx
@@ -144,7 +144,7 @@ export function TimelinePane({
           onDragOver={(event) => event.preventDefault()}
           onDrop={(event) => event.preventDefault()}
         >
-          <span className="rounded-md bg-neutral-900/90 px-2.5 py-1 text-[11px] text-neutral-400">
+          <span className="rounded-md bg-background-tertiary-default px-2.5 py-1 text-caption-2-regular text-text-secondary">
             Loading composition…
           </span>
         </div>
diff --git a/packages/studio/src/components/panels/MotionBlurPanel.tsx b/packages/studio/src/components/panels/MotionBlurPanel.tsx
index 80029ba4100..637e82d180a 100644
--- a/packages/studio/src/components/panels/MotionBlurPanel.tsx
+++ b/packages/studio/src/components/panels/MotionBlurPanel.tsx
@@ -125,7 +125,7 @@ export const MotionBlurPanel = memo(function MotionBlurPanel({
 
   if (!settings) {
     return (
-      <p className="p-3 text-[10px] leading-relaxed text-neutral-500">
+      <p className="p-3 text-[10px] leading-relaxed text-text-tertiary">
         Open a composition to set up motion blur.
       </p>
     );
@@ -135,8 +135,8 @@ export const MotionBlurPanel = memo(function MotionBlurPanel({
   const current = locked ? null : levelOf(settings);
 
   return (
-    <div className="flex h-full flex-col gap-3 overflow-y-auto p-3 text-[11px] text-neutral-300">
-      <span className="text-[12px] font-medium text-neutral-100">Motion blur</span>
+    <div className="flex h-full flex-col gap-3 overflow-y-auto p-3 text-caption-2-regular text-text-primary">
+      <span className="text-caption-1-medium text-text-primary">Motion blur</span>
       <div role="radiogroup" aria-label="Motion blur" className="flex gap-1.5">
         {BLUR_LEVELS.map(({ level, label }) => (
           <Button
diff --git a/packages/studio/src/components/panels/SlideshowPanel.tsx b/packages/studio/src/components/panels/SlideshowPanel.tsx
index a4927c1dbf6..f2f148c89d5 100644
--- a/packages/studio/src/components/panels/SlideshowPanel.tsx
+++ b/packages/studio/src/components/panels/SlideshowPanel.tsx
@@ -435,7 +435,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
           role="alert"
           className="flex items-center justify-between gap-2 px-3 py-2 bg-danger/15 border-b border-red-500/40"
         >
-          <span className="text-[11px] text-danger-ink">Changes not saved</span>
+          <span className="text-caption-2-regular text-danger-ink">Changes not saved</span>
           <button
             type="button"
             disabled={retrying}
@@ -447,12 +447,12 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
         </div>
       )}
       {undoDepth > 0 && (
-        <div className="flex items-center justify-end px-3 py-1 border-b border-neutral-800/60">
+        <div className="flex items-center justify-end px-3 py-1 border-b border-border-button-default">
           <button
             type="button"
             onClick={handleUndo}
             title="Undo last slideshow edit (⌘Z)"
-            className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
+            className="px-2 py-0.5 text-[10px] rounded-sm text-text-secondary hover:text-text-primary hover:bg-background-primary-hover active:scale-[0.97] transition-colors"
           >
             Undo ({undoDepth})
           </button>
@@ -498,7 +498,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
               onRemoveFragment={handleRemoveFragment}
             />
           ) : (
-            <p className="px-3 py-2 text-[11px] text-neutral-500 italic">
+            <p className="px-3 py-2 text-caption-2-regular text-text-tertiary italic">
               Select a scene above to inspect
             </p>
           )}
diff --git a/packages/studio/src/components/panels/SlideshowSubPanels.tsx b/packages/studio/src/components/panels/SlideshowSubPanels.tsx
index dbac96adc04..595b4319da7 100644
--- a/packages/studio/src/components/panels/SlideshowSubPanels.tsx
+++ b/packages/studio/src/components/panels/SlideshowSubPanels.tsx
@@ -23,12 +23,12 @@ export function SectionHeader({
   return (
     <button
       type="button"
-      className="flex w-full items-center justify-between px-3 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-200 active:bg-neutral-800/60 border-b border-neutral-800 transition-colors"
+      className="flex w-full items-center justify-between px-3 py-2 text-caption-2-medium text-text-secondary hover:text-text-primary active:bg-background-primary-active border-b border-border-button-default transition-colors"
       onClick={onToggle}
       aria-expanded={expanded}
     >
       <span>{children}</span>
-      <span className="text-[10px] text-neutral-600">{expanded ? "▲" : "▼"}</span>
+      <span className="text-[10px] text-text-tertiary">{expanded ? "▲" : "▼"}</span>
     </button>
   );
 }
@@ -71,8 +71,10 @@ export function SlideList({
             role="button"
             tabIndex={0}
             aria-pressed={isSelected}
-            className={`flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-[11px] transition-colors ${
-              isSelected ? "bg-on text-text-0" : "hover:bg-neutral-800/60 text-neutral-300"
+            className={`flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-caption-2-regular transition-colors ${
+              isSelected
+                ? "bg-on text-text-0"
+                : "hover:bg-background-primary-hover text-text-primary"
             }`}
             onClick={() => onSelect(scene.id)}
             onKeyDown={(e) => {
@@ -98,7 +100,7 @@ export function SlideList({
                   aria-label="Move slide up"
                   title="Move up"
                   disabled={slideIndex <= 0}
-                  className="px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="px-1 py-0.5 text-[10px] text-text-secondary enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "up");
@@ -111,7 +113,7 @@ export function SlideList({
                   aria-label="Move slide down"
                   title="Move down"
                   disabled={slideIndex === slides.length - 1}
-                  className="px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="px-1 py-0.5 text-[10px] text-text-secondary enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "down");
@@ -125,7 +127,9 @@ export function SlideList({
         );
       })}
       {scenes.length === 0 && (
-        <p className="px-3 py-2 text-[11px] text-neutral-500 italic">No scenes found</p>
+        <p className="px-3 py-2 text-caption-2-regular text-text-tertiary italic">
+          No scenes found
+        </p>
       )}
     </div>
   );
@@ -154,13 +158,13 @@ export function SlideInspector({
   const fragments = slide?.fragments ?? [];
   return (
     <div className="flex flex-col gap-3 px-3 py-2">
-      <p className="text-[10px] text-neutral-500 font-medium uppercase tracking-wide truncate">
+      <p className="text-[10px] text-text-tertiary font-medium uppercase tracking-wide truncate">
         Scene: {sceneId}
       </p>
       <div className="flex flex-col gap-1">
-        <label className="text-[11px] text-neutral-400">Notes</label>
+        <label className="text-caption-2-regular text-text-secondary">Notes</label>
         <textarea
-          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-text-0 resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
+          className="bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1.5 text-caption-2-regular text-text-0 resize-none placeholder:text-text-tertiary focus:border-border-button-active focus:outline-hidden"
           rows={3}
           placeholder="Speaker notes or script..."
           value={slide?.notes ?? ""}
@@ -169,10 +173,10 @@ export function SlideInspector({
       </div>
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-neutral-400">Fragment hold-points</span>
+          <span className="text-caption-2-regular text-text-secondary">Fragment hold-points</span>
           <button
             type="button"
-            className="text-[10px] px-2 py-0.5 rounded-sm bg-hover hover:bg-press text-neutral-200 transition-colors"
+            className="text-[10px] px-2 py-0.5 rounded-sm bg-hover hover:bg-press text-text-primary transition-colors"
             onClick={onMarkFragment}
             title={`Mark ${currentTime.toFixed(2)}s as hold-point`}
           >
@@ -184,13 +188,13 @@ export function SlideInspector({
             {fragments.map((t, i) => (
               <span
                 key={`frag-${i}`}
-                className="inline-flex items-center gap-1 bg-neutral-700 rounded-sm px-1.5 py-0.5 text-[10px] text-neutral-200"
+                className="inline-flex items-center gap-1 bg-background-tertiary-default rounded-sm px-1.5 py-0.5 text-[10px] text-text-primary"
               >
                 {t.toFixed(2)}s
                 <button
                   type="button"
                   aria-label={`Remove fragment at ${t.toFixed(2)}s`}
-                  className="text-neutral-400 hover:text-danger-ink transition-colors"
+                  className="text-text-secondary hover:text-danger-ink transition-colors"
                   onClick={() => onRemoveFragment(t)}
                 >
                   ×
@@ -199,7 +203,7 @@ export function SlideInspector({
             ))}
           </div>
         ) : (
-          <p className="text-[10px] text-neutral-600 italic">No hold-points yet</p>
+          <p className="text-[10px] text-text-tertiary italic">No hold-points yet</p>
         )}
       </div>
     </div>
@@ -247,7 +251,7 @@ export function BranchTree({
         <input
           id={inputId}
           type="text"
-          className="flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
+          className="flex-1 bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-caption-2-regular text-text-0 placeholder:text-text-tertiary focus:border-border-button-active focus:outline-hidden"
           placeholder="New branch name..."
           value={newLabel}
           onChange={(e) => setNewLabel(e.target.value)}
@@ -258,7 +262,7 @@ export function BranchTree({
         />
         <button
           type="button"
-          className="px-2 py-1 rounded-sm bg-hover hover:bg-press text-[11px] text-neutral-200 transition-colors shrink-0"
+          className="px-2 py-1 rounded-sm bg-hover hover:bg-press text-caption-2-regular text-text-primary transition-colors shrink-0"
           onClick={handleCreate}
         >
           Add
@@ -266,7 +270,7 @@ export function BranchTree({
       </div>
 
       {sequences.length === 0 ? (
-        <p className="text-[10px] text-neutral-600 italic">No branches yet</p>
+        <p className="text-[10px] text-text-tertiary italic">No branches yet</p>
       ) : (
         <div className="flex flex-col gap-3">
           {sequences.map((seq) => (
@@ -320,11 +324,11 @@ function BranchItem({
   }, [draft, onRename, seq.id, seq.label]);
 
   return (
-    <div className="border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2">
+    <div className="border border-border-button-default rounded-sm p-2 flex flex-col gap-2">
       <div className="flex items-center gap-1">
         {editing ? (
           <input
-            className="flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
+            className="flex-1 bg-background-tertiary-default border border-border-button-default rounded-sm px-1.5 py-0.5 text-caption-2-regular text-text-0 focus:border-border-button-active focus:outline-hidden"
             value={draft}
             autoFocus
             onChange={(e) => setDraft(e.target.value)}
@@ -339,7 +343,7 @@ function BranchItem({
           <span
             role="button"
             tabIndex={0}
-            className="flex-1 text-[11px] text-text-0 font-medium truncate cursor-pointer hover:text-neutral-300"
+            className="flex-1 text-caption-2-regular text-text-0 font-medium truncate cursor-pointer hover:text-text-primary"
             title="Click to rename"
             onClick={() => setEditing(true)}
             onKeyDown={(e) => {
@@ -355,7 +359,7 @@ function BranchItem({
         <button
           type="button"
           aria-label={`Delete branch ${seq.label}`}
-          className="text-[10px] text-neutral-500 hover:text-danger-ink active:scale-[0.95] transition-colors px-1"
+          className="text-[10px] text-text-tertiary hover:text-danger-ink active:scale-[0.95] transition-colors px-1"
           onClick={() => setConfirmingDelete(true)}
         >
           ✕
@@ -384,7 +388,7 @@ function BranchItem({
             <button
               type="button"
               onClick={() => setConfirmingDelete(false)}
-              className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+              className="px-2 py-0.5 text-[10px] rounded-sm text-text-secondary hover:text-text-primary transition-colors"
             >
               Cancel
             </button>
@@ -398,7 +402,7 @@ function BranchItem({
           return (
             <div
               key={scene.id}
-              className="flex items-center gap-1.5 py-0.5 text-[11px] text-neutral-400"
+              className="flex items-center gap-1.5 py-0.5 text-caption-2-regular text-text-secondary"
             >
               <input
                 type="checkbox"
@@ -411,8 +415,8 @@ function BranchItem({
                 <button
                   type="button"
                   aria-pressed={isSelected}
-                  className={`flex-1 text-left truncate transition-colors hover:text-neutral-200 ${
-                    isSelected ? "text-text-0" : "text-neutral-400"
+                  className={`flex-1 text-left truncate transition-colors hover:text-text-primary ${
+                    isSelected ? "text-text-0" : "text-text-secondary"
                   }`}
                   onClick={() => onSelectBranchSlide(seq.id, scene.id)}
                 >
@@ -424,7 +428,7 @@ function BranchItem({
             </div>
           );
         })}
-        {scenes.length === 0 && <p className="text-[10px] text-neutral-600 italic">No scenes</p>}
+        {scenes.length === 0 && <p className="text-[10px] text-text-tertiary italic">No scenes</p>}
       </div>
     </div>
   );
@@ -470,7 +474,9 @@ export function HotspotTool({
   if (!selectedSceneId) {
     return (
       <div className="px-3 py-2">
-        <p className="text-[11px] text-neutral-500 italic">Select a scene in the Slides list</p>
+        <p className="text-caption-2-regular text-text-tertiary italic">
+          Select a scene in the Slides list
+        </p>
       </div>
     );
   }
@@ -478,32 +484,32 @@ export function HotspotTool({
   return (
     <div className="flex flex-col gap-3 px-3 py-2">
       <div className="flex flex-col gap-1.5">
-        <p className="text-[11px] text-neutral-400">
+        <p className="text-caption-2-regular text-text-secondary">
           Selected element:{" "}
-          <span className="text-neutral-200 font-mono">{elementKey ?? "none"}</span>
+          <span className="text-text-primary font-mono">{elementKey ?? "none"}</span>
         </p>
         {!elementKey && (
-          <p className="text-[10px] text-neutral-500 italic">
+          <p className="text-[10px] text-text-tertiary italic">
             Click an element on the canvas to choose the hotspot target.
           </p>
         )}
         {sequences.length === 0 && (
-          <p className="text-[10px] text-neutral-500 italic">
+          <p className="text-[10px] text-text-tertiary italic">
             Create a branch in the Branches section first. Hotspots jump to a branch.
           </p>
         )}
-        <label className="text-[11px] text-neutral-400">Hotspot label</label>
+        <label className="text-caption-2-regular text-text-secondary">Hotspot label</label>
         <input
           type="text"
-          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
+          className="bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-caption-2-regular text-text-0 placeholder:text-text-tertiary focus:border-border-button-active focus:outline-hidden"
           placeholder="Button label..."
           value={hotspotLabel}
           onChange={(e) => setHotspotLabel(e.target.value)}
           aria-label="Hotspot label"
         />
-        <label className="text-[11px] text-neutral-400">Target branch</label>
+        <label className="text-caption-2-regular text-text-secondary">Target branch</label>
         <select
-          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
+          className="bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-caption-2-regular text-text-0 focus:border-border-button-active focus:outline-hidden"
           value={targetSequenceId}
           onChange={(e) => setTargetSequenceId(e.target.value)}
           aria-label="Target branch sequence"
@@ -525,7 +531,7 @@ export function HotspotTool({
                 ? "Choose a target branch first"
                 : undefined
           }
-          className="px-3 py-1.5 rounded-sm bg-accent enabled:hover:bg-accent-hover enabled:active:scale-[0.98] text-on-accent text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3 py-1.5 rounded-sm bg-accent enabled:hover:bg-accent-hover enabled:active:scale-[0.98] text-on-accent text-caption-2-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={handleMakeHotspot}
         >
           Make hotspot
@@ -534,21 +540,23 @@ export function HotspotTool({
 
       {hotspots.length > 0 && (
         <div className="flex flex-col gap-1.5">
-          <p className="text-[11px] text-neutral-400 font-medium">Hotspots on this slide</p>
+          <p className="text-caption-2-regular text-text-secondary font-medium">
+            Hotspots on this slide
+          </p>
           {hotspots.map((h) => {
             const seqLabel = sequences.find((s) => s.id === h.target)?.label ?? h.target;
             return (
               <div
                 key={h.id}
-                className="flex items-center gap-2 bg-neutral-800 rounded-sm px-2 py-1"
+                className="flex items-center gap-2 bg-background-tertiary-default rounded-sm px-2 py-1"
               >
-                <span className="flex-1 text-[11px] text-neutral-200 truncate">
-                  {h.label} → <span className="text-neutral-400">{seqLabel}</span>
+                <span className="flex-1 text-caption-2-regular text-text-primary truncate">
+                  {h.label} → <span className="text-text-secondary">{seqLabel}</span>
                 </span>
                 <button
                   type="button"
                   aria-label={`Remove hotspot ${h.label}`}
-                  className="text-[10px] text-neutral-500 hover:text-danger-ink transition-colors"
+                  className="text-[10px] text-text-tertiary hover:text-danger-ink transition-colors"
                   onClick={() => onRemoveHotspot(selectedSceneId, h.id)}
                 >
                   ✕
diff --git a/packages/studio/src/components/panels/VariablesBindElement.tsx b/packages/studio/src/components/panels/VariablesBindElement.tsx
index 44db03153b3..cc82aa3bcbc 100644
--- a/packages/studio/src/components/panels/VariablesBindElement.tsx
+++ b/packages/studio/src/components/panels/VariablesBindElement.tsx
@@ -198,13 +198,13 @@ export function VariablesBindElement({
     : undefined;
 
   return (
-    <div className="space-y-1.5 rounded-lg border border-studio-accent/30 bg-neutral-900/40 p-2">
-      <p className="text-[9px] font-medium uppercase tracking-wider text-neutral-500">
-        Bind selected: <span className="normal-case text-neutral-300">{selection.label}</span>
+    <div className="space-y-1.5 rounded-lg border border-studio-accent/30 bg-background-tertiary-default p-2">
+      <p className="text-[9px] font-medium uppercase tracking-wider text-text-tertiary">
+        Bind selected: <span className="normal-case text-text-primary">{selection.label}</span>
       </p>
       {active ? (
         <div className="space-y-1.5">
-          <label className="text-[9px] font-medium text-neutral-500">
+          <label className="text-[9px] font-medium text-text-tertiary">
             Variable id for {active.label.toLowerCase()}
           </label>
           <input
@@ -227,7 +227,7 @@ export function VariablesBindElement({
             <button
               type="button"
               onClick={() => setActiveKey(null)}
-              className="h-6 rounded-sm px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
+              className="h-6 rounded-sm px-2 text-[10px] text-text-tertiary hover:text-text-primary"
             >
               Cancel
             </button>
@@ -238,7 +238,7 @@ export function VariablesBindElement({
                 setActiveKey(null);
                 onBind(active, trimmedId);
               }}
-              className="h-6 rounded-sm bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700 disabled:cursor-not-allowed disabled:opacity-40"
+              className="h-6 rounded-sm bg-background-tertiary-default px-2 text-[10px] font-medium text-text-primary hover:bg-background-primary-hover disabled:cursor-not-allowed disabled:opacity-40"
             >
               {existingDecl ? "Bind anyway" : "Bind"}
             </button>
@@ -254,7 +254,7 @@ export function VariablesBindElement({
                 setActiveKey(action.key);
                 setIdDraft(action.suggestedId);
               }}
-              className="h-6 rounded-md border border-neutral-800 px-2 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+              className="h-6 rounded-md border border-border-button-default px-2 text-[10px] font-medium text-text-secondary transition-colors hover:border-border-button-hover hover:text-text-primary"
             >
               {action.label} →&nbsp;variable
             </button>
diff --git a/packages/studio/src/components/panels/VariablesDeclarationForm.tsx b/packages/studio/src/components/panels/VariablesDeclarationForm.tsx
index ee9e318f0c2..e4b8d033c78 100644
--- a/packages/studio/src/components/panels/VariablesDeclarationForm.tsx
+++ b/packages/studio/src/components/panels/VariablesDeclarationForm.tsx
@@ -180,7 +180,7 @@ export function declarationFromDraft(draft: DeclarationDraft): CompositionVariab
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="space-y-1">
-      <label className="text-[9px] font-medium text-neutral-500">{label}</label>
+      <label className="text-[9px] font-medium text-text-tertiary">{label}</label>
       {children}
     </div>
   );
@@ -242,7 +242,7 @@ export function DeclarationForm({
   };
 
   return (
-    <div className="space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2">
+    <div className="space-y-2 rounded-lg border border-border-button-default bg-background-tertiary-default p-2">
       <div className="grid grid-cols-2 gap-2">
         <Field label="ID">
           <input
@@ -322,14 +322,14 @@ export function DeclarationForm({
         <button
           type="button"
           onClick={onCancel}
-          className="h-6 rounded-sm px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
+          className="h-6 rounded-sm px-2 text-[10px] text-text-tertiary hover:text-text-primary"
         >
           Cancel
         </button>
         <button
           type="button"
           onClick={submit}
-          className="h-6 rounded-sm bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700"
+          className="h-6 rounded-sm bg-background-tertiary-default px-2 text-[10px] font-medium text-text-primary hover:bg-background-primary-hover"
         >
           {submitLabel}
         </button>
diff --git a/packages/studio/src/components/panels/VariablesOtherCompositions.tsx b/packages/studio/src/components/panels/VariablesOtherCompositions.tsx
index 83dc31879a7..bc081c3a3d8 100644
--- a/packages/studio/src/components/panels/VariablesOtherCompositions.tsx
+++ b/packages/studio/src/components/panels/VariablesOtherCompositions.tsx
@@ -37,7 +37,7 @@ function CompositionSection({
   return (
     <div className="space-y-1.5">
       <p
-        className="truncate text-[9px] font-medium uppercase tracking-wider text-neutral-500"
+        className="truncate text-[9px] font-medium uppercase tracking-wider text-text-tertiary"
         title={group.path}
       >
         {group.path}
@@ -46,12 +46,12 @@ function CompositionSection({
         const key = `${group.path}::${decl.id}`;
         const editing = editingKey === key;
         return (
-          <div key={key} className="space-y-1.5 rounded-lg border border-neutral-800/70 p-2">
+          <div key={key} className="space-y-1.5 rounded-lg border border-border-button-default p-2">
             <div className="flex items-center gap-1.5">
-              <span className="truncate text-[10px] font-medium text-neutral-300">
+              <span className="truncate text-[10px] font-medium text-text-primary">
                 {decl.label}
               </span>
-              <span className="rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
+              <span className="rounded-sm bg-background-tertiary-default px-1 py-px font-mono text-[8px] text-text-tertiary">
                 {decl.type}
               </span>
               <span className="ml-auto flex items-center gap-1">
@@ -68,7 +68,9 @@ function CompositionSection({
                 />
               </span>
             </div>
-            {decl.description && <p className="text-[9px] text-neutral-500">{decl.description}</p>}
+            {decl.description && (
+              <p className="text-[9px] text-text-tertiary">{decl.description}</p>
+            )}
             {editing && (
               <DeclarationForm
                 initial={draftFromDeclaration(decl)}
@@ -137,8 +139,8 @@ export function VariablesOtherCompositions({
   if (groups.length === 0) return null;
 
   return (
-    <div className="space-y-3 border-t border-neutral-800 pt-3">
-      <p className="text-[9px] font-medium uppercase tracking-wider text-neutral-600">
+    <div className="space-y-3 border-t border-border-button-default pt-3">
+      <p className="text-[9px] font-medium uppercase tracking-wider text-text-tertiary">
         Other compositions
       </p>
       {groups.map((group) => (
diff --git a/packages/studio/src/components/panels/VariablesPanel.tsx b/packages/studio/src/components/panels/VariablesPanel.tsx
index 0405dab98f8..160949f1c19 100644
--- a/packages/studio/src/components/panels/VariablesPanel.tsx
+++ b/packages/studio/src/components/panels/VariablesPanel.tsx
@@ -91,10 +91,10 @@ function VariableRow({
   onRemove: () => void;
 }) {
   return (
-    <div className="space-y-1.5 rounded-lg border border-neutral-800/70 p-2">
+    <div className="space-y-1.5 rounded-lg border border-border-button-default p-2">
       <div className="flex items-center gap-1.5">
-        <span className="truncate text-[10px] font-medium text-neutral-300">{decl.label}</span>
-        <span className="rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
+        <span className="truncate text-[10px] font-medium text-text-primary">{decl.label}</span>
+        <span className="rounded-sm bg-background-tertiary-default px-1 py-px font-mono text-[8px] text-text-tertiary">
           {decl.type}
         </span>
         {unused && (
@@ -118,7 +118,7 @@ function VariableRow({
           <RowAction label="✕" title="Remove declaration" danger onClick={onRemove} />
         </span>
       </div>
-      {decl.description && <p className="text-[9px] text-neutral-500">{decl.description}</p>}
+      {decl.description && <p className="text-[9px] text-text-tertiary">{decl.description}</p>}
       {editing ? (
         <DeclarationForm
           initial={draftFromDeclaration(decl)}
@@ -142,13 +142,13 @@ function UndeclaredReads({
 }) {
   if (!usage || usage.undeclaredReads.length === 0) return null;
   return (
-    <div className="space-y-1 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2">
-      <p className="text-[9px] font-medium uppercase tracking-wider text-neutral-500">
+    <div className="space-y-1 rounded-lg border border-border-button-default bg-background-tertiary-default p-2">
+      <p className="text-[9px] font-medium uppercase tracking-wider text-text-tertiary">
         Read by scripts, not declared
       </p>
       {usage.undeclaredReads.map((id) => (
         <div key={id} className="flex items-center gap-2">
-          <code className="font-mono text-[10px] text-neutral-400">{id}</code>
+          <code className="font-mono text-[10px] text-text-secondary">{id}</code>
           <RowAction
             label="Declare"
             title="Declare as a string variable"
@@ -170,12 +170,14 @@ function PreviewModeHeader({
 }) {
   const hasOverrides = overrideCount > 0;
   return (
-    <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+    <div className="flex items-center justify-between border-b border-border-button-default px-3 py-2">
       <div className="flex items-center gap-2">
-        <span className="text-[11px] font-semibold text-neutral-200">Variables</span>
+        <span className="text-caption-2-semibold text-text-primary">Variables</span>
         <span
           className={`rounded-full px-2 py-0.5 text-[9px] font-medium ${
-            hasOverrides ? "bg-studio-accent/20 text-accent-ink" : "bg-neutral-800 text-neutral-500"
+            hasOverrides
+              ? "bg-studio-accent/20 text-accent-ink"
+              : "bg-background-tertiary-default text-text-tertiary"
           }`}
         >
           {hasOverrides ? `Previewing ${overrideCount} custom` : "Previewing defaults"}
@@ -185,7 +187,7 @@ function PreviewModeHeader({
         <button
           type="button"
           onClick={onReset}
-          className="h-6 rounded-sm px-2 text-[10px] text-neutral-400 hover:text-neutral-200"
+          className="h-6 rounded-sm px-2 text-[10px] text-text-secondary hover:text-text-primary"
         >
           Reset
         </button>
@@ -210,11 +212,11 @@ function HandoffFooter({
   const json = JSON.stringify(effectiveValues);
   const command = `npx hyperframes render ${shellSingleQuote(compPath)} --variables ${shellSingleQuote(json)}`;
   return (
-    <div className="space-y-1.5 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2">
-      <p className="text-[9px] font-medium uppercase tracking-wider text-neutral-500">
+    <div className="space-y-1.5 rounded-lg border border-border-button-default bg-background-tertiary-default p-2">
+      <p className="text-[9px] font-medium uppercase tracking-wider text-text-tertiary">
         Use this template
       </p>
-      <code className="block truncate font-mono text-[9px] text-neutral-500" title={command}>
+      <code className="block truncate font-mono text-[9px] text-text-tertiary" title={command}>
         {command}
       </code>
       <div className="flex items-center gap-2">
@@ -234,7 +236,7 @@ function HandoffFooter({
 }
 
 const EMPTY_STATE = (
-  <p className="text-[10px] leading-relaxed text-neutral-500">
+  <p className="text-[10px] leading-relaxed text-text-tertiary">
     No variables declared. Variables make parts of this composition dynamic. Declare them here (or
     in <code className="font-mono">data-composition-variables</code>), read them with{" "}
     <code className="font-mono">getVariables()</code>, and pass values at render time with{" "}
@@ -460,7 +462,7 @@ export const VariablesPanel = memo(function VariablesPanel({
   if (!sdkSession) {
     return (
       <div className="flex h-full items-center justify-center px-6 text-center">
-        <p className="text-xs text-neutral-500">Open a composition to manage its variables.</p>
+        <p className="text-xs text-text-tertiary">Open a composition to manage its variables.</p>
       </div>
     );
   }
@@ -507,7 +509,7 @@ export const VariablesPanel = memo(function VariablesPanel({
           onDeclare={(id) => handleAdd({ id, type: "string", label: id, default: "" })}
         />
         {usage?.scanIncomplete && (
-          <p className="text-[9px] text-neutral-600">
+          <p className="text-[9px] text-text-tertiary">
             Scripts access variables dynamically, so usage info may be incomplete.
           </p>
         )}
@@ -529,7 +531,7 @@ export const VariablesPanel = memo(function VariablesPanel({
           <button
             type="button"
             onClick={() => setAddOpen(true)}
-            className="h-7 w-full rounded-lg border border-dashed border-neutral-800 text-[10px] font-medium text-neutral-500 transition-colors hover:border-neutral-700 hover:text-neutral-300"
+            className="h-7 w-full rounded-lg border border-dashed border-border-button-default text-[10px] font-medium text-text-tertiary transition-colors hover:border-border-button-hover hover:text-text-primary"
           >
             + Add variable
           </button>
diff --git a/packages/studio/src/components/panels/VariablesRowAction.tsx b/packages/studio/src/components/panels/VariablesRowAction.tsx
index 7c0fac9b3c3..f2f10f0088f 100644
--- a/packages/studio/src/components/panels/VariablesRowAction.tsx
+++ b/packages/studio/src/components/panels/VariablesRowAction.tsx
@@ -15,8 +15,8 @@ export function RowAction({
       type="button"
       onClick={onClick}
       title={title}
-      className={`h-5 rounded px-1.5 text-[9px] text-neutral-500 hover:bg-neutral-800 ${
-        danger ? "hover:text-danger-ink" : "hover:text-neutral-200"
+      className={`h-5 rounded px-1.5 text-[9px] text-text-tertiary hover:bg-background-primary-hover ${
+        danger ? "hover:text-danger-ink" : "hover:text-text-primary"
       }`}
     >
       {label}
diff --git a/packages/studio/src/components/panels/VariablesValueControls.tsx b/packages/studio/src/components/panels/VariablesValueControls.tsx
index 4fce8ae97be..936e98212e0 100644
--- a/packages/studio/src/components/panels/VariablesValueControls.tsx
+++ b/packages/studio/src/components/panels/VariablesValueControls.tsx
@@ -14,7 +14,7 @@ import type {
 } from "@hyperframes/sdk";
 
 export const VARIABLES_INPUT_CLASS =
-  "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700";
+  "w-full bg-background-tertiary-default border border-border-button-default rounded-sm px-2 py-1 text-[10px] text-text-primary focus:outline-hidden focus:border-border-button-active";
 
 export function variableDefaultText(decl: CompositionVariable): string {
   if (decl.type === "font" && typeof decl.default === "object") return decl.default.name;
@@ -112,7 +112,7 @@ function ColorControl({
           if (draft !== null && draft !== colorValue) onCommit(draft);
           setDraft(null);
         }}
-        className="h-6 w-6 cursor-pointer rounded-sm border border-neutral-700 bg-transparent"
+        className="h-6 w-6 cursor-pointer rounded-sm border border-border-button-default bg-transparent"
       />
       <DraftTextInput
         value={colorValue}
@@ -171,7 +171,7 @@ function NumberControl({
         step={decl.step}
         className={`${VARIABLES_INPUT_CLASS} ${hasRange ? "w-16" : "flex-1"} tabular-nums`}
       />
-      {decl.unit && <span className="text-[9px] text-neutral-500">{decl.unit}</span>}
+      {decl.unit && <span className="text-[9px] text-text-tertiary">{decl.unit}</span>}
     </div>
   );
 }
diff --git a/packages/studio/src/components/renders/FfmpegRequiredNotice.tsx b/packages/studio/src/components/renders/FfmpegRequiredNotice.tsx
index a17d0844af0..bf224149561 100644
--- a/packages/studio/src/components/renders/FfmpegRequiredNotice.tsx
+++ b/packages/studio/src/components/renders/FfmpegRequiredNotice.tsx
@@ -67,7 +67,7 @@ export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
       className="flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5"
     >
       <div className="flex flex-col gap-0.5">
-        <span className="text-[11px] font-semibold text-warning-ink">
+        <span className="text-caption-2-semibold text-warning-ink">
           {status.title ?? "FFmpeg not found"}
         </span>
         {/* text-2, not the panel's usual text-4 for secondary copy: the amber
diff --git a/packages/studio/src/components/sidebar/AssetCard.tsx b/packages/studio/src/components/sidebar/AssetCard.tsx
index c3b2408d109..4f5ef5bde74 100644
--- a/packages/studio/src/components/sidebar/AssetCard.tsx
+++ b/packages/studio/src/components/sidebar/AssetCard.tsx
@@ -30,7 +30,7 @@ function CopyChip({ feedback, asset }: { feedback: CopyFeedback; asset: string }
   return (
     <span
       role="status"
-      className={`shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+      className={`shrink-0 text-caption-2-medium px-1.5 py-px rounded ${
         feedback.ok ? "text-accent-ink bg-panel-accent/10" : "text-danger-ink bg-red-500/10"
       }`}
     >
@@ -223,12 +223,14 @@ export function AssetCard({
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}
-        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${
-          isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
+        className={`flex flex-col gap-1 cursor-pointer rounded-lg p-1 transition-colors outline-hidden focus-visible:bg-background-primary-hover ${
+          isCopied
+            ? "bg-background-primary-hover ring-1 ring-inset ring-border-button-default"
+            : "hover:bg-background-primary-hover"
         }`}
       >
         {/* Thumbnail */}
-        <div className="w-full aspect-video rounded-sm overflow-hidden bg-neutral-900 relative">
+        <div className="w-full aspect-video rounded-md overflow-hidden bg-background-tertiary-default relative">
           {isImage && !imgError && (
             <img
               src={serveUrl}
@@ -255,20 +257,20 @@ export function AssetCard({
           )}
           {((!isImage && !isVideo) || (isImage && imgError)) && (
             <div className="w-full h-full flex items-center justify-center">
-              <span className="text-[10px] font-medium text-neutral-600">{extension}</span>
+              <span className="text-caption-2-medium text-text-tertiary">{extension}</span>
             </div>
           )}
 
           {/* "Added" badge — top-left */}
           {used && (
-            <span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-1">
+            <span className="absolute top-1 left-1 text-caption-2-medium leading-none px-1.5 py-[3px] rounded-md bg-black/70 text-panel-text-1">
               Added
             </span>
           )}
 
           {/* Duration badge — top-right, media only */}
           {durationLabel && (
-            <span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-2 tabular-nums">
+            <span className="absolute top-1 right-1 text-caption-2-medium leading-none px-1.5 py-[3px] rounded-md bg-black/70 text-panel-text-2 tabular-nums">
               {durationLabel}
             </span>
           )}
@@ -277,7 +279,7 @@ export function AssetCard({
         {/* Filename caption */}
         <div className="flex items-center justify-center gap-1">
           <span
-            className={`text-[10px] leading-tight text-center ${
+            className={`text-caption-2-regular leading-tight text-center ${
               used ? "text-panel-text-2" : "text-panel-text-4"
             }`}
             title={fullName}
@@ -348,25 +350,25 @@ export function FontRow({
         }}
         onDragStart={(e) => writeAssetDragData(e, asset)}
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
-        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${
+        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-background-primary-hover ${
           isCopied
-            ? "bg-studio-accent/10 border-l-2 border-studio-accent"
-            : "border-l-2 border-transparent hover:bg-neutral-800/50"
+            ? "bg-background-primary-hover ring-1 ring-inset ring-border-button-default"
+            : "hover:bg-background-primary-hover"
         }`}
       >
-        <div className="w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center">
-          <span className="text-[9px] font-medium text-text-muted">{extension}</span>
+        <div className="w-[50px] h-[32px] rounded-md overflow-hidden bg-background-tertiary-default shrink-0 flex items-center justify-center">
+          <span className="text-caption-2-medium text-text-muted">{extension}</span>
         </div>
         <div className="min-w-0 flex-1">
           <span
-            className={`text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+            className={`text-caption-1-regular font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
           >
             {name}
           </span>
           <div className="flex items-center gap-1.5">
-            <span className="text-[10px] text-neutral-600 truncate">{extension}</span>
+            <span className="text-caption-2-regular text-text-tertiary truncate">{extension}</span>
             {used && (
-              <span className="text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm">
+              <span className="text-caption-2-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-md">
                 in use
               </span>
             )}
diff --git a/packages/studio/src/components/sidebar/AssetContextMenu.tsx b/packages/studio/src/components/sidebar/AssetContextMenu.tsx
index 724c112dd66..e58651ca441 100644
--- a/packages/studio/src/components/sidebar/AssetContextMenu.tsx
+++ b/packages/studio/src/components/sidebar/AssetContextMenu.tsx
@@ -95,7 +95,7 @@ export function ContextMenu({
     onClose();
   }, [renameDraft, asset, onRename, onClose]);
 
-  const itemCls = `${menuClasses.row} ${menuClasses.rowEnabled} active:bg-neutral-700/70 transition-colors`;
+  const itemCls = `${menuClasses.row} ${menuClasses.rowEnabled} active:bg-background-primary-active transition-colors`;
 
   return (
     <div
@@ -110,7 +110,7 @@ export function ContextMenu({
         ref={menuRef}
         role="menu"
         aria-label={`Actions for ${filename(asset)}`}
-        className={`${menuClasses.panel} absolute min-w-[160px] text-xs`}
+        className={`${menuClasses.panel} absolute min-w-[160px] text-caption-1-regular`}
         style={{ left: pos.x, top: pos.y }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -147,7 +147,7 @@ export function ContextMenu({
               <button
                 role="menuitem"
                 onClick={() => setMode("confirm-delete")}
-                className={`${menuClasses.row} ${menuClasses.rowDanger} active:bg-neutral-700/70 transition-colors`}
+                className={`${menuClasses.row} ${menuClasses.rowDanger} active:bg-background-primary-active transition-colors`}
               >
                 Delete
               </button>
@@ -181,19 +181,21 @@ export function ContextMenu({
                 }
               }}
               aria-label={`Rename ${filename(asset)}`}
-              className="w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
+              className="w-full bg-background-tertiary-default border border-border-button-default rounded-md px-1.5 py-1 text-caption-1-regular text-text-0 focus:border-border-button-active focus:outline-hidden"
             />
-            {renameError && <span className="text-[10px] text-danger-ink">{renameError}</span>}
+            {renameError && (
+              <span className="text-caption-2-regular text-danger-ink">{renameError}</span>
+            )}
             <div className="flex items-center justify-end gap-1">
               <button
                 onClick={() => setMode("menu")}
-                className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+                className="px-2 py-0.5 text-caption-2-regular rounded-md text-text-secondary hover:text-text-primary transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={commitRename}
-                className="px-2 py-0.5 text-[10px] rounded-sm bg-accent hover:bg-accent-hover text-on-accent transition-colors"
+                className="px-2 py-0.5 text-caption-2-regular rounded-md bg-accent hover:bg-accent-hover text-on-accent transition-colors"
               >
                 Rename
               </button>
@@ -216,17 +218,17 @@ function DeleteConfirm({
 }) {
   return (
     <div className="px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex items-center justify-between gap-2">
-      <span className="text-[10px] text-danger-ink truncate">Delete {name}?</span>
+      <span className="text-caption-2-regular text-danger-ink truncate">Delete {name}?</span>
       <div className="flex items-center gap-1 shrink-0">
         <button
           onClick={onConfirm}
-          className="px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors"
+          className="px-2 py-0.5 text-caption-2-regular rounded-md bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors"
         >
           Delete
         </button>
         <button
           onClick={onCancel}
-          className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+          className="px-2 py-0.5 text-caption-2-regular rounded-md text-text-secondary hover:text-text-primary transition-colors"
         >
           Cancel
         </button>
diff --git a/packages/studio/src/components/sidebar/AssetsTab.tsx b/packages/studio/src/components/sidebar/AssetsTab.tsx
index d0b2d942c18..8903cbe9cb0 100644
--- a/packages/studio/src/components/sidebar/AssetsTab.tsx
+++ b/packages/studio/src/components/sidebar/AssetsTab.tsx
@@ -108,7 +108,7 @@ function ImportButton({ importing, onClick }: { importing: boolean; onClick: ()
       onClick={onClick}
       disabled={importing}
       aria-busy={importing}
-      className="w-full flex items-center justify-center gap-1.5 rounded-md bg-panel-input px-3 py-[7px] text-[11px] font-medium text-panel-text-3 enabled:hover:text-panel-text-1 enabled:active:scale-[0.98] disabled:opacity-60 transition-colors mb-2.5"
+      className="w-full flex items-center justify-center gap-1.5 rounded-lg bg-panel-input px-3 py-[7px] text-caption-1-medium text-panel-text-3 enabled:hover:text-panel-text-1 enabled:active:scale-[0.98] disabled:opacity-60 transition-colors mb-2.5"
     >
       {importing ? (
         <svg className="animate-spin" width="11" height="11" viewBox="0 0 24 24" fill="none">
@@ -156,13 +156,13 @@ function EmptyState({
   if (searchQuery) {
     return (
       <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
-        <p className="text-[11px] text-neutral-500 text-center">
+        <p className="text-caption-1-regular text-text-tertiary text-center">
           No assets match &ldquo;{searchQuery}&rdquo;
         </p>
         <button
           type="button"
           onClick={onClearSearch}
-          className="px-2.5 py-1 text-[11px] font-medium rounded-md bg-panel-input text-panel-text-3 hover:text-panel-text-1 active:scale-[0.98] transition-colors"
+          className="px-2.5 py-1 text-caption-1-medium rounded-lg bg-panel-input text-panel-text-3 hover:text-panel-text-1 active:scale-[0.98] transition-colors"
         >
           Clear search
         </button>
@@ -188,7 +188,7 @@ function EmptyState({
         <polyline points="17 8 12 3 7 8" strokeLinecap="round" strokeLinejoin="round" />
         <line x1="12" y1="3" x2="12" y2="15" strokeLinecap="round" />
       </svg>
-      <p className="text-[10px] text-neutral-600 text-center">Drop media files here</p>
+      <p className="text-caption-2-regular text-text-tertiary text-center">Drop media files here</p>
     </div>
   );
 }
@@ -332,7 +332,7 @@ export const AssetsTab = memo(function AssetsTab({
       : [activeFilter as MediaCategory].filter((c) => categorized[c].length > 0);
   return (
     <div
-      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/5" : ""}`}
+      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-background-primary-hover" : ""}`}
       onDragOver={(e) => {
         e.preventDefault();
         setDragOver(true);
@@ -343,12 +343,12 @@ export const AssetsTab = memo(function AssetsTab({
       {/* Header — matches design panel Section pattern */}
       <div className="px-4 pt-2.5 pb-1.5 shrink-0">
         {/* Scope toggle */}
-        <div className="flex gap-1 mb-2.5 p-0.5 rounded-md bg-panel-input">
+        <div className="flex gap-1 mb-2.5 p-0.5 rounded-lg bg-panel-input">
           {(["local", "global"] as const).map((m) => (
             <button
               key={m}
               onClick={() => setViewMode(m)}
-              className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
+              className={`flex-1 px-2 py-1 text-caption-1-medium rounded transition-colors ${
                 viewMode === m
                   ? "bg-panel-accent/15 text-accent-ink"
                   : "text-panel-text-3 hover:text-panel-text-1"
@@ -395,7 +395,7 @@ export const AssetsTab = memo(function AssetsTab({
             <button
               onClick={() => setActiveFilter("all")}
               aria-pressed={activeFilter === "all"}
-              className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
+              className={`px-2.5 py-1 text-caption-1-medium rounded-lg transition-colors active:scale-[0.98] ${
                 activeFilter === "all"
                   ? "bg-panel-accent/15 text-accent-ink"
                   : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -409,7 +409,7 @@ export const AssetsTab = memo(function AssetsTab({
                   key={cat}
                   onClick={() => setActiveFilter(activeFilter === cat ? "all" : cat)}
                   aria-pressed={activeFilter === cat}
-                  className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
+                  className={`px-2.5 py-1 text-caption-1-medium rounded-lg transition-colors active:scale-[0.98] ${
                     activeFilter === cat
                       ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -424,7 +424,7 @@ export const AssetsTab = memo(function AssetsTab({
                 <span className="w-px self-stretch bg-panel-input mx-0.5" aria-hidden="true" />
                 <button
                   onClick={() => setUsageFilter(usageFilter === "used" ? "all" : "used")}
-                  className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
+                  className={`px-2.5 py-1 text-caption-1-medium rounded-lg transition-colors ${
                     usageFilter === "used"
                       ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -434,7 +434,7 @@ export const AssetsTab = memo(function AssetsTab({
                 </button>
                 <button
                   onClick={() => setUsageFilter(usageFilter === "unused" ? "all" : "unused")}
-                  className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
+                  className={`px-2.5 py-1 text-caption-1-medium rounded-lg transition-colors ${
                     usageFilter === "unused"
                       ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -458,10 +458,12 @@ export const AssetsTab = memo(function AssetsTab({
             <div key={cat} className="mb-1">
               {activeFilter === "all" && (
                 <div className="flex items-center gap-2 px-4 py-2 border-t border-panel-border">
-                  <h3 className="text-[12px] font-semibold text-panel-text-1">
+                  <h3 className="text-caption-1-semibold text-panel-text-1">
                     {CATEGORY_LABELS[cat]}
                   </h3>
-                  <span className="text-[11px] text-panel-text-5">{categorized[cat].length}</span>
+                  <span className="text-caption-1-regular text-panel-text-5">
+                    {categorized[cat].length}
+                  </span>
                 </div>
               )}
               {cat === "audio" &&
diff --git a/packages/studio/src/components/sidebar/AudioRow.tsx b/packages/studio/src/components/sidebar/AudioRow.tsx
index 74227ca3508..2ef9fd31b0c 100644
--- a/packages/studio/src/components/sidebar/AudioRow.tsx
+++ b/packages/studio/src/components/sidebar/AudioRow.tsx
@@ -227,7 +227,7 @@ export function AudioRow({
           e.preventDefault();
           setContextMenu({ x: e.clientX, y: e.clientY });
         }}
-        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-hidden focus-visible:bg-neutral-800/60 ${
+        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-hidden focus-visible:bg-background-primary-hover ${
           playing
             ? "bg-panel-accent/6"
             : isCopied
@@ -238,7 +238,7 @@ export function AudioRow({
         <button
           aria-label={playing ? `Pause preview of ${name}` : `Play preview of ${name}`}
           aria-pressed={playing}
-          className={`w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
+          className={`w-7 h-7 rounded-lg shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
             playing
               ? "bg-panel-accent/15 text-accent-ink"
               : "text-panel-text-5 group-hover:text-panel-text-3"
@@ -262,25 +262,25 @@ export function AudioRow({
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-1.5">
             <span
-              className={`text-[12px] font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+              className={`text-caption-1-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
             >
               {name}
             </span>
             {!playing && (
-              <span className="text-[11px] text-panel-text-5 shrink-0">
+              <span className="text-caption-1-regular text-panel-text-5 shrink-0">
                 {meta?.duration ? `${meta.duration}s · ` : ""}
                 {subtype}
               </span>
             )}
             {used && (
-              <span className="text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0">
+              <span className="text-caption-2-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-md shrink-0">
                 in use
               </span>
             )}
             {(isCopied || copyFailed) && (
               <span
                 role="status"
-                className={`shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+                className={`shrink-0 text-caption-2-medium px-1.5 py-px rounded ${
                   copyFailed
                     ? "text-danger-ink bg-red-500/10"
                     : "text-accent-ink bg-panel-accent/10"
diff --git a/packages/studio/src/components/sidebar/BlocksTab.tsx b/packages/studio/src/components/sidebar/BlocksTab.tsx
index e91ae7c693a..79e865e1981 100644
--- a/packages/studio/src/components/sidebar/BlocksTab.tsx
+++ b/packages/studio/src/components/sidebar/BlocksTab.tsx
@@ -32,7 +32,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
 
   if (loading) {
     return (
-      <div className="flex flex-1 items-center justify-center text-neutral-600 text-xs">
+      <div className="flex flex-1 items-center justify-center text-text-tertiary text-caption-1-regular">
         Loading blocks…
       </div>
     );
@@ -40,7 +40,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
 
   if (error) {
     return (
-      <div className="flex flex-1 items-center justify-center text-danger-ink text-xs px-4 text-center">
+      <div className="flex flex-1 items-center justify-center text-danger-ink text-caption-1-regular px-4 text-center">
         {error}
       </div>
     );
@@ -77,14 +77,14 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
       {/* Block grid */}
       <div className="flex-1 overflow-y-auto min-h-0 px-2 pb-2">
         {category === "vfx" && (
-          <div className="mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-text-2 leading-relaxed">
+          <div className="mb-2 px-2 py-1.5 rounded-lg bg-purple-500/10 border border-purple-500/20 text-caption-2-regular text-text-2 leading-relaxed">
             VFX blocks use WebGL via HTML-in-Canvas. Enable{" "}
             <span className="font-mono text-text-0">chrome://flags/#html-in-canvas</span> for
             preview.
           </div>
         )}
         {filteredBlocks.length === 0 ? (
-          <div className="flex items-center justify-center h-32 text-neutral-600 text-xs">
+          <div className="flex items-center justify-center h-32 text-text-tertiary text-caption-1-regular">
             No blocks match your search
           </div>
         ) : (
@@ -151,12 +151,12 @@ function CategoryPill({
       type="button"
       onClick={onClick}
       aria-pressed={active}
-      className={`shrink-0 px-2 py-1 rounded-full text-[10px] font-medium transition-colors active:scale-[0.98] ${
+      className={`shrink-0 px-2 py-1 rounded-full text-caption-2-medium transition-colors active:scale-[0.98] ${
         active
           ? colors
             ? `${colors.bg} ${colors.text}`
-            : "bg-neutral-700 text-neutral-200"
-          : "bg-neutral-900 text-neutral-500 hover:text-neutral-300"
+            : "bg-background-tertiary-default text-text-primary"
+          : "bg-background-tertiary-default text-text-tertiary hover:text-text-primary"
       }`}
     >
       {label}
@@ -375,7 +375,7 @@ function BlockCard({
 
   return (
     <div
-      className="group/card rounded-md overflow-hidden cursor-pointer transition-colors bg-neutral-900 hover:bg-neutral-800"
+      className="group/card rounded-lg overflow-hidden cursor-pointer transition-colors bg-background-tertiary-default hover:bg-background-primary-hover"
       draggable
       onDragStart={(e) => {
         e.dataTransfer.effectAllowed = "copy";
@@ -408,9 +408,7 @@ function BlockCard({
           />
         ) : (
           <div className={`w-full h-full flex items-center justify-center ${colors.bg}`}>
-            <span className={`text-[9px] font-medium ${colors.text}`}>
-              {category.toUpperCase()}
-            </span>
+            <span className={`text-caption-2-medium ${colors.text}`}>{category.toUpperCase()}</span>
           </div>
         )}
 
@@ -421,7 +419,7 @@ function BlockCard({
               type="button"
               onClick={handleAdd}
               title="Add to composition at current time"
-              className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-caption-2-medium transition-colors active:scale-[0.97] ${
                 addState === "failed"
                   ? "bg-danger text-on-danger"
                   : "bg-white text-black hover:bg-white/85"
@@ -450,10 +448,10 @@ function BlockCard({
             type="button"
             onClick={handleShowPrompt}
             title="Generate a prompt to paste into your AI agent"
-            className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${
+            className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-lg transition-colors active:scale-[0.97] ${
               onAdd
-                ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]"
-                : "bg-text-0 text-bg-0 hover:bg-text-2 text-[10px] font-semibold"
+                ? "bg-white/15 text-white/90 hover:bg-white/25 text-caption-2-regular"
+                : "bg-text-0 text-bg-0 hover:bg-text-2 text-caption-2-medium"
             }`}
           >
             <svg
@@ -474,12 +472,12 @@ function BlockCard({
         {/* Badges */}
         <div className="absolute top-1 right-1 flex items-center gap-0.5 pointer-events-none">
           {needsWebGL && (
-            <span className="px-1 py-px rounded-sm text-[7px] font-semibold text-purple-300 bg-purple-900/70">
+            <span className="px-1 py-px rounded-md text-caption-2-medium text-purple-300 bg-purple-900/70">
               WebGL
             </span>
           )}
           {duration != null && (
-            <span className="px-1 py-px rounded-sm text-[8px] font-medium text-white/80 bg-black/50">
+            <span className="px-1 py-px rounded-md text-caption-2-medium text-white/80 bg-black/50">
               {duration}s
             </span>
           )}
@@ -488,12 +486,12 @@ function BlockCard({
 
       {/* Info */}
       <div className="px-1.5 py-1.5">
-        <div className="text-[10px] font-medium text-neutral-200 truncate leading-tight">
+        <div className="text-caption-2-medium text-text-primary truncate leading-tight">
           {title}
         </div>
         <div className="flex items-center gap-1 mt-0.5">
           <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${colors.dot}`} />
-          <span className={`text-[8px] ${colors.text}`}>
+          <span className={`text-caption-2-regular ${colors.text}`}>
             {BLOCK_CATEGORIES.find((c) => c.id === category)?.label}
           </span>
         </div>
diff --git a/packages/studio/src/components/sidebar/CompositionsTab.tsx b/packages/studio/src/components/sidebar/CompositionsTab.tsx
index bf2a308e0ae..1238b8e3822 100644
--- a/packages/studio/src/components/sidebar/CompositionsTab.tsx
+++ b/packages/studio/src/components/sidebar/CompositionsTab.tsx
@@ -313,18 +313,18 @@ function CompCard({
       }}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
-      className={`group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-hidden focus-visible:bg-neutral-800/60 ${
+      className={`group/card flex w-full cursor-grab select-none items-center gap-2.5 rounded-2lg p-1.5 text-left outline-hidden transition-colors focus-visible:bg-background-primary-hover active:cursor-grabbing ${
         isActive
-          ? "bg-studio-accent/10 border-l-2 border-studio-accent"
-          : "border-l-2 border-transparent hover:bg-neutral-800/50"
+          ? "bg-background-primary-hover ring-1 ring-inset ring-border-button-default"
+          : "hover:bg-background-primary-hover"
       }`}
     >
       <div
         ref={thumbnailBox}
-        className="w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative"
+        className="relative h-[45px] w-20 shrink-0 overflow-hidden rounded-lg bg-background-tertiary-default"
       >
         {thumbnailFailed ? (
-          <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600">
+          <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-caption-2-regular text-text-tertiary">
             Preview unavailable
           </div>
         ) : !frameUrl ? null : (
@@ -377,12 +377,12 @@ function CompCard({
         title={lintInfo && lintInfo.count > 0 ? lintInfo.messages.join("\n") : undefined}
       >
         <div className="flex items-center gap-1">
-          <span className="text-[11px] font-medium text-neutral-300 truncate">{name}</span>
+          <span className="truncate text-caption-1-medium text-text-primary">{name}</span>
           {isRoot && (
             <span
               aria-label="Root composition: opens automatically on load"
               title="Root composition: opens automatically on load"
-              className="flex-shrink-0 rounded-full bg-neutral-700/60 px-1.5 py-px text-[8px] font-bold uppercase tracking-wide text-neutral-300"
+              className="shrink-0 rounded-full bg-background-tertiary-default px-1.5 text-caption-2-medium text-text-secondary"
             >
               Root
             </span>
@@ -390,13 +390,13 @@ function CompCard({
           {lintInfo && lintInfo.count > 0 && (
             <span
               aria-label={`${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`}
-              className="shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink"
+              className="min-w-4 shrink-0 rounded-full bg-background-tertiary-default px-1 text-center text-caption-2-medium text-warning-ink"
             >
               {lintInfo.count}
             </span>
           )}
         </div>
-        <span className="text-[9px] text-neutral-600 truncate block">{comp}</span>
+        <span className="block truncate text-caption-1-regular text-text-secondary">{comp}</span>
       </div>
       {onAddToTimeline && (
         <button
@@ -407,7 +407,7 @@ function CompCard({
             event.stopPropagation();
             onAddToTimeline();
           }}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-accent-ink group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
+          className="flex size-8 shrink-0 items-center justify-center rounded-lg text-foreground-icon-secondary opacity-0 transition-[color,background-color,opacity] hover:bg-background-primary-hover hover:text-text-primary group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
         >
           <span aria-hidden="true">+</span>
         </button>
@@ -425,10 +425,10 @@ function CompCard({
             // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
             // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
             // so the card row already has the room.
-            className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${
+            className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-foreground-icon-secondary transition-colors ${
               isRendering
-                ? "text-neutral-600 cursor-not-allowed"
-                : "text-neutral-600 hover:text-accent-ink hover:bg-neutral-800"
+                ? "cursor-not-allowed text-text-disabled"
+                : "hover:bg-background-primary-hover hover:text-text-primary"
             }`}
           >
             <svg
@@ -469,13 +469,13 @@ export const CompositionsTab = memo(function CompositionsTab({
   if (compositions.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center px-4">
-        <p className="text-xs text-neutral-600 text-center">No compositions found</p>
+        <p className="text-center text-body-regular text-text-tertiary">No compositions found</p>
       </div>
     );
   }
 
   return (
-    <div className="flex-1 overflow-y-auto" data-composition-list>
+    <div className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-1.5" data-composition-list>
       {compositions.map((comp) => (
         <CompCard
           key={`${projectId}:${comp}`}
diff --git a/packages/studio/src/components/sidebar/GlobalAssetsView.tsx b/packages/studio/src/components/sidebar/GlobalAssetsView.tsx
index 58f7fc086c0..7ffcce2861c 100644
--- a/packages/studio/src/components/sidebar/GlobalAssetsView.tsx
+++ b/packages/studio/src/components/sidebar/GlobalAssetsView.tsx
@@ -60,11 +60,13 @@ export function GlobalAssetsView({ searchQuery }: { searchQuery: string }) {
   const rows = useMemo(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
 
   if (records === null) {
-    return <p className="px-4 py-3 text-[11px] text-panel-text-5">Loading global assets…</p>;
+    return (
+      <p className="px-4 py-3 text-caption-1-regular text-panel-text-5">Loading global assets…</p>
+    );
   }
   if (rows.length === 0) {
     return (
-      <p className="px-4 py-3 text-[11px] text-panel-text-5">
+      <p className="px-4 py-3 text-caption-1-regular text-panel-text-5">
         No assets in the global cache yet. Resolved media is promoted to <code>~/.media</code> and
         becomes reusable across projects.
       </p>
@@ -72,19 +74,19 @@ export function GlobalAssetsView({ searchQuery }: { searchQuery: string }) {
   }
   return (
     <div>
-      <div className="px-4 py-2 border-t border-panel-border text-[11px] text-panel-text-5">
+      <div className="px-4 py-2 border-t border-panel-border text-caption-1-regular text-panel-text-5">
         {rows.length} reusable across all projects
       </div>
       {rows.map((row) => (
         <div
           key={row.id}
-          className="px-4 py-1.5 flex items-center gap-2.5 border-l-2 border-transparent hover:bg-neutral-800/50"
+          className="px-4 py-1.5 flex items-center gap-2.5 hover:bg-background-primary-hover"
           title={`${row.id} · ${row.type}`}
         >
-          <span className="text-[9px] font-medium text-neutral-600 uppercase w-10 shrink-0">
+          <span className="text-caption-2-medium text-text-tertiary uppercase w-10 shrink-0">
             {row.type}
           </span>
-          <span className="text-xs text-panel-text-1 truncate">{row.label}</span>
+          <span className="text-caption-1-regular text-panel-text-1 truncate">{row.label}</span>
         </div>
       ))}
     </div>
diff --git a/packages/studio/src/components/sidebar/PromptPreviewModal.tsx b/packages/studio/src/components/sidebar/PromptPreviewModal.tsx
index 16e024b0946..4b9aafb257f 100644
--- a/packages/studio/src/components/sidebar/PromptPreviewModal.tsx
+++ b/packages/studio/src/components/sidebar/PromptPreviewModal.tsx
@@ -1,4 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from "react";
+import { Button, cn } from "../ui";
+import { DialogHeader, dialogClasses } from "../ui/Dialog";
 import { useDialogBehavior } from "../ui/useDialogBehavior";
 
 export function PromptPreviewModal({
@@ -46,9 +48,12 @@ export function PromptPreviewModal({
 
   return (
     <div
-      className={`fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs transition-opacity duration-150 ease-out ${
-        entered ? "opacity-100" : "opacity-0"
-      }`}
+      className={cn(
+        dialogClasses.backdrop,
+        dialogClasses.centered,
+        "transition-opacity duration-150 ease-out",
+        entered ? "opacity-100" : "opacity-0",
+      )}
       onClick={requestClose}
     >
       <div
@@ -57,36 +62,12 @@ export function PromptPreviewModal({
         aria-modal="true"
         aria-label={`Ask agent: ${title}`}
         tabIndex={-1}
-        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden"
+        className={cn(dialogClasses.panel, "w-[560px]")}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
-          <div>
-            <h3 className="text-sm font-medium text-neutral-200">Ask agent</h3>
-            <p className="text-xs text-neutral-500 mt-0.5">{title}</p>
-          </div>
-          <button
-            aria-label="Close"
-            className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 active:scale-[0.95]"
-            onClick={onClose}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              aria-hidden="true"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto px-5 py-4">
-          <p className="text-[11px] text-neutral-500 mb-2">
+        <DialogHeader title="Ask agent" description={title} onClose={onClose} />
+        <div className={dialogClasses.body}>
+          <p className={cn(dialogClasses.hint, "mb-2")}>
             Edit the prompt below, then copy and paste into your AI agent
           </p>
           <textarea
@@ -97,29 +78,23 @@ export function PromptPreviewModal({
             onKeyDown={(e) => {
               if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void handleCopy();
             }}
-            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-hidden focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+            className={cn(
+              dialogClasses.field,
+              "min-h-[240px] resize-y font-mono text-caption-1-regular",
+            )}
           />
         </div>
-        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
-          <span className="text-[11px] text-neutral-600">
+        <div className={dialogClasses.footer}>
+          <span className={dialogClasses.hint}>
             {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
           </span>
-          <button
-            className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${
-              copyState === "copied"
-                ? "bg-accent text-on-accent"
-                : copyState === "failed"
-                  ? "bg-danger text-on-danger"
-                  : "bg-accent text-on-accent hover:bg-accent-hover"
-            }`}
-            onClick={handleCopy}
-          >
+          <Button variant={copyState === "failed" ? "danger" : "primary"} onClick={handleCopy}>
             {copyState === "copied"
               ? "Copied!"
               : copyState === "failed"
                 ? "Copy failed"
                 : "Copy prompt"}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/packages/studio/src/components/sidebar/SidebarLintButton.tsx b/packages/studio/src/components/sidebar/SidebarLintButton.tsx
index e57a08e00b2..74014661a38 100644
--- a/packages/studio/src/components/sidebar/SidebarLintButton.tsx
+++ b/packages/studio/src/components/sidebar/SidebarLintButton.tsx
@@ -12,12 +12,12 @@ export function SidebarLintButton({
   hasError?: boolean;
 }) {
   return (
-    <div className="border-t border-neutral-800 p-2 shrink-0">
+    <div className="border-t border-border-button-default p-2 shrink-0">
       <button
         type="button"
         onClick={onLint}
         disabled={linting}
-        className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-warning-ink enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
+        className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg text-caption-1-medium text-text-tertiary enabled:hover:text-warning-ink enabled:hover:bg-background-primary-hover enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
       >
         <svg
           width="12"
@@ -38,8 +38,8 @@ export function SidebarLintButton({
             style={hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : undefined}
             className={
               hasError
-                ? "ml-1 min-w-[16px] rounded-full bg-danger px-1 text-[9px] font-bold text-on-danger animate-pulse motion-reduce:animate-none"
-                : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-warning-ink"
+                ? "ml-1 min-w-[16px] rounded-full bg-danger px-1 text-caption-2-medium text-on-danger animate-pulse motion-reduce:animate-none"
+                : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-caption-2-medium text-warning-ink"
             }
           >
             {findingCount}
diff --git a/packages/studio/src/components/timelineToolbarStyles.ts b/packages/studio/src/components/timelineToolbarStyles.ts
index ec9819027c4..ecbb01ede2d 100644
--- a/packages/studio/src/components/timelineToolbarStyles.ts
+++ b/packages/studio/src/components/timelineToolbarStyles.ts
@@ -1,5 +1,5 @@
 // CapCut-flat icon buttons: a transparent 28px hit area with a subtle hover wash.
-export const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
+export const flatBtn = "flex h-7 w-7 items-center justify-center rounded-lg transition-colors";
 export const flatIdle = `${flatBtn} text-text-2 hover:bg-hover hover:text-text-0 active:bg-press active:scale-[0.98]`;
 export const flatActive = `${flatBtn} bg-on text-text-0 hover:bg-on-hover active:scale-[0.98]`;
 export const flatDisabled = `${flatBtn} text-text-off cursor-not-allowed`;
diff --git a/packages/studio/src/components/ui/Button.test.tsx b/packages/studio/src/components/ui/Button.test.tsx
index 30fe90a6563..270e8cee3be 100644
--- a/packages/studio/src/components/ui/Button.test.tsx
+++ b/packages/studio/src/components/ui/Button.test.tsx
@@ -98,8 +98,8 @@ describe("Button classes", () => {
     expect(classes).not.toContain("text-step-12");
   });
 
-  it("wears BoardUI's button for every variant", () => {
-    for (const variant of VARIANTS) {
+  it("wears BoardUI's button for every variant but ghost", () => {
+    for (const variant of VARIANTS.filter((v) => v !== "ghost")) {
       const classes = classesOf(mountHost(<Button variant={variant}>Export</Button>));
       cleanupMounted();
       for (const cls of buttonStyles.variant[variant].split(" ").filter(Boolean)) {
@@ -108,6 +108,12 @@ describe("Button classes", () => {
     }
   });
 
+  it("keeps ghost a bare button rather than BoardUI's accent tint", () => {
+    const classes = classesOf(mountHost(<Button variant="ghost">Undo</Button>));
+    expect(classes).toContain("bg-transparent");
+    expect(classes).not.toContain("bg-button-ghost-background");
+  });
+
   it("uses BoardUI's press motion, which stills itself under reduced motion", () => {
     expect(classesOf(mountHost(<Button>Export</Button>))).toContain("button-press-motion");
 
diff --git a/packages/studio/src/components/ui/Button.tsx b/packages/studio/src/components/ui/Button.tsx
index 62ba96363b0..fdb5e348fc4 100644
--- a/packages/studio/src/components/ui/Button.tsx
+++ b/packages/studio/src/components/ui/Button.tsx
@@ -23,10 +23,13 @@ interface ButtonProps extends ButtonBaseProps {
   icon?: ReactNode;
 }
 
-export const boardSize = { sm: "xs", md: "small", lg: "medium" } as const;
-
 export const buttonBase = buttonStyles.base;
-export const buttonVariants: Record<ButtonVariant, string> = buttonStyles.variant;
+/** BoardUI's ghost is an accent tint; Studio's ghost is a bare toolbar button, so it stays quiet on BoardUI's neutrals. */
+export const buttonVariants: Record<ButtonVariant, string> = {
+  ...buttonStyles.variant,
+  ghost:
+    "bg-transparent text-foreground-icon-secondary hover:bg-background-primary-hover hover:text-text-primary active:bg-background-primary-active disabled:bg-transparent disabled:text-text-disabled aria-disabled:text-text-disabled",
+};
 export const buttonSizes: Record<ButtonSize, string> = {
   sm: cn(buttonStyles.size.xs, "gap-1 [&_svg]:size-3.5"),
   md: cn(buttonStyles.size.small, "gap-1.5 [&_svg]:size-4"),
diff --git a/packages/studio/src/components/ui/Dialog.tsx b/packages/studio/src/components/ui/Dialog.tsx
new file mode 100644
index 00000000000..d72a8aecfcb
--- /dev/null
+++ b/packages/studio/src/components/ui/Dialog.tsx
@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import { RiAlertFill, RiErrorWarningFill } from "@remixicon/react";
+import { cn } from "./cn";
+import { CloseButton } from "../../boardui/components/base/buttons/close-button";
+
+/** BoardUI's modal card, for Studio's dialogs that keep their own focus handling (useDialogBehavior). */
+export const dialogClasses = {
+  backdrop: "hf-backdrop-in fixed inset-0 z-100 bg-black/20",
+  centered: "flex items-center justify-center p-4",
+  panel:
+    "flex max-h-[80vh] flex-col overflow-hidden rounded-3xl border border-border-button-default bg-background-primary-default text-text-primary shadow-dropdown outline-hidden",
+  body: "flex-1 overflow-y-auto px-5",
+  footer: "flex items-center justify-between gap-3 px-5 pt-3 pb-5",
+  hint: "text-caption-1-regular text-text-tertiary",
+  field:
+    "w-full rounded-2lg bg-background-tertiary-default px-3 py-2 text-body-regular text-text-primary outline-none ring-2 ring-inset ring-transparent placeholder:text-text-tertiary hover:ring-border-button-hover focus:ring-border-button-active",
+};
+
+export function DialogHeader({
+  title,
+  titleId,
+  description,
+  leading,
+  onClose,
+}: {
+  title: ReactNode;
+  titleId?: string;
+  description?: ReactNode;
+  leading?: ReactNode;
+  onClose: () => void;
+}) {
+  return (
+    <div className="flex items-start gap-3 px-5 pt-5 pb-3">
+      {leading}
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <h2 id={titleId} className="text-title-3-medium">
+          {title}
+        </h2>
+        {description && <p className="text-body-regular text-text-secondary">{description}</p>}
+      </div>
+      <CloseButton aria-label="Close" size="sm" onClick={onClose} />
+    </div>
+  );
+}
+
+/** A notice floating over the canvas, on BoardUI's toast card with a tone icon. */
+export function Banner({
+  tone,
+  role = "alert",
+  className,
+  children,
+}: {
+  tone: "warning" | "error";
+  role?: "alert" | "status";
+  className?: string;
+  children: ReactNode;
+}) {
+  const Icon = tone === "error" ? RiErrorWarningFill : RiAlertFill;
+  return (
+    <div
+      role={role}
+      className={cn(
+        "hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-xl border bg-background-primary-default px-4 py-2 text-body-regular text-text-primary shadow-dropdown",
+        tone === "error" ? "border-border-error-default" : "border-border-button-default",
+        className,
+      )}
+    >
+      <Icon
+        className={cn(
+          "size-4 shrink-0",
+          tone === "error" ? "text-foreground-icon-error" : "text-warning-ink",
+        )}
+      />
+      {children}
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
index 907baeb631d..83c26bd5bbc 100644
--- a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
+++ b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
@@ -62,8 +62,10 @@ export function VideoFrameThumbnail({
 
   if (failed && !frame) {
     return (
-      <div className="w-full h-full bg-neutral-800 flex items-center justify-center">
-        <span className="text-[9px] font-medium text-neutral-600">{fallbackLabel ?? "VIDEO"}</span>
+      <div className="w-full h-full bg-background-tertiary-default flex items-center justify-center">
+        <span className="text-[9px] font-medium text-text-tertiary">
+          {fallbackLabel ?? "VIDEO"}
+        </span>
       </div>
     );
   }
diff --git a/packages/studio/src/player/components/AudioGainDialog.tsx b/packages/studio/src/player/components/AudioGainDialog.tsx
index 64503464fe1..97d69d54e43 100644
--- a/packages/studio/src/player/components/AudioGainDialog.tsx
+++ b/packages/studio/src/player/components/AudioGainDialog.tsx
@@ -140,7 +140,7 @@ export function AudioGainDialog({
         aria-label={`${ROWS.find((row) => row.mode === rowMode)?.label ?? ""} dB`}
         value={values[rowMode]}
         disabled={mode !== rowMode}
-        className="w-16 rounded border border-neutral-700 bg-neutral-950 px-1 text-right disabled:opacity-50"
+        className="w-16 rounded border border-border-button-default bg-background-tertiary-default px-1 text-right disabled:opacity-50"
         onChange={(event) =>
           setValues((prev) => ({ ...prev, [rowMode]: Number(event.target.value) || 0 }))
         }
@@ -158,7 +158,7 @@ export function AudioGainDialog({
         role="dialog"
         aria-modal="true"
         aria-label={AUDIO_GAIN_LABEL}
-        className="w-[340px] rounded-md border border-neutral-700 bg-neutral-900 p-4 text-xs text-neutral-200 shadow-xl"
+        className="w-[340px] rounded-md border border-border-button-default bg-background-tertiary-default p-4 text-xs text-text-primary shadow-xl"
         onKeyDown={(event) => {
           event.stopPropagation();
           if (event.key === "Escape") onClose();
@@ -184,7 +184,7 @@ export function AudioGainDialog({
           checked={mode === "loudness"}
           onSelect={() => setMode("loudness")}
         />
-        <div className="mt-3 text-neutral-400" data-testid="audio-gain-peak">
+        <div className="mt-3 text-text-secondary" data-testid="audio-gain-peak">
           Peak Amplitude:{" "}
           {peaks === null ? "measuring…" : peakDb === null ? "Unavailable" : dbText(peakDb)}
         </div>
@@ -192,7 +192,7 @@ export function AudioGainDialog({
         <div className="mt-4 flex justify-end gap-2">
           <button
             type="button"
-            className="rounded px-3 py-1 text-neutral-300 hover:bg-neutral-800"
+            className="rounded px-3 py-1 text-text-primary hover:bg-background-primary-hover"
             onClick={onClose}
           >
             Cancel
diff --git a/packages/studio/src/player/components/AudioWaveform.tsx b/packages/studio/src/player/components/AudioWaveform.tsx
index ef5b2f55140..b7d8a477f44 100644
--- a/packages/studio/src/player/components/AudioWaveform.tsx
+++ b/packages/studio/src/player/components/AudioWaveform.tsx
@@ -323,7 +323,7 @@ export const AudioWaveform = memo(function AudioWaveform({
                 background: "var(--timeline-waveform-error)",
               }}
             />
-            <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+            <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-text-tertiary">
               waveform unavailable
             </span>
           </div>
diff --git a/packages/studio/src/player/components/AutomationSelectionMenu.tsx b/packages/studio/src/player/components/AutomationSelectionMenu.tsx
index fe79a283123..3bc33cb0605 100644
--- a/packages/studio/src/player/components/AutomationSelectionMenu.tsx
+++ b/packages/studio/src/player/components/AutomationSelectionMenu.tsx
@@ -30,7 +30,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
 }: AutomationSelectionMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   const row =
-    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-hover disabled:opacity-40";
+    "block w-full px-2 py-1 text-left text-caption-2-regular text-panel-text-1 hover:bg-panel-hover disabled:opacity-40";
   // Same edge-clamping precedent as TrackGapContextMenu: without it a
   // right-click near the bottom/right of the timeline renders this menu
   // partially off-screen.
diff --git a/packages/studio/src/player/components/ClipContextMenu.tsx b/packages/studio/src/player/components/ClipContextMenu.tsx
index ebf0d544ca6..f705206488e 100644
--- a/packages/studio/src/player/components/ClipContextMenu.tsx
+++ b/packages/studio/src/player/components/ClipContextMenu.tsx
@@ -74,7 +74,7 @@ function HostItems({
             {item.label}
           </span>
           {item.shortcut && (
-            <span className="text-neutral-500 text-[10px] ml-3">{item.shortcut}</span>
+            <span className="text-text-tertiary text-[10px] ml-3">{item.shortcut}</span>
           )}
         </button>
       ))}
@@ -146,10 +146,10 @@ export const ClipContextMenu = memo(function ClipContextMenu({
           <button
             type="button"
             role="menuitem"
-            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden focus-visible:bg-neutral-800 ${
+            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden focus-visible:bg-background-primary-hover ${
               canSplit
-                ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
-                : "text-neutral-600 cursor-not-allowed"
+                ? "text-text-primary hover:bg-background-primary-hover cursor-pointer"
+                : "text-text-tertiary cursor-not-allowed"
             }`}
             disabled={!canSplit}
             onClick={() => {
@@ -160,7 +160,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             }}
           >
             <span>{splitLabel}</span>
-            <span className="text-neutral-500 text-[10px] ml-3">{splitShortcut}</span>
+            <span className="text-text-tertiary text-[10px] ml-3">{splitShortcut}</span>
           </button>
         )}
         {tools && splitLabel && (
@@ -212,7 +212,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             }}
           >
             <span>{selectionSize > 1 ? `Copy ${selectionSize} clips` : "Copy"}</span>
-            <span className="text-neutral-500 text-[10px] ml-3">⌘C</span>
+            <span className="text-text-tertiary text-[10px] ml-3">⌘C</span>
           </button>
         )}
         {onPaste && (
@@ -228,7 +228,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             }}
           >
             <span>Paste</span>
-            <span className="text-neutral-500 text-[10px] ml-3">⌘V</span>
+            <span className="text-text-tertiary text-[10px] ml-3">⌘V</span>
           </button>
         )}
         {onDuplicate && (
@@ -242,7 +242,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             }}
           >
             <span>{selectionSize > 1 ? `Duplicate ${selectionSize} clips` : "Duplicate"}</span>
-            <span className="text-neutral-500 text-[10px] ml-3">⌘D</span>
+            <span className="text-text-tertiary text-[10px] ml-3">⌘D</span>
           </button>
         )}
       </div>
@@ -251,14 +251,14 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         <button
           type="button"
           role="menuitem"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-background-primary-hover focus-visible:bg-background-primary-hover outline-hidden cursor-pointer text-left"
           onClick={() => {
             onDelete(element);
             onClose();
           }}
         >
           <span>Delete</span>
-          <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
+          <span className="text-text-tertiary text-[10px] ml-3">⌫</span>
         </button>
         {tools && <ClipMenuLinkItems part="delete" element={element} onClose={onClose} />}
       </div>
diff --git a/packages/studio/src/player/components/EditModal.tsx b/packages/studio/src/player/components/EditModal.tsx
index 1f44fb0654a..96b50162a07 100644
--- a/packages/studio/src/player/components/EditModal.tsx
+++ b/packages/studio/src/player/components/EditModal.tsx
@@ -129,27 +129,27 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
 
   return createPortal(
     <div ref={popoverRef} style={style}>
-      <div className="w-80 bg-neutral-900 border border-neutral-700/60 rounded-xl shadow-2xl shadow-black/40 overflow-hidden">
+      <div className="w-80 bg-background-tertiary-default border border-border-button-default rounded-xl shadow-2xl shadow-black/40 overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-b border-neutral-800/60">
+        <div className="flex items-center justify-between px-4 py-2.5 border-b border-border-button-default">
           <div className="flex items-center gap-2">
             <div className="w-1.5 h-1.5 rounded-full bg-studio-accent" />
-            <span className="text-[11px] font-medium text-neutral-300">
+            <span className="text-caption-2-medium text-text-primary">
               {formatTime(start)} to {formatTime(end)}
             </span>
           </div>
-          <span className="text-[10px] text-neutral-600">
+          <span className="text-[10px] text-text-tertiary">
             {elementsInRange.length} element{elementsInRange.length !== 1 ? "s" : ""}
           </span>
         </div>
 
         {/* Elements */}
         {elementsInRange.length > 0 && (
-          <div className="px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto">
+          <div className="px-4 py-2 border-b border-border-button-default max-h-24 overflow-y-auto">
             {elementsInRange.map((el) => (
               <div key={el.id} className="flex items-center justify-between py-0.5">
                 <span className="text-[10px] font-mono text-accent-ink/80">#{el.id}</span>
-                <span className="text-[10px] text-neutral-600">{el.tag}</span>
+                <span className="text-[10px] text-text-tertiary">{el.tag}</span>
               </div>
             ))}
           </div>
@@ -169,7 +169,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             }}
             placeholder="What should change?"
             rows={2}
-            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/40 transition-colors"
+            className="w-full px-3 py-2 text-xs bg-background-tertiary-default border border-border-button-default rounded-lg text-text-primary placeholder:text-text-tertiary resize-none focus:outline-hidden focus:border-border-button-active transition-colors"
           />
         </div>
 
@@ -183,17 +183,17 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
           <button
             onClick={handleCopyPrompt}
             disabled={!buildPromptCopyText(prompt)}
-            className={`py-1.5 text-[11px] font-medium rounded-lg transition-all border ${
+            className={`py-1.5 text-caption-2-medium rounded-lg transition-all border ${
               copiedPromptOnly
                 ? "bg-accent/15 text-accent-ink border-accent/30"
-                : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"
+                : "bg-background-tertiary-default text-text-primary border-border-button-default hover:bg-background-primary-hover"
             } disabled:opacity-50 disabled:cursor-not-allowed`}
           >
             {copiedPromptOnly ? "Prompt Copied!" : "Copy Prompt"}
           </button>
           <button
             onClick={handleCopy}
-            className={`py-1.5 text-[11px] font-medium rounded-lg transition-all ${
+            className={`py-1.5 text-caption-2-medium rounded-lg transition-all ${
               copiedAgentPrompt
                 ? "bg-accent/15 text-accent-ink border border-accent/30"
                 : "bg-studio-accent/15 text-accent-ink border border-studio-accent/25 hover:bg-studio-accent/25"
diff --git a/packages/studio/src/player/components/ImageThumbnail.tsx b/packages/studio/src/player/components/ImageThumbnail.tsx
index c3b8706088a..16f2feb9f76 100644
--- a/packages/studio/src/player/components/ImageThumbnail.tsx
+++ b/packages/studio/src/player/components/ImageThumbnail.tsx
@@ -56,7 +56,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
           {(index) => (
             <div
               key={index}
-              className="relative h-full shrink-0 overflow-hidden bg-neutral-900"
+              className="relative h-full shrink-0 overflow-hidden bg-background-tertiary-default"
               style={{ width: frameW }}
             >
               <img
diff --git a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
index ab34a663e1c..6f140ac43a6 100644
--- a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
+++ b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
@@ -41,7 +41,7 @@ interface KeyframeDiamondContextMenuProps {
 }
 
 const ITEM_CLS = `${menuClasses.row} ${menuClasses.rowEnabled} flex items-center gap-2`;
-const DESTRUCTIVE_ITEM_CLS = `${menuClasses.row} text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer flex items-center gap-2`;
+const DESTRUCTIVE_ITEM_CLS = `${menuClasses.row} text-danger-ink hover:bg-background-primary-hover focus-visible:bg-background-primary-hover cursor-pointer flex items-center gap-2`;
 
 export function KeyframeDiamondContextMenu({
   state,
@@ -126,7 +126,7 @@ export function KeyframeDiamondContextMenu({
           }}
         >
           <span>Edit Ease…</span>
-          <span className="text-[10px] text-neutral-500">{state.currentEase ?? "default"}</span>
+          <span className="text-[10px] text-text-tertiary">{state.currentEase ?? "default"}</span>
         </button>
       )}
 
diff --git a/packages/studio/src/player/components/LayerDisclosureRow.tsx b/packages/studio/src/player/components/LayerDisclosureRow.tsx
index 5de8ac2e937..e32abeee6c0 100644
--- a/packages/studio/src/player/components/LayerDisclosureRow.tsx
+++ b/packages/studio/src/player/components/LayerDisclosureRow.tsx
@@ -37,7 +37,7 @@ export function LaneToggleButton({
       title={`${isExpanded ? "Hide" : "Show"} lanes`}
       // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The glyph stays 11px;
       // only the hit box grows.
-      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-caption-2-regular leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
         isExpanded
           ? "text-[var(--timeline-accent)]"
           : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
@@ -84,7 +84,7 @@ export function LayerDisclosureRow({
 }) {
   return (
     <div
-      className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
+      className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-caption-2-regular"
       style={{
         width: columnWidth,
         height: TRACK_H,
diff --git a/packages/studio/src/player/components/Player.tsx b/packages/studio/src/player/components/Player.tsx
index 6b84bc2718c..cf237812567 100644
--- a/packages/studio/src/player/components/Player.tsx
+++ b/packages/studio/src/player/components/Player.tsx
@@ -527,7 +527,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 <button
                   type="button"
                   onClick={handleContinueAnyway}
-                  className="px-3 py-1.5 text-[11px] rounded-md border border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800 transition-colors"
+                  className="px-3 py-1.5 text-caption-2-regular rounded-md border border-border-button-default text-text-primary hover:border-border-button-hover hover:bg-background-primary-hover transition-colors"
                 >
                   Continue anyway
                 </button>
@@ -543,7 +543,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           >
             <div className="max-w-sm">
               <p className="text-sm font-semibold text-white">Preview failed to load</p>
-              <p className="mt-1 text-xs text-neutral-400">{previewError}</p>
+              <p className="mt-1 text-xs text-text-secondary">{previewError}</p>
               <button
                 type="button"
                 className="mt-4 rounded-md bg-white px-3 py-1.5 text-xs font-semibold text-black transition-colors hover:bg-neutral-200"
diff --git a/packages/studio/src/player/components/PlayerControls.tsx b/packages/studio/src/player/components/PlayerControls.tsx
index e6d7efe45cf..bab8820e331 100644
--- a/packages/studio/src/player/components/PlayerControls.tsx
+++ b/packages/studio/src/player/components/PlayerControls.tsx
@@ -78,7 +78,7 @@ const LoopButton = memo(function LoopButton({
         }}
         disabled={disabled}
         className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${
-          loopEnabled ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
+          loopEnabled ? "text-accent-ink" : "text-text-tertiary hover:text-text-primary"
         }`}
         aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
         aria-pressed={loopEnabled}
@@ -120,7 +120,7 @@ const FullscreenButton = memo(function FullscreenButton({
           onToggleFullscreen();
         }}
         className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${
-          isFullscreen ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
+          isFullscreen ? "text-accent-ink" : "text-text-tertiary hover:text-text-primary"
         }`}
         aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
@@ -241,13 +241,13 @@ export const PlayerControls = memo(function PlayerControls({
             type="button"
             onClick={() => setTimeDisplayMode(timeDisplayMode === "time" ? "frame" : "time")}
             disabled={disabled}
-            className="min-w-0 justify-self-start whitespace-nowrap font-mono text-[11px] tabular-nums text-neutral-400 transition-colors hover:text-neutral-200 disabled:pointer-events-none"
+            className="min-w-0 justify-self-start whitespace-nowrap font-mono text-caption-2-regular tabular-nums text-text-secondary transition-colors hover:text-text-primary disabled:pointer-events-none"
           >
             <span ref={timeDisplayRef}>{formatTime(0)}</span>
             {timeDisplayMode === "time" ? (
               <>
                 <span className="mx-0.5 text-text-off">/</span>
-                <span className="text-neutral-600">{formatTime(duration)}</span>
+                <span className="text-text-tertiary">{formatTime(duration)}</span>
               </>
             ) : null}
           </button>
@@ -262,7 +262,7 @@ export const PlayerControls = memo(function PlayerControls({
               onTogglePlay();
             }}
             disabled={controlsDisabled}
-            className="flex h-7 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
+            className="flex h-7 w-8 items-center justify-center justify-self-center rounded-md text-text-primary transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
           >
             <PlayPauseMorphIcon playing={isPlaying} />
           </button>
diff --git a/packages/studio/src/player/components/ShortcutsPanel.tsx b/packages/studio/src/player/components/ShortcutsPanel.tsx
index 65201298228..d625061610c 100644
--- a/packages/studio/src/player/components/ShortcutsPanel.tsx
+++ b/packages/studio/src/player/components/ShortcutsPanel.tsx
@@ -96,7 +96,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
       >
         <div ref={panelBodyRef} tabIndex={-1} className="min-h-0 overflow-y-auto outline-hidden">
           <div className="px-3 pt-3 pb-2.5">
-            <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
+            <p className="text-[9px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5">
               Jump to frame
             </p>
             <form onSubmit={handleJumpSubmit} className="flex items-center gap-1.5">
@@ -108,7 +108,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 pattern="[0-9]*"
                 aria-label="Jump to frame"
                 placeholder="frame number"
-                className="h-6 flex-1 rounded-sm border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-hidden transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
+                className="h-6 flex-1 rounded-sm border border-border-button-default bg-background-tertiary-default px-2 text-[10px] font-mono tabular-nums text-text-primary outline-hidden transition-colors placeholder:text-text-tertiary focus:border-border-button-active"
                 onKeyDown={handleJumpKeyDown}
                 onBlur={commitJumpFrame}
               />
@@ -116,7 +116,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 <button
                   type="submit"
                   disabled={disabled}
-                  className="h-6 px-2 rounded-sm border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
+                  className="h-6 px-2 rounded-sm border border-border-button-default text-[10px] text-text-primary transition-colors hover:border-border-button-hover hover:bg-background-primary-hover disabled:opacity-40"
                 >
                   Go
                 </button>
@@ -125,28 +125,28 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           </div>
           <div className="border-t border-border" />
           <div className="px-3 pt-2.5 pb-2">
-            <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
+            <p className="text-[9px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5">
               Work area
             </p>
             <div className="flex flex-col gap-1">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
+                  <span className="font-mono text-[10px] rounded-sm border border-border-button-default px-1.5 py-0.5 text-text-primary min-w-[20px] text-center bg-hover">
                     I
                   </span>
-                  <span className="text-[10px] text-neutral-400">In-point</span>
+                  <span className="text-[10px] text-text-secondary">In-point</span>
                 </div>
                 <div className="flex items-center gap-1.5">
                   {inPoint !== null ? (
                     <>
-                      <span className="font-mono text-[10px] text-neutral-300">
+                      <span className="font-mono text-[10px] text-text-primary">
                         {formatTime(inPoint)}
                       </span>
                       <Tooltip label="Clear in-point">
                         <button
                           type="button"
                           onClick={() => setInPoint(null)}
-                          className="w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors"
+                          className="w-4 h-4 flex items-center justify-center rounded-sm text-text-tertiary hover:text-text-primary transition-colors"
                           aria-label="Clear in-point"
                         >
                           <svg
@@ -163,28 +163,28 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                       </Tooltip>
                     </>
                   ) : (
-                    <span className="text-[10px] text-neutral-600">Not set</span>
+                    <span className="text-[10px] text-text-tertiary">Not set</span>
                   )}
                 </div>
               </div>
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
+                  <span className="font-mono text-[10px] rounded-sm border border-border-button-default px-1.5 py-0.5 text-text-primary min-w-[20px] text-center bg-hover">
                     O
                   </span>
-                  <span className="text-[10px] text-neutral-400">Out-point</span>
+                  <span className="text-[10px] text-text-secondary">Out-point</span>
                 </div>
                 <div className="flex items-center gap-1.5">
                   {outPoint !== null ? (
                     <>
-                      <span className="font-mono text-[10px] text-neutral-300">
+                      <span className="font-mono text-[10px] text-text-primary">
                         {formatTime(outPoint)}
                       </span>
                       <Tooltip label="Clear out-point">
                         <button
                           type="button"
                           onClick={() => setOutPoint(null)}
-                          className="w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors"
+                          className="w-4 h-4 flex items-center justify-center rounded-sm text-text-tertiary hover:text-text-primary transition-colors"
                           aria-label="Clear out-point"
                         >
                           <svg
@@ -201,7 +201,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                       </Tooltip>
                     </>
                   ) : (
-                    <span className="text-[10px] text-neutral-600">Not set</span>
+                    <span className="text-[10px] text-text-tertiary">Not set</span>
                   )}
                 </div>
               </div>
@@ -211,16 +211,16 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
             {sections.map((section, sectionIndex) => (
               <div key={sectionIndex}>
-                <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
+                <p className="text-[9px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5">
                   {section.title}
                 </p>
                 <div className="flex flex-col gap-1">
                   {section.hints.map((hint, hintIndex) => (
                     <div key={hintIndex} className="flex items-center gap-3">
-                      <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover">
+                      <span className="font-mono text-[10px] rounded-sm border border-border-button-default px-1.5 py-0.5 text-text-primary min-w-[36px] text-center bg-hover">
                         {hint.key}
                       </span>
-                      <span className="text-[10px] text-neutral-400">{hint.label}</span>
+                      <span className="text-[10px] text-text-secondary">{hint.label}</span>
                     </div>
                   ))}
                 </div>
diff --git a/packages/studio/src/player/components/SpeedMenu.tsx b/packages/studio/src/player/components/SpeedMenu.tsx
index f6cb89c7aca..387cb528fd1 100644
--- a/packages/studio/src/player/components/SpeedMenu.tsx
+++ b/packages/studio/src/player/components/SpeedMenu.tsx
@@ -32,7 +32,7 @@ export const SpeedMenu = memo(function SpeedMenu({
           aria-haspopup="menu"
           aria-expanded={showSpeedMenu}
           aria-label="Playback speed"
-          className="h-7 w-8 rounded-md font-mono text-[10px] tabular-nums text-neutral-500 transition-colors hover:text-neutral-200 disabled:opacity-30"
+          className="h-7 w-8 rounded-md font-mono text-[10px] tabular-nums text-text-tertiary transition-colors hover:text-text-primary disabled:opacity-30"
         >
           {playbackRate === 1 ? "1x" : `${playbackRate}x`}
         </button>
@@ -57,8 +57,8 @@ export const SpeedMenu = memo(function SpeedMenu({
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
-                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-hidden focus-visible:bg-white/4 ${
-                  isCurrent ? "text-neutral-50 bg-white/6" : "text-neutral-500 hover:bg-white/4"
+                className={`block w-full px-3 py-1.5 text-caption-2-regular text-left font-mono tabular-nums transition-colors outline-hidden focus-visible:bg-white/4 ${
+                  isCurrent ? "text-text-primary bg-white/6" : "text-text-tertiary hover:bg-white/4"
                 }`}
               >
                 {rate}x
diff --git a/packages/studio/src/player/components/TimelineCanvas.tsx b/packages/studio/src/player/components/TimelineCanvas.tsx
index 3929162034a..a166430d1dd 100644
--- a/packages/studio/src/player/components/TimelineCanvas.tsx
+++ b/packages/studio/src/player/components/TimelineCanvas.tsx
@@ -83,10 +83,10 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
           aria-hidden="true"
           data-testid="timeline-ghost-lane"
           data-active={ghostLaneActive || undefined}
-          className={`pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${
+          className={`pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-caption-2-regular transition-colors duration-150 ${
             ghostLaneActive
               ? "border-studio-accent/60 bg-studio-accent/6 text-accent-ink"
-              : "border-neutral-700/50 text-neutral-500"
+              : "border-border-button-default text-text-tertiary"
           }`}
           style={{
             top: props.rowGeometry.getRowTop(ghostLaneRow) + CLIP_Y,
diff --git a/packages/studio/src/player/components/TimelineEmptyState.tsx b/packages/studio/src/player/components/TimelineEmptyState.tsx
index d19e704aa69..1892a045673 100644
--- a/packages/studio/src/player/components/TimelineEmptyState.tsx
+++ b/packages/studio/src/player/components/TimelineEmptyState.tsx
@@ -19,7 +19,7 @@ export function TimelineEmptyState({
   return (
     <div
       className={`h-full border-t bg-[var(--timeline-shell-bg)] flex flex-col select-none transition-colors duration-150 ${
-        isDragOver ? "border-studio-accent/50 bg-studio-accent/3" : "border-neutral-800/50"
+        isDragOver ? "border-studio-accent/50 bg-studio-accent/3" : "border-border-button-default"
       }`}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
@@ -27,7 +27,7 @@ export function TimelineEmptyState({
     >
       {/* Ruler */}
       <div
-        className="shrink-0 border-b border-neutral-800/40 flex items-end relative"
+        className="shrink-0 border-b border-border-button-default flex items-end relative"
         style={{ height: RULER_H, paddingLeft: GUTTER }}
       >
         {[0, 10, 20, 30, 40, 50].map((s) => (
@@ -36,12 +36,12 @@ export function TimelineEmptyState({
             className="flex flex-col items-center"
             style={{ position: "absolute", left: GUTTER + s * 14 }}
           >
-            <span className="text-[9px] text-neutral-600 font-mono tabular-nums leading-none mb-0.5">
+            <span className="text-[9px] text-text-tertiary font-mono tabular-nums leading-none mb-0.5">
               {`${Math.floor(s / 60)
                 .toString()
                 .padStart(2, "0")}:${(s % 60).toString().padStart(2, "0")}`}
             </span>
-            <div className="w-px h-[5px] bg-neutral-700/40" />
+            <div className="w-px h-[5px] bg-background-tertiary-default" />
           </div>
         ))}
       </div>
@@ -49,7 +49,9 @@ export function TimelineEmptyState({
       <div className="flex-1 flex items-center justify-center">
         <div
           className={`flex items-center gap-3 px-6 py-3 border border-dashed rounded-lg transition-colors duration-150 ${
-            isDragOver ? "border-studio-accent/60 bg-studio-accent/6" : "border-neutral-700/50"
+            isDragOver
+              ? "border-studio-accent/60 bg-studio-accent/6"
+              : "border-border-button-default"
           }`}
         >
           {isDragOver ? (
@@ -82,7 +84,7 @@ export function TimelineEmptyState({
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-neutral-600 shrink-0"
+                className="text-text-tertiary shrink-0"
               >
                 <rect x="2" y="2" width="20" height="20" rx="2" />
                 <path d="M7 2v20" />
@@ -90,7 +92,7 @@ export function TimelineEmptyState({
                 <path d="M2 7h20" />
                 <path d="M2 17h20" />
               </svg>
-              <span className="text-[13px] text-neutral-500">
+              <span className="text-[13px] text-text-tertiary">
                 {onFileDrop
                   ? "Drop media here or describe your video to start"
                   : "Describe your video to start creating"}
diff --git a/packages/studio/src/player/components/TimelineFxButton.tsx b/packages/studio/src/player/components/TimelineFxButton.tsx
index 266e7b8b6bf..bbf03acc4e3 100644
--- a/packages/studio/src/player/components/TimelineFxButton.tsx
+++ b/packages/studio/src/player/components/TimelineFxButton.tsx
@@ -80,7 +80,7 @@ function GroupNameDialog({
       <div
         role="dialog"
         aria-label="This track cannot be grouped"
-        className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] leading-snug text-[var(--timeline-text-soft)] shadow-xl"
+        className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-caption-2-regular leading-snug text-[var(--timeline-text-soft)] shadow-xl"
         style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
         onPointerDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
@@ -98,7 +98,7 @@ function GroupNameDialog({
     <div
       role="dialog"
       aria-label="Name this group"
-      className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] text-[var(--timeline-text-soft)] shadow-xl"
+      className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-caption-2-regular text-[var(--timeline-text-soft)] shadow-xl"
       style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
       onPointerDown={(event) => event.stopPropagation()}
       onKeyDown={(event) => {
@@ -116,7 +116,7 @@ function GroupNameDialog({
         aria-label="Group name"
         value={label}
         onChange={(event) => setLabel(event.currentTarget.value)}
-        className="w-full rounded-sm border border-[var(--timeline-border-strong)] bg-[var(--timeline-input-bg)] px-1.5 py-1 text-[11px] text-[var(--timeline-text-solid)] outline-hidden focus:border-[var(--timeline-accent)]"
+        className="w-full rounded-sm border border-[var(--timeline-border-strong)] bg-[var(--timeline-input-bg)] px-1.5 py-1 text-caption-2-regular text-[var(--timeline-text-solid)] outline-hidden focus:border-[var(--timeline-accent)]"
       />
       {/* The sentence. No jargon, and it names both things a bus does. */}
       <p className="mt-2 leading-snug">
diff --git a/packages/studio/src/player/components/TimelineGroupHeader.tsx b/packages/studio/src/player/components/TimelineGroupHeader.tsx
index 1fbd53f0e8d..eb6a57d449c 100644
--- a/packages/studio/src/player/components/TimelineGroupHeader.tsx
+++ b/packages/studio/src/player/components/TimelineGroupHeader.tsx
@@ -58,7 +58,7 @@ function GroupNameButton({
       // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
       // claiming it here would push the controls off the right edge — and the
       // count with them, since it rides inside this button.
-      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-[var(--timeline-text-solid)] hover:text-[var(--timeline-accent)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
+      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-caption-2-regular text-[var(--timeline-text-solid)] hover:text-[var(--timeline-accent)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
@@ -67,7 +67,7 @@ function GroupNameButton({
     >
       <span
         aria-hidden="true"
-        className="shrink-0 text-[12px] leading-none text-[var(--timeline-track-label)]"
+        className="shrink-0 text-caption-1-regular leading-none text-[var(--timeline-track-label)]"
       >
         ▤
       </span>
@@ -106,7 +106,7 @@ export function TimelineGroupHeader({
     <div
       role="rowheader"
       aria-colindex={1}
-      className="sticky left-0 z-12 flex shrink-0 items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
+      className="sticky left-0 z-12 flex shrink-0 items-center gap-1.5 overflow-hidden px-1.5 text-caption-2-regular"
       style={{
         width: columnWidth,
         height: TRACK_H,
@@ -173,7 +173,7 @@ export function TimelineGroupHeader({
             aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
             title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
             // Anchored right, matching every other header's lane toggle.
-            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-caption-2-regular leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
               isLaneOpen
                 ? "text-[var(--timeline-accent)]"
                 : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
diff --git a/packages/studio/src/player/components/TimelineGroupLaneLabels.tsx b/packages/studio/src/player/components/TimelineGroupLaneLabels.tsx
index 3b881a17dce..721b8e7dee9 100644
--- a/packages/studio/src/player/components/TimelineGroupLaneLabels.tsx
+++ b/packages/studio/src/player/components/TimelineGroupLaneLabels.tsx
@@ -86,7 +86,7 @@ export function TimelineGroupLaneLabels({
           >
             <span
               aria-hidden="true"
-              className="shrink-0 text-[11px] text-[var(--timeline-text-dim)]"
+              className="shrink-0 text-caption-2-regular text-[var(--timeline-text-dim)]"
             >
               ▤
             </span>
diff --git a/packages/studio/src/player/components/TimelineTrackPlainHeader.tsx b/packages/studio/src/player/components/TimelineTrackPlainHeader.tsx
index eb2957cfcfc..a029502aae7 100644
--- a/packages/studio/src/player/components/TimelineTrackPlainHeader.tsx
+++ b/packages/studio/src/player/components/TimelineTrackPlainHeader.tsx
@@ -93,7 +93,10 @@ export function PlainTrackHeader({
             count sits against it rather than being pushed out to meet the
             controls. The slack goes to the `ml-auto` group below instead. */}
         {showTrackLabel && (
-          <span title={trackLabel} className="min-w-0 truncate text-[11px] leading-tight">
+          <span
+            title={trackLabel}
+            className="min-w-0 truncate text-caption-2-regular leading-tight"
+          >
             {trackLabel}
           </span>
         )}
diff --git a/packages/studio/src/player/components/TrackGapContextMenu.tsx b/packages/studio/src/player/components/TrackGapContextMenu.tsx
index 32b4d83f826..e37514b1f6e 100644
--- a/packages/studio/src/player/components/TrackGapContextMenu.tsx
+++ b/packages/studio/src/player/components/TrackGapContextMenu.tsx
@@ -90,7 +90,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
       >
         <span>Close gap</span>
         {gapWidth != null && (
-          <span className="text-neutral-500 text-[10px] ml-3">{gapWidth.toFixed(2)}s</span>
+          <span className="text-text-tertiary text-[10px] ml-3">{gapWidth.toFixed(2)}s</span>
         )}
       </button>
       <button
diff --git a/packages/studio/src/player/components/VideoThumbnail.tsx b/packages/studio/src/player/components/VideoThumbnail.tsx
index 3c49630f1b2..fa3929fe5c5 100644
--- a/packages/studio/src/player/components/VideoThumbnail.tsx
+++ b/packages/studio/src/player/components/VideoThumbnail.tsx
@@ -168,7 +168,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
             return (
               <div
                 key={index}
-                className="relative h-full shrink-0 overflow-hidden bg-neutral-900"
+                className="relative h-full shrink-0 overflow-hidden bg-background-tertiary-default"
                 style={{ width: frameW }}
               >
                 <img
@@ -191,8 +191,8 @@ export const VideoThumbnail = memo(function VideoThumbnail({
         />
       )}
       {snapshot.status === "error" && (
-        <div className="absolute inset-0 flex items-center justify-center bg-neutral-900/60">
-          <span className="rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+        <div className="absolute inset-0 flex items-center justify-center bg-background-tertiary-default">
+          <span className="rounded-sm bg-black/50 px-1 text-[8px] text-text-tertiary">
             no preview
           </span>
         </div>
diff --git a/packages/studio/src/player/components/VolumeControl.tsx b/packages/studio/src/player/components/VolumeControl.tsx
index bcdfe344e5d..da7f6dae6f7 100644
--- a/packages/studio/src/player/components/VolumeControl.tsx
+++ b/packages/studio/src/player/components/VolumeControl.tsx
@@ -55,7 +55,7 @@ export const VolumeControl = memo(function VolumeControl({
     <div className="group flex shrink-0 items-center">
       <div className="w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-150 ease-out group-hover:w-14 group-hover:opacity-100 group-focus-within:w-14 group-focus-within:opacity-100">
         <div className="relative mx-1 flex h-6 w-12 items-center">
-          <div className="absolute inset-x-0 h-0.5 overflow-hidden rounded-full bg-neutral-700">
+          <div className="absolute inset-x-0 h-0.5 overflow-hidden rounded-full bg-background-tertiary-default">
             <div
               className="h-full rounded-full bg-neutral-300"
               style={{ width: `${percentage}%` }}
@@ -93,7 +93,7 @@ export const VolumeControl = memo(function VolumeControl({
           aria-label={muteLabel}
           aria-pressed={silent}
           className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
-            silent ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
+            silent ? "text-accent-ink" : "text-text-tertiary hover:text-text-primary"
           }`}
         >
           <VolumeIcon muted={audioMuted} volume={audioVolume} />
diff --git a/packages/studio/src/player/components/clipMenuAudioItems.tsx b/packages/studio/src/player/components/clipMenuAudioItems.tsx
index a5435934165..91cdf5dfd9f 100644
--- a/packages/studio/src/player/components/clipMenuAudioItems.tsx
+++ b/packages/studio/src/player/components/clipMenuAudioItems.tsx
@@ -8,7 +8,7 @@ import { openAudioGainDialog } from "./audioGainDialogStore";
 import { offersDuck, readBedCarve, setDuckUnderVoice, type DuckOutcome } from "./clipMenuDuck";
 
 const ITEM_CLASS =
-  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer";
+  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden text-text-primary hover:bg-background-primary-hover focus-visible:bg-background-primary-hover cursor-pointer";
 
 const DUCK_TOAST: Record<DuckOutcome, string> = {
   ducked: "Ducks under the voice. Normalize the voice first for the most even result.",
@@ -75,7 +75,7 @@ export function ClipMenuAudioItems({
         }}
       >
         <span>Audio Gain…</span>
-        <span className="text-neutral-500 text-[10px] ml-3">G</span>
+        <span className="text-text-tertiary text-[10px] ml-3">G</span>
       </button>
     );
   }
diff --git a/packages/studio/src/player/components/clipMenuLinkItems.tsx b/packages/studio/src/player/components/clipMenuLinkItems.tsx
index 3c46a314d83..89f9fbac4c6 100644
--- a/packages/studio/src/player/components/clipMenuLinkItems.tsx
+++ b/packages/studio/src/player/components/clipMenuLinkItems.tsx
@@ -147,8 +147,8 @@ export function ClipMenuLinkItems({
           title={item.disabledReason}
           className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden ${
             item.disabledReason !== undefined
-              ? "text-neutral-600 cursor-not-allowed"
-              : `cursor-pointer hover:bg-neutral-800 focus-visible:bg-neutral-800 ${item.destructive ? "text-red-400" : "text-neutral-300"}`
+              ? "text-text-tertiary cursor-not-allowed"
+              : `cursor-pointer hover:bg-background-primary-hover focus-visible:bg-background-primary-hover ${item.destructive ? "text-red-400" : "text-text-primary"}`
           }`}
           onClick={() => {
             item.run();
@@ -157,7 +157,7 @@ export function ClipMenuLinkItems({
         >
           <span>{item.label}</span>
           {item.shortcut && (
-            <span className="text-neutral-500 text-[10px] ml-3">{item.shortcut}</span>
+            <span className="text-text-tertiary text-[10px] ml-3">{item.shortcut}</span>
           )}
         </button>
       ))}
diff --git a/packages/studio/src/player/components/clipMenuToolItems.tsx b/packages/studio/src/player/components/clipMenuToolItems.tsx
index f2b2a0a9fc7..07e9b0723ce 100644
--- a/packages/studio/src/player/components/clipMenuToolItems.tsx
+++ b/packages/studio/src/player/components/clipMenuToolItems.tsx
@@ -181,7 +181,7 @@ function ChoiceSubmenu({
         }}
       >
         <span>{label}</span>
-        <span className="text-neutral-500 text-[10px] ml-3">▸</span>
+        <span className="text-text-tertiary text-[10px] ml-3">▸</span>
       </button>
       {open && (
         <div
@@ -198,7 +198,7 @@ function ChoiceSubmenu({
               {section.heading && (
                 <>
                   <div className={menuClasses.divider} />
-                  <div className="px-3 py-1 text-[9px] uppercase tracking-wide text-neutral-500">
+                  <div className="px-3 py-1 text-[9px] uppercase tracking-wide text-text-tertiary">
                     {section.heading}
                   </div>
                 </>
diff --git a/packages/studio/src/player/components/trackHeaderLabelRows.tsx b/packages/studio/src/player/components/trackHeaderLabelRows.tsx
index 25410357e6f..0b3aba64239 100644
--- a/packages/studio/src/player/components/trackHeaderLabelRows.tsx
+++ b/packages/studio/src/player/components/trackHeaderLabelRows.tsx
@@ -154,7 +154,7 @@ export function PropertyGroupHeaderRow({
           aria-label={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           // h-6 w-6 = the 24x24 WCAG 2.2 minimum target; the ◆ glyph stays 11px.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-caption-2-regular text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
           onClick={(event) => {
             // Same as the disclosure caret and the eye: a control in the label
             // column owns its click, it does not also hit the track row behind it.
@@ -311,7 +311,7 @@ export function AutomationLaneHeaderRow({
           aria-label={`Remove ${label} automation`}
           title={`Remove ${label} automation`}
           // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-text-muted hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-caption-2-regular text-text-muted hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             // A control in the label column owns its click; it does not also hit
diff --git a/packages/studio/src/promptwise/theme.css b/packages/studio/src/promptwise/theme.css
index 9cd05aea304..ad40ce20a80 100644
--- a/packages/studio/src/promptwise/theme.css
+++ b/packages/studio/src/promptwise/theme.css
@@ -8,23 +8,29 @@
   --radius-md: 0.625rem;
   --radius-lg: 0.75rem;
 
-  /* Surfaces: page, panels, inputs, menus. */
-  --color-bg-0: light-dark(#f7f7f7, #121212);
-  --color-surface: light-dark(#ffffff, #262626);
-  --color-input: light-dark(#ffffff, #171717);
-  --color-raised: light-dark(#ffffff, #2e2e2e);
-
-  /* Text: primary, secondary, muted, disabled. */
-  --color-text-0: light-dark(#0a0a0a, #fafafa);
-  --color-text-2: light-dark(#525252, #d4d4d4);
-  --color-text-muted: light-dark(#737373, #a3a3a3);
-  --color-text-off: light-dark(#a3a3a3, #737373);
+  /* Studio's roles on BoardUI's semantic colours (src/boardui/styles/theme.css), which follow data-theme. */
+  --color-bg-0: var(--color-background-secondary-default);
+  --color-surface: var(--color-background-primary-default);
+  --color-input: var(--color-background-tertiary-default);
+  --color-raised: var(--color-background-primary-default);
+  --color-hover: var(--color-background-primary-hover);
+  --color-border: var(--color-border-button-default);
+  --color-border-strong: var(--color-border-button-default);
+  --color-border-input: var(--color-border-button-hover);
+
+  --color-text-0: var(--color-text-primary);
+  --color-text-2: var(--color-text-secondary);
+  --color-text-muted: var(--color-text-secondary);
+  --color-text-off: var(--color-text-tertiary);
+
+  --panel-shell-bg: var(--color-background-secondary-default);
+  --panel-strip-bg: var(--color-background-secondary-default);
 
   /* The promptwise orange. */
-  --color-accent: light-dark(#ec5f2c, #ff7948);
-  --color-accent-hover: light-dark(#c4471a, #ff946c);
-  --color-on-accent: #ffffff;
-  --color-accent-ink: light-dark(#c4471a, #ff946c);
+  --color-accent: light-dark(var(--color-accent-600), var(--color-accent-500));
+  --color-accent-hover: light-dark(var(--color-accent-700), var(--color-accent-400));
+  --color-on-accent: var(--color-white);
+  --color-accent-ink: light-dark(var(--color-accent-700), var(--color-accent-400));
   --color-danger: #ef4444;
   --color-danger-ink: light-dark(#b91c1c, #f87171);
 
@@ -39,3 +45,13 @@
 .hf-dock .dv-tab.dv-tab {
   padding: 0 4px;
 }
+
+/* BoardUI's card radius on the dock's panels and their tabs. */
+.hf-dock .dv-groupview {
+  border-radius: 16px;
+}
+
+.hf-dock .dv-tab,
+.hf-dock-tab-fill {
+  border-radius: 10px 10px 0 0;
+}
diff --git a/packages/studio/src/styles/hex-baseline.json b/packages/studio/src/styles/hex-baseline.json
index 365ac3352a7..7c7b5e47a54 100644
--- a/packages/studio/src/styles/hex-baseline.json
+++ b/packages/studio/src/styles/hex-baseline.json
@@ -1,5 +1,5 @@
 {
-  "total": 259,
+  "total": 236,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
@@ -45,7 +45,7 @@
     "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
     "packages/studio/src/player/components/PlayerControls.tsx": 1,
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
-    "packages/studio/src/promptwise/theme.css": 34,
+    "packages/studio/src/promptwise/theme.css": 11,
     "packages/studio/src/styles/components.css": 48,
     "packages/studio/src/telemetry/client.ts": 1,
     "packages/studio/src/webmcp/webmcpTestUtils.ts": 1