diff --git a/CLAUDE.md b/CLAUDE.md
index 4b32271f..1cbba113 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1074,6 +1074,36 @@ lined up were each given their own padding by hand, and drifted. The rules that
 - **Motion is 120 to 180ms**, opacity and transform, nothing bouncing. `prefers-reduced-motion` is
   honoured once in `styles.css`, not per component.
 
+### Variants, and where a look is written down
+
+**Anything that comes in kinds is a `cva` recipe in `Base/variants.ts`; anything with one look is a
+constant in `Base/geometry.ts`.** That is the whole rule, and it is decided once so it is not
+decided per file. Buttons, menu rows, panels, chips, empty states, status dots, wizard steps, the
+switch and the editor's toolbar toggles are recipes; heights, the icon box, the focus ring, the menu
+frame and the section header are constants.
+
+- **One button.** `BaseButton` on `buttonVariants`: `tone` (`default | strong | quiet | danger |
+  success`), `size` (`md | sm | dense`), `icon-only`, `reserve-icon`. The `BUTTON*` strings that
+  used to sit in `geometry.ts` beside a `BaseButton` with a hand-written `switch` are gone; the two
+  disagreed about danger. An icon-only button is `BaseButton icon-only`, not a second component.
+- **`strong` is the only filled accent**, one per region. **`danger` is outlined, never filled**:
+  a filled red button beside the filled accent is two primaries, and what keeps a destructive press
+  honest is `useConfirm` and the sentence beside it, not the colour.
+- **A caller's `class` goes through `cn`** (`clsx` plus `tailwind-merge`), because `BaseButton`
+  turns `inheritAttrs` off for exactly that: `class="px-2"` on a recipe that says `px-3.5` means
+  `px-2`, not both with the stylesheet deciding.
+- **A recipe is exported as well as its component**, so something that must look like a button
+  and is not a `<button>` (a Reka trigger) calls the recipe. Menu rows are `menuItemVariants` on
+  Reka's own `MenubarItem` or `DropdownMenuItem`, since Reka owns their keyboard and focus, and
+  `:disabled` on the item replaces the `opacity-50 pointer-events-none` each row used to carry.
+- **A ternary in `:class` is a variant only when it names a state of the thing it styles**
+  (selected, pressed, on, reached, a tone). Layout switches (`compact`, `flush`, `block`),
+  animation states (`open ? 'rotate-180'`, a collapsing `grid-rows`) and one-off emphasis stay
+  where they are, because a variant nobody else will ever ask for is a second place to look.
+- **An empty state is `BaseEmptyState`**, `size="page"` for a whole screen and `size="panel"` for
+  one section of a busier one, with an `actions` slot. Six were hand-rolled in 3.5.0 and one first
+  shipped with no button at all.
+
 ## Testing
 
 Two suites, three orders of magnitude apart, and the split is by what a test needs rather than by
@@ -1128,7 +1158,7 @@ These do not run in CI (they need a desktop session, a GPU and ffmpeg). `build:w
 - TypeScript strict, ESM everywhere. Main imports need the `.js` extension on relative paths.
 - Vue: `<script setup lang="ts">`, typed `defineProps`/`defineEmits`, `ref` over `reactive`.
 - Tailwind utilities over custom CSS; tokens over literals.
-- Feedback through the toast store; destructive actions use `toastStore.confirm`.
+- Feedback through the toast store; destructive actions ask through `useConfirm`, never the toast.
 - Long work runs as a job (`services/jobs.ts`) with progress, an ETA and an `AbortController`,
   never awaited inside a handler.
 
diff --git a/package-lock.json b/package-lock.json
index 64b99684..ed7feb2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.30.0",
         "better-sqlite3": "^13.0.3",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "ffmpeg-static": "^5.2.0",
         "ffprobe-static": "^3.1.0",
         "reka-ui": "^2.10.4"
@@ -3884,6 +3886,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -3912,6 +3926,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index 288975e2..5035ca4c 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.0",
     "better-sqlite3": "^13.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "ffmpeg-static": "^5.2.0",
     "ffprobe-static": "^3.1.0",
     "reka-ui": "^2.10.4"
diff --git a/src/renderer/src/components/Base/BaseButton.vue b/src/renderer/src/components/Base/BaseButton.vue
index bb01a601..831daaf8 100644
--- a/src/renderer/src/components/Base/BaseButton.vue
+++ b/src/renderer/src/components/Base/BaseButton.vue
@@ -1,24 +1,34 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, useAttrs } from 'vue';
 import { Icon } from '@iconify/vue';
-import type { ButtonVariant } from './types';
-import { CONTROL_HEIGHT, CONTROL_HEIGHT_DENSE, FOCUS_RING, ICON_BOX, ICON_GAP, MOTION } from './geometry';
+import type { ClassValue } from 'clsx';
+import { cn } from './cn';
+import { ICON_BOX } from './geometry';
+import { buttonVariants, type ButtonSize, type ButtonTone } from './variants';
 
 /**
  * A button, at the one height buttons are.
  *
+ * The classes are `buttonVariants` in `variants.ts`, which is where the rules
+ * about tones live: one `strong` per region, `danger` outlined and never
+ * filled, nothing changing size between states.
+ *
  * What it used to be: a violet-to-cyan gradient for `primary`, a drop shadow
  * that grew on hover, and `active:scale-[0.98]`. The scale is the one worth
  * naming, because it changes the element's measured size on press, which is
  * the same class of defect as a card growing on hover: the box moves when the
  * state does. Colour moves; geometry does not.
  *
- * At most one `primary` per region. Everything else is `outline` or `ghost`,
- * which is what makes the filled one mean something.
+ * `inheritAttrs` is off so a caller's `class` goes through `cn` rather than
+ * being appended: `class="px-2"` on a button whose recipe says `px-3.5` should
+ * mean `px-2`, not both with the stylesheet deciding.
  */
+defineOptions({ inheritAttrs: false });
+
 const props = withDefaults(
   defineProps<{
-    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
     /** An Iconify name, drawn before the label in a fixed 16px box. */
     icon?: string;
     /**
@@ -28,43 +38,30 @@ const props = withDefaults(
      * labels start at different x, which is `07-editor-filter-dropdowns`.
      */
     reserveIcon?: boolean;
-    /** Only inside a dense toolbar. See `CONTROL_HEIGHT_DENSE`. */
-    dense?: boolean;
-    /** No label, so the box is square. */
+    /** No label, so the box is square. Give it an `aria-label`. */
     iconOnly?: boolean;
+    type?: 'button' | 'submit' | 'reset';
   }>(),
-  { variant: 'default' },
+  { tone: 'default', size: 'md', type: 'button' },
 );
 
-const variantClass = computed(() => {
-  switch (props.variant) {
-    case 'primary':
-      return 'bg-accent text-accent-fg border-transparent hover:bg-accent-hover';
-    case 'danger':
-      return 'bg-danger text-danger-fg border-transparent hover:opacity-90';
-    case 'ghost':
-      return 'bg-transparent border-transparent text-muted-600 hover:bg-muted-50 hover:text-foreground';
-    case 'outline':
-    case 'muted':
-      return 'bg-transparent border-border text-foreground hover:bg-muted-50';
-    default:
-      return 'bg-muted-50 border-transparent text-foreground hover:bg-muted-100';
-  }
-});
+const attrs = useAttrs();
+
+const classes = computed(() =>
+  cn(
+    buttonVariants({ tone: props.tone, size: props.size, iconOnly: props.iconOnly }),
+    attrs.class as ClassValue,
+  ),
+);
 
-const sizeClass = computed(() => {
-  const height = props.dense ? CONTROL_HEIGHT_DENSE : CONTROL_HEIGHT;
-  if (props.iconOnly) return `${height} ${props.dense ? 'w-7' : 'w-9'} px-0`;
-  return `${height} ${props.dense ? 'px-2.5' : 'px-3.5'}`;
+const rest = computed(() => {
+  const { class: _class, ...others } = attrs;
+  return others;
 });
 </script>
 
 <template>
-  <button
-    type="button"
-    class="inline-flex items-center justify-center rounded-md border text-sm font-medium disabled:opacity-50 disabled:pointer-events-none"
-    :class="[variantClass, sizeClass, ICON_GAP, FOCUS_RING, MOTION]"
-  >
+  <button :type="type" v-bind="rest" :class="classes">
     <Icon v-if="icon" :icon="icon" :class="ICON_BOX" />
     <span v-else-if="reserveIcon" :class="ICON_BOX" aria-hidden="true" />
     <slot />
diff --git a/src/renderer/src/components/Base/BaseChip.vue b/src/renderer/src/components/Base/BaseChip.vue
new file mode 100644
index 00000000..92d4351b
--- /dev/null
+++ b/src/renderer/src/components/Base/BaseChip.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { chipVariants } from './variants';
+
+/** A small label over a video frame. The classes are `chipVariants`. */
+const props = defineProps<{ numeric?: boolean }>();
+
+const classes = computed(() => chipVariants({ numeric: props.numeric }));
+</script>
+
+<template>
+  <span :class="classes"><slot /></span>
+</template>
diff --git a/src/renderer/src/components/Base/BaseEmptyState.vue b/src/renderer/src/components/Base/BaseEmptyState.vue
index 2374776b..50afe322 100644
--- a/src/renderer/src/components/Base/BaseEmptyState.vue
+++ b/src/renderer/src/components/Base/BaseEmptyState.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { computed, useSlots } from 'vue';
 import BaseButton from './BaseButton.vue';
+import { emptyStateVariants, type EmptyStateSize, type EmptyStateTone } from './variants';
 
 /**
  * Nothing here, and what to do about it.
@@ -10,37 +12,60 @@ import BaseButton from './BaseButton.vue';
  * everything, or a search had matched nothing, and the advice, "try adding
  * some clips to your library", was wrong in two of those three cases. Every
  * caller now says which case it is and offers the way out of it.
+ *
+ * **Two sizes.** `page` is a whole screen with nothing on it. `panel` is one
+ * section of a screen that has other things, drawn in the bordered panel the
+ * rest of that screen uses. Six of the second kind were written out by hand in
+ * 3.5.0, and one of them first shipped telling the reader to go and find a
+ * setting rather than offering a button to it: a component with an `actions`
+ * slot is harder to forget than a paragraph is.
+ *
+ * **The tone is the icon's, and only the icon's.** `success` is news, like a
+ * list that is empty because everything was done; `warning` is a service that
+ * did not answer. The words stay the body colour either way.
  */
 interface Props {
   icon?: string;
   title: string;
-  description: string;
-  /** Text for the way out. Nothing is drawn without it. */
+  description?: string;
+  /** Text for a single way out. For more than one, use the `actions` slot. */
   actionLabel?: string;
+  size?: EmptyStateSize;
+  tone?: EmptyStateTone;
 }
 
 interface Emits {
   (e: 'action'): void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   icon: 'material-symbols:inbox',
+  description: '',
   actionLabel: '',
+  size: 'page',
+  tone: 'neutral',
 });
 
 const emit = defineEmits<Emits>();
+const slots = useSlots();
+
+const parts = computed(() => emptyStateVariants({ size: props.size, tone: props.tone }));
+const hasActions = computed(() => Boolean(props.actionLabel || slots.actions));
 </script>
 
 <template>
-  <div class="py-20 flex flex-col items-center justify-center text-center gap-4">
-    <Icon :icon="icon" class="size-8 block text-muted-300" />
-    <div class="space-y-1">
-      <h2 class="font-display text-lg font-medium text-foreground">{{ title }}</h2>
-      <p class="text-sm text-muted-500 max-w-md">{{ description }}</p>
+  <div :class="parts.root()">
+    <Icon :icon="icon" :class="parts.icon()" />
+    <div :class="parts.text()">
+      <h2 :class="parts.title()">{{ title }}</h2>
+      <p v-if="description || $slots.default" :class="parts.description()">
+        <slot>{{ description }}</slot>
+      </p>
+    </div>
+    <div v-if="hasActions" :class="parts.actions()">
+      <slot name="actions">
+        <BaseButton tone="strong" @click="emit('action')">{{ actionLabel }}</BaseButton>
+      </slot>
     </div>
-    <BaseButton v-if="actionLabel" variant="primary" class="mt-1" @click="emit('action')">
-      {{ actionLabel }}
-    </BaseButton>
   </div>
 </template>
-
diff --git a/src/renderer/src/components/Base/BasePager.vue b/src/renderer/src/components/Base/BasePager.vue
index 0dc827d3..69f89f9e 100644
--- a/src/renderer/src/components/Base/BasePager.vue
+++ b/src/renderer/src/components/Base/BasePager.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
+import BaseButton from './BaseButton.vue';
 
 /**
  * Back, a position, forward.
@@ -43,16 +44,17 @@ const widthCh = computed(() => {
 
 <template>
   <div class="inline-flex items-center gap-1">
-    <button
-      type="button"
-      class="size-7 inline-flex items-center justify-center shrink-0 rounded-md text-muted-500 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-30 disabled:pointer-events-none"
+    <BaseButton
+      tone="quiet"
+      size="dense"
+      icon-only
       :disabled="!hasPrevious"
       :title="`Previous ${noun} ([)`"
       :aria-label="`Previous ${noun}`"
       @click="$emit('previous')"
     >
       <Icon icon="material-symbols:chevron-left" class="size-4 shrink-0 block" />
-    </button>
+    </BaseButton>
 
     <span
       class="font-mono text-xs tabular-nums text-muted-500 text-center select-none"
@@ -62,15 +64,16 @@ const widthCh = computed(() => {
       {{ position }} of {{ total }}
     </span>
 
-    <button
-      type="button"
-      class="size-7 inline-flex items-center justify-center shrink-0 rounded-md text-muted-500 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-30 disabled:pointer-events-none"
+    <BaseButton
+      tone="quiet"
+      size="dense"
+      icon-only
       :disabled="!hasNext"
       :title="`Next ${noun} (])`"
       :aria-label="`Next ${noun}`"
       @click="$emit('next')"
     >
       <Icon icon="material-symbols:chevron-right" class="size-4 shrink-0 block" />
-    </button>
+    </BaseButton>
   </div>
 </template>
diff --git a/src/renderer/src/components/Base/BasePanel.vue b/src/renderer/src/components/Base/BasePanel.vue
new file mode 100644
index 00000000..2a6dddfb
--- /dev/null
+++ b/src/renderer/src/components/Base/BasePanel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { panelVariants } from './variants';
+
+/**
+ * A bordered panel above the page. The classes are `panelVariants`.
+ *
+ * `as` because some of these are a `section` and some a list item, and a panel
+ * that forces a `div` is a panel somebody copies the classes out of instead.
+ */
+const props = withDefaults(
+  defineProps<{
+    as?: string;
+    padding?: 'md' | 'none';
+  }>(),
+  { as: 'div', padding: 'md' },
+);
+
+const classes = computed(() => panelVariants({ padding: props.padding }));
+</script>
+
+<template>
+  <component :is="as" :class="classes">
+    <slot />
+  </component>
+</template>
diff --git a/src/renderer/src/components/Base/BaseToggle.vue b/src/renderer/src/components/Base/BaseToggle.vue
index deaafccc..39d24ba3 100644
--- a/src/renderer/src/components/Base/BaseToggle.vue
+++ b/src/renderer/src/components/Base/BaseToggle.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { switchThumbVariants, switchTrackVariants } from './variants';
+
 /**
  * The on/off switch, wherever the app has one.
  *
@@ -51,13 +53,7 @@ function toggle(): void {
       filling with the accent's colour at the accent's weight rather than by
       becoming a block of it.
     -->
-    <span
-      class="absolute left-px h-6 w-11 rounded-full border transition-colors duration-150"
-      :class="modelValue ? 'bg-accent-sunk border-accent' : 'bg-muted-100 border-line-strong'"
-    />
-    <span
-      class="absolute left-[5px] size-4 rounded-full transition-[transform,background-color] duration-150"
-      :class="modelValue ? 'translate-x-5 bg-accent' : 'translate-x-0 bg-muted-400'"
-    />
+    <span :class="switchTrackVariants({ on: modelValue })" />
+    <span :class="switchThumbVariants({ on: modelValue })" />
   </button>
 </template>
diff --git a/src/renderer/src/components/Base/cn.ts b/src/renderer/src/components/Base/cn.ts
new file mode 100644
index 00000000..4f0aa11a
--- /dev/null
+++ b/src/renderer/src/components/Base/cn.ts
@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Join classes, and let a later one win.
+ *
+ * A recipe gives a button `h-9 px-3.5`, and a caller passing `px-2` wants
+ * `px-2`, not both. Without the merge both land in one class attribute and the
+ * winner is decided by the order Tailwind happened to write them into the
+ * stylesheet, which is nothing anybody reading the template can see.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/renderer/src/components/Base/geometry.ts b/src/renderer/src/components/Base/geometry.ts
index af3d632f..a66dc1de 100644
--- a/src/renderer/src/components/Base/geometry.ts
+++ b/src/renderer/src/components/Base/geometry.ts
@@ -126,43 +126,27 @@ export const PANEL_HEADER = 'text-sm font-medium text-muted-600';
  */
 export const SECTION_HEADER = 'min-h-9 flex flex-wrap items-center gap-x-3 gap-y-2 mb-2.5';
 
+/**
+ * A menu's frame, its separator, and the glyph at the start of each row.
+ *
+ * Variant-less, so they stay strings here rather than becoming recipes in
+ * `variants.ts`: the rule is that anything with kinds is a `cva` recipe and
+ * anything with one look is a constant. The rows themselves have kinds, and
+ * are `menuItemVariants`.
+ */
+export const MENU_CONTENT =
+  'min-w-[232px] bg-card rounded-md p-1.5 shadow-pop border border-border outline-hidden z-50';
+export const MENU_SEPARATOR = 'h-px bg-border my-1.5 mx-2';
+export const MENU_ICON = 'size-4 shrink-0 block text-muted-400';
+
 /** The motion budget. Opacity and transform only, and nothing bounces. */
 export const MOTION = 'transition-colors duration-150';
 export const MOTION_OPACITY = 'transition-opacity duration-150';
 
-/**
- * A button, and the three tones it comes in.
- *
- * Every settings screen wrote its own: `px-3 py-2 rounded-lg border
- * border-border` in one file, `px-4 py-2 rounded-lg bg-accent` in the next,
- * `px-2.5 py-1 rounded-md text-xs` in a third, which is four heights and three
- * radii for one control. The tone says what kind of act it is and nothing
- * else: `BUTTON` for the ordinary one, `BUTTON_STRONG` for the single action a
- * screen is *for*, `BUTTON_QUIET` for a word you can press.
- *
- * There is deliberately no danger tone here. A destructive action is written
- * where it is used, next to the sentence explaining what it destroys, because
- * making one easy to reach for is how it ends up on the wrong button.
+/*
+ * Buttons are not here any more. They have kinds, so they are a `cva` recipe,
+ * `buttonVariants` in `variants.ts`, and the component is `BaseButton`.
  */
-const BUTTON_BASE =
-  `${CONTROL_HEIGHT} px-3.5 inline-flex items-center justify-center ${ICON_GAP} ` +
-  `rounded-md text-sm font-medium ${FOCUS_RING} ${MOTION} ` +
-  'disabled:opacity-50 disabled:pointer-events-none';
-
-export const BUTTON = `${BUTTON_BASE} border border-line-strong text-foreground hover:bg-muted-50`;
-
-export const BUTTON_STRONG = `${BUTTON_BASE} bg-accent text-accent-fg hover:bg-accent-hover`;
-
-export const BUTTON_QUIET =
-  `${CONTROL_HEIGHT} px-3 inline-flex items-center justify-center ${ICON_GAP} ` +
-  `rounded-md text-sm text-muted-600 hover:text-foreground hover:bg-muted-50 ${FOCUS_RING} ` +
-  `${MOTION} disabled:opacity-50 disabled:pointer-events-none`;
-
-/** The same button at `QUIET_CONTROL_HEIGHT`, for a row inside a list. */
-export const BUTTON_SMALL =
-  `${QUIET_CONTROL_HEIGHT} px-3 inline-flex items-center justify-center ${ICON_GAP} ` +
-  `rounded-md border border-line-strong text-sm font-medium text-foreground hover:bg-muted-50 ` +
-  `${FOCUS_RING} ${MOTION} disabled:opacity-50 disabled:pointer-events-none`;
 
 /**
  * 232px. The default sidebar width fixed by the design.
diff --git a/src/renderer/src/components/Base/types.ts b/src/renderer/src/components/Base/types.ts
index 49c6178a..8a2a8f64 100644
--- a/src/renderer/src/components/Base/types.ts
+++ b/src/renderer/src/components/Base/types.ts
@@ -1,13 +1,3 @@
-export type ButtonVariant = 'default' | 'primary' | 'danger' | 'ghost' | 'outline' | 'muted';
-
-export type PopoverAction = {
-  key: string;
-  label: string;
-  variant?: ButtonVariant;
-  disabled?: boolean;
-  onClick: () => void | Promise<void>;
-};
-
 /**
  * What a `Base/BaseComboBox.vue` option is worth.
  *
diff --git a/src/renderer/src/components/Base/variants.ts b/src/renderer/src/components/Base/variants.ts
new file mode 100644
index 00000000..4ad472ab
--- /dev/null
+++ b/src/renderer/src/components/Base/variants.ts
@@ -0,0 +1,314 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  CONTROL_HEIGHT,
+  CONTROL_HEIGHT_DENSE,
+  FOCUS_RING,
+  ICON_GAP,
+  MOTION,
+  QUIET_CONTROL_HEIGHT,
+} from './geometry';
+
+/**
+ * Every styled thing that comes in kinds, as one recipe per thing.
+ *
+ * These used to be concatenated strings (`BUTTON`, `BUTTON_STRONG`, ...) beside
+ * a `BaseButton` that did the same job with a hand-written `switch`, and the
+ * two disagreed: one had a danger tone and the other refused to. A recipe
+ * names each axis a thing varies on, so a variant is a word at the call site
+ * and the classes behind it exist once.
+ *
+ * Exported as recipes, not only as components, because a few things that
+ * must look like a button are not a `<button>`: a Reka trigger, a
+ * `RouterLink`. They call the recipe and look the same by construction.
+ */
+
+/**
+ * A button: what kind of act it is, and how big.
+ *
+ * **`strong` is the only filled accent there is**, and there is one per
+ * region. It is the single action a screen is for; everything else is
+ * `default` or `quiet`, which is what makes the filled one mean something.
+ *
+ * **`danger` is outlined, never filled.** `geometry.ts` refused a danger tone
+ * so that one was not easy to reach for, and every destructive button in the
+ * app then hand-wrote the same outline (`border-danger text-danger-ink
+ * hover:bg-danger/10`) anyway, which is the worst of both. So the tone exists,
+ * and it is deliberately the quieter of the two it could have been: a filled
+ * red button beside the filled accent is two primaries, and the layout of the
+ * trimmer rests on there being exactly one. What keeps a destructive press
+ * honest is `useConfirm` and the sentence beside the button, not its colour.
+ *
+ * **Nothing changes size between states.** No variant touches a border width
+ * or a padding on hover, focus or press; `strong` and `quiet` have no border
+ * at all rather than a transparent one, so each is exactly as wide as it
+ * always was.
+ */
+export const buttonVariants = cva(
+  [
+    'inline-flex items-center justify-center rounded-md text-sm',
+    ICON_GAP,
+    FOCUS_RING,
+    MOTION,
+    'disabled:opacity-50 disabled:pointer-events-none',
+  ],
+  {
+    variants: {
+      tone: {
+        default: 'border border-line-strong font-medium text-foreground hover:bg-muted-50',
+        strong: 'font-medium bg-accent text-accent-fg hover:bg-accent-hover',
+        quiet: 'text-muted-600 hover:text-foreground hover:bg-muted-50',
+        danger: 'border border-danger font-medium text-danger-ink hover:bg-danger/10',
+        /**
+         * A button whose job is already done, like a client that is already
+         * registered: it still works, and says it has worked.
+         */
+        success: 'border border-success/40 font-medium text-success hover:bg-success/10',
+      },
+      /**
+       * `md` is the one height controls are (`CONTROL_HEIGHT`). `sm` is a row
+       * inside a list, `dense` only inside a toolbar where 36 will not fit.
+       */
+      size: {
+        md: `${CONTROL_HEIGHT} px-3.5`,
+        sm: `${QUIET_CONTROL_HEIGHT} px-3`,
+        dense: `${CONTROL_HEIGHT_DENSE} px-2.5`,
+      },
+      /** No label, so the box is square and the glyph sits in its middle. */
+      iconOnly: {
+        true: 'px-0 shrink-0',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      // A quiet button is a word you can press, and was always a touch tighter.
+      { tone: 'quiet', size: 'md', iconOnly: false, class: 'px-3' },
+      /*
+       * A glyph on its own needs a firmer ground on hover than a word does,
+       * because the ground is the only thing that shows how big the target
+       * is. Twenty icon buttons wrote this by hand, in four slightly different
+       * greys and three disabled opacities; this is the one they share now.
+       */
+      { tone: 'quiet', iconOnly: true, class: 'text-muted-500 hover:bg-muted-100' },
+      { iconOnly: true, size: 'md', class: 'w-9' },
+      { iconOnly: true, size: 'sm', class: 'w-8' },
+      { iconOnly: true, size: 'dense', class: 'w-7' },
+    ],
+    defaultVariants: { tone: 'default', size: 'md', iconOnly: false },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonTone = NonNullable<ButtonVariants['tone']>;
+export type ButtonSize = NonNullable<ButtonVariants['size']>;
+
+/**
+ * One row of a menu: a glyph, a label, and what pressing it does.
+ *
+ * Sixteen of these were written out by hand across the clip menu and the batch
+ * toolbar, and the destructive ones had drifted to a geometry of their own
+ * (`gap-2 px-3 py-2` against everybody else's `gap-2.5 h-[34px] px-2.5`), so
+ * Delete sat two pixels off the column every other label formed. A tone is a
+ * colour and nothing else, which is what keeps the column.
+ *
+ * Applied to Reka's own item rather than wrapped in a component: the rows are
+ * `MenubarItem` in one menu and `DropdownMenuItem` in the other, and Reka owns
+ * their focus, keyboard and dismissal. `data-[highlighted]` is Reka's keyboard
+ * cursor, which had no style at all, so arrowing through a menu showed nothing.
+ * `data-[disabled]` replaces the `{ 'opacity-50 pointer-events-none': busy }`
+ * each row carried: pass `:disabled` and Reka also skips it from the keyboard.
+ */
+export const menuItemVariants = cva(
+  [
+    'flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm outline-hidden cursor-pointer select-none',
+    'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+  ],
+  {
+    variants: {
+      tone: {
+        default: 'text-foreground hover:bg-muted-100 data-[highlighted]:bg-muted-100',
+        /** Undoing something the view is built on, like leaving a collection. */
+        accent: 'text-accent-ink hover:bg-muted-100 data-[highlighted]:bg-muted-100',
+        danger: 'text-danger-ink hover:bg-danger/8 data-[highlighted]:bg-danger/8',
+      },
+    },
+    defaultVariants: { tone: 'default' },
+  },
+);
+
+export type MenuItemTone = NonNullable<VariantProps<typeof menuItemVariants>['tone']>;
+
+/**
+ * A bordered panel above the page.
+ *
+ * Six of these across four files were each `rounded-lg border
+ * border-border/60` with a padding written beside it, and one of them had
+ * drifted to `p-4`. One padding is in use, so there is one, plus `none` for a
+ * panel whose rows carry their own.
+ */
+export const panelVariants = cva('rounded-lg border border-border/60', {
+  variants: {
+    padding: {
+      md: 'px-4 py-3.5',
+      none: '',
+    },
+  },
+  defaultVariants: { padding: 'md' },
+});
+
+export type PanelVariants = VariantProps<typeof panelVariants>;
+
+/**
+ * A small label that sits over a video frame.
+ *
+ * Fixed in both palettes, like everything over video, because a frame is its
+ * own ground: `bg-scrim text-on-video` whatever the theme. Six were written by
+ * hand across four files. `numeric` is a length or a count, mono and tabular
+ * so it does not breathe as the digits change.
+ */
+export const chipVariants = cva(
+  'inline-flex items-center gap-1 rounded-full bg-scrim px-2 py-0.5 text-[11px] text-on-video',
+  {
+    variants: {
+      numeric: {
+        true: 'font-mono tabular-nums',
+        false: 'font-medium',
+      },
+    },
+    defaultVariants: { numeric: false },
+  },
+);
+
+/**
+ * An empty state, in its parts: the frame, the glyph, the words, the way out.
+ *
+ * One recipe per part, handed out together, because the two sizes differ in
+ * every part at once and a caller should not be choosing five classes to get
+ * one of two looks. `page` is the whole screen; `panel` is one section of a
+ * busier screen, drawn in the bordered panel beside it.
+ */
+const emptyRoot = cva('flex flex-col items-center text-center', {
+  variants: {
+    size: {
+      page: 'justify-center py-20 gap-4',
+      panel: 'rounded-lg border border-border/60 px-4 py-8',
+    },
+  },
+});
+
+const emptyIcon = cva('block shrink-0', {
+  variants: {
+    size: { page: 'size-8', panel: 'size-5 mb-2' },
+    tone: { neutral: '', success: 'text-success', warning: 'text-warning' },
+  },
+  compoundVariants: [
+    // A glyph that is only decoration at page size; a panel's is read beside its words.
+    { size: 'page', tone: 'neutral', class: 'text-muted-300' },
+    { size: 'panel', tone: 'neutral', class: 'text-muted-400' },
+  ],
+});
+
+const emptyText = cva('', { variants: { size: { page: 'space-y-1', panel: '' } } });
+
+const emptyTitle = cva('text-foreground', {
+  variants: { size: { page: 'font-display text-lg font-medium', panel: 'text-sm' } },
+});
+
+const emptyDescription = cva('text-sm text-muted-500', {
+  variants: { size: { page: 'max-w-md', panel: 'mx-auto mt-1 max-w-[52ch]' } },
+});
+
+const emptyActions = cva('flex items-center justify-center gap-2', {
+  variants: { size: { page: 'mt-1', panel: 'mt-4' } },
+});
+
+export type EmptyStateSize = 'page' | 'panel';
+export type EmptyStateTone = 'neutral' | 'success' | 'warning';
+
+export function emptyStateVariants(options: { size: EmptyStateSize; tone: EmptyStateTone }) {
+  const { size, tone } = options;
+  return {
+    root: () => emptyRoot({ size }),
+    icon: () => emptyIcon({ size, tone }),
+    text: () => emptyText({ size }),
+    title: () => emptyTitle({ size }),
+    description: () => emptyDescription({ size }),
+    actions: () => emptyActions({ size }),
+  };
+}
+
+/**
+ * The dot beside a status line: listening, set up, or in the way.
+ *
+ * Four copies of `running ? 'bg-success' : 'bg-accent'` across three settings
+ * cards, which is a variant written out as a ternary each time. `waiting` is
+ * the accent because it is the thing to act on; `blocker` is danger; `quiet` is
+ * a finding that is only information.
+ */
+export const statusDotVariants = cva('size-1.5 rounded-full shrink-0', {
+  variants: {
+    tone: {
+      ok: 'bg-success',
+      waiting: 'bg-accent',
+      blocker: 'bg-danger',
+      quiet: 'bg-muted-300',
+    },
+  },
+  defaultVariants: { tone: 'quiet' },
+});
+
+export type StatusDotTone = NonNullable<VariantProps<typeof statusDotVariants>['tone']>;
+
+/** One segment of a wizard's progress bar, reached or not yet. */
+export const stepVariants = cva('h-1 flex-1 rounded-full transition-colors', {
+  variants: {
+    reached: { true: 'bg-accent', false: 'bg-muted-100' },
+  },
+  defaultVariants: { reached: false },
+});
+
+/**
+ * A switch, in its two parts. Off, the track is a raised surface with a
+ * hairline and the knob is muted; on, the track is the accent's wash with an
+ * accent edge and the knob is the accent.
+ */
+export const switchTrackVariants = cva(
+  'absolute left-px h-6 w-11 rounded-full border transition-colors duration-150',
+  {
+    variants: {
+      on: { true: 'bg-accent-sunk border-accent', false: 'bg-muted-100 border-line-strong' },
+    },
+    defaultVariants: { on: false },
+  },
+);
+
+export const switchThumbVariants = cva(
+  'absolute left-[5px] size-4 rounded-full transition-[transform,background-color] duration-150',
+  {
+    variants: {
+      on: { true: 'translate-x-5 bg-accent', false: 'translate-x-0 bg-muted-400' },
+    },
+    defaultVariants: { on: false },
+  },
+);
+
+/**
+ * A toolbar button that shows or hides a panel, and stays down while it is
+ * shown. Pressed is a ground, not a border, and the transparent border is
+ * there at rest too, so the box is the same size in both states.
+ */
+export const toolbarToggleVariants = cva(
+  [
+    'h-8 px-2.5 inline-flex items-center gap-2 rounded-md text-xs font-medium border border-transparent',
+    FOCUS_RING,
+    MOTION,
+  ],
+  {
+    variants: {
+      pressed: {
+        true: 'bg-muted-200 text-foreground',
+        false: 'text-muted-600 hover:bg-muted-100 hover:text-foreground',
+      },
+    },
+    defaultVariants: { pressed: false },
+  },
+);
diff --git a/src/renderer/src/components/ClipDetail/ClipFacts.vue b/src/renderer/src/components/ClipDetail/ClipFacts.vue
index 1680a366..afd7a819 100644
--- a/src/renderer/src/components/ClipDetail/ClipFacts.vue
+++ b/src/renderer/src/components/ClipDetail/ClipFacts.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { computed } from 'vue';
 import { useFormat } from '@renderer/composables/ui/useFormat';
 import { formatRelativeTime, formatExactDate } from '@renderer/helpers/dateFormat';
@@ -58,7 +59,7 @@ const picture = computed(() => {
 </script>
 
 <template>
-  <div class="rounded-lg border border-border/60 px-4 py-3.5 space-y-2.5">
+  <BasePanel class="space-y-2.5">
     <div class="flex items-baseline justify-between gap-3">
       <span class="text-xs text-muted-500 shrink-0">Recorded</span>
       <!--
@@ -112,5 +113,5 @@ const picture = computed(() => {
       <div class="text-xs text-muted-500 mb-0.5">File</div>
       <div class="text-xs text-muted-600 break-all leading-relaxed">{{ clip.filename }}</div>
     </div>
-  </div>
+  </BasePanel>
 </template>
diff --git a/src/renderer/src/components/Editor/DraftsDialog.vue b/src/renderer/src/components/Editor/DraftsDialog.vue
index 13131e1a..ea2bee1b 100644
--- a/src/renderer/src/components/Editor/DraftsDialog.vue
+++ b/src/renderer/src/components/Editor/DraftsDialog.vue
@@ -16,6 +16,7 @@ import { useToastStore } from '@renderer/stores/toast';
 import { downloadDraft, parseDraftFile, type DraftFilePayload } from '@renderer/utils/draftFile';
 import type { EditorDraft } from '@renderer/types/editor';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 interface Props {
   open: boolean;
@@ -267,15 +268,16 @@ watch(
               >
                 Open
               </button>
-              <button
-                type="button"
-                class="size-8 shrink-0 inline-flex items-center justify-center rounded-md text-muted-500 hover:text-foreground hover:bg-muted-50 outline-none focus-visible:focus-ring transition-colors duration-150"
+              <BaseButton
+                tone="quiet"
+                size="sm"
+                icon-only
                 title="Export to a file"
                 aria-label="Export this draft to a file"
                 @click="downloadDraft(draft)"
               >
                 <Icon icon="material-symbols:download" class="size-4 shrink-0 block" />
-              </button>
+              </BaseButton>
               <button
                 class="p-1.5 rounded-lg text-muted-500 hover:text-danger-ink hover:bg-danger/8 transition-colors"
                 title="Delete draft"
diff --git a/src/renderer/src/components/Editor/EditorControls.vue b/src/renderer/src/components/Editor/EditorControls.vue
index f18d89f1..0ecfa49e 100644
--- a/src/renderer/src/components/Editor/EditorControls.vue
+++ b/src/renderer/src/components/Editor/EditorControls.vue
@@ -3,6 +3,7 @@ import { Icon } from '@iconify/vue';
 import { formatTime } from '@renderer/utils/timeFormat';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
 import { EDITOR_CONSTANTS } from '@renderer/constants/editor';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /*
  * The transport buttons carried no text and no tooltip, so the only way to
@@ -47,39 +48,42 @@ const emit = defineEmits<Emits>();
 <template>
   <div class="flex items-center justify-between gap-4 px-4 h-14 bg-card border-t border-border">
     <div class="flex items-center gap-1.5">
-      <button
-        type="button"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+      <BaseButton
+        tone="quiet"
+        size="sm"
+        icon-only
         :disabled="!canUndo"
         title="Undo"
         aria-label="Undo"
         @click="emit('undo')"
       >
         <Icon icon="material-symbols:undo" class="size-5 shrink-0 block" />
-      </button>
+      </BaseButton>
 
-      <button
-        type="button"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+      <BaseButton
+        tone="quiet"
+        size="sm"
+        icon-only
         :disabled="!canRedo"
         title="Redo"
         aria-label="Redo"
         @click="emit('redo')"
       >
         <Icon icon="material-symbols:redo" class="size-5 shrink-0 block" />
-      </button>
+      </BaseButton>
 
       <div class="w-px h-5 bg-line-strong mx-1 shrink-0" aria-hidden="true" />
 
-      <button
-        type="button"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+      <BaseButton
+        tone="quiet"
+        size="sm"
+        icon-only
         :title="`Back ${SKIP_SECONDS} seconds`"
         :aria-label="`Back ${SKIP_SECONDS} seconds`"
         @click="emit('skip-backward')"
       >
         <Icon icon="material-symbols:fast-rewind" class="size-5 shrink-0 block" />
-      </button>
+      </BaseButton>
 
       <!--
         The one filled control in this row, and the only one allowed to be
@@ -98,15 +102,16 @@ const emit = defineEmits<Emits>();
         <Icon :icon="playing ? 'material-symbols:pause' : 'material-symbols:play-arrow'" class="size-5 shrink-0 block" />
       </button>
 
-      <button
-        type="button"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+      <BaseButton
+        tone="quiet"
+        size="sm"
+        icon-only
         :title="`Forward ${SKIP_SECONDS} seconds`"
         :aria-label="`Forward ${SKIP_SECONDS} seconds`"
         @click="emit('skip-forward')"
       >
         <Icon icon="material-symbols:fast-forward" class="size-5 shrink-0 block" />
-      </button>
+      </BaseButton>
     </div>
 
     <div class="flex items-center gap-4">
@@ -117,16 +122,17 @@ const emit = defineEmits<Emits>();
       <div class="w-px h-5 bg-line-strong shrink-0" aria-hidden="true" />
 
       <div class="flex items-center gap-1.5">
-        <button
-          type="button"
-          class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+        <BaseButton
+          tone="quiet"
+          size="sm"
+          icon-only
           title="Zoom out"
           aria-label="Zoom out"
           :disabled="zoom <= 0.25"
           @click="emit('zoom-out')"
         >
           <Icon icon="material-symbols:zoom-out" class="size-5 shrink-0 block" />
-        </button>
+        </BaseButton>
 
         <!--
           The zoom floor is 25%, which is not far enough: a three clip, eighty
@@ -143,16 +149,17 @@ const emit = defineEmits<Emits>();
           {{ Math.round(zoom * 100) }}%
         </button>
 
-        <button
-          type="button"
-          class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150 disabled:opacity-40 disabled:pointer-events-none"
+        <BaseButton
+          tone="quiet"
+          size="sm"
+          icon-only
           title="Zoom in"
           aria-label="Zoom in"
           :disabled="zoom >= 3"
           @click="emit('zoom-in')"
         >
           <Icon icon="material-symbols:zoom-in" class="size-5 shrink-0 block" />
-        </button>
+        </BaseButton>
       </div>
 
       <div class="w-px h-5 bg-line-strong shrink-0" aria-hidden="true" />
diff --git a/src/renderer/src/components/Editor/MusicLibrary.vue b/src/renderer/src/components/Editor/MusicLibrary.vue
index 1c2d286a..a24fc388 100644
--- a/src/renderer/src/components/Editor/MusicLibrary.vue
+++ b/src/renderer/src/components/Editor/MusicLibrary.vue
@@ -9,6 +9,7 @@ import { deleteAudioTrack, importAudioTracks, pickAudioFiles, pathForFile } from
 import type { AudioTrack } from '@renderer/types/audio';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
 import { useConfirm } from '@renderer/composables/ui/useConfirm';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 // Confirmations are a dialog, never a toast.
 const { confirm: confirmAction } = useConfirm();
@@ -236,8 +237,11 @@ onBeforeUnmount(stopPreview);
         <span
           class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"
         >
-          <button
-            class="size-7 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-accent/8 hover:text-accent-ink outline-none focus-visible:opacity-100 focus-visible:focus-ring transition-colors duration-150"
+          <BaseButton
+            tone="quiet"
+            size="dense"
+            icon-only
+            class="hover:bg-accent/8 hover:text-accent-ink focus-visible:opacity-100"
             :class="previewId === track.id ? 'opacity-100 text-accent-ink' : ''"
             :title="previewId === track.id ? 'Stop preview' : 'Preview'"
             @click.stop="togglePreview(track)"
@@ -246,14 +250,17 @@ onBeforeUnmount(stopPreview);
               :icon="previewId === track.id ? 'material-symbols:stop-circle' : 'material-symbols:play-circle'"
               class="size-4 shrink-0 block"
             />
-          </button>
-          <button
-            class="size-7 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-danger/8 hover:text-danger-ink outline-none focus-visible:opacity-100 focus-visible:focus-ring transition-colors duration-150"
+          </BaseButton>
+          <BaseButton
+            tone="quiet"
+            size="dense"
+            icon-only
+            class="hover:bg-danger/8 hover:text-danger-ink focus-visible:opacity-100"
             title="Delete track"
             @click.stop="remove(track)"
           >
             <Icon icon="material-symbols:delete-outline" class="size-4 shrink-0 block" />
-          </button>
+          </BaseButton>
         </span>
       </div>
     </div>
diff --git a/src/renderer/src/components/Library/BatchOperationsToolbar.vue b/src/renderer/src/components/Library/BatchOperationsToolbar.vue
index 9578a4ad..97c41f6b 100644
--- a/src/renderer/src/components/Library/BatchOperationsToolbar.vue
+++ b/src/renderer/src/components/Library/BatchOperationsToolbar.vue
@@ -10,6 +10,8 @@ import {
   DropdownMenuTrigger,
 } from 'reka-ui';
 import type { Clip } from '@renderer/types/clip';
+import { menuItemVariants } from '@renderer/components/Base/variants';
+import { MENU_CONTENT, MENU_ICON, MENU_SEPARATOR } from '@renderer/components/Base/geometry';
 
 interface Props {
   selectedCount: number;
@@ -108,56 +110,56 @@ const someStarred = computed(() =>
         </DropdownMenuTrigger>
         <DropdownMenuPortal>
           <DropdownMenuContent
-            class="min-w-[232px] bg-card rounded-md p-1.5 shadow-pop border border-border outline-hidden z-50"
+            :class="MENU_CONTENT"
             :side-offset="8"
           >
             <!-- Open in Advanced Editor -->
             <DropdownMenuItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none text-foreground"
+              :class="menuItemVariants()"
               @click="emit('open-in-editor')"
             >
-              <Icon icon="material-symbols:movie-edit" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:movie-edit" :class="MENU_ICON" />
               <span>Open in the editor</span>
             </DropdownMenuItem>
 
-            <DropdownMenuSeparator class="h-px bg-border my-1.5 mx-2" />
+            <DropdownMenuSeparator :class="MENU_SEPARATOR" />
 
             <!-- Publish/Unpublish -->
             <DropdownMenuItem
               v-if="!allPublished"
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none text-foreground"
+              :class="menuItemVariants()"
               @click="emit('publish')"
             >
-              <Icon icon="material-symbols:cloud-upload" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:cloud-upload" :class="MENU_ICON" />
               <span>Publish</span>
             </DropdownMenuItem>
             <DropdownMenuItem
               v-if="somePublished"
-              class="flex items-center gap-2 px-3 py-2 text-sm rounded-sm hover:bg-danger/8 text-danger-ink outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants({ tone: 'danger' })"
               @click="emit('unpublish')"
             >
-              <Icon icon="material-symbols:cloud-off" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:cloud-off" :class="MENU_ICON" />
               <span>Unpublish</span>
             </DropdownMenuItem>
 
-            <DropdownMenuSeparator class="h-px bg-border my-1.5 mx-2" />
+            <DropdownMenuSeparator :class="MENU_SEPARATOR" />
 
             <!-- Add to Collection -->
             <DropdownMenuItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none text-foreground"
+              :class="menuItemVariants()"
               @click="emit('add-to-collection')"
             >
-              <Icon icon="material-symbols:create-new-folder" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:create-new-folder" :class="MENU_ICON" />
               <span>Add to Collection</span>
             </DropdownMenuItem>
 
             <!-- Remove from Collection (if in collection view) -->
             <DropdownMenuItem
               v-if="collectionId"
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-accent-ink hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants({ tone: 'accent' })"
               @click="emit('remove-from-collection')"
             >
-              <Icon icon="material-symbols:folder-delete" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:folder-delete" :class="MENU_ICON" />
               <span>Remove from Collection</span>
             </DropdownMenuItem>
 
@@ -168,10 +170,10 @@ const someStarred = computed(() =>
             -->
             <DropdownMenuItem
               v-if="anyPublished"
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants()"
               @click="emit('compress-published')"
             >
-              <Icon icon="material-symbols:cloud-sync" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:cloud-sync" :class="MENU_ICON" />
               <span>Shrink published copies</span>
             </DropdownMenuItem>
 
@@ -182,21 +184,21 @@ const someStarred = computed(() =>
               quality is spent, so it is not the same kind of act as deleting.
             -->
             <DropdownMenuItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants()"
               @click="emit('compress')"
             >
-              <Icon icon="material-symbols:compress" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:compress" :class="MENU_ICON" />
               <span>Compress</span>
             </DropdownMenuItem>
 
-            <DropdownMenuSeparator class="h-px bg-border my-1.5 mx-2" />
+            <DropdownMenuSeparator :class="MENU_SEPARATOR" />
 
             <!-- Delete -->
             <DropdownMenuItem
-              class="flex items-center gap-2 px-3 py-2 text-sm rounded-sm hover:bg-danger/8 text-danger-ink outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants({ tone: 'danger' })"
               @click="emit('delete')"
             >
-              <Icon icon="material-symbols:delete" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:delete" :class="MENU_ICON" />
               <span>Delete</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/src/renderer/src/components/Library/ClipActionsMenu.vue b/src/renderer/src/components/Library/ClipActionsMenu.vue
index de82eb6b..fb5bd743 100644
--- a/src/renderer/src/components/Library/ClipActionsMenu.vue
+++ b/src/renderer/src/components/Library/ClipActionsMenu.vue
@@ -16,6 +16,9 @@ import { usePublisher } from '@renderer/composables/clips/usePublisher';
 import MoveClipDialog from './MoveClipDialog.vue';
 import type { Clip } from '@renderer/types/clip';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
+import { buttonVariants, menuItemVariants } from '@renderer/components/Base/variants';
+import { cn } from '@renderer/components/Base/cn';
+import { MENU_CONTENT, MENU_ICON, MENU_SEPARATOR } from '@renderer/components/Base/geometry';
 
 interface Props {
   clip: Clip;
@@ -97,20 +100,25 @@ async function handleMoveToGame(targetGame: string) {
         <span class="text-sm font-medium text-foreground">Publish, move or delete</span>
         <Icon
           icon="material-symbols:chevron-right-rounded"
-          class="size-4 shrink-0 block text-muted-400"
+          :class="MENU_ICON"
         />
       </MenubarTrigger>
 
       <MenubarTrigger
         v-else
         title="More actions"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-sm text-muted-500 hover:text-foreground hover:bg-muted-100 outline-none focus-visible:focus-ring transition-[opacity,color,background-color] duration-150 cursor-pointer"
+        :class="
+          cn(
+            buttonVariants({ tone: 'quiet', size: 'sm', iconOnly: true }),
+            'transition-[opacity,color,background-color] cursor-pointer',
+          )
+        "
       >
         <Icon icon="material-symbols:more-vert" class="size-4 shrink-0 block" />
       </MenubarTrigger>
       <MenubarPortal>
         <MenubarContent
-          class="min-w-[232px] bg-card rounded-md p-1.5 shadow-pop border border-border outline-hidden z-50"
+          :class="MENU_CONTENT"
           align="end"
           :side-offset="8"
         >
@@ -123,40 +131,40 @@ async function handleMoveToGame(targetGame: string) {
               is for, so it is the first item in its own menu.
             -->
             <MenubarItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants()"
               @click="onTrim"
             >
-              <Icon icon="material-symbols:content-cut" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:content-cut" :class="MENU_ICON" />
               <span>Trim to the good bit</span>
             </MenubarItem>
             <MenubarItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+              :class="menuItemVariants()"
               @click="onAdvancedEdit"
             >
-              <Icon icon="material-symbols:video-settings" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:video-settings" :class="MENU_ICON" />
               <span>Open in the editor</span>
             </MenubarItem>
 
-            <MenubarSeparator class="h-px bg-border my-1.5 mx-2" />
+            <MenubarSeparator :class="MENU_SEPARATOR" />
           </template>
 
           <!-- Reveal in Explorer -->
           <MenubarItem
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+            :class="menuItemVariants()"
             @click="onReveal"
           >
-            <Icon icon="material-symbols:folder-open" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:folder-open" :class="MENU_ICON" />
             <span>Reveal in Explorer</span>
           </MenubarItem>
 
           <!-- Export Audio -->
           <MenubarItem
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
-            :class="{ 'opacity-50 pointer-events-none': isExportingAudio }"
+            :class="menuItemVariants()"
+            :disabled="isExportingAudio"
             @click="onExportAudio"
           >
             <BaseSpinner v-if="isExportingAudio" class="text-base" />
-            <Icon v-else icon="material-symbols:audio-file" class="size-4 shrink-0 block text-muted-400" />
+            <Icon v-else icon="material-symbols:audio-file" :class="MENU_ICON" />
             <span>{{ isExportingAudio ? 'Exporting Audio...' : 'Export Audio' }}</span>
           </MenubarItem>
 
@@ -168,63 +176,63 @@ async function handleMoveToGame(targetGame: string) {
             quality is spent.
           -->
           <MenubarItem
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+            :class="menuItemVariants()"
             @click="onCompress"
           >
-            <Icon icon="material-symbols:compress" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:compress" :class="MENU_ICON" />
             <span>Compress</span>
           </MenubarItem>
 
           <!-- Move to Game -->
           <MenubarItem
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+            :class="menuItemVariants()"
             @click="showMoveDialog = true"
           >
-            <Icon icon="material-symbols:drive-file-move" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:drive-file-move" :class="MENU_ICON" />
             <span>Move to Game</span>
           </MenubarItem>
 
           <!-- Copy URL (conditional) -->
           <MenubarItem
             v-if="clip.published && clip.publishedUrl"
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+            :class="menuItemVariants()"
             @click="onCopyUrl"
           >
-            <Icon icon="material-symbols:link" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:link" :class="MENU_ICON" />
             <span>Copy URL</span>
           </MenubarItem>
 
-          <MenubarSeparator v-if="collectionId" class="h-px bg-border my-1.5 mx-2" />
+          <MenubarSeparator v-if="collectionId" :class="MENU_SEPARATOR" />
 
           <!-- Remove from Collection -->
           <MenubarItem
             v-if="collectionId"
-            class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-accent-ink hover:bg-muted-100 outline-hidden cursor-pointer select-none"
+            :class="menuItemVariants({ tone: 'accent' })"
             @click="onRemoveFromCollection"
           >
-            <Icon icon="material-symbols:folder-delete" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:folder-delete" :class="MENU_ICON" />
             <span>Remove from Collection</span>
           </MenubarItem>
 
-          <MenubarSeparator class="h-px bg-border my-1.5 mx-2" />
+          <MenubarSeparator :class="MENU_SEPARATOR" />
 
           <!-- Publish/Unpublish -->
           <MenubarItem
             v-if="clip.published"
-            class="flex items-center gap-2 px-3 py-2 text-sm rounded-sm hover:bg-danger/8 text-danger-ink outline-hidden cursor-pointer select-none"
-            :class="{ 'opacity-50 pointer-events-none': isPublishing }"
+            :class="menuItemVariants({ tone: 'danger' })"
+            :disabled="isPublishing"
             @click="onUnpublish"
           >
-            <Icon icon="material-symbols:cloud-off" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:cloud-off" :class="MENU_ICON" />
             <span>{{ isPublishing ? 'Unpublishing…' : 'Unpublish' }}</span>
           </MenubarItem>
           <template v-else>
             <MenubarItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
-              :class="{ 'opacity-50 pointer-events-none': isPublishing }"
+              :class="menuItemVariants()"
+              :disabled="isPublishing"
               @click="onPublish"
             >
-              <Icon icon="material-symbols:cloud-upload" class="size-4 shrink-0 block text-muted-400" />
+              <Icon icon="material-symbols:cloud-upload" :class="MENU_ICON" />
               <!--
                 Say which one this is.
 
@@ -251,13 +259,13 @@ async function handleMoveToGame(targetGame: string) {
               is the file.
             -->
             <MenubarItem
-              class="flex items-center gap-2.5 h-[34px] px-2.5 text-sm rounded-sm text-foreground hover:bg-muted-100 outline-hidden cursor-pointer select-none"
-              :class="{ 'opacity-50 pointer-events-none': isPublishing }"
+              :class="menuItemVariants()"
+              :disabled="isPublishing"
               @click="compressesPublished ? onPublishOriginal() : onPublishCompressed()"
             >
               <Icon
                 :icon="compressesPublished ? 'material-symbols:hd' : 'material-symbols:compress'"
-                class="size-4 shrink-0 block text-muted-400"
+                :class="MENU_ICON"
               />
               <span>
                 {{ compressesPublished ? 'Publish the original file' : 'Publish a compressed copy' }}
@@ -265,15 +273,15 @@ async function handleMoveToGame(targetGame: string) {
             </MenubarItem>
           </template>
 
-          <MenubarSeparator class="h-px bg-border my-1.5 mx-2" />
+          <MenubarSeparator :class="MENU_SEPARATOR" />
 
           <!-- Delete -->
           <MenubarItem
-            class="flex items-center gap-2 px-3 py-2 text-sm rounded-sm hover:bg-danger/8 text-danger-ink outline-hidden cursor-pointer select-none"
-            :class="{ 'opacity-50 pointer-events-none': isPublishing }"
+            :class="menuItemVariants({ tone: 'danger' })"
+            :disabled="isPublishing"
             @click="onDelete"
           >
-            <Icon icon="material-symbols:delete" class="size-4 shrink-0 block text-muted-400" />
+            <Icon icon="material-symbols:delete" :class="MENU_ICON" />
             <span>Delete</span>
           </MenubarItem>
         </MenubarContent>
diff --git a/src/renderer/src/components/Library/ClipCard.vue b/src/renderer/src/components/Library/ClipCard.vue
index 16e01b40..349c718e 100644
--- a/src/renderer/src/components/Library/ClipCard.vue
+++ b/src/renderer/src/components/Library/ClipCard.vue
@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { sharedCardHeight } from '@renderer/composables/media/useNearViewport';
 import { Icon } from '@iconify/vue';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import { useDragAndDrop } from '@renderer/composables/editor/useDragAndDrop';
 import { beginOsDrag } from '@renderer/composables/clips/useOsDrag';
 import { useClipDetail } from '@renderer/composables/clips/useClipDetail';
@@ -495,17 +496,19 @@ function handleCardClick(event: MouseEvent) {
             already an HTML5 drag source aimed at the collections above the
             grid, and `webContents.startDrag` cannot share an element with one.
           -->
-          <button
-            type="button"
+          <BaseButton
+            tone="quiet"
+            size="dense"
+            icon-only
+            class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-[opacity,color,background-color] cursor-grab active:cursor-grabbing"
             draggable="true"
-            class="size-7 inline-flex items-center justify-center shrink-0 rounded-md text-muted-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:opacity-100 focus-visible:focus-ring transition-opacity duration-150 cursor-grab active:cursor-grabbing"
             title="Drag the file out, into Discord or a folder"
             aria-label="Drag the file out of GoodBit"
             @click.stop
             @dragstart.stop="handleDragOut"
           >
             <Icon icon="material-symbols:drag-indicator" class="size-4 shrink-0 block" />
-          </button>
+          </BaseButton>
 
           <ClipStarButton :clip="clip" @updated="emit('updated', $event)" />
 
diff --git a/src/renderer/src/components/Library/ClipExportBadge.vue b/src/renderer/src/components/Library/ClipExportBadge.vue
index 5f362fff..08d95000 100644
--- a/src/renderer/src/components/Library/ClipExportBadge.vue
+++ b/src/renderer/src/components/Library/ClipExportBadge.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BaseChip from '@renderer/components/Base/BaseChip.vue';
 import { Icon } from '@iconify/vue';
 
 /**
@@ -27,12 +28,11 @@ defineProps<Props>();
 </script>
 
 <template>
-  <span
+  <BaseChip
     v-if="isExport"
-    class="inline-flex items-center gap-1 rounded-full bg-scrim px-2 py-0.5 text-[11px] font-medium text-on-video"
     title="Made in the editor, from clips in this game"
   >
     <Icon icon="material-symbols:movie-edit-outline-rounded" class="size-3 shrink-0 block" />
     Export
-  </span>
+  </BaseChip>
 </template>
diff --git a/src/renderer/src/components/Library/ClipFilters.vue b/src/renderer/src/components/Library/ClipFilters.vue
index ecf802cd..618104d9 100644
--- a/src/renderer/src/components/Library/ClipFilters.vue
+++ b/src/renderer/src/components/Library/ClipFilters.vue
@@ -7,6 +7,7 @@ import type { ComboBoxValue } from '@renderer/components/Base/types';
 import { QUIET_CONTROL_HEIGHT } from '@renderer/components/Base/geometry';
 import { useTheme } from '@renderer/composables/ui/useTheme';
 import ClipFilterPopover from './ClipFilterPopover.vue';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /**
  * One row that describes the list below it, and chooses what to act on.
@@ -226,9 +227,10 @@ function onSortChange(value: ComboBoxValue | ComboBoxValue[] | null): void {
         {{ totalCount }} {{ totalCount === 1 ? 'clip' : 'clips' }}
       </div>
 
-      <button
-        type="button"
-        class="size-8 inline-flex items-center justify-center shrink-0 rounded-md text-muted-600 hover:bg-muted-100 hover:text-foreground outline-none focus-visible:focus-ring transition-colors duration-150"
+      <BaseButton
+        tone="quiet"
+        size="sm"
+        icon-only
         :aria-pressed="isDark"
         :title="isDark ? 'Switch to the light palette' : 'Switch to the dark palette'"
         :aria-label="isDark ? 'Switch to the light palette' : 'Switch to the dark palette'"
@@ -238,7 +240,7 @@ function onSortChange(value: ComboBoxValue | ComboBoxValue[] | null): void {
           :icon="isDark ? 'material-symbols:light-mode-outline' : 'material-symbols:dark-mode-outline'"
           class="size-4 shrink-0 block"
         />
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Library/ClipPublishedBadge.vue b/src/renderer/src/components/Library/ClipPublishedBadge.vue
index 58be5083..a7c52b3f 100644
--- a/src/renderer/src/components/Library/ClipPublishedBadge.vue
+++ b/src/renderer/src/components/Library/ClipPublishedBadge.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BaseChip from '@renderer/components/Base/BaseChip.vue';
 interface Props {
   published?: boolean;
 }
@@ -16,9 +17,9 @@ defineProps<Props>();
     card is the layout-shift rule broken by animation.
   -->
   <div v-if="published" class="absolute top-2 right-2 z-10">
-    <span class="rounded-full bg-scrim px-2 py-0.5 text-[11px] font-medium text-on-video">
+    <BaseChip>
       Published
-    </span>
+    </BaseChip>
   </div>
 </template>
 
diff --git a/src/renderer/src/components/Library/ClipStarButton.vue b/src/renderer/src/components/Library/ClipStarButton.vue
index 9b7bd5fd..0f0e3117 100644
--- a/src/renderer/src/components/Library/ClipStarButton.vue
+++ b/src/renderer/src/components/Library/ClipStarButton.vue
@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue';
 import { starClip, unstarClip } from '@renderer/services/clips';
 import type { Clip } from '@renderer/types/clip';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 interface Props {
   clip: Clip;
@@ -63,10 +64,12 @@ async function handleToggleStar(): Promise<void> {
     rather than over a frame that does not, and `on-video` white on it would be
     the one literal colour in the app sitting on the wrong ground.
   -->
-  <button
+  <BaseButton
     v-else
-    type="button"
-    class="size-8 inline-flex items-center justify-center shrink-0 rounded-sm text-muted-500 hover:text-foreground hover:bg-muted-100 outline-none focus-visible:focus-ring transition-[opacity,color,background-color] duration-150"
+    tone="quiet"
+    size="sm"
+    icon-only
+    class="transition-[opacity,color,background-color]"
     :class="clip.starred ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'"
     :title="clip.starred ? 'Unstar' : 'Star'"
     :aria-label="clip.starred ? 'Unstar this clip' : 'Star this clip'"
@@ -77,5 +80,5 @@ async function handleToggleStar(): Promise<void> {
       class="size-4 shrink-0 block"
       :class="clip.starred ? 'text-accent' : ''"
     />
-  </button>
+  </BaseButton>
 </template>
diff --git a/src/renderer/src/components/Library/ClipSuggestedBadge.vue b/src/renderer/src/components/Library/ClipSuggestedBadge.vue
index c74be97e..bac7bf68 100644
--- a/src/renderer/src/components/Library/ClipSuggestedBadge.vue
+++ b/src/renderer/src/components/Library/ClipSuggestedBadge.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BaseChip from '@renderer/components/Base/BaseChip.vue';
 import { Icon } from '@iconify/vue';
 
 /**
@@ -31,14 +32,13 @@ defineProps<Props>();
 </script>
 
 <template>
-  <span
+  <BaseChip
     v-if="count && count > 0"
-    class="inline-flex items-center gap-1 rounded-full bg-scrim px-2 py-0.5 text-[11px] font-medium text-on-video"
     :title="
       count === 1 ? '1 GoodBit found in this clip' : `${count} GoodBits found in this clip`
     "
   >
     <Icon icon="material-symbols:auto-awesome-rounded" class="size-3 shrink-0 block" />
     <span class="tabular-nums">{{ count }}</span>
-  </span>
+  </BaseChip>
 </template>
diff --git a/src/renderer/src/components/Library/ClipsListFooter.vue b/src/renderer/src/components/Library/ClipsListFooter.vue
index 1571326f..cf4f70fc 100644
--- a/src/renderer/src/components/Library/ClipsListFooter.vue
+++ b/src/renderer/src/components/Library/ClipsListFooter.vue
@@ -3,7 +3,8 @@ import { computed, toRef } from 'vue';
 import { useLoadMoreWhenSeen } from '@renderer/composables/library/useLoadMoreWhenSeen';
 import { pluralize } from '@renderer/utils/pluralize';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
-import { BUTTON, ICON_BOX } from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import { Icon } from '@iconify/vue';
 
 /**
@@ -76,16 +77,14 @@ const sentinel = useLoadMoreWhenSeen({
     <div ref="sentinel" class="h-px -mb-px" aria-hidden="true"></div>
 
     <div v-if="hasMore" class="flex flex-col items-center gap-3 py-6">
-      <button
-        type="button"
-        :class="BUTTON"
+      <BaseButton
         :disabled="loading"
         @click="emit('load-more')"
       >
         <BaseSpinner v-if="loading" :class="ICON_BOX" />
         <Icon v-else icon="material-symbols:expand-more" :class="ICON_BOX" />
         {{ loading ? 'Loading' : 'Load more' }}
-      </button>
+      </BaseButton>
 
       <p class="font-mono text-xs tabular-nums text-muted-400">
         {{ loaded }} of {{ total }}
diff --git a/src/renderer/src/components/Publish/PublisherStatCards.vue b/src/renderer/src/components/Publish/PublisherStatCards.vue
index ea1c0b53..137da9d4 100644
--- a/src/renderer/src/components/Publish/PublisherStatCards.vue
+++ b/src/renderer/src/components/Publish/PublisherStatCards.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { Icon } from '@iconify/vue';
 import { ICON_BOX_LG } from '@renderer/components/Base/geometry';
 import { useFormat } from '@renderer/composables/ui/useFormat';
@@ -26,16 +27,16 @@ const { formatBytes } = useFormat();
 
 <template>
   <div class="grid gap-3 sm:grid-cols-3">
-    <div class="rounded-lg border border-border/60 px-4 py-3.5">
+    <BasePanel>
       <div class="flex items-center gap-2 text-muted-500">
         <Icon icon="material-symbols:cloud-done-outline" :class="ICON_BOX_LG" />
         <span class="text-xs">Published</span>
       </div>
       <div class="mt-1.5 font-mono text-2xl tabular-nums text-foreground">{{ clips }}</div>
       <p class="text-xs text-muted-500">{{ clips === 1 ? 'clip' : 'clips' }} behind a public link</p>
-    </div>
+    </BasePanel>
 
-    <div class="rounded-lg border border-border/60 px-4 py-3.5">
+    <BasePanel>
       <div class="flex items-center gap-2 text-muted-500">
         <Icon icon="material-symbols:dns-outline" :class="ICON_BOX_LG" />
         <span class="text-xs">On the publisher</span>
@@ -48,15 +49,15 @@ const { formatBytes } = useFormat();
         machine's drive, and this one is the server the clips were sent to.
       -->
       <p class="text-xs text-muted-500">on the server, not on this computer</p>
-    </div>
+    </BasePanel>
 
-    <div class="rounded-lg border border-border/60 px-4 py-3.5">
+    <BasePanel>
       <div class="flex items-center gap-2 text-muted-500">
         <Icon icon="material-symbols:visibility-outline" :class="ICON_BOX_LG" />
         <span class="text-xs">Opened</span>
       </div>
       <div class="mt-1.5 font-mono text-2xl tabular-nums text-foreground">{{ views }}</div>
       <p class="text-xs text-muted-500">times somebody opened a link</p>
-    </div>
+    </BasePanel>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/BackupsCard.vue b/src/renderer/src/components/Settings/BackupsCard.vue
index 11bf5b05..3f5596d2 100644
--- a/src/renderer/src/components/Settings/BackupsCard.vue
+++ b/src/renderer/src/components/Settings/BackupsCard.vue
@@ -6,12 +6,8 @@ import { useFormat } from '@renderer/composables/ui/useFormat';
 import { formatDate } from '@renderer/helpers/dateFormat';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
 import { useConfirm } from '@renderer/composables/ui/useConfirm';
-import {
-  BUTTON,
-  BUTTON_SMALL,
-  BUTTON_STRONG,
-  ICON_BOX,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 // Confirmations are a dialog, never a toast.
 const { confirm: confirmAction } = useConfirm();
@@ -146,9 +142,9 @@ onMounted(() => {
           timestamps is easy enough to misread without adding a second step
           that hides which one is selected.
         -->
-        <button
-          type="button"
-          :class="[BUTTON_SMALL, 'shrink-0']"
+        <BaseButton
+          size="sm"
+          class="shrink-0"
           :disabled="!!restoring || working"
           title="Replace the current library with this copy and restart"
           @click="restore(backup)"
@@ -156,23 +152,23 @@ onMounted(() => {
           <BaseSpinner v-if="restoring === backup.path" :class="ICON_BOX" />
           <Icon v-else icon="material-symbols:history" :class="ICON_BOX" />
           {{ restoring === backup.path ? 'Restoring' : 'Restore' }}
-        </button>
+        </BaseButton>
       </div>
     </div>
 
     <p v-else class="!mt-4">No copies yet.</p>
 
     <div class="flex flex-wrap gap-2 mt-4">
-      <button type="button" :class="BUTTON_STRONG" :disabled="working" @click="backUpNow">
+      <BaseButton tone="strong" :disabled="working" @click="backUpNow">
         <BaseSpinner v-if="working" :class="ICON_BOX" />
         <Icon v-else icon="material-symbols:backup" :class="ICON_BOX" />
         {{ working ? 'Copying' : 'Back up now' }}
-      </button>
+      </BaseButton>
 
-      <button type="button" :class="BUTTON" @click="reveal">
+      <BaseButton @click="reveal">
         <Icon icon="material-symbols:folder-open" :class="ICON_BOX" />
         Show me the files
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/ConnectionsSettings.vue b/src/renderer/src/components/Settings/ConnectionsSettings.vue
index 4e4a3855..4a173122 100644
--- a/src/renderer/src/components/Settings/ConnectionsSettings.vue
+++ b/src/renderer/src/components/Settings/ConnectionsSettings.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { statusDotVariants } from '@renderer/components/Base/variants';
 import { computed, onMounted, ref } from 'vue';
 import SettingToggle from './SettingToggle.vue';
 import PublisherCard from './PublisherCard.vue';
 import StreamDeckCard from './StreamDeckCard.vue';
 import { useToastStore } from '@renderer/stores/toast';
 import { useSettingsSearch } from '@renderer/composables/settings/useSettingsSearch';
-import { BUTTON_SMALL } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /**
  * The two programs GoodBit talks to, and nothing else.
@@ -194,10 +195,7 @@ async function copyCommand(): Promise<void> {
           address it is answering on.
         -->
         <div class="flex items-center gap-2 py-3 border-b border-border text-sm">
-          <span
-            class="size-1.5 rounded-full shrink-0"
-            :class="state.running ? 'bg-success' : 'bg-accent'"
-          />
+          <span :class="statusDotVariants({ tone: state.running ? 'ok' : 'waiting' })" />
           <span class="text-foreground">{{ state.running ? 'Listening' : 'Not listening' }}</span>
           <code class="font-mono text-xs text-muted-400 truncate">{{ state.url }}</code>
         </div>
@@ -232,22 +230,19 @@ async function copyCommand(): Promise<void> {
               </p>
               <p v-if="client.note" class="text-sm text-muted-500 mt-1">{{ client.note }}</p>
             </div>
-            <button
+            <BaseButton
               v-if="client.writable"
-              type="button"
-              :class="[
-                BUTTON_SMALL,
-                'shrink-0',
-                client.registered ? '!border-success/40 !text-success hover:!bg-success/10' : '',
-              ]"
+              size="sm"
+              :tone="client.registered ? 'success' : 'default'"
+              class="shrink-0"
               :disabled="working || !state.running"
               @click="toggleRegistration(!client.registered, client.id)"
             >
               {{ client.registered ? 'Connected' : 'Connect' }}
-            </button>
-            <button v-else type="button" :class="[BUTTON_SMALL, 'shrink-0']" @click="copyAddress">
+            </BaseButton>
+            <BaseButton v-else size="sm" class="shrink-0" @click="copyAddress">
               Copy address
-            </button>
+            </BaseButton>
           </div>
         </template>
 
@@ -266,10 +261,10 @@ async function copyCommand(): Promise<void> {
           </p>
           <code class="block font-mono text-xs text-muted-600 break-all">{{ shownCommand }}</code>
           <div class="flex items-center gap-2 pt-0.5">
-            <button type="button" :class="BUTTON_SMALL" @click="copyCommand">Copy</button>
-            <button type="button" :class="BUTTON_SMALL" @click="showToken = !showToken">
+            <BaseButton size="sm" @click="copyCommand">Copy</BaseButton>
+            <BaseButton size="sm" @click="showToken = !showToken">
               {{ showToken ? 'Hide the token' : 'Show the token' }}
-            </button>
+            </BaseButton>
           </div>
         </div>
 
diff --git a/src/renderer/src/components/Settings/KeyboardShortcutCustomization.vue b/src/renderer/src/components/Settings/KeyboardShortcutCustomization.vue
index 8c300ab5..15fb5af1 100644
--- a/src/renderer/src/components/Settings/KeyboardShortcutCustomization.vue
+++ b/src/renderer/src/components/Settings/KeyboardShortcutCustomization.vue
@@ -4,7 +4,8 @@ import { Icon } from '@iconify/vue';
 import { useShortcutCustomization } from '@renderer/composables/settings/useShortcutCustomization';
 import { useShortcutEditor } from '@renderer/composables/settings/useShortcutEditor';
 import { getKeyDisplayName, SHORTCUT_ACTIONS, type ShortcutKey } from '@renderer/constants/shortcuts';
-import { BUTTON_SMALL, ICON_BOX } from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /** A key, drawn the same way wherever one is shown. */
 const KEY_CAP =
@@ -91,13 +92,12 @@ function getActionLabel(actionId: string): string {
 
           <div v-if="editingActionId === action.id" class="flex items-center gap-2 shrink-0">
             <span class="text-sm text-accent-ink">Press a key</span>
-            <button
-              type="button"
-              :class="BUTTON_SMALL"
+            <BaseButton
+              size="sm"
               @click="editor.cancelEditing"
             >
               Cancel
-            </button>
+            </BaseButton>
           </div>
 
           <div v-else class="flex items-center gap-2 shrink-0">
@@ -112,19 +112,19 @@ function getActionLabel(actionId: string): string {
             >
               {{ getKeyDisplayName(shortcuts.getActionKey(action.id)!) }}
             </kbd>
-            <button type="button" :class="BUTTON_SMALL" @click="editor.startEditing(action.id)">
+            <BaseButton size="sm" @click="editor.startEditing(action.id)">
               Change
-            </button>
-            <button
+            </BaseButton>
+            <BaseButton
               v-if="shortcuts.customShortcuts.value[action.id]"
-              type="button"
-              :class="[BUTTON_SMALL, '!px-2']"
+              size="sm"
+              class="px-2"
               title="Put this one back to its default"
               aria-label="Put this one back to its default"
               @click="editor.assignKey(action.id, null)"
             >
               <Icon icon="material-symbols:restart-alt" :class="ICON_BOX" />
-            </button>
+            </BaseButton>
           </div>
         </div>
       </section>
diff --git a/src/renderer/src/components/Settings/MusicFolderCard.vue b/src/renderer/src/components/Settings/MusicFolderCard.vue
index d0d25fa9..a1f8578c 100644
--- a/src/renderer/src/components/Settings/MusicFolderCard.vue
+++ b/src/renderer/src/components/Settings/MusicFolderCard.vue
@@ -2,7 +2,7 @@
 import { onMounted } from 'vue';
 import { useAppSettings } from '@renderer/composables/app/useAppSettings';
 import { useSettingsSearch } from '@renderer/composables/settings/useSettingsSearch';
-import { BUTTON } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import { useToastStore } from '@renderer/stores/toast';
 
 /**
@@ -49,7 +49,7 @@ async function change(): Promise<void> {
     <p>Where GoodBit looks for the audio you can lay under a clip in the editor.</p>
 
     <div class="mt-4">
-      <button type="button" :class="BUTTON" @click="change">Change</button>
+      <BaseButton @click="change">Change</BaseButton>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/ObsSetupDialog.vue b/src/renderer/src/components/Settings/ObsSetupDialog.vue
index 9dc909dc..1e9b270a 100644
--- a/src/renderer/src/components/Settings/ObsSetupDialog.vue
+++ b/src/renderer/src/components/Settings/ObsSetupDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { stepVariants } from '@renderer/components/Base/variants';
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useObsSetup } from '@renderer/composables/obs/useObsSetup';
@@ -184,8 +185,7 @@ function notNow(): void {
         <li
           v-for="(entry, index) in pages"
           :key="entry.id"
-          class="h-1 flex-1 rounded-full transition-colors"
-          :class="index <= at ? 'bg-accent' : 'bg-muted-100'"
+          :class="stepVariants({ reached: index <= at })"
           :title="entry.title"
         ></li>
       </ol>
diff --git a/src/renderer/src/components/Settings/PublisherCard.vue b/src/renderer/src/components/Settings/PublisherCard.vue
index 6ae7b9e3..12e49eaa 100644
--- a/src/renderer/src/components/Settings/PublisherCard.vue
+++ b/src/renderer/src/components/Settings/PublisherCard.vue
@@ -7,11 +7,8 @@ import { useSettingsSearch } from '@renderer/composables/settings/useSettingsSea
 import { useToastStore } from '@renderer/stores/toast';
 import SettingToggle from './SettingToggle.vue';
 import BaseField from '@renderer/components/Base/BaseField.vue';
-import {
-  BUTTON,
-  BUTTON_STRONG,
-  ICON_BOX,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /**
  * The server that hosts your public links.
@@ -119,15 +116,13 @@ async function testPublisher(): Promise<void> {
             @keydown.enter="savePublisher"
           />
         </BaseField>
-        <button
-          type="button"
-          :class="BUTTON"
+        <BaseButton
           :disabled="!publisherUrl.trim()"
           @click="testPublisher"
         >
           Test
-        </button>
-        <button type="button" :class="BUTTON_STRONG" @click="savePublisher">Save</button>
+        </BaseButton>
+        <BaseButton tone="strong" @click="savePublisher">Save</BaseButton>
       </div>
 
       <!--
@@ -148,9 +143,8 @@ async function testPublisher(): Promise<void> {
             @keydown.enter="savePublisher"
           />
         </BaseField>
-        <button
-          type="button"
-          :class="[BUTTON, '!px-3']"
+        <BaseButton
+          class="px-3"
           :title="showToken ? 'Hide the token' : 'Show the token'"
           :aria-label="showToken ? 'Hide the token' : 'Show the token'"
           @click="showToken = !showToken"
@@ -159,7 +153,7 @@ async function testPublisher(): Promise<void> {
             :icon="showToken ? 'material-symbols:visibility-off' : 'material-symbols:visibility'"
             :class="ICON_BOX"
           />
-        </button>
+        </BaseButton>
       </div>
 
       <p class="!mt-2.5">
diff --git a/src/renderer/src/components/Settings/RecordingSettings.vue b/src/renderer/src/components/Settings/RecordingSettings.vue
index 4e087e8f..932fbf48 100644
--- a/src/renderer/src/components/Settings/RecordingSettings.vue
+++ b/src/renderer/src/components/Settings/RecordingSettings.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
+import { statusDotVariants } from '@renderer/components/Base/variants';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import ObsSetupDialog from './ObsSetupDialog.vue';
 import ClipsFolderCard from './ClipsFolderCard.vue';
-import {
-  BUTTON,
-  BUTTON_STRONG,
-  ICON_BOX,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import SettingToggle from './SettingToggle.vue';
 import SettingSelect from './SettingSelect.vue';
 import type { ComboBoxOption } from '@renderer/components/Base/types';
@@ -266,11 +264,7 @@ function openGuide(): void {
       -->
       <div class="flex items-center gap-2">
         <BaseSpinner v-if="!status" class="size-3.5 shrink-0 block text-muted-400" />
-        <span
-          v-else
-          class="size-1.5 rounded-full shrink-0"
-          :class="status.ready ? 'bg-success' : 'bg-accent'"
-        />
+        <span v-else :class="statusDotVariants({ tone: status.ready ? 'ok' : 'waiting' })" />
         <h3>{{ headline }}</h3>
       </div>
       <p>{{ subhead }}</p>
@@ -299,8 +293,7 @@ function openGuide(): void {
             class="flex items-start gap-2.5 py-3 border-t border-border"
           >
             <span
-              class="size-1.5 rounded-full shrink-0 mt-2"
-              :class="finding.level === 'blocker' ? 'bg-danger' : 'bg-muted-300'"
+              :class="[statusDotVariants({ tone: finding.level === 'blocker' ? 'blocker' : 'quiet' }), 'mt-2']"
             />
             <div class="min-w-0">
               <p class="text-sm font-medium text-foreground">{{ finding.title }}</p>
@@ -310,9 +303,8 @@ function openGuide(): void {
         </ul>
 
         <div class="flex flex-wrap items-center gap-2 mt-4">
-          <button
-            type="button"
-            :class="BUTTON_STRONG"
+          <BaseButton
+            tone="strong"
             :disabled="loading || working"
             @click="openSetup"
           >
@@ -325,11 +317,11 @@ function openGuide(): void {
                     ? 'Change the setup'
                     : 'Set up OBS for me'
             }}
-          </button>
+          </BaseButton>
 
-          <button v-if="status.ready" type="button" :class="BUTTON" @click="launch">
+          <BaseButton v-if="status.ready" @click="launch">
             {{ status.running ? 'OBS is running' : 'Start OBS' }}
-          </button>
+          </BaseButton>
 
           <button
             type="button"
@@ -371,7 +363,7 @@ function openGuide(): void {
         setup. Nothing is reset, and every step shows what is already set.
       </p>
       <div class="mt-4">
-        <button type="button" :class="BUTTON" @click="runOnboarding">Start it</button>
+        <BaseButton @click="runOnboarding">Start it</BaseButton>
       </div>
     </div>
 
@@ -411,17 +403,16 @@ function openGuide(): void {
             open.
           </p>
         </div>
-        <button
+        <BaseButton
           v-if="!status?.running"
-          type="button"
-          :class="[BUTTON, 'shrink-0']"
+          class="shrink-0"
           @click="openSetup"
         >
           Write it to OBS
-        </button>
-        <button v-else type="button" :class="[BUTTON, 'shrink-0']" :disabled="working" @click="closeObsForQuality">
+        </BaseButton>
+        <BaseButton v-else class="shrink-0" :disabled="working" @click="closeObsForQuality">
           Close OBS
-        </button>
+        </BaseButton>
       </div>
     </template>
 
@@ -550,9 +541,9 @@ function openGuide(): void {
             Shows the card and plays the chime, without recording anything
           </p>
         </div>
-        <button type="button" :class="[BUTTON, 'shrink-0']" @click="previewToast">
+        <BaseButton class="shrink-0" @click="previewToast">
           Show me
-        </button>
+        </BaseButton>
       </div>
 
       <!-- The one thing that can make this look broken, said once and quietly. -->
@@ -603,9 +594,9 @@ function openGuide(): void {
             Shows both halves, without reading anything
           </p>
         </div>
-        <button type="button" :class="[BUTTON, 'shrink-0']" @click="previewSweep">
+        <BaseButton class="shrink-0" @click="previewSweep">
           Show me
-        </button>
+        </BaseButton>
       </div>
     </template>
 
diff --git a/src/renderer/src/components/Settings/RescanCard.vue b/src/renderer/src/components/Settings/RescanCard.vue
index b8a30573..277b2875 100644
--- a/src/renderer/src/components/Settings/RescanCard.vue
+++ b/src/renderer/src/components/Settings/RescanCard.vue
@@ -2,7 +2,8 @@
 import { Icon } from '@iconify/vue';
 import { useLibraryRescan } from '@renderer/composables/library/useLibraryRescan';
 import { useSettingsSearch } from '@renderer/composables/settings/useSettingsSearch';
-import { BUTTON, ICON_BOX } from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /**
  * Reread the clips folder, which used to be the biggest button in the app.
@@ -39,13 +40,13 @@ const { settingRing } = useSettingsSearch();
       added by something other than GoodBit.
     </p>
     <div class="mt-4">
-      <button type="button" :class="BUTTON" :disabled="rescanning" @click="rescan">
+      <BaseButton :disabled="rescanning" @click="rescan">
         <Icon
           icon="material-symbols:refresh"
           :class="[ICON_BOX, { 'animate-spin': rescanning }]"
         />
         <span>{{ rescanning ? 'Scanning' : 'Rescan' }}</span>
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Settings/StreamDeckCard.vue b/src/renderer/src/components/Settings/StreamDeckCard.vue
index 5f00a9ae..8a6887a2 100644
--- a/src/renderer/src/components/Settings/StreamDeckCard.vue
+++ b/src/renderer/src/components/Settings/StreamDeckCard.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { statusDotVariants } from '@renderer/components/Base/variants';
 import { onMounted, ref } from 'vue';
 import SettingToggle from './SettingToggle.vue';
 import { useToastStore } from '@renderer/stores/toast';
 import { useSettingsSearch } from '@renderer/composables/settings/useSettingsSearch';
 import { useAppSettings } from '@renderer/composables/app/useAppSettings';
-import { BUTTON_SMALL } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 
 /**
  * The Stream Deck plugin's door into the library.
@@ -95,19 +96,16 @@ async function copy(value: string, what: string): Promise<void> {
 
     <template v-if="state?.enabled">
       <div class="flex items-center gap-2 py-3 border-b border-border text-sm">
-        <span
-          class="size-1.5 rounded-full shrink-0"
-          :class="state.running ? 'bg-success' : 'bg-accent'"
-        />
+        <span :class="statusDotVariants({ tone: state.running ? 'ok' : 'waiting' })" />
         <span class="text-foreground">{{ state.running ? 'Listening' : 'Not listening' }}</span>
         <code class="font-mono text-xs text-muted-400 truncate">{{ state.url }}</code>
-        <button
-          type="button"
-          :class="[BUTTON_SMALL, 'ml-auto shrink-0']"
+        <BaseButton
+          size="sm"
+          class="ml-auto shrink-0"
           @click="copy(state.url, 'Address')"
         >
           Copy address
-        </button>
+        </BaseButton>
       </div>
 
       <!-- The token is a password. It is not printed until somebody asks for it. -->
@@ -116,16 +114,16 @@ async function copy(value: string, what: string): Promise<void> {
         <code class="font-mono text-xs text-foreground truncate">
           {{ showToken ? state.token : '•'.repeat(16) }}
         </code>
-        <button
-          type="button"
-          :class="[BUTTON_SMALL, 'ml-auto shrink-0']"
+        <BaseButton
+          size="sm"
+          class="ml-auto shrink-0"
           @click="showToken = !showToken"
         >
           {{ showToken ? 'Hide' : 'Show' }}
-        </button>
-        <button type="button" :class="[BUTTON_SMALL, 'shrink-0']" @click="copy(state.token, 'Token')">
+        </BaseButton>
+        <BaseButton size="sm" class="shrink-0" @click="copy(state.token, 'Token')">
           Copy token
-        </button>
+        </BaseButton>
       </div>
 
       <SettingToggle
diff --git a/src/renderer/src/components/Settings/SuggestionsCard.vue b/src/renderer/src/components/Settings/SuggestionsCard.vue
index 38224a09..1bba2b55 100644
--- a/src/renderer/src/components/Settings/SuggestionsCard.vue
+++ b/src/renderer/src/components/Settings/SuggestionsCard.vue
@@ -4,12 +4,8 @@ import { computed, onMounted, ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useToastStore } from '@renderer/stores/toast';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
-import {
-  BUTTON,
-  BUTTON_QUIET,
-  BUTTON_STRONG,
-  ICON_BOX,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import {
   fitSuggestionModel,
   forgetSuggestionModel,
@@ -217,9 +213,8 @@ onMounted(refresh);
     </template>
 
     <div class="flex flex-wrap items-center gap-2 mt-4">
-      <button
-        type="button"
-        :class="BUTTON_STRONG"
+      <BaseButton
+        tone="strong"
         :disabled="working || !ready"
         :title="
           ready
@@ -231,29 +226,27 @@ onMounted(refresh);
         <BaseSpinner v-if="working" :class="ICON_BOX" />
         <Icon v-else icon="material-symbols:model-training" :class="ICON_BOX" />
         {{ summary?.model ? 'Learn from them again' : 'Learn from them now' }}
-      </button>
+      </BaseButton>
 
-      <button
+      <BaseButton
         v-if="summary?.model"
-        type="button"
-        :class="BUTTON"
         :disabled="working"
         @click="revert"
       >
         <Icon icon="material-symbols:undo" :class="ICON_BOX" />
         Back to the built-in rule
-      </button>
+      </BaseButton>
 
-      <button
-        type="button"
-        :class="[BUTTON_QUIET, 'ml-auto']"
+      <BaseButton
+        tone="quiet"
+        class="ml-auto"
         :disabled="!summary?.total"
         title="Save your trim decisions as a file, for building something of your own offline"
         @click="exportLabels"
       >
         <Icon icon="material-symbols:download" :class="ICON_BOX" />
         Export decisions
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/components/Storage/BurstCluster.vue b/src/renderer/src/components/Storage/BurstCluster.vue
index 833b9b78..2c51cbaa 100644
--- a/src/renderer/src/components/Storage/BurstCluster.vue
+++ b/src/renderer/src/components/Storage/BurstCluster.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
-import { BUTTON, ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
 import StorageClipTile from './StorageClipTile.vue';
 import { useFormat } from '@renderer/composables/ui/useFormat';
 import type { BurstCluster } from '@renderer/services/clips';
@@ -46,7 +48,7 @@ const publishedDoomed = computed(() => doomed.value.filter((clip) => clip.publis
 </script>
 
 <template>
-  <div class="rounded-lg border border-border/60 p-4">
+  <BasePanel>
     <div :class="SECTION_HEADER">
       <h3 class="text-sm font-medium text-foreground">
         {{ cluster.clips.length }} saves of one moment
@@ -79,15 +81,15 @@ const publishedDoomed = computed(() => doomed.value.filter((clip) => clip.publis
         {{ publishedDoomed === 1 ? 'its link' : 'their links' }} will stop working.
       </p>
 
-      <button
-        type="button"
-        :class="[BUTTON, 'ml-auto border-danger text-danger-ink hover:bg-danger/10']"
+      <BaseButton
+        tone="danger"
+        class="ml-auto"
         :disabled="deleting || doomed.length === 0"
         @click="emit('delete', doomed)"
       >
         <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
         Delete the other {{ doomed.length }}
-      </button>
+      </BaseButton>
     </div>
-  </div>
+  </BasePanel>
 </template>
diff --git a/src/renderer/src/components/Storage/BurstSection.vue b/src/renderer/src/components/Storage/BurstSection.vue
index 3478fbaa..3d48c703 100644
--- a/src/renderer/src/components/Storage/BurstSection.vue
+++ b/src/renderer/src/components/Storage/BurstSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { ICON_BOX_LG, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import { SECTION_HEADER } from '@renderer/components/Base/geometry';
+import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import BurstClusterCard from './BurstCluster.vue';
 import ReclaimSummary from './ReclaimSummary.vue';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
@@ -43,19 +43,15 @@ const emit = defineEmits<{
       <BaseSpinner />
     </div>
 
-    <div
+    <BaseEmptyState
       v-else-if="!data?.clusters.length"
-      class="rounded-lg border border-border/60 px-4 py-8 text-center"
+      size="panel"
+      tone="success"
+      icon="material-symbols:check-circle-outline"
+      title="No duplicates of one moment"
     >
-      <Icon
-        icon="material-symbols:check-circle-outline"
-        :class="[ICON_BOX_LG, 'mx-auto mb-2 text-success']"
-      />
-      <p class="text-sm text-foreground">No duplicates of one moment</p>
-      <p class="mt-1 text-sm text-muted-500">
-        Nothing was saved twice within {{ windowSec }} seconds.
-      </p>
-    </div>
+      Nothing was saved twice within {{ windowSec }} seconds.
+    </BaseEmptyState>
 
     <template v-else>
       <ReclaimSummary :bytes="data.reclaimableBytes" :clips="data.totalClips" />
diff --git a/src/renderer/src/components/Storage/GraveyardSection.vue b/src/renderer/src/components/Storage/GraveyardSection.vue
index 12957214..96af79db 100644
--- a/src/renderer/src/components/Storage/GraveyardSection.vue
+++ b/src/renderer/src/components/Storage/GraveyardSection.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import {
-  BUTTON,
-  BUTTON_SMALL,
-  ICON_BOX,
-  ICON_BOX_LG,
-  SECTION_HEADER,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
+import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import StorageClipTile from './StorageClipTile.vue';
 import ReclaimSummary from './ReclaimSummary.vue';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
@@ -66,19 +62,15 @@ function groupSelected(clips: Clip[]): boolean {
       just been told they are low on disk space, and "nothing here" is good
       news that should read like it rather than like a failed search.
     -->
-    <div
+    <BaseEmptyState
       v-else-if="!data?.groups.length"
-      class="rounded-lg border border-border/60 px-4 py-8 text-center"
+      size="panel"
+      tone="success"
+      icon="material-symbols:check-circle-outline"
+      title="Nothing has been forgotten"
     >
-      <Icon
-        icon="material-symbols:check-circle-outline"
-        :class="[ICON_BOX_LG, 'mx-auto mb-2 text-success']"
-      />
-      <p class="text-sm text-foreground">Nothing has been forgotten</p>
-      <p class="mt-1 text-sm text-muted-500">
-        Every clip older than {{ days }} days has been opened, starred, tagged or marked.
-      </p>
-    </div>
+      Every clip older than {{ days }} days has been opened, starred, tagged or marked.
+    </BaseEmptyState>
 
     <template v-else>
       <ReclaimSummary
@@ -94,13 +86,13 @@ function groupSelected(clips: Clip[]): boolean {
           <span class="font-mono text-xs tabular-nums text-muted-400">
             {{ group.clips.length }} · {{ formatBytes(group.reclaimableBytes) }}
           </span>
-          <button
-            type="button"
-            :class="[BUTTON_SMALL, 'ml-auto']"
+          <BaseButton
+            size="sm"
+            class="ml-auto"
             @click="emit('toggle-group', group.game)"
           >
             {{ groupSelected(group.clips) ? 'Clear' : 'Select all' }}
-          </button>
+          </BaseButton>
         </div>
 
         <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
@@ -127,18 +119,15 @@ function groupSelected(clips: Clip[]): boolean {
         <span class="text-sm text-foreground">
           {{ selected.size }} selected
         </span>
-        <button
-          type="button"
-          :class="[
-            BUTTON,
-            'ml-auto border-danger text-danger-ink hover:bg-danger/10',
-          ]"
+        <BaseButton
+          tone="danger"
+          class="ml-auto"
           :disabled="deleting"
           @click="emit('delete')"
         >
           <Icon icon="material-symbols:delete-outline" :class="ICON_BOX" />
           Delete selected
-        </button>
+        </BaseButton>
       </div>
     </template>
   </section>
diff --git a/src/renderer/src/components/Storage/ReclaimSummary.vue b/src/renderer/src/components/Storage/ReclaimSummary.vue
index d42a9d97..d1960840 100644
--- a/src/renderer/src/components/Storage/ReclaimSummary.vue
+++ b/src/renderer/src/components/Storage/ReclaimSummary.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BasePanel from '@renderer/components/Base/BasePanel.vue';
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { ICON_BOX_LG } from '@renderer/components/Base/geometry';
@@ -33,7 +34,7 @@ const share = computed(() => {
 </script>
 
 <template>
-  <div class="flex items-center gap-3 rounded-lg border border-border/60 px-4 py-3.5">
+  <BasePanel class="flex items-center gap-3">
     <Icon icon="material-symbols:hard-drive" :class="[ICON_BOX_LG, 'text-muted-400']" />
     <div class="min-w-0">
       <div class="font-mono text-lg tabular-nums text-foreground">{{ formatBytes(bytes) }}</div>
@@ -41,5 +42,5 @@ const share = computed(() => {
         across {{ clips }} {{ clips === 1 ? 'clip' : 'clips' }}<template v-if="share">, {{ share }}</template>
       </p>
     </div>
-  </div>
+  </BasePanel>
 </template>
diff --git a/src/renderer/src/components/Storage/StorageClipTile.vue b/src/renderer/src/components/Storage/StorageClipTile.vue
index aae6043e..f09a6a50 100644
--- a/src/renderer/src/components/Storage/StorageClipTile.vue
+++ b/src/renderer/src/components/Storage/StorageClipTile.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BaseChip from '@renderer/components/Base/BaseChip.vue';
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { ICON_BOX, FOCUS_RING, MOTION } from '@renderer/components/Base/geometry';
@@ -71,34 +72,35 @@ const title = computed(() => props.clip.displayName?.trim() || props.clip.filena
         link somebody may already have shared, and no Recycle Bin covers that,
         so it is said on the tile rather than only in the question.
       -->
-      <span
+      <BaseChip
         v-if="clip.published"
-        class="absolute top-1.5 right-1.5 rounded-full bg-scrim px-2 py-0.5 text-[11px] font-medium text-on-video"
+        class="absolute top-1.5 right-1.5"
       >
         Published
-      </span>
+      </BaseChip>
 
-      <span
+      <BaseChip
         v-if="length"
-        class="absolute bottom-1.5 right-1.5 rounded-full bg-scrim px-2 py-0.5 font-mono text-[11px] tabular-nums text-on-video"
+        numeric
+        class="absolute bottom-1.5 right-1.5"
       >
         {{ length }}
-      </span>
+      </BaseChip>
 
       <!--
         The state, over the picture, in a fixed box so nothing moves when it
         changes. Colour moves; geometry does not.
       -->
-      <span
+      <BaseChip
         v-if="mode === 'keep'"
-        class="absolute top-1.5 left-1.5 inline-flex items-center gap-1 rounded-full bg-scrim px-2 py-0.5 text-[11px] font-medium text-on-video"
+        class="absolute top-1.5 left-1.5"
       >
         <Icon
           :icon="keeper ? 'material-symbols:check-circle' : 'material-symbols:delete-outline'"
           :class="ICON_BOX"
         />
         {{ keeper ? 'Keeping' : 'Deleting' }}
-      </span>
+      </BaseChip>
       <Icon
         v-else
         :icon="
diff --git a/src/renderer/src/composables/clips/useClipActions.ts b/src/renderer/src/composables/clips/useClipActions.ts
index cae2083b..53f2308f 100644
--- a/src/renderer/src/composables/clips/useClipActions.ts
+++ b/src/renderer/src/composables/clips/useClipActions.ts
@@ -1,6 +1,12 @@
 import { computed, MaybeRefOrGetter, ref, toValue, watch, type Ref } from 'vue';
 import type { Clip } from '@renderer/types/clip';
-import type { PopoverAction } from '@renderer/components/Base/types';
+/** One thing a clip's menu can do. `useClipActionsHandlers` reads the handlers and the busy flag. */
+interface ClipAction {
+  key: string;
+  label: string;
+  disabled?: boolean;
+  onClick: () => void | Promise<void>;
+}
 import { createClipActionHandlers } from '@renderer/helpers/clipActionHandlers';
 
 export function useClipActions(opts: {
@@ -24,25 +30,24 @@ export function useClipActions(opts: {
         opts.router.push(`/editor?clip=${clip.id}`);
     }
 
-    const actions = computed<PopoverAction[]>(() => {
+    const actions = computed<ClipAction[]>(() => {
         const clip = toValue(opts.clip);
-        const list: PopoverAction[] = [];
+        const list: ClipAction[] = [];
 
         list.push(
-            { key: 'trim', label: 'Trim', onClick: onTrim, variant: 'muted' },
-            { key: 'edit', label: 'Advanced Edit', onClick: onAdvancedEdit, variant: 'muted' },
-            { key: 'reveal', label: 'Reveal in Explorer', onClick: onReveal, variant: 'muted' },
+            { key: 'trim', label: 'Trim', onClick: onTrim },
+            { key: 'edit', label: 'Advanced Edit', onClick: onAdvancedEdit },
+            { key: 'reveal', label: 'Reveal in Explorer', onClick: onReveal },
         );
 
         if (clip.published) {
             if (clip.publishedUrl) {
-                list.push({ key: 'copy', label: 'Copy URL', variant: 'muted', onClick: onCopyUrl });
+                list.push({ key: 'copy', label: 'Copy URL', onClick: onCopyUrl });
             }
 
             list.push({
                 key: 'unpublish',
                 label: isPublishing.value ? 'Unpublishing…' : 'Unpublish',
-                variant: 'danger',
                 disabled: isPublishing.value,
                 onClick: onUnpublish,
             });
@@ -50,14 +55,13 @@ export function useClipActions(opts: {
             list.push({
                 key: 'publish',
                 label: isPublishing.value ? 'Publishing…' : 'Publish',
-                variant: 'muted',
                 disabled: isPublishing.value,
                 onClick: onPublish,
             });
         }
 
         list.push(
-            { key: 'delete', label: 'Delete', variant: 'danger', onClick: onDelete, disabled: isPublishing.value },
+            { key: 'delete', label: 'Delete', onClick: onDelete, disabled: isPublishing.value },
         );
 
         return list;
diff --git a/src/renderer/src/views/EditorPage.vue b/src/renderer/src/views/EditorPage.vue
index 37dc6546..538f31e8 100644
--- a/src/renderer/src/views/EditorPage.vue
+++ b/src/renderer/src/views/EditorPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { toolbarToggleVariants } from '@renderer/components/Base/variants';
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Icon } from '@iconify/vue';
@@ -877,8 +878,7 @@ watch(
         <button
           type="button"
           :aria-pressed="showLibrary"
-          class="h-8 px-2.5 inline-flex items-center gap-2 rounded-md text-xs font-medium border border-transparent outline-none focus-visible:focus-ring transition-colors duration-150"
-          :class="showLibrary ? 'bg-muted-200 text-foreground' : 'text-muted-600 hover:bg-muted-100 hover:text-foreground'"
+          :class="toolbarToggleVariants({ pressed: showLibrary })"
           @click="toggleLibrary"
         >
           <Icon icon="material-symbols:video-library" class="size-4 shrink-0 block" />
@@ -888,8 +888,7 @@ watch(
         <button
           type="button"
           :aria-pressed="showProperties"
-          class="h-8 px-2.5 inline-flex items-center gap-2 rounded-md text-xs font-medium border border-transparent outline-none focus-visible:focus-ring transition-colors duration-150"
-          :class="showProperties ? 'bg-muted-200 text-foreground' : 'text-muted-600 hover:bg-muted-100 hover:text-foreground'"
+          :class="toolbarToggleVariants({ pressed: showProperties })"
           @click="toggleProperties"
         >
           <Icon icon="material-symbols:tune" class="size-4 shrink-0 block" />
diff --git a/src/renderer/src/views/PublisherPage.vue b/src/renderer/src/views/PublisherPage.vue
index 69fe352f..c55cd699 100644
--- a/src/renderer/src/views/PublisherPage.vue
+++ b/src/renderer/src/views/PublisherPage.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { Icon } from '@iconify/vue';
-import {
-  BUTTON,
-  BUTTON_QUIET,
-  BUTTON_STRONG,
-  ICON_BOX,
-  ICON_BOX_LG,
-  SECTION_HEADER,
-} from '@renderer/components/Base/geometry';
+import { ICON_BOX, SECTION_HEADER } from '@renderer/components/Base/geometry';
+import BaseButton from '@renderer/components/Base/BaseButton.vue';
+import BaseEmptyState from '@renderer/components/Base/BaseEmptyState.vue';
 import { useRouter } from 'vue-router';
 import BaseSpinner from '@renderer/components/Base/BaseSpinner.vue';
 import PublisherStatCards from '@renderer/components/Publish/PublisherStatCards.vue';
@@ -126,35 +121,28 @@ function unpublishSelected(): void {
       has never set one up, and this screen is the only place that can say what
       one is for.
     -->
-    <div
+    <BaseEmptyState
       v-if="!saver.configured.value"
-      class="rounded-lg border border-border/60 px-4 py-8 text-center"
+      size="panel"
+      icon="material-symbols:cloud-off-outline"
+      title="No publisher is set up"
+      description="A publisher is a small server of your own that holds a copy of a clip behind a link you can send. Once it is connected, this page shows what is on it and what nobody has opened."
     >
-      <Icon
-        icon="material-symbols:cloud-off-outline"
-        :class="[ICON_BOX_LG, 'mx-auto mb-2 text-muted-400']"
-      />
-      <p class="text-sm text-foreground">No publisher is set up</p>
-      <p class="mx-auto mt-1 max-w-[52ch] text-sm text-muted-500">
-        A publisher is a small server of your own that holds a copy of a clip behind a link you can
-        send. Once it is connected, this page shows what is on it and what nobody has opened.
-      </p>
       <!--
         Taken there, not told where to go. The first version of this ended with
         "Settings, Connections has the address", which is a set of directions
         for the reader to follow by hand on the one screen whose whole job at
         this point is to get them set up.
       -->
-      <div class="mt-4 flex items-center justify-center gap-2">
-        <button type="button" :class="BUTTON_STRONG" @click="openPublisherSettings">
-          <Icon icon="material-symbols:settings" :class="ICON_BOX" />
+      <template #actions>
+        <BaseButton tone="strong" icon="material-symbols:settings" @click="openPublisherSettings">
           Set up a publisher
-        </button>
-        <button type="button" :class="BUTTON_QUIET" @click="openGuide">
+        </BaseButton>
+        <BaseButton tone="quiet" @click="openGuide">
           How it works
-        </button>
-      </div>
-    </div>
+        </BaseButton>
+      </template>
+    </BaseEmptyState>
 
     <template v-else>
       <div v-if="saver.loading.value && !saver.stats.value" class="flex justify-center py-10">
@@ -166,28 +154,26 @@ function unpublishSelected(): void {
         unreachable in a way no other screen can. It says so rather than
         spinning: a spinner is a promise that something is coming.
       -->
-      <div
+      <BaseEmptyState
         v-else-if="saver.error.value"
-        class="rounded-lg border border-border/60 px-4 py-8 text-center"
+        size="panel"
+        tone="warning"
+        icon="material-symbols:cloud-off-outline"
+        title="Could not reach the publisher"
+        :description="saver.error.value"
       >
-        <Icon
-          icon="material-symbols:cloud-off-outline"
-          :class="[ICON_BOX_LG, 'mx-auto mb-2 text-warning']"
-        />
-        <p class="text-sm text-foreground">Could not reach the publisher</p>
-        <p class="mx-auto mt-1 max-w-[52ch] text-sm text-muted-500">{{ saver.error.value }}</p>
         <!--
           Both ways out, because they are the two causes: the server is off or
           asleep, which trying again fixes, or the address or token is wrong,
           which only Settings can.
         -->
-        <div class="mt-4 flex items-center justify-center gap-2">
-          <button type="button" :class="BUTTON" @click="saver.load()">Try again</button>
-          <button type="button" :class="BUTTON_QUIET" @click="openPublisherSettings">
+        <template #actions>
+          <BaseButton @click="saver.load()">Try again</BaseButton>
+          <BaseButton tone="quiet" @click="openPublisherSettings">
             Check the address
-          </button>
-        </div>
-      </div>
+          </BaseButton>
+        </template>
+      </BaseEmptyState>
 
       <template v-else-if="saver.stats.value">
         <PublisherStatCards
@@ -209,32 +195,24 @@ function unpublishSelected(): void {
             and one that offers to unpublish everything. Nothing was counted
             before the counter shipped, so on day one every clip reads zero.
           -->
-          <div
+          <BaseEmptyState
             v-if="!saver.warmedUp.value"
-            class="rounded-lg border border-border/60 px-4 py-8 text-center"
+            size="panel"
+            icon="material-symbols:hourglass-top"
+            title="Still watching"
           >
-            <Icon
-              icon="material-symbols:hourglass-top"
-              :class="[ICON_BOX_LG, 'mx-auto mb-2 text-muted-400']"
-            />
-            <p class="text-sm text-foreground">Still watching</p>
-            <p class="mx-auto mt-1 max-w-[52ch] text-sm text-muted-500">
-              Your publisher only started counting recently, so "nobody opened this" would be true
-              of everything. Suggestions appear in about {{ saver.daysUntilWarm.value }}
-              {{ pluralize(saver.daysUntilWarm.value, 'day') }}.
-            </p>
-          </div>
+            Your publisher only started counting recently, so "nobody opened this" would be true
+            of everything. Suggestions appear in about {{ saver.daysUntilWarm.value }}
+            {{ pluralize(saver.daysUntilWarm.value, 'day') }}.
+          </BaseEmptyState>
 
-          <div
+          <BaseEmptyState
             v-else-if="!saver.neverWatched.value.length"
-            class="rounded-lg border border-border/60 px-4 py-8 text-center"
-          >
-            <Icon
-              icon="material-symbols:check-circle-outline"
-              :class="[ICON_BOX_LG, 'mx-auto mb-2 text-success']"
-            />
-            <p class="text-sm text-foreground">Everything you published has been opened</p>
-          </div>
+            size="panel"
+            tone="success"
+            icon="material-symbols:check-circle-outline"
+            title="Everything you published has been opened"
+          />
 
           <template v-else>
             <div :class="SECTION_HEADER">
@@ -242,9 +220,9 @@ function unpublishSelected(): void {
                 {{ saver.neverWatched.value.length }} ·
                 {{ formatBytes(saver.reclaimable.value) }} on the server
               </span>
-              <button type="button" :class="[BUTTON, 'ml-auto']" @click="selectAllUnwatched">
+              <BaseButton class="ml-auto" @click="selectAllUnwatched">
                 Select all
-              </button>
+              </BaseButton>
             </div>
 
             <div class="space-y-0.5">
@@ -288,15 +266,14 @@ function unpublishSelected(): void {
           <span class="text-sm text-foreground">
             {{ selected.size }} selected · {{ formatBytes(selectedBytes) }} on the server
           </span>
-          <button
-            type="button"
-            :class="[BUTTON, 'ml-auto']"
+          <BaseButton
+            class="ml-auto"
             :disabled="working"
             @click="unpublishSelected"
           >
             <Icon icon="material-symbols:cloud-off-outline" :class="ICON_BOX" />
             Take off the publisher
-          </button>
+          </BaseButton>
         </div>
       </template>
     </template>
diff --git a/src/renderer/src/views/WelcomePage.vue b/src/renderer/src/views/WelcomePage.vue
index 333531a1..3841efa6 100644
--- a/src/renderer/src/views/WelcomePage.vue
+++ b/src/renderer/src/views/WelcomePage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { stepVariants } from '@renderer/components/Base/variants';
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
@@ -140,8 +141,7 @@ async function finish(): Promise<void> {
         <li
           v-for="(entry, index) in steps"
           :key="entry.id"
-          class="h-1 flex-1 rounded-full transition-colors"
-          :class="index <= step ? 'bg-accent' : 'bg-muted-100'"
+          :class="stepVariants({ reached: index <= step })"
           :title="entry.label"
         ></li>
       </ol>
diff --git a/tests/e2e/features.spec.ts b/tests/e2e/features.spec.ts
index 135b4aae..83dcde93 100644
--- a/tests/e2e/features.spec.ts
+++ b/tests/e2e/features.spec.ts
@@ -150,7 +150,7 @@ test.describe('features survive the port', () => {
 
   test('an export renders and registers the result', async () => {
     const list = await call('GET', '/clips', undefined, { pageSize: 50 });
-    const clip = (list.body as { items: Array<{ id: number }> }).items[0];
+    const clip = (list.body as { items: Array<{ id: number; game: string }> }).items[0];
 
     const started = await call('POST', '/clips/export', {
       outputName: 'e2e_export',
@@ -176,8 +176,9 @@ test.describe('features survive the port', () => {
     expect(final?.clip).toBeTruthy();
     // Renders land in "Exports", not "Editor": a top level folder is a game name
     // here, so every export used to grow a game beside Battlefield 6 that shared
-    // its name with a screen.
-    expect(statSync(join(ctx.videosRoot, 'Exports', 'e2e_export.mp4')).size).toBeGreaterThan(0);
+    // its name with a screen. A timeline cut from one game lands in that game's
+    // own `Exports/` folder.
+    expect(statSync(join(ctx.videosRoot, clip.game, 'Exports', 'e2e_export.mp4')).size).toBeGreaterThan(0);
   });
 
   test('publishing is absent rather than broken with no publisher', async () => {
diff --git a/tests/e2e/measure.spec.ts b/tests/e2e/measure.spec.ts
index cb674f86..2647326a 100644
--- a/tests/e2e/measure.spec.ts
+++ b/tests/e2e/measure.spec.ts
@@ -263,8 +263,10 @@ test.describe('measurements for 2.0', () => {
     );
     console.log(`MEASURED  export finished as: ${finished.message || 'no message'}`);
 
-    // The render lands in the library as a clip of its own, under Exports.
-    const exports = await clipsIn('Exports');
+    // The render lands in the library as a clip of its own. Every clip on this
+    // timeline is from one game, so it belongs to that game, in its own
+    // `Exports/` folder, rather than to the flat top level one.
+    const exports = await clipsIn(game);
     expect(exports.items.some((clip) => clip.filename.startsWith('measure-bench'))).toBe(true);
   });
 });
diff --git a/tests/unit/renderer/baseImports.spec.ts b/tests/unit/renderer/baseImports.spec.ts
new file mode 100644
index 00000000..b429af3d
--- /dev/null
+++ b/tests/unit/renderer/baseImports.spec.ts
@@ -0,0 +1,70 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { buttonVariants, menuItemVariants } from '../../../src/renderer/src/components/Base/variants';
+import { cn } from '../../../src/renderer/src/components/Base/cn';
+
+const RENDERER = join(__dirname, '../../../src/renderer/src');
+
+function vueFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return vueFiles(path);
+    return entry.name.endsWith('.vue') ? [path] : [];
+  });
+}
+
+/*
+ * A `Base*` component used in a template and never imported renders as an
+ * unknown element, `<basebutton>`, and nothing fails: `vue-tsc` accepts
+ * unknown tags, and the page still draws, just without the button's classes.
+ * The card's drag grip shipped that way for one build while the move to
+ * `cva` was in progress, and only a pixel diff of the card title noticed.
+ */
+describe('every Base component a template uses is imported', () => {
+  it.each(vueFiles(RENDERER).map((file) => [relative(RENDERER, file), file]))('%s', (_name, file) => {
+    const source = readFileSync(file, 'utf-8');
+    const template = source.split('</script>').pop() ?? '';
+    const used = new Set([...template.matchAll(/<(Base[A-Z]\w*)\b/g)].map((m) => m[1]));
+    const missing = [...used].filter((name) => !new RegExp(`import ${name} from`).test(source));
+    expect(missing).toEqual([]);
+  });
+});
+
+/*
+ * The rules the recipes carry, held where a reordering of `variants.ts`
+ * would break them silently.
+ */
+describe('the button recipe', () => {
+  it('has exactly one filled accent, and it is `strong`', () => {
+    const tones = ['default', 'strong', 'quiet', 'danger', 'success'] as const;
+    const filled = tones.filter((tone) => buttonVariants({ tone }).split(' ').includes('bg-accent'));
+    expect(filled).toEqual(['strong']);
+  });
+
+  it('never fills danger', () => {
+    expect(buttonVariants({ tone: 'danger' })).not.toMatch(/(^|\s)bg-danger(\s|$)/);
+  });
+
+  it('is square when it is only a glyph, at every size', () => {
+    expect(cn(buttonVariants({ size: 'md', iconOnly: true }))).toMatch(/\bh-9\b.*\bw-9\b|\bw-9\b.*\bh-9\b/);
+    expect(cn(buttonVariants({ size: 'sm', iconOnly: true }))).toMatch(/\bw-8\b/);
+    expect(cn(buttonVariants({ size: 'dense', iconOnly: true }))).toMatch(/\bw-7\b/);
+    expect(cn(buttonVariants({ size: 'sm', iconOnly: true }))).not.toMatch(/\bpx-3\b/);
+  });
+
+  it('lets a caller override padding rather than adding a second one', () => {
+    const merged = cn(buttonVariants({ size: 'sm' }), 'px-2').split(' ');
+    expect(merged).toContain('px-2');
+    expect(merged).not.toContain('px-3');
+  });
+});
+
+describe('the menu row recipe', () => {
+  it('keeps one geometry across tones, so labels form a column', () => {
+    const geometry = (classes: string) =>
+      classes.split(' ').filter((c) => /^(h-|px-|py-|gap-)/.test(c)).sort().join(' ');
+    expect(geometry(menuItemVariants({ tone: 'danger' }))).toBe(geometry(menuItemVariants()));
+    expect(geometry(menuItemVariants({ tone: 'accent' }))).toBe(geometry(menuItemVariants()));
+  });
+});