diff --git a/web-ui/app/_components/ChoiceCard.tsx b/web-ui/app/_components/ChoiceCard.tsx
index 2dcb9400f..43b04e4da 100644
--- a/web-ui/app/_components/ChoiceCard.tsx
+++ b/web-ui/app/_components/ChoiceCard.tsx
@@ -3,6 +3,7 @@
 import type React from 'react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
 import type { PendingUserChoice } from '../_lib/chatSessions';
 
 export type { PendingUserChoice };
@@ -42,23 +43,17 @@ export function ChoiceCard({
       )}
       <div className="flex flex-wrap gap-2">
         {choice.options.map((opt, idx) => (
-          <button
+          <Button
             key={`${opt.value}-${String(idx)}`}
-            type="button"
+            variant={idx === 0 ? 'primary' : 'secondary'}
+            size="sm"
             onClick={() => {
               onChoose(opt.value);
             }}
             disabled={disabled}
-            className={[
-              'rounded border px-3 py-2 text-xs font-medium transition',
-              idx === 0
-                ? 'border-[color:var(--accent)] bg-[color:var(--accent)] text-[color:var(--fg-on-dark)] hover:bg-[color:var(--accent)]'
-                : 'border-[color:var(--border)] bg-[color:var(--bg-elevated)] text-[color:var(--fg)] hover:border-[color:var(--border-strong)]',
-              'disabled:cursor-not-allowed disabled:opacity-40',
-            ].join(' ')}
           >
             {opt.label}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
diff --git a/web-ui/app/_components/ConfirmDialog.tsx b/web-ui/app/_components/ConfirmDialog.tsx
index 6dbfe7ea2..5dca904a0 100644
--- a/web-ui/app/_components/ConfirmDialog.tsx
+++ b/web-ui/app/_components/ConfirmDialog.tsx
@@ -2,6 +2,8 @@
 
 import { useEffect, useRef } from 'react';
 
+import { Button } from './ui/Button';
+
 /**
  * Minimal modal-confirm. No portal, no library — just a fixed-position
  * overlay with focus-trap basics. We keep it generic (title/body/labels)
@@ -56,14 +58,6 @@ export function ConfirmDialog({
 
   if (!open) return null;
 
-  // §4.2 button variants: danger is transparent + error edge + error text
-  // (the error is the signal — no fill, no glow); neutral confirm is the
-  // Lume primary (accent fill → gradient + glow via the material layer).
-  const confirmCls =
-    tone === 'danger'
-      ? 'border-[color:var(--danger-edge)] bg-transparent text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8'
-      : 'border-transparent bg-[color:var(--accent)]';
-
   return (
     <div
       role="dialog"
@@ -87,21 +81,16 @@ export function ConfirmDialog({
           </p>
         )}
         <div className="mt-4 flex justify-end gap-2">
-          <button
-            ref={cancelRef}
-            type="button"
-            onClick={onCancel}
-            className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-4 py-2 text-sm font-medium text-[color:var(--fg)] transition hover:border-[color:var(--border-strong)]"
-          >
+          {/* §7.5: focus opens on Cancel (deliberate friction). */}
+          <Button ref={cancelRef} variant="secondary" onClick={onCancel}>
             {cancelLabel}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant={tone === 'danger' ? 'danger' : 'primary'}
             onClick={onConfirm}
-            className={`rounded border px-4 py-2 text-sm font-medium transition ${confirmCls}`}
           >
             {confirmLabel}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web-ui/app/_components/IssueReportCard.tsx b/web-ui/app/_components/IssueReportCard.tsx
index 4b4b54043..701a68399 100644
--- a/web-ui/app/_components/IssueReportCard.tsx
+++ b/web-ui/app/_components/IssueReportCard.tsx
@@ -4,6 +4,7 @@ import type React from 'react';
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   ApiError,
   confirmBuilderIssue,
@@ -247,13 +248,8 @@ function SecondaryButton({
   onClick: () => void;
 }): React.ReactElement {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-3 py-2 text-xs font-medium text-[color:var(--fg)] transition hover:border-[color:var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-40"
-    >
+    <Button variant="secondary" size="sm" onClick={onClick} disabled={disabled}>
       {children}
-    </button>
+    </Button>
   );
 }
diff --git a/web-ui/app/_components/StreamToasts.tsx b/web-ui/app/_components/StreamToasts.tsx
index f1cccfc33..1f900369a 100644
--- a/web-ui/app/_components/StreamToasts.tsx
+++ b/web-ui/app/_components/StreamToasts.tsx
@@ -7,6 +7,7 @@ import { useTranslations } from 'next-intl';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Ban, X } from 'lucide-react';
 
+import { Button } from '@/app/_components/ui/Button';
 import { useChatSessionsCtx } from '../_lib/chatSessionsContext';
 import {
   type StreamPhase,
@@ -325,16 +326,16 @@ function AbortConfirmModal({
           >
             {t('abortConfirmKeep')}
           </button>
-          <button
-            type="button"
+          <Button
+            variant="danger"
+            size="sm"
             onClick={(e) => {
               e.stopPropagation();
               onConfirm();
             }}
-            className="rounded-md border border-[color:var(--danger-edge)] bg-transparent px-3 py-2 text-xs font-medium text-[color:var(--danger)] transition hover:bg-[color:var(--danger)]/8"
           >
             {t('abortConfirmStop')}
-          </button>
+          </Button>
         </div>
       </motion.div>
     </motion.div>,
diff --git a/web-ui/app/_components/store/CredentialsEditor.tsx b/web-ui/app/_components/store/CredentialsEditor.tsx
index 1ce35733f..cdb385d56 100644
--- a/web-ui/app/_components/store/CredentialsEditor.tsx
+++ b/web-ui/app/_components/store/CredentialsEditor.tsx
@@ -25,6 +25,7 @@ import {
   patchInstalledSecrets,
 } from '../../_lib/api';
 import type { PluginSetupField } from '../../_lib/storeTypes';
+import { Button } from '@/app/_components/ui/Button';
 
 interface CredentialsEditorProps {
   pluginId: string;
@@ -354,19 +355,16 @@ export function CredentialsEditor({
       </ul>
 
       <div className="flex items-center gap-3">
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={() => void onSave()}
           disabled={saving || dirtyCount === 0}
-          className="inline-flex items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[12px] font-semibold text-[color:var(--fg-on-dark)] shadow-sm transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+          busy={saving}
+          busyLabel={`Speichern${dirtyCount > 0 ? ` (${String(dirtyCount)})` : ''}`}
         >
-          {saving ? (
-            <span className="lume-busy-dots" aria-hidden />
-          ) : (
-            <CheckCircle2 className="size-3.5" aria-hidden />
-          )}
+          <CheckCircle2 className="size-3.5" aria-hidden />
           Speichern{dirtyCount > 0 ? ` (${String(dirtyCount)})` : ''}
-        </button>
+        </Button>
         {savedAt !== null ? (
           <span className="text-[11px] text-[color:var(--muted-ink)]">
             ✓ Gespeichert
diff --git a/web-ui/app/_components/store/EditFromStoreButton.tsx b/web-ui/app/_components/store/EditFromStoreButton.tsx
index e33e0d6cb..7fe816a51 100644
--- a/web-ui/app/_components/store/EditFromStoreButton.tsx
+++ b/web-ui/app/_components/store/EditFromStoreButton.tsx
@@ -5,8 +5,8 @@ import { useRouter } from 'next/navigation';
 import { AlertTriangle, Pencil } from 'lucide-react';
 
 import { cloneBuilderDraftFromInstalled } from '../../_lib/api';
-import { cn } from '../../_lib/cn';
 import type { CloneFromInstalledResponse } from '../../_lib/builderTypes';
+import { Button } from '@/app/_components/ui/Button';
 
 /**
  * Edit-from-Store action (B.6-3). Surfaces on the plugin detail page when
@@ -71,30 +71,18 @@ export function EditFromStoreButton({
 
   return (
     <div className="space-y-2">
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        fullWidth
         onClick={() => void handleClick()}
         disabled={busy}
-        className={cn(
-          'inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2',
-          'text-[12px] font-semibold uppercase tracking-[0.18em]',
-          'border border-[color:var(--rule-strong)] bg-[color:var(--paper)] text-[color:var(--ink)]',
-          'transition-colors hover:bg-[color:var(--bg-soft)]',
-          'disabled:cursor-not-allowed disabled:opacity-60',
-        )}
+        busy={busy}
+        busyLabel="Klone Draft …"
+        className="text-[12px] uppercase tracking-[0.18em]"
       >
-        {busy ? (
-          <>
-            <span className="lume-busy-dots" aria-hidden />
-            Klone Draft …
-          </>
-        ) : (
-          <>
-            <Pencil className="size-3.5" aria-hidden />
-            Im Builder bearbeiten
-          </>
-        )}
-      </button>
+        <Pencil className="size-3.5" aria-hidden />
+        Im Builder bearbeiten
+      </Button>
       {phase.kind === 'failed' ? (
         <div className="rounded-md border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/6 px-3 py-2">
           <div className="flex items-start gap-2">
diff --git a/web-ui/app/_components/store/InstallButton.tsx b/web-ui/app/_components/store/InstallButton.tsx
index 10d931c70..5becfc6fa 100644
--- a/web-ui/app/_components/store/InstallButton.tsx
+++ b/web-ui/app/_components/store/InstallButton.tsx
@@ -34,6 +34,7 @@ import { pickLocalized } from '../../_lib/localized';
 import { RequiresWizard } from './RequiresWizard';
 import { FieldRow, extractValues } from './setupForm';
 import { Markdown } from '../Markdown';
+import { Button } from '@/app/_components/ui/Button';
 
 interface InstallButtonProps {
   pluginId: string;
@@ -108,14 +109,12 @@ export function InstallButton({
   if (!enabled) {
     return (
       <div className="flex flex-col gap-3">
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          pill
+          fullWidth
           disabled
-          className={cn(
-            'group flex w-full items-center justify-between gap-3 rounded-full px-6 py-3',
-            'bg-[color:var(--bg-soft)] ring-1 ring-inset ring-[color:var(--border)]',
-            'cursor-not-allowed text-[color:var(--fg-subtle)]',
-          )}
+          className="justify-between gap-3 px-6 py-3 text-[color:var(--fg-subtle)]"
           aria-describedby={`install-${pluginId}-reason`}
         >
           <span className="flex items-center gap-3">
@@ -124,7 +123,7 @@ export function InstallButton({
               Installation blockiert
             </span>
           </span>
-        </button>
+        </Button>
         {blockingReasons?.length ? (
           <ul
             id={`install-${pluginId}-reason`}
@@ -148,18 +147,13 @@ export function InstallButton({
 
   return (
     <>
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        pill
+        fullWidth
         onClick={handleOpen}
         aria-label={`${pluginName} installieren`}
-        className={cn(
-          'group flex w-full items-center justify-between gap-3 rounded-full px-6 py-3',
-          'bg-[color:var(--accent)] text-[color:var(--accent-fg)] shadow-[var(--shadow-cta)]',
-          'transition-[background,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
-          'hover:bg-[color:var(--accent-hover)] active:translate-y-px active:bg-[color:var(--accent-press)]',
-          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--accent)]',
-          'disabled:cursor-not-allowed disabled:opacity-70',
-        )}
+        className="group justify-between gap-3 px-6 py-3"
         disabled={phase.kind === 'creating' || phase.kind === 'success'}
       >
         <span className="text-[15px] font-semibold">
@@ -173,7 +167,7 @@ export function InstallButton({
             aria-hidden
           />
         )}
-      </button>
+      </Button>
 
       {drawerOpen ? (
         <InstallDrawer
@@ -426,15 +420,16 @@ function InstalledPanel({
                 {update.from ? `${update.from} → ${update.to}` : `→ ${update.to}`}
               </span>
             </span>
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              pill
               onClick={() => void doUpdate()}
               disabled={updating}
-              className="inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-4 py-2 text-[12px] font-semibold text-[color:var(--accent-fg)] disabled:opacity-60"
+              busy={updating}
+              busyLabel="Aktualisiere …"
             >
-              {updating ? <span className="lume-busy-dots" aria-hidden /> : null}
-              {updating ? 'Aktualisiere …' : 'Aktualisieren'}
-            </button>
+              Aktualisieren
+            </Button>
           </div>
           {updateError ? (
             <p className="font-mono-num mt-2 text-[11px] text-[color:var(--danger,#b03030)]">
@@ -507,22 +502,20 @@ function InstalledPanel({
             </span>
           </label>
           <div className="mt-3 flex gap-2">
-            <button
-              type="button"
-              onClick={doUninstall}
-              className="rounded-full bg-[color:var(--danger,#b03030)] px-4 py-2 text-[12px] font-semibold text-[color:var(--fg-on-dark)]"
-            >
+            <Button variant="danger" pill onClick={doUninstall}>
               {alsoDeletePackage
                 ? 'Ja, deinstallieren + löschen'
                 : 'Ja, deinstallieren'}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="secondary"
+              pill
+              size="sm"
               onClick={() => setState({ kind: 'idle' })}
-              className="rounded-full bg-[color:var(--bg)] px-4 py-2 text-[12px] font-semibold text-[color:var(--fg-muted)] ring-1 ring-inset ring-[color:var(--border)]"
+              className="font-semibold text-[color:var(--fg-muted)]"
             >
               Abbrechen
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -693,24 +686,19 @@ function InstallDrawer({
                 <br />
                 Andere Werte landen in der Instanz-Konfiguration.
               </p>
-              <button
+              <Button
                 type="submit"
+                variant="primary"
+                pill
+                size="lg"
                 disabled={submitting}
-                className={cn(
-                  'inline-flex items-center gap-2 rounded-full px-6 py-3',
-                  'bg-[color:var(--accent)] text-[color:var(--accent-fg)] shadow-[var(--shadow-cta)]',
-                  'transition-[background,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
-                  'hover:bg-[color:var(--accent-hover)] active:translate-y-px',
-                  'disabled:cursor-wait disabled:opacity-70',
-                )}
+                busy={submitting}
+                busyLabel="Wird installiert …"
               >
-                {submitting ? (
-                  <span className="lume-busy-dots" aria-hidden />
-                ) : null}
                 <span className="text-[15px] font-semibold">
-                  {submitting ? 'Wird installiert …' : 'Installation bestätigen'}
+                  Installation bestätigen
                 </span>
-              </button>
+              </Button>
             </footer>
           </form>
         )}
diff --git a/web-ui/app/_components/store/RequiresWizard.tsx b/web-ui/app/_components/store/RequiresWizard.tsx
index d2a8dafe5..353cfc304 100644
--- a/web-ui/app/_components/store/RequiresWizard.tsx
+++ b/web-ui/app/_components/store/RequiresWizard.tsx
@@ -19,6 +19,7 @@ import type {
 } from '../../_lib/storeTypes';
 import { Chip } from './Chip';
 import { FieldRow, extractValues } from './setupForm';
+import { Button } from '@/app/_components/ui/Button';
 
 /**
  * RequiresWizard — modal-dialog operator-flow for an
@@ -195,62 +196,57 @@ export function RequiresWizard({
           <div className="flex items-center gap-2">
             {phase.kind === 'review' ? (
               <>
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  pill
+                  size="sm"
                   onClick={onClose}
-                  className="rounded-full bg-[color:var(--bg)] px-4 py-2 text-[12px] font-semibold text-[color:var(--fg-muted)] ring-1 ring-inset ring-[color:var(--border)]"
+                  className="font-semibold text-[color:var(--fg-muted)]"
                 >
                   Abbrechen
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="primary"
+                  pill
                   onClick={runInstallChain}
                   disabled={!allResolved}
-                  className={cn(
-                    'inline-flex items-center gap-2 rounded-full px-4 py-2',
-                    'bg-[color:var(--accent)] text-[color:var(--accent-fg)] shadow-[var(--shadow-cta)]',
-                    'transition-[background,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
-                    'hover:bg-[color:var(--accent-hover)] active:translate-y-px',
-                    'disabled:cursor-not-allowed disabled:opacity-60',
-                  )}
                 >
                   <span className="text-[13px] font-semibold">
                     Alle installieren
                   </span>
-                </button>
+                </Button>
               </>
             ) : phase.kind === 'installing' && phase.requiresForm ? (
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                pill
                 onClick={() => formRef.current?.requestSubmit()}
-                className={cn(
-                  'inline-flex items-center gap-2 rounded-full px-4 py-2',
-                  'bg-[color:var(--accent)] text-[color:var(--accent-fg)] shadow-[var(--shadow-cta)]',
-                )}
               >
                 <span className="text-[13px] font-semibold">
                   Schritt bestätigen
                 </span>
-              </button>
+              </Button>
             ) : phase.kind === 'success' ? (
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                pill
                 onClick={() => {
                   onClose();
                   router.refresh();
                 }}
-                className="rounded-full bg-[color:var(--accent)] px-4 py-2 text-[13px] font-semibold text-[color:var(--accent-fg)]"
               >
                 Schließen
-              </button>
+              </Button>
             ) : phase.kind === 'error' ? (
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                pill
+                size="sm"
                 onClick={onClose}
-                className="rounded-full bg-[color:var(--bg)] px-4 py-2 text-[12px] font-semibold text-[color:var(--fg-muted)] ring-1 ring-inset ring-[color:var(--border)]"
+                className="font-semibold text-[color:var(--fg-muted)]"
               >
                 Schließen
-              </button>
+              </Button>
             ) : null}
           </div>
         </footer>
diff --git a/web-ui/app/_components/store/SelfExtensionPanel.tsx b/web-ui/app/_components/store/SelfExtensionPanel.tsx
index 8f8505fe6..ebdb4d13f 100644
--- a/web-ui/app/_components/store/SelfExtensionPanel.tsx
+++ b/web-ui/app/_components/store/SelfExtensionPanel.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
 import { AlertTriangle, Check, ShieldQuestion, Sparkles, X } from 'lucide-react';
 
 import { cn } from '../../_lib/cn';
+import { Button } from '@/app/_components/ui/Button';
 import {
   approveSelfExtensionProposal,
   denySelfExtensionProposal,
@@ -214,15 +215,17 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
         {composeError ? (
           <p className="font-mono-num mt-2 text-[11px] text-[color:var(--danger,#b03030)]">{composeError}</p>
         ) : null}
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          pill
           onClick={() => void handlePropose()}
           disabled={composeBusy || rationale.trim().length === 0 || patchesText.trim().length === 0}
-          className="mt-2 inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-4 py-2 text-[12px] font-semibold text-[color:var(--accent-fg)] disabled:opacity-60"
+          busy={composeBusy}
+          busyLabel={t('proposing')}
+          className="mt-2"
         >
-          {composeBusy ? <span className="lume-busy-dots" aria-hidden /> : null}
-          {composeBusy ? t('proposing') : t('propose')}
-        </button>
+          {t('propose')}
+        </Button>
       </div>
 
       {/* template compose (standalone plugins that expose selfExtend templates) */}
@@ -265,15 +268,17 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
           {tplError ? (
             <p className="font-mono-num mt-2 text-[11px] text-[color:var(--danger,#b03030)]">{tplError}</p>
           ) : null}
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            pill
             onClick={() => void handleProposeTemplate()}
             disabled={tplBusy || tplRationale.trim().length === 0 || tplId.length === 0}
-            className="mt-2 inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-4 py-2 text-[12px] font-semibold text-[color:var(--accent-fg)] disabled:opacity-60"
+            busy={tplBusy}
+            busyLabel={t('proposing')}
+            className="mt-2"
           >
-            {tplBusy ? <span className="lume-busy-dots" aria-hidden /> : null}
-            {tplBusy ? t('proposing') : t('proposeTemplate')}
-          </button>
+            {t('proposeTemplate')}
+          </Button>
         </div>
       ) : null}
 
@@ -342,14 +347,15 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
                       placeholder={t('denyReasonPlaceholder')}
                       className="flex-1 rounded border border-[color:var(--border)] bg-[color:var(--bg-soft)] px-2 py-1 text-[12px] focus:outline-none focus:ring-1 focus:ring-[color:var(--accent)]"
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="danger"
+                      pill
+                      size="sm"
                       disabled={actionBusyId === p.id || denyReason.trim().length === 0}
                       onClick={() => void runAction(p.id, () => denySelfExtensionProposal(p.id, denyReason))}
-                      className="rounded-full bg-[color:var(--danger,#b03030)] px-3 py-1 text-[12px] font-semibold text-[color:var(--fg-on-dark)] disabled:opacity-60"
                     >
                       {t('confirmDeny')}
-                    </button>
+                    </Button>
                     <button
                       type="button"
                       onClick={() => {
@@ -363,31 +369,38 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
                   </div>
                 ) : (
                   <div className="mt-3 flex items-center gap-2">
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
+                      pill
+                      size="sm"
                       disabled={actionBusyId === p.id}
                       onClick={() => void runAction(p.id, () => approveSelfExtensionProposal(p.id))}
-                      className="inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-3 py-1 text-[12px] font-semibold text-[color:var(--accent-fg)] disabled:opacity-60"
+                      busy={actionBusyId === p.id}
+                      busyLabel={t('approve')}
                     >
-                      {actionBusyId === p.id ? <span className="lume-busy-dots" aria-hidden /> : <Check className="size-3.5" aria-hidden />}
+                      <Check className="size-3.5" aria-hidden />
                       {t('approve')}
-                    </button>
-                    <button
-                      type="button"
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      pill
+                      size="sm"
                       disabled={actionBusyId === p.id}
                       onClick={() => setDenyFor(p.id)}
-                      className="inline-flex items-center gap-2 rounded-full bg-[color:var(--bg-soft)] px-3 py-1 text-[12px] font-semibold text-[color:var(--fg-muted)] ring-1 ring-inset ring-[color:var(--border)]"
+                      className="font-semibold text-[color:var(--fg-muted)]"
                     >
                       <X className="size-3.5" aria-hidden />
                       {t('deny')}
-                    </button>
+                    </Button>
                   </div>
                 )
               ) : null}
 
               {p.status === 'approved' ? (
-                <button
-                  type="button"
+                <Button
+                  variant="primary"
+                  pill
+                  size="sm"
                   disabled={actionBusyId === p.id}
                   onClick={() =>
                     void runAction(p.id, async () => {
@@ -395,11 +408,12 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
                       router.refresh();
                     })
                   }
-                  className="mt-3 inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-3 py-1 text-[12px] font-semibold text-[color:var(--accent-fg)] disabled:opacity-60"
+                  busy={actionBusyId === p.id}
+                  busyLabel={t('installing')}
+                  className="mt-3"
                 >
-                  {actionBusyId === p.id ? <span className="lume-busy-dots" aria-hidden /> : null}
-                  {actionBusyId === p.id ? t('installing') : t('install')}
-                </button>
+                  {t('install')}
+                </Button>
               ) : null}
             </li>
           ))}
diff --git a/web-ui/app/_components/store/UploadDropzone.tsx b/web-ui/app/_components/store/UploadDropzone.tsx
index 5d3a76baa..94ee435a4 100644
--- a/web-ui/app/_components/store/UploadDropzone.tsx
+++ b/web-ui/app/_components/store/UploadDropzone.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { ApiError, uploadPackage } from '../../_lib/api';
 import type { UploadedPackage } from '../../_lib/storeTypes';
 import { cn } from '../../_lib/cn';
+import { Button } from '@/app/_components/ui/Button';
 
 type UploadState =
   | { kind: 'idle' }
@@ -159,18 +160,13 @@ export function UploadDropzone(): React.ReactElement {
 
           {state.kind === 'idle' && (
             <div className="mt-4 flex flex-wrap items-center gap-3">
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                pill
                 onClick={() => fileInputRef.current?.click()}
-                className={cn(
-                  'inline-flex items-center gap-2 rounded-full px-4 py-2',
-                  'text-[13px] font-semibold',
-                  'bg-[color:var(--accent)] text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)]',
-                  'hover:brightness-110',
-                )}
               >
                 Datei wählen
-              </button>
+              </Button>
               <span className="text-[12px] text-[color:var(--fg-subtle)]">
                 oder per Drag & Drop
               </span>
diff --git a/web-ui/app/_components/ui/Button.tsx b/web-ui/app/_components/ui/Button.tsx
new file mode 100644
index 000000000..4d5e44511
--- /dev/null
+++ b/web-ui/app/_components/ui/Button.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { type HTMLMotionProps, motion, useReducedMotion } from 'framer-motion';
+import { forwardRef } from 'react';
+
+import { cn } from '../../_lib/cn';
+
+/**
+ * Lume Button — the canonical interactive button (omadia visual-spec §4.2).
+ *
+ * Why a component instead of per-call className soup: the spec defines five
+ * normative button variants plus a focus and busy recipe. Encoding them once
+ * keeps every button on-spec, gives real press/hover motion (§6.4) through
+ * Framer Motion's `whileTap` / `whileHover` instead of CSS-only state, and
+ * keeps the markup a plain `<button>` (type, disabled, focus, aria all real).
+ *
+ * Visual recipes (gradient fill, two-stop glow, directional border, inset
+ * top-highlight) come from the Lume material layer in globals.css, which
+ * matches the same token utility classes this component emits — so the look
+ * stays centralized at the token tier and the component owns structure + feel.
+ *
+ * Variants (§4.2):
+ *   primary    accent gradient fill + two-stop glow (default CTA)
+ *   secondary  raised surface + directional border
+ *   ghost      transparent; hover paints accent.subtle
+ *   danger     transparent + error edge + error text (no fill, no glow)
+ *
+ * Busy (§7.3 — the single spinner exception): the label is replaced with a
+ * verb plus animated dots, never a spinning glyph. Pass `busy` + `busyLabel`.
+ */
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+
+export interface ButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Pill radius (badge/CTA chips) instead of the default radius.md corner. */
+  pill?: boolean;
+  /** Stretch to the container width (form submits, full-width CTAs). */
+  fullWidth?: boolean;
+  /** §7.3 in-flight: replaces the label with `busyLabel` + animated dots. */
+  busy?: boolean;
+  busyLabel?: string;
+  children?: React.ReactNode;
+}
+
+const BASE =
+  'relative inline-flex items-center justify-center gap-2 rounded-md font-medium ' +
+  'whitespace-nowrap select-none outline-none transition-colors ' +
+  'disabled:cursor-not-allowed disabled:opacity-60';
+
+const VARIANT: Record<ButtonVariant, string> = {
+  // The material layer turns these token fills into the §4.2 recipes:
+  // primary -> accent gradient + lit top border + two-stop glow + layered focus
+  primary: 'bg-[color:var(--accent)] text-[color:var(--fg-on-dark)]',
+  // secondary -> raised-surface gradient + directional border + inset highlight
+  secondary:
+    'border border-[color:var(--border)] bg-[color:var(--bg-elevated)] text-[color:var(--fg)] ' +
+    'hover:border-[color:var(--border-strong)]',
+  // ghost -> transparent, accent.subtle wash on hover (no glow until hover)
+  ghost:
+    'bg-transparent text-[color:var(--fg)] hover:bg-[color:var(--accent-subtle)] hover:text-[color:var(--accent)]',
+  // danger -> transparent + error edge + error text; the error is the signal
+  danger:
+    'border border-[color:var(--danger-edge)] bg-transparent text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8',
+};
+
+const SIZE: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1 text-xs',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-3 text-base',
+  icon: 'p-2',
+};
+
+// §6.4 hover / press feel. easing.standard, motion.quick (100ms).
+const TAP = { scale: 0.97 } as const;
+const HOVER = { y: -1 } as const;
+const FEEL_TRANSITION = { duration: 0.1, ease: [0.22, 0.61, 0.36, 1] } as const;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'md',
+    pill = false,
+    fullWidth = false,
+    busy = false,
+    busyLabel,
+    disabled,
+    type = 'button',
+    className,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const reduce = useReducedMotion();
+  const isDisabled = disabled || busy;
+  // No press/hover transform when disabled, busy, or the user asked for less
+  // motion — the glow and color transitions (CSS) still carry the state.
+  const animate = !isDisabled && !reduce;
+
+  return (
+    <motion.button
+      ref={ref}
+      type={type}
+      disabled={isDisabled}
+      aria-busy={busy || undefined}
+      whileTap={animate ? TAP : undefined}
+      whileHover={animate ? HOVER : undefined}
+      transition={FEEL_TRANSITION}
+      className={cn(
+        BASE,
+        VARIANT[variant],
+        SIZE[size],
+        pill ? 'rounded-full' : 'rounded-md',
+        fullWidth && 'w-full',
+        className,
+      )}
+      {...rest}
+    >
+      {busy ? (
+        <span className="inline-flex items-center">
+          {busyLabel ?? children}
+          <span className="lume-busy-dots" aria-hidden />
+        </span>
+      ) : (
+        children
+      )}
+    </motion.button>
+  );
+});
diff --git a/web-ui/app/admin/auth/page.tsx b/web-ui/app/admin/auth/page.tsx
index d0885c5f7..babe671db 100644
--- a/web-ui/app/admin/auth/page.tsx
+++ b/web-ui/app/admin/auth/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   AdminAuthProvider,
   ApiError,
@@ -126,23 +127,14 @@ export default function AdminAuthPage(): React.ReactElement {
                   {p.active ? 'aktiv' : 'inaktiv'}
                 </span>
               </div>
-              <button
-                type="button"
+              <Button
+                variant={p.active ? 'secondary' : 'primary'}
                 onClick={() => void toggle(p)}
-                disabled={pendingId === p.id}
-                className={[
-                  'rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50',
-                  p.active
-                    ? 'border border-[color:var(--border)] text-[color:var(--fg-strong)] hover:bg-[color:var(--card)]'
-                    : 'bg-[color:var(--accent)] text-[color:var(--text-inverse)]',
-                ].join(' ')}
+                busy={pendingId === p.id}
+                busyLabel={p.active ? 'Deaktivieren' : 'Aktivieren'}
               >
-                {pendingId === p.id
-                  ? '…'
-                  : p.active
-                  ? 'Deaktivieren'
-                  : 'Aktivieren'}
-              </button>
+                {p.active ? 'Deaktivieren' : 'Aktivieren'}
+              </Button>
             </li>
           ))}
         </ul>
diff --git a/web-ui/app/admin/builder/panels/InspectorControls.tsx b/web-ui/app/admin/builder/panels/InspectorControls.tsx
index d49194235..0a84a3450 100644
--- a/web-ui/app/admin/builder/panels/InspectorControls.tsx
+++ b/web-ui/app/admin/builder/panels/InspectorControls.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
+
 export const inputCls =
   'w-full rounded-md border border-[color:var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:border-[color:var(--accent)]';
 
@@ -30,13 +32,12 @@ export function SaveButton({
   label: string;
 }): React.ReactElement {
   return (
-    <button
-      type="button"
+    <Button
+      variant="primary"
       onClick={onClick}
       disabled={pending}
-      className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
     >
       {pending ? '…' : label}
-    </button>
+    </Button>
   );
 }
diff --git a/web-ui/app/admin/builder/panels/InspectorPanel.tsx b/web-ui/app/admin/builder/panels/InspectorPanel.tsx
index 54b9625cb..daf7f2d52 100644
--- a/web-ui/app/admin/builder/panels/InspectorPanel.tsx
+++ b/web-ui/app/admin/builder/panels/InspectorPanel.tsx
@@ -16,6 +16,7 @@ import {
   type SkillNode,
   type SubAgentNode,
 } from '../../../_lib/agentBuilder';
+import { Button } from '@/app/_components/ui/Button';
 import type { BuilderNodeData } from '../nodes/types';
 import { Field, inputCls, SaveButton } from './InspectorControls';
 
@@ -40,13 +41,9 @@ export function InspectorPanel(props: InspectorPanelProps): React.ReactElement {
         <h2 className="text-[15px] font-semibold text-[color:var(--fg-strong)]">
           {t('inspector.title')}
         </h2>
-        <button
-          type="button"
-          onClick={props.onClose}
-          className="rounded-md border border-[color:var(--border)] px-2 py-1 text-xs text-[color:var(--fg-muted)] hover:bg-[color:var(--card)]"
-        >
+        <Button variant="secondary" size="sm" onClick={props.onClose}>
           {t('inspector.close')}
-        </button>
+        </Button>
       </div>
       <Editor {...props} />
     </aside>
diff --git a/web-ui/app/admin/bulk-promote/page.tsx b/web-ui/app/admin/bulk-promote/page.tsx
index f6ef24d87..a4f046d87 100644
--- a/web-ui/app/admin/bulk-promote/page.tsx
+++ b/web-ui/app/admin/bulk-promote/page.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   ApiError,
   previewBulkPromote,
@@ -185,26 +187,24 @@ export default function BulkPromotePage(): React.ReactElement {
           </label>
         </div>
         <div className="mt-4 flex items-center justify-end gap-2">
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void loadPreview()}
             disabled={running || previewLoading}
-            className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
           >
             Vorschau aktualisieren
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void trigger()}
-            disabled={
-              running ||
-              preview === null ||
-              !preview.scorerAvailable
-            }
-            className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+            disabled={running || preview === null || !preview.scorerAvailable}
+            busy={running}
+            busyLabel="läuft"
           >
-            {running ? 'läuft…' : 'Bulk-Job starten'}
-          </button>
+            Bulk-Job starten
+          </Button>
         </div>
       </section>
 
diff --git a/web-ui/app/admin/danger-zone/page.tsx b/web-ui/app/admin/danger-zone/page.tsx
index d1e419ceb..47d42f46d 100644
--- a/web-ui/app/admin/danger-zone/page.tsx
+++ b/web-ui/app/admin/danger-zone/page.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   ApiError,
   previewMemoryPurge,
@@ -248,18 +250,18 @@ export default function DangerZonePage(): React.ReactElement {
         )}
 
         <div className="mt-4 flex items-center justify-end">
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void loadPreview()}
             disabled={
               previewLoading ||
               deleting ||
               (requiresSelector && trimmedSelector.length === 0)
             }
-            className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
           >
             {previewLoading ? 'lädt…' : 'Vorschau'}
-          </button>
+          </Button>
         </div>
       </section>
 
@@ -316,14 +318,13 @@ export default function DangerZonePage(): React.ReactElement {
               className="w-full rounded border border-[color:var(--danger-edge)] px-2 py-2 text-sm font-mono"
             />
             <div className="mt-4 flex items-center justify-end">
-              <button
-                type="button"
+              <Button
+                variant="danger"
                 onClick={() => void runDelete()}
                 disabled={!canDelete}
-                className="rounded-md border border-[color:var(--danger-edge)] bg-transparent px-4 py-2 text-xs font-semibold text-[color:var(--danger)] transition hover:bg-[color:var(--danger)]/8 disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {deleting ? 'löscht…' : 'Unwiderruflich löschen'}
-              </button>
+              </Button>
             </div>
           </>
         )}
diff --git a/web-ui/app/admin/duplicates/page.tsx b/web-ui/app/admin/duplicates/page.tsx
index df8610db2..eb8b005a4 100644
--- a/web-ui/app/admin/duplicates/page.tsx
+++ b/web-ui/app/admin/duplicates/page.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   listExcerptMergeCandidates,
   listMergeCandidates,
@@ -300,16 +301,18 @@ export default function DuplicatesListPage(): React.ReactElement {
             }}
             className="w-20 rounded border border-[color:var(--border)] bg-transparent px-2 py-1 text-xs"
           />
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void triggerBulkRun()}
             disabled={
               bulkRunning || (bulkPreview !== null && bulkPreview.unchecked === 0)
             }
-            className="rounded border border-[color:var(--border-strong)] bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] disabled:cursor-not-allowed disabled:opacity-50"
+            busy={bulkRunning}
+            busyLabel="läuft"
           >
-            {bulkRunning ? 'läuft…' : 'Bulk-Detect starten'}
-          </button>
+            Bulk-Detect starten
+          </Button>
           {bulkLimit > BULK_CONFIRM_THRESHOLD && (
             <span className="text-[11px] text-[color:var(--warning)]">
               ⚠️ Confirm bei Limit &gt; {BULK_CONFIRM_THRESHOLD}
@@ -372,14 +375,15 @@ export default function DuplicatesListPage(): React.ReactElement {
             {s === 'all' ? 'alle' : s}
           </button>
         ))}
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => void load()}
           disabled={loading}
-          className="ml-auto rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
+          className="ml-auto"
         >
           {loading ? 'lädt…' : 'aktualisieren'}
-        </button>
+        </Button>
       </div>
 
       {error !== null && (
@@ -498,17 +502,19 @@ export default function DuplicatesListPage(): React.ReactElement {
               }}
               className="w-20 rounded border border-[color:var(--border)] bg-transparent px-2 py-1 text-xs"
             />
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               onClick={() => void triggerExcerptBulkRun()}
               disabled={
                 excerptBulkRunning ||
                 (excerptBulkPreview !== null && excerptBulkPreview.unchecked === 0)
               }
-              className="rounded border border-[color:var(--border-strong)] bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] disabled:cursor-not-allowed disabled:opacity-50"
+              busy={excerptBulkRunning}
+              busyLabel="läuft"
             >
-              {excerptBulkRunning ? 'läuft…' : 'Bulk-Detect starten'}
-            </button>
+              Bulk-Detect starten
+            </Button>
             {excerptBulkLimit > BULK_CONFIRM_THRESHOLD && (
               <span className="text-[11px] text-[color:var(--warning)]">
                 ⚠️ Confirm bei Limit &gt; {BULK_CONFIRM_THRESHOLD}
@@ -568,14 +574,15 @@ export default function DuplicatesListPage(): React.ReactElement {
               {s === 'all' ? 'alle' : s}
             </button>
           ))}
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void loadExcerpts()}
             disabled={excerptLoading}
-            className="ml-auto rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
+            className="ml-auto"
           >
             {excerptLoading ? 'lädt…' : 'aktualisieren'}
-          </button>
+          </Button>
         </div>
 
         {excerptError !== null && (
diff --git a/web-ui/app/admin/inconsistencies/page.tsx b/web-ui/app/admin/inconsistencies/page.tsx
index 3335db0fa..f663cd6e5 100644
--- a/web-ui/app/admin/inconsistencies/page.tsx
+++ b/web-ui/app/admin/inconsistencies/page.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   listInconsistencies,
   previewBulkInconsistencyDetect,
@@ -228,18 +229,20 @@ export default function InconsistenciesListPage(): React.ReactElement {
             }}
             className="w-20 rounded border border-[color:var(--border)] bg-transparent px-2 py-1 text-xs"
           />
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void triggerBulkRun()}
             disabled={
               bulkRunning ||
               bulkPreview?.detectorAvailable === false ||
               (bulkPreview !== null && bulkPreview.unchecked === 0)
             }
-            className="rounded border border-[color:var(--border-strong)] bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] disabled:cursor-not-allowed disabled:opacity-50"
+            busy={bulkRunning}
+            busyLabel="läuft"
           >
-            {bulkRunning ? 'läuft…' : 'Bulk-Detect starten'}
-          </button>
+            Bulk-Detect starten
+          </Button>
           {bulkLimit > BULK_CONFIRM_THRESHOLD && (
             <span className="text-[11px] text-[color:var(--warning)]">
               ⚠️ Cost-Confirm bei Limit &gt; {BULK_CONFIRM_THRESHOLD}
@@ -302,14 +305,15 @@ export default function InconsistenciesListPage(): React.ReactElement {
             {s === 'all' ? 'alle' : s}
           </button>
         ))}
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => void load()}
           disabled={loading}
-          className="ml-auto rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
+          className="ml-auto"
         >
           {loading ? 'lädt…' : 'aktualisieren'}
-        </button>
+        </Button>
       </div>
 
       {error !== null && (
diff --git a/web-ui/app/admin/kg-lifecycle/page.tsx b/web-ui/app/admin/kg-lifecycle/page.tsx
index 44826a29e..b32044063 100644
--- a/web-ui/app/admin/kg-lifecycle/page.tsx
+++ b/web-ui/app/admin/kg-lifecycle/page.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { JSX } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 /**
  * Admin → Knowledge-Graph Lifecycle (palaia Phase 4 / OB-73, Slice D).
  *
@@ -141,13 +143,9 @@ export default function KgLifecyclePage(): JSX.Element {
             cron schedule; the buttons below trigger them on demand.
           </p>
         </div>
-        <button
-          type="button"
-          className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm transition-colors hover:bg-[color:var(--border)]/30"
-          onClick={() => void reload()}
-        >
+        <Button variant="secondary" onClick={() => void reload()}>
           Refresh
-        </button>
+        </Button>
       </header>
 
       {error ? (
diff --git a/web-ui/app/admin/kg-priorities/page.tsx b/web-ui/app/admin/kg-priorities/page.tsx
index ce86c81ec..2252012cb 100644
--- a/web-ui/app/admin/kg-priorities/page.tsx
+++ b/web-ui/app/admin/kg-priorities/page.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 /**
  * Admin → Knowledge-Graph Priorities (palaia Phase 5 / OB-74 Slice 5).
  *
@@ -161,13 +163,9 @@ export default function KgPrioritiesPage(): React.ReactElement {
             placeholder="de.byte5.agent.calendar oder orchestrator-default"
             className="flex-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-sm text-[color:var(--fg-strong)]"
           />
-          <button
-            type="button"
-            onClick={() => { void reload(); }}
-            className="rounded-md border border-[color:var(--border)] px-4 py-2 text-sm font-medium text-[color:var(--fg-strong)] hover:bg-[color:var(--card)]"
-          >
+          <Button variant="secondary" onClick={() => { void reload(); }}>
             Laden
-          </button>
+          </Button>
         </div>
       </section>
 
@@ -214,8 +212,8 @@ export default function KgPrioritiesPage(): React.ReactElement {
             placeholder="Reason (optional)"
             className="lg:col-span-3 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-sm text-[color:var(--fg-strong)]"
           />
-          <button
-            type="button"
+          <Button
+            variant="secondary"
             onClick={() => {
               const w = Number.parseFloat(draftWeight);
               void handleUpsert(
@@ -226,10 +224,10 @@ export default function KgPrioritiesPage(): React.ReactElement {
               );
             }}
             disabled={busy !== null}
-            className="lg:col-span-1 rounded-md border border-[color:var(--border)] px-4 py-2 text-sm font-medium text-[color:var(--fg-strong)] hover:bg-[color:var(--card)] disabled:opacity-40"
+            className="lg:col-span-1"
           >
             {busy === 'upsert' ? '…' : 'Add'}
-          </button>
+          </Button>
         </div>
       </section>
 
@@ -285,14 +283,14 @@ export default function KgPrioritiesPage(): React.ReactElement {
                     {new Date(r.updatedAt).toLocaleString('de-DE')}
                   </td>
                   <td className="px-4 py-3 text-right">
-                    <button
-                      type="button"
+                    <Button
+                      variant="secondary"
+                      size="sm"
                       onClick={() => { void handleRemove(r.entryExternalId); }}
                       disabled={busy === `remove:${r.entryExternalId}`}
-                      className="rounded-md border border-[color:var(--border)] px-3 py-1 text-xs text-[color:var(--fg-strong)] hover:bg-[color:var(--danger)]/20 disabled:opacity-40"
                     >
                       {busy === `remove:${r.entryExternalId}` ? '…' : 'Remove'}
-                    </button>
+                    </Button>
                   </td>
                 </tr>
               ))
diff --git a/web-ui/app/admin/memory-backend/page.tsx b/web-ui/app/admin/memory-backend/page.tsx
index e1b727dcb..4304c62fd 100644
--- a/web-ui/app/admin/memory-backend/page.tsx
+++ b/web-ui/app/admin/memory-backend/page.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   ApiError,
   getMemoryBackend,
@@ -216,14 +217,13 @@ export default function MemoryBackendPage(): React.ReactElement {
             </div>
 
             <div className="mt-4 flex items-center justify-end">
-              <button
-                type="button"
+              <Button
+                variant="primary"
                 onClick={() => void onSave()}
                 disabled={!canSave}
-                className="rounded bg-[color:var(--accent)] px-4 py-2 text-xs font-semibold text-[color:var(--fg-on-dark)] hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {saving ? 'speichert…' : 'Auswahl speichern'}
-              </button>
+              </Button>
             </div>
           </section>
 
diff --git a/web-ui/app/admin/registries/page.tsx b/web-ui/app/admin/registries/page.tsx
index d0ca28663..11c9164cd 100644
--- a/web-ui/app/admin/registries/page.tsx
+++ b/web-ui/app/admin/registries/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   ApiError,
   StoredRegistry,
@@ -178,14 +179,13 @@ export default function AdminRegistriesPage(): React.ReactElement {
               className={inputCls}
             />
           </Field>
-          <button
-            type="button"
+          <Button
+            variant="primary"
             onClick={() => void onAdd()}
             disabled={!canAdd}
-            className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
           >
             {adding ? '…' : 'Hinzufügen'}
-          </button>
+          </Button>
         </div>
       </section>
 
@@ -217,24 +217,23 @@ export default function AdminRegistriesPage(): React.ReactElement {
                   </code>
                 </div>
                 <div className="flex items-center gap-2">
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
                     onClick={() =>
                       editing === r.name ? setEditing(null) : startEdit(r)
                     }
                     disabled={pending === r.name}
-                    className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm font-medium text-[color:var(--fg-strong)] hover:bg-[color:var(--card)] disabled:opacity-50"
                   >
                     {editing === r.name ? 'Abbrechen' : 'Bearbeiten'}
-                  </button>
-                  <button
-                    type="button"
+                  </Button>
+                  <Button
+                    variant="danger"
                     onClick={() => void onDelete(r)}
-                    disabled={pending === r.name}
-                    className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm font-medium text-[color:var(--danger)] hover:bg-[color:var(--danger)]/10 disabled:opacity-50"
+                    busy={pending === r.name}
+                    busyLabel="Entfernen"
                   >
-                    {pending === r.name ? '…' : 'Entfernen'}
-                  </button>
+                    Entfernen
+                  </Button>
                 </div>
               </div>
 
@@ -257,23 +256,21 @@ export default function AdminRegistriesPage(): React.ReactElement {
                     />
                   </Field>
                   <div className="flex items-center gap-2">
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
                       onClick={() => void onSaveEdit(r)}
                       disabled={pending === r.name}
-                      className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
                     >
                       Speichern
-                    </button>
+                    </Button>
                     {r.has_token && (
-                      <button
-                        type="button"
+                      <Button
+                        variant="secondary"
                         onClick={() => void onClearToken(r)}
                         disabled={pending === r.name}
-                        className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm font-medium text-[color:var(--fg-muted)] hover:bg-[color:var(--card)] disabled:opacity-50"
                       >
                         Token entfernen
-                      </button>
+                      </Button>
                     )}
                   </div>
                 </div>
diff --git a/web-ui/app/admin/settings/page.tsx b/web-ui/app/admin/settings/page.tsx
index 022e45f06..37c1b6c7d 100644
--- a/web-ui/app/admin/settings/page.tsx
+++ b/web-ui/app/admin/settings/page.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   getSettings,
   patchSettings,
@@ -330,14 +331,13 @@ function SettingRow({
             className={`${inputCls} flex-1 sm:min-w-[260px]`}
           />
           {s.isSet && (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               disabled={disabled}
               onClick={() => onImmediate(s.key, null)}
-              className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm font-medium text-[color:var(--fg-muted)] hover:bg-[color:var(--card)] disabled:opacity-50"
             >
               Entfernen
-            </button>
+            </Button>
           )}
         </div>
       ) : (
diff --git a/web-ui/app/admin/topics/page.tsx b/web-ui/app/admin/topics/page.tsx
index 0e7e48e11..65f167506 100644
--- a/web-ui/app/admin/topics/page.tsx
+++ b/web-ui/app/admin/topics/page.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   listTopics,
   reclusterTopics,
@@ -130,14 +131,17 @@ export default function TopicsListPage(): React.ReactElement {
             />
           </label>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
           onClick={() => void triggerRecluster()}
           disabled={running}
-          className="mt-3 rounded border border-[color:var(--border-strong)] bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] disabled:cursor-not-allowed disabled:opacity-50"
+          busy={running}
+          busyLabel="läuft"
+          className="mt-3"
         >
-          {running ? 'läuft…' : 'Re-Cluster starten'}
-        </button>
+          Re-Cluster starten
+        </Button>
         {runError !== null && (
           <p className="mt-3 text-xs text-[color:var(--danger)]">
             Fehler: {runError}
diff --git a/web-ui/app/admin/users/[id]/page.tsx b/web-ui/app/admin/users/[id]/page.tsx
index 3aae45e56..977cd2a41 100644
--- a/web-ui/app/admin/users/[id]/page.tsx
+++ b/web-ui/app/admin/users/[id]/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   AdminUser,
   ApiError,
@@ -210,13 +211,14 @@ export default function AdminUserEditPage(): React.ReactElement {
             <p className="text-sm text-[color:var(--success)]">{patchMessage}</p>
           )}
           {patchError && <p className="text-sm text-[color:var(--danger)]">{patchError}</p>}
-          <button
+          <Button
             type="submit"
+            variant="primary"
             disabled={savingPatch}
-            className="self-start rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
+            className="self-start"
           >
             {savingPatch ? 'Speichere …' : 'Speichern'}
-          </button>
+          </Button>
         </form>
       </section>
 
@@ -240,14 +242,13 @@ export default function AdminUserEditPage(): React.ReactElement {
                 className="rounded-md border border-[color:var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:border-[color:var(--accent)]"
               />
             </label>
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               onClick={() => void handleResetPassword()}
               disabled={resetting}
-              className="rounded-md border border-[color:var(--border)] px-4 py-2 text-sm font-medium hover:bg-[color:var(--card)] disabled:opacity-50"
             >
               {resetting ? 'Setze …' : 'Zurücksetzen'}
-            </button>
+            </Button>
           </div>
           {resetMessage && (
             <p className="mt-3 text-sm text-[color:var(--success)]">{resetMessage}</p>
@@ -265,14 +266,13 @@ export default function AdminUserEditPage(): React.ReactElement {
         <p className="mb-3 text-sm text-[color:var(--fg-muted)]">
           Löschen entfernt den Nutzer permanent. Audit-Log behält den Eintrag.
         </p>
-        <button
-          type="button"
+        <Button
+          variant="danger"
           onClick={() => void handleDelete()}
           disabled={deleting}
-          className="rounded-md border border-[color:var(--danger-edge)]/40 px-4 py-2 text-sm font-medium text-[color:var(--danger)] hover:bg-[color:var(--danger)]/10 disabled:opacity-50"
         >
           {deleting ? 'Lösche …' : 'Nutzer löschen'}
-        </button>
+        </Button>
         {deleteError && (
           <p className="mt-3 text-sm text-[color:var(--danger)]">{deleteError}</p>
         )}
diff --git a/web-ui/app/admin/users/page.tsx b/web-ui/app/admin/users/page.tsx
index 04c90a5d6..03cd080c6 100644
--- a/web-ui/app/admin/users/page.tsx
+++ b/web-ui/app/admin/users/page.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   AdminUser,
   ApiError,
@@ -100,13 +101,12 @@ export default function AdminUsersPage(): React.ReactElement {
             Nutzer sich einmal über den IdP angemeldet hat.
           </p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={() => setShowCreate((s) => !s)}
-          className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)]"
         >
           {showCreate ? 'Abbrechen' : 'Neuen Nutzer anlegen'}
-        </button>
+        </Button>
       </header>
 
       {showCreate && (
@@ -147,13 +147,14 @@ export default function AdminUsersPage(): React.ReactElement {
           {createError && (
             <p className="text-sm text-[color:var(--danger)] sm:col-span-2">{createError}</p>
           )}
-          <button
+          <Button
             type="submit"
+            variant="primary"
             disabled={submitting}
-            className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50 sm:col-span-2"
+            className="sm:col-span-2"
           >
             {submitting ? 'Lege an …' : 'Anlegen'}
-          </button>
+          </Button>
         </form>
       )}
 
diff --git a/web-ui/app/error.tsx b/web-ui/app/error.tsx
index 39f19695d..4832a93a9 100644
--- a/web-ui/app/error.tsx
+++ b/web-ui/app/error.tsx
@@ -3,6 +3,8 @@
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
+
 /**
  * Route-level error boundary. Without it, a thrown error during render of the
  * chat page (e.g. a chat session persisted by an older schema, whose drifted
@@ -62,13 +64,9 @@ export default function Error({
           >
             {t('reload')}
           </button>
-          <button
-            type="button"
-            onClick={resetLocalData}
-            className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-4 py-2 text-sm font-medium text-[color:var(--fg)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--bg-soft)]"
-          >
+          <Button variant="secondary" onClick={resetLocalData}>
             {t('resetData')}
-          </button>
+          </Button>
         </div>
         <p className="mt-1 text-xs text-[color:var(--fg-muted)]">
           {t('resetDataHint')}
diff --git a/web-ui/app/graph/_components/DetailPanel.tsx b/web-ui/app/graph/_components/DetailPanel.tsx
index 7f23b7063..dc741ec1c 100644
--- a/web-ui/app/graph/_components/DetailPanel.tsx
+++ b/web-ui/app/graph/_components/DetailPanel.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   type GraphNode,
   type MemoryWithAncestors,
@@ -92,14 +93,18 @@ export default function DetailPanel({
             </div>
           ))}
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
+          fullWidth
           onClick={() => onExpand(node.id)}
           disabled={loadingNeighbors}
-          className="w-full rounded border border-[color:var(--border)] px-2 py-1 text-[11px] font-semibold hover:border-[color:var(--border-strong)] disabled:opacity-50"
+          busy={loadingNeighbors}
+          busyLabel="lade Nachbarn…"
+          className="text-[11px] font-semibold"
         >
-          {loadingNeighbors ? 'lade Nachbarn…' : '↔ Nachbarn expandieren'}
-        </button>
+          ↔ Nachbarn expandieren
+        </Button>
 
         {node.type === 'MemorableKnowledge' && (
           <MemoryAclSection
@@ -119,11 +124,12 @@ export default function DetailPanel({
             </div>
             <div className="flex flex-col gap-1">
               {neighbors.map((n) => (
-                <button
+                <Button
                   key={n.id}
-                  type="button"
+                  variant="secondary"
+                  size="sm"
                   onClick={() => onSelect(n)}
-                  className="flex items-start gap-2 rounded border border-[color:var(--border)] px-2 py-1 text-left hover:border-[color:var(--border-strong)]"
+                  className="items-start justify-start px-2 py-1 text-left"
                 >
                   <span
                     className="mt-1 h-2 w-2 shrink-0 rounded-full"
@@ -145,7 +151,7 @@ export default function DetailPanel({
                       )}
                     </span>
                   </span>
-                </button>
+                </Button>
               ))}
             </div>
           </div>
@@ -258,11 +264,12 @@ function ProvenanceList({
       </div>
       <div className="mt-1 flex flex-col gap-1">
         {nodes.map((n) => (
-          <button
+          <Button
             key={n.id}
-            type="button"
+            variant="secondary"
+            size="sm"
             onClick={() => onSelect(n)}
-            className="flex items-start gap-2 rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-1 text-left hover:border-[color:var(--accent)]"
+            className="items-start justify-start px-2 py-1 text-left hover:border-[color:var(--accent)]"
           >
             <span
               className="mt-1 h-2 w-2 shrink-0 rounded-full"
@@ -283,7 +290,7 @@ function ProvenanceList({
                 )}
               </span>
             </span>
-          </button>
+          </Button>
         ))}
       </div>
     </div>
diff --git a/web-ui/app/graph/_components/ListView.tsx b/web-ui/app/graph/_components/ListView.tsx
index f38478c48..269ccead7 100644
--- a/web-ui/app/graph/_components/ListView.tsx
+++ b/web-ui/app/graph/_components/ListView.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+
+import { Button } from '@/app/_components/ui/Button';
 import type {
   GraphNode,
   NodeType,
@@ -72,13 +74,14 @@ function TurnCard({
       <div className="mb-2 flex items-center gap-3 text-[11px] text-[color:var(--fg-muted)]">
         <span className="font-mono">{time}</span>
         {tools !== undefined && <span>tools={String(tools)}</span>}
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={toggle}
-          className="ml-auto rounded border border-[color:var(--border)] px-2 py-0.5 font-mono hover:border-[color:var(--border-strong)]"
+          className="ml-auto px-2 py-0.5 font-mono"
         >
           {open ? '▾' : '▸'} Run-Trace
-        </button>
+        </Button>
       </div>
       <div className="mb-2 whitespace-pre-wrap text-[color:var(--fg)]">
         {user}
diff --git a/web-ui/app/graph/_components/MemoryAclSection.tsx b/web-ui/app/graph/_components/MemoryAclSection.tsx
index 638bbf3cd..8ae17af67 100644
--- a/web-ui/app/graph/_components/MemoryAclSection.tsx
+++ b/web-ui/app/graph/_components/MemoryAclSection.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import type { GraphNode } from './graphTypes';
 
 interface AclAuditEntry {
@@ -268,23 +269,24 @@ export default function MemoryAclSection({
               disabled={busy}
             />
             <div className="flex gap-1">
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={() => void addOwner()}
                 disabled={busy || addInput.trim().length === 0}
-                className="grow rounded border border-[color:var(--border)] px-2 py-1 text-[11px] hover:border-[color:var(--border-strong)] disabled:opacity-50"
+                className="grow px-2 py-1 text-[11px]"
               >
                 + Owner hinzufügen
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
                 onClick={() => void deleteMemory()}
                 disabled={busy}
-                className="rounded border border-[color:var(--danger-edge)] px-2 py-1 text-[11px] text-[color:var(--danger)] hover:bg-[color:var(--danger)]/10 disabled:opacity-50"
                 title="Memory hart löschen (Audit-Trail bleibt)"
               >
                 Delete
-              </button>
+              </Button>
             </div>
           </div>
 
diff --git a/web-ui/app/login/page.tsx b/web-ui/app/login/page.tsx
index 9aabf7d84..07437c466 100644
--- a/web-ui/app/login/page.tsx
+++ b/web-ui/app/login/page.tsx
@@ -4,6 +4,8 @@ import { Suspense, useEffect, useMemo, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '../_components/ui/Button';
+
 import {
   ApiError,
   getAuthProviders,
@@ -192,13 +194,9 @@ function LoginPageInner(): React.ReactElement {
           {submitError && (
             <p className="text-sm text-[color:var(--danger)]">{submitError}</p>
           )}
-          <button
-            type="submit"
-            disabled={submitting}
-            className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
-          >
-            {submitting ? t('submitting') : t('submit')}
-          </button>
+          <Button type="submit" busy={submitting} busyLabel={t('submitting')}>
+            {t('submit')}
+          </Button>
         </form>
       )}
 
diff --git a/web-ui/app/memories/[id]/page.tsx b/web-ui/app/memories/[id]/page.tsx
index fa16c1efe..653a8d58f 100644
--- a/web-ui/app/memories/[id]/page.tsx
+++ b/web-ui/app/memories/[id]/page.tsx
@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   deleteMemory,
   getMemory,
@@ -456,41 +458,43 @@ export default function MemoryDetailPage(): React.ReactElement {
             <div className="flex justify-end gap-2">
               {editing ? (
                 <>
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     onClick={cancelEdit}
                     disabled={busy}
-                    className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
                   >
                     Abbrechen
-                  </button>
-                  <button
-                    type="button"
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
                     onClick={() => void save()}
                     disabled={busy || summary.trim().length === 0}
-                    className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+                    busy={busy}
+                    busyLabel="speichert…"
                   >
-                    {busy ? 'speichert…' : 'Speichern'}
-                  </button>
+                    Speichern
+                  </Button>
                 </>
               ) : (
                 <>
-                  <button
-                    type="button"
+                  <Button
+                    variant="danger"
+                    size="sm"
                     onClick={() => void discard()}
                     disabled={busy}
-                    className="rounded border border-[color:var(--danger-edge)] px-3 py-1 text-xs text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8 disabled:opacity-50"
                   >
                     Löschen
-                  </button>
-                  <button
-                    type="button"
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
                     onClick={startEdit}
                     disabled={busy}
-                    className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)]"
                   >
                     Bearbeiten
-                  </button>
+                  </Button>
                 </>
               )}
             </div>
@@ -550,21 +554,23 @@ export default function MemoryDetailPage(): React.ReactElement {
                         </div>
                         {!isEditing && (
                           <div className="flex items-center gap-1">
-                            <button
-                              type="button"
+                            <Button
+                              variant="secondary"
+                              size="sm"
                               onClick={() => void copyExcerpt(ex)}
-                              className="rounded border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[color:var(--fg-muted)] hover:border-[color:var(--border-strong)] hover:text-[color:var(--fg-strong)]"
+                              className="px-2 py-0.5 text-[10px] text-[color:var(--fg-muted)]"
                               title="Snippet in die Zwischenablage kopieren"
                             >
                               {justCopied ? '✓ kopiert' : 'kopieren'}
-                            </button>
-                            <button
-                              type="button"
+                            </Button>
+                            <Button
+                              variant="secondary"
+                              size="sm"
                               onClick={() => startExcerptEdit(ex)}
-                              className="rounded border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[color:var(--fg-muted)] hover:border-[color:var(--border-strong)] hover:text-[color:var(--fg-strong)]"
+                              className="px-2 py-0.5 text-[10px] text-[color:var(--fg-muted)]"
                             >
                               bearbeiten
-                            </button>
+                            </Button>
                           </div>
                         )}
                       </div>
@@ -606,24 +612,28 @@ export default function MemoryDetailPage(): React.ReactElement {
                               </label>
                             ))}
                             <div className="ml-auto flex gap-1">
-                              <button
-                                type="button"
+                              <Button
+                                variant="secondary"
+                                size="sm"
                                 onClick={cancelExcerptEdit}
                                 disabled={excerptBusy}
-                                className="rounded border border-[color:var(--border)] px-2 py-0.5 text-[10px] hover:border-[color:var(--border-strong)] disabled:opacity-50"
+                                className="px-2 py-0.5 text-[10px]"
                               >
                                 Abbrechen
-                              </button>
-                              <button
-                                type="button"
+                              </Button>
+                              <Button
+                                variant="primary"
+                                size="sm"
                                 onClick={() => void saveExcerptEdit()}
                                 disabled={
                                   excerptBusy || excerptDraft.trim().length === 0
                                 }
-                                className="rounded bg-[color:var(--bg-inverse)] px-2 py-0.5 text-[10px] text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+                                busy={excerptBusy}
+                                busyLabel="speichert…"
+                                className="px-2 py-0.5 text-[10px]"
                               >
-                                {excerptBusy ? 'speichert…' : 'Speichern'}
-                              </button>
+                                Speichern
+                              </Button>
                             </div>
                           </div>
                         </div>
diff --git a/web-ui/app/memories/page.tsx b/web-ui/app/memories/page.tsx
index 95ade3ef7..4a5ed1e28 100644
--- a/web-ui/app/memories/page.tsx
+++ b/web-ui/app/memories/page.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   listMemories,
   type MemorableKind,
@@ -80,13 +81,13 @@ export default function MemoriesPage(): React.ReactElement {
               Kuratiertes Wissen — ACL-gefiltert auf dich als Owner.
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void load()}
-            className="rounded border border-[color:var(--border)] px-2 py-1 text-xs hover:border-[color:var(--border-strong)]"
           >
             ↻ neu laden
-          </button>
+          </Button>
         </div>
         <div className="mt-3 flex flex-wrap gap-2">
           {KIND_FILTERS.map((k) => {
diff --git a/web-ui/app/memory/page.tsx b/web-ui/app/memory/page.tsx
index c8cb31f58..2f7fc7196 100644
--- a/web-ui/app/memory/page.tsx
+++ b/web-ui/app/memory/page.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { Markdown } from '../_components/Markdown';
+import { Button } from '@/app/_components/ui/Button';
 import { getMemoryBackend, type MemoryBackend } from '../_lib/api';
 
 interface Entry {
@@ -246,13 +247,14 @@ export default function MemoryPage(): React.ReactElement {
                 {selected}
               </span>
               <div className="ml-auto flex items-center gap-2">
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  size="sm"
                   onClick={() => void loadFile(selected)}
-                  className="rounded border border-[color:var(--border)] px-2 py-0.5 hover:border-[color:var(--border-strong)]"
+                  className="px-2 py-0.5"
                 >
                   ↻
-                </button>
+                </Button>
               </div>
             </div>
             <div className="min-h-0 flex-1 overflow-auto px-6 py-4">
diff --git a/web-ui/app/operator/agents/_components/AgentsDashboard.tsx b/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
index dba8ee59e..5d28f385a 100644
--- a/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
+++ b/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
 
 import { ChevronDown, ChevronRight } from 'lucide-react';
 
+import { Button } from '@/app/_components/ui/Button';
 import { ApiError } from '../../../_lib/api';
 import {
   createOperatorAgent,
@@ -121,9 +122,9 @@ export function AgentsDashboard({
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-lg font-medium">{t('platformHeading')}</h2>
           <div className="flex gap-2">
-            <button
-              type="button"
-              className="rounded border border-[color:var(--border)] bg-[color:var(--bg-soft)] px-3 py-1 text-xs hover:bg-[color:var(--bg-soft)]"
+            <Button
+              variant="secondary"
+              size="sm"
               disabled={pending || !!busy || !fallbackSlug}
               onClick={() => {
                 if (!confirm(t('rehydrateConfirm'))) return;
@@ -140,15 +141,15 @@ export function AgentsDashboard({
               title={t('rehydrateTooltip')}
             >
               {t('actionRehydrateFallback')}
-            </button>
-            <button
-              type="button"
-              className="rounded border border-[color:var(--border)] bg-[color:var(--bg-soft)] px-3 py-1 text-xs hover:bg-[color:var(--bg-soft)]"
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
               disabled={pending || !!busy}
               onClick={() => run('reload', () => triggerAgentReload())}
             >
               {t('forceReload')}
-            </button>
+            </Button>
           </div>
         </div>
         <FallbackPicker
@@ -343,13 +344,15 @@ function RoutingTester(props: {
             className="rounded border border-[color:var(--border)] px-2 py-1 text-sm"
           />
         </label>
-        <button
+        <Button
           type="submit"
+          variant="primary"
           disabled={props.disabled || running || !type || !key}
-          className="rounded bg-[color:var(--bg-inverse)] px-4 py-2 text-sm text-[color:var(--fg-on-dark)] hover:bg-[color:var(--bg-inverse)] disabled:opacity-40"
+          busy={running}
+          busyLabel={t('routingTesterRunning')}
         >
-          {running ? t('routingTesterRunning') : t('routingTesterSubmit')}
-        </button>
+          {t('routingTesterSubmit')}
+        </Button>
       </form>
       {error && (
         <p className="mt-3 text-sm text-[color:var(--danger)]">{error}</p>
@@ -448,13 +451,13 @@ function CreateAgentForm(props: {
           </select>
         </Field>
         <div className="lg:col-span-4">
-          <button
+          <Button
             type="submit"
+            variant="primary"
             disabled={props.disabled || !slug || !name}
-            className="rounded bg-[color:var(--bg-inverse)] px-4 py-2 text-sm text-[color:var(--fg-on-dark)] hover:bg-[color:var(--bg-inverse)] disabled:opacity-40"
           >
             {t('createSubmit')}
-          </button>
+          </Button>
         </div>
       </form>
     </section>
@@ -534,9 +537,9 @@ function AgentCard(props: {
         </button>
         <div className="flex flex-col items-end gap-2">
           <div className="flex gap-2">
-            <button
-              type="button"
-              className="rounded border border-[color:var(--border)] bg-[color:var(--bg-soft)] px-2 py-1 text-xs hover:bg-[color:var(--bg-soft)]"
+            <Button
+              variant="secondary"
+              size="sm"
               disabled={props.disabled}
               onClick={() =>
                 props.onPatch({
@@ -547,10 +550,10 @@ function AgentCard(props: {
               {agent.status === 'enabled'
                 ? t('actionDisable')
                 : t('actionEnable')}
-            </button>
-            <button
-              type="button"
-              className="rounded border border-[color:var(--border)] bg-[color:var(--bg-soft)] px-2 py-1 text-xs hover:bg-[color:var(--bg-soft)]"
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
               disabled={props.disabled}
               onClick={() =>
                 props.onPatch({
@@ -560,10 +563,10 @@ function AgentCard(props: {
               }
             >
               {t('actionTogglePrivacy')}
-            </button>
-            <button
-              type="button"
-              className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-2 py-1 text-xs text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8"
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
               disabled={props.disabled}
               onClick={() => {
                 if (confirm(t('deleteConfirm', { slug: agent.slug })))
@@ -571,7 +574,7 @@ function AgentCard(props: {
               }}
             >
               {t('actionDelete')}
-            </button>
+            </Button>
           </div>
         </div>
       </header>
@@ -593,9 +596,9 @@ function AgentCard(props: {
             >
               {t('actionDrain')}
             </button>
-            <button
-              type="button"
-              className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-2 py-1 text-xs text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8"
+            <Button
+              variant="danger"
+              size="sm"
               disabled={props.disabled}
               onClick={() => {
                 if (confirm(t('killConfirm', { slug: agent.slug })))
@@ -603,7 +606,7 @@ function AgentCard(props: {
               }}
             >
               {t('actionKill')}
-            </button>
+            </Button>
           </div>
 
           <div className="mb-6">
@@ -711,22 +714,22 @@ function BindingsEditor(props: {
       <h4 className="mb-2 flex items-center justify-between text-sm font-medium">
         {t('bindingsHeading')}
         <span className="flex gap-2">
-          <button
-            type="button"
-            className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-0.5 text-xs hover:bg-[color:var(--bg-soft)]"
+          <Button
+            variant="secondary"
+            size="sm"
             disabled={props.disabled}
             onClick={add}
           >
             {t('bindingsAdd')}
-          </button>
-          <button
-            type="button"
-            className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-0.5 text-xs hover:bg-[color:var(--bg-soft)]"
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
             disabled={props.disabled}
             onClick={submit}
           >
             {t('save')}
-          </button>
+          </Button>
         </span>
       </h4>
       {rows.length === 0 ? (
@@ -775,14 +778,14 @@ function BindingsEditor(props: {
                 className="flex-1 rounded border border-[color:var(--border)] px-2 py-1 font-mono text-xs"
                 placeholder="28:bot-id-or-@username"
               />
-              <button
-                type="button"
-                className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-2 py-1 text-xs text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8"
+              <Button
+                variant="danger"
+                size="sm"
                 disabled={props.disabled}
                 onClick={() => remove(idx)}
               >
                 {t('bindingsRemove')}
-              </button>
+              </Button>
             </li>
           ))}
         </ul>
diff --git a/web-ui/app/operator/agents/_components/PluginsDnd.tsx b/web-ui/app/operator/agents/_components/PluginsDnd.tsx
index 650d17ee9..fbc1a489a 100644
--- a/web-ui/app/operator/agents/_components/PluginsDnd.tsx
+++ b/web-ui/app/operator/agents/_components/PluginsDnd.tsx
@@ -23,6 +23,7 @@ import { GripVertical } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
 import type {
   OperatorAgentDto,
   PluginCatalogEntryDto,
@@ -288,14 +289,14 @@ export function PluginsDnd(props: PluginsDndProps): React.ReactElement {
     <div>
       <h4 className="mb-2 flex items-center justify-between text-sm font-medium">
         {t('pluginsHeading')}
-        <button
-          type="button"
-          className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-0.5 text-xs hover:bg-[color:var(--bg-soft)]"
+        <Button
+          variant="secondary"
+          size="sm"
           disabled={props.disabled}
           onClick={submit}
         >
           {t('save')}
-        </button>
+        </Button>
       </h4>
       <DndContext
         sensors={sensors}
@@ -666,33 +667,33 @@ function DraggablePluginTile(props: {
           </div>
           <div className="flex flex-col items-end gap-1">
             {!attached ? (
-              <button
-                type="button"
-                className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-0.5 text-[10px] hover:bg-[color:var(--bg-soft)]"
+              <Button
+                variant="secondary"
+                size="sm"
                 disabled={props.disabled}
                 onClick={props.onAttach}
               >
                 {t('attach')}
-              </button>
+              </Button>
             ) : (
               <>
                 {hasFields && (
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     onClick={props.onToggleExpanded}
-                    className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-2 py-0.5 text-[10px] hover:bg-[color:var(--bg-soft)]"
                   >
                     {props.expanded ? t('configHide') : t('configShow')}
-                  </button>
+                  </Button>
                 )}
-                <button
-                  type="button"
-                  className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-2 py-0.5 text-[10px] text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8"
+                <Button
+                  variant="danger"
+                  size="sm"
                   disabled={props.disabled}
                   onClick={props.onDetach}
                 >
                   {t('detach')}
-                </button>
+                </Button>
               </>
             )}
           </div>
diff --git a/web-ui/app/page.tsx b/web-ui/app/page.tsx
index 4cc8c1229..bc81e350e 100644
--- a/web-ui/app/page.tsx
+++ b/web-ui/app/page.tsx
@@ -12,6 +12,7 @@ import {
 import { useTranslations } from 'next-intl';
 import { Eraser, GitBranch, Navigation, Network } from 'lucide-react';
 import { ChatTabs } from './_components/ChatTabs';
+import { Button } from './_components/ui/Button';
 import { AgentPicker } from './_components/AgentPicker';
 import { AgentUnavailableBanner } from './_components/AgentUnavailableBanner';
 import { AgentUsagePills } from './_components/chat/AgentUsagePills';
@@ -648,25 +649,19 @@ export default function ChatPage(): React.ReactElement {
                   <Navigation size={14} aria-hidden />
                   {t('steerButton')}
                 </button>
-                <button
-                  type="button"
-                  onClick={abort}
-                  className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-4 py-2 text-sm font-medium text-[color:var(--danger)] transition hover:bg-[color:var(--danger)]/8"
-                >
+                <Button variant="danger" onClick={abort}>
                   {t('stopButton')}
-                </button>
+                </Button>
               </>
             ) : (
-              <button
-                type="button"
+              <Button
                 onClick={() => {
                   send();
                 }}
                 disabled={input.trim().length === 0 || hydrating}
-                className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {t('sendButton')}
-              </button>
+              </Button>
             )}
           </div>
         </div>
@@ -1485,18 +1480,19 @@ function FollowUpButtons({
       </div>
       <div className="flex flex-wrap gap-2">
         {options.map((opt, idx) => (
-          <button
+          <Button
             key={`${opt.label}-${String(idx)}`}
-            type="button"
+            variant="secondary"
+            size="sm"
+            pill
             onClick={() => {
               onChoose(opt.prompt);
             }}
             disabled={disabled}
             title={opt.prompt}
-            className="rounded-full border border-[color:var(--border)] bg-[color:var(--bg-elevated)] px-3 py-1 text-[11px] font-medium text-[color:var(--fg)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--bg-soft)] disabled:cursor-not-allowed disabled:opacity-40"
           >
             {opt.label}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
diff --git a/web-ui/app/routines/_components/RoutineActions.tsx b/web-ui/app/routines/_components/RoutineActions.tsx
index fe892b387..1c64a7d58 100644
--- a/web-ui/app/routines/_components/RoutineActions.tsx
+++ b/web-ui/app/routines/_components/RoutineActions.tsx
@@ -3,6 +3,7 @@
 import { useState, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   deleteRoutine,
   setRoutineStatus,
@@ -88,31 +89,36 @@ export function RoutineActions({ routine }: Props): React.ReactElement {
   return (
     <div className="flex flex-col items-end gap-1">
       <div className="flex flex-wrap justify-end gap-2">
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
+          pill
           onClick={handleTriggerNow}
           disabled={pending}
           title="Routine jetzt manuell auslösen — feuert einen Agent-Run und liefert das Ergebnis ins Channel."
-          className="rounded-full border border-[color:var(--accent)]/40 bg-[color:var(--accent)]/5 px-3 py-1 text-[11px] font-semibold text-[color:var(--accent)] transition hover:border-[color:var(--accent)] disabled:opacity-50"
+          className="text-[11px] font-semibold"
         >
           Jetzt
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          pill
           onClick={handleToggle}
           disabled={pending}
-          className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1 text-[11px] font-semibold text-[color:var(--fg-muted)] transition hover:border-[color:var(--accent)] hover:text-[color:var(--fg-strong)] disabled:opacity-50"
         >
           {isPaused ? 'Resume' : 'Pause'}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          variant="danger"
+          size="sm"
+          pill
           onClick={handleDelete}
           disabled={pending}
-          className="rounded-full border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/5 px-3 py-1 text-[11px] font-semibold text-[color:var(--danger)] transition hover:border-[color:var(--danger)] disabled:opacity-50"
+          className="text-[11px] font-semibold"
         >
           Delete
-        </button>
+        </Button>
       </div>
       {error ? (
         <div className="font-mono text-[10px] text-[color:var(--danger)]">
diff --git a/web-ui/app/routines/_components/RoutineRow.tsx b/web-ui/app/routines/_components/RoutineRow.tsx
index 7a3df2075..22e7371a7 100644
--- a/web-ui/app/routines/_components/RoutineRow.tsx
+++ b/web-ui/app/routines/_components/RoutineRow.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useCallback, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   listRoutineRuns,
   type RoutineDto,
@@ -295,14 +296,16 @@ function RunHistoryPanel({
         <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[color:var(--fg-subtle)]">
           Letzte {HISTORY_LIMIT} Runs
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
+          pill
           onClick={onRefresh}
           disabled={loading}
-          className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[color:var(--fg-muted)] transition hover:border-[color:var(--accent)] hover:text-[color:var(--fg-strong)] disabled:opacity-50"
+          className="text-[10px] uppercase tracking-[0.16em]"
         >
           {loading ? 'Lädt…' : 'Refresh'}
-        </button>
+        </Button>
       </div>
       {error ? (
         <div className="rounded-md border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/5 p-3 text-[12px] text-[color:var(--danger)]">
diff --git a/web-ui/app/routines/_components/RoutineTemplateEditor.tsx b/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
index 1a4eb5b53..41f55040d 100644
--- a/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
+++ b/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   previewRoutineTemplate,
   setRoutineTemplate,
@@ -249,24 +250,30 @@ export function RoutineTemplateEditor({ routine }: Props): React.ReactElement {
       ) : null}
 
       <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
+          pill
           onClick={(): void => {
             void handleSave();
           }}
           disabled={saving || draftParseError !== null || !dirty}
-          className="rounded-full border border-[color:var(--accent)]/40 bg-[color:var(--accent)]/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--accent)] transition hover:border-[color:var(--accent)] disabled:opacity-40"
+          busy={saving}
+          busyLabel="Speichert…"
+          className="text-[11px] font-semibold uppercase tracking-[0.16em]"
         >
-          {saving ? 'Speichert…' : 'Speichern'}
-        </button>
-        <button
-          type="button"
+          Speichern
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          pill
           onClick={handleReset}
           disabled={saving || !dirty}
-          className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--fg-muted)] transition hover:border-[color:var(--accent)] hover:text-[color:var(--fg-strong)] disabled:opacity-40"
+          className="text-[11px] uppercase tracking-[0.16em]"
         >
           Verwerfen
-        </button>
+        </Button>
         <button
           type="button"
           onClick={handleClear}
@@ -335,16 +342,20 @@ export function RoutineTemplateEditor({ routine }: Props): React.ReactElement {
             </div>
           </div>
           <div className="flex items-center gap-2">
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
+              pill
               onClick={(): void => {
                 void handlePreview();
               }}
               disabled={previewLoading}
-              className="rounded-full border border-[color:var(--accent)]/40 bg-[color:var(--accent)]/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--accent)] transition hover:border-[color:var(--accent)] disabled:opacity-40"
+              busy={previewLoading}
+              busyLabel="Rendert…"
+              className="text-[11px] font-semibold uppercase tracking-[0.16em]"
             >
-              {previewLoading ? 'Rendert…' : 'Preview'}
-            </button>
+              Preview
+            </Button>
           </div>
           {previewError ? (
             <div className="rounded-md border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/5 p-2 text-[11px] text-[color:var(--danger)]">
diff --git a/web-ui/app/setup/page.tsx b/web-ui/app/setup/page.tsx
index 7ea469f59..f2170734b 100644
--- a/web-ui/app/setup/page.tsx
+++ b/web-ui/app/setup/page.tsx
@@ -4,6 +4,8 @@ import { Suspense, useEffect, useMemo, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   ApiError,
   getAuthProviders,
@@ -247,13 +249,9 @@ function SetupPageInner(): React.ReactElement {
         {submitError && (
           <p className="text-sm text-[color:var(--danger)]">{submitError}</p>
         )}
-        <button
-          type="submit"
-          disabled={submitting}
-          className="rounded-md bg-[color:var(--accent)] px-4 py-2 text-sm font-medium text-[color:var(--text-inverse)] disabled:opacity-50"
-        >
-          {submitting ? t('submitting') : t('submit')}
-        </button>
+        <Button type="submit" busy={submitting} busyLabel={t('submitting')}>
+          {t('submit')}
+        </Button>
       </form>
     </PageShell>
   );
diff --git a/web-ui/app/store/builder/[id]/_components/AuditTimelinePane.tsx b/web-ui/app/store/builder/[id]/_components/AuditTimelinePane.tsx
index 84ec8e270..157459bbc 100644
--- a/web-ui/app/store/builder/[id]/_components/AuditTimelinePane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/AuditTimelinePane.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import { listBuilderAudit, type BuilderAuditEvent } from '../../../../_lib/api';
 
 /**
@@ -164,17 +166,17 @@ export function AuditTimelinePane({ draftId }: AuditTimelinePaneProps): React.Re
       </ul>
 
       {hasMore && (
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           data-testid="audit-load-more"
           onClick={() => {
             void loadPage(offset, true);
           }}
           disabled={loading}
-          className="rounded border border-[color:var(--border)] px-3 py-1 text-xs"
         >
           {loading ? t('loading') : t('loadMore')}
-        </button>
+        </Button>
       )}
     </section>
   );
diff --git a/web-ui/app/store/builder/[id]/_components/BoundariesSection.tsx b/web-ui/app/store/builder/[id]/_components/BoundariesSection.tsx
index 5847950e8..8c90a466d 100644
--- a/web-ui/app/store/builder/[id]/_components/BoundariesSection.tsx
+++ b/web-ui/app/store/builder/[id]/_components/BoundariesSection.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useCallback, useMemo, useState, useTransition } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import { setQualityConfig } from '../../../../_lib/api';
 import {
   BOUNDARY_CATEGORY_LABELS_DE,
@@ -178,15 +180,16 @@ export function BoundariesSection({
       )}
 
       <div className="flex items-center gap-2">
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
           onClick={handleSave}
           disabled={disabled || pending}
-          className="rounded bg-[color:var(--accent)] px-3 py-1 text-sm font-medium text-[color:var(--fg-on-dark)] disabled:opacity-50"
+          className="text-sm"
           data-testid="boundaries-save"
         >
           {pending ? t('saving') : t('save')}
-        </button>
+        </Button>
         {savedAt && (
           <span className="text-xs text-[color:var(--fg-muted)]">
             {t('saved')}
diff --git a/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx b/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
index 4e9fee4f4..a59d42d93 100644
--- a/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   useCallback,
   useEffect,
@@ -593,24 +594,24 @@ export function BuilderChatPane({
             className="min-h-[44px] flex-1 resize-none rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[13px] leading-snug text-[color:var(--fg-strong)] placeholder:text-[color:var(--fg-subtle)] focus:border-[color:var(--accent)] focus:outline-none disabled:opacity-60"
           />
           {inflight ? (
-            <button
-              type="button"
+            <Button
+              variant="danger"
               onClick={onStop}
-              className="inline-flex h-[44px] shrink-0 items-center gap-2 rounded-md border border-[color:var(--danger)]/40 px-3 py-2 text-[12px] font-semibold text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/10"
+              className="h-[44px] shrink-0 text-[12px]"
             >
               <StopCircle className="size-4" aria-hidden />
               {t('button.stop')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
+            <Button
+              variant="primary"
               onClick={() => void onSend()}
               disabled={input.trim().length === 0}
-              className="inline-flex h-[44px] shrink-0 items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[12px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] transition-opacity hover:opacity-90 disabled:opacity-40"
+              className="h-[44px] shrink-0 text-[12px]"
             >
               <Send className="size-4" aria-hidden />
               {t('button.send')}
-            </button>
+            </Button>
           )}
         </div>
         {inflight ? (
diff --git a/web-ui/app/store/builder/[id]/_components/CulturePresetDropdown.tsx b/web-ui/app/store/builder/[id]/_components/CulturePresetDropdown.tsx
index a95644e04..a5a212c8d 100644
--- a/web-ui/app/store/builder/[id]/_components/CulturePresetDropdown.tsx
+++ b/web-ui/app/store/builder/[id]/_components/CulturePresetDropdown.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useCallback, useMemo, useState, useTransition } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import { setPersonaConfig } from '../../../../_lib/api';
 import {
   CULTURE_PRESETS,
@@ -121,24 +123,26 @@ export function CulturePresetDropdown({
             </div>
           )}
           <div className="flex gap-2">
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               data-testid="culture-confirm-apply"
               onClick={handleConfirm}
               disabled={disabled || pending || diff.length === 0}
-              className="rounded bg-[color:var(--accent)] px-3 py-1 text-sm font-medium text-[color:var(--fg-on-dark)] disabled:opacity-50"
+              className="text-sm"
             >
               {pending ? t('applying') : t('apply')}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
               data-testid="culture-confirm-cancel"
               onClick={handleCancel}
               disabled={pending}
-              className="rounded border border-[color:var(--border)] px-3 py-1 text-sm"
+              className="text-sm"
             >
               {t('cancel')}
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx b/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
index f7a9e274c..5222bae47 100644
--- a/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { useRouter } from 'next/navigation';
 import { AlertTriangle, CheckCircle2, ShieldCheck, X } from 'lucide-react';
 
@@ -260,16 +262,11 @@ export function InstallDiffModal({
           >
             {t('back')}
           </button>
-          <button
-            type="button"
+          <Button
+            variant="primary"
             onClick={() => void handleInstall()}
             disabled={busy || phase.kind === 'succeeded'}
-            className={cn(
-              'inline-flex items-center gap-2 rounded-md px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.18em]',
-              'bg-[color:var(--accent)] text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)]',
-              'transition-opacity',
-              'disabled:opacity-50 disabled:cursor-not-allowed',
-            )}
+            className="text-[12px] uppercase tracking-[0.18em]"
           >
             {busy ? (
               <>
@@ -284,7 +281,7 @@ export function InstallDiffModal({
             ) : (
               t('publish')
             )}
-          </button>
+          </Button>
         </footer>
       </div>
     </div>
@@ -553,21 +550,23 @@ function FailureBanner({
           <FailureDetails failure={failure} t={t} />
           <div className="mt-3 flex flex-wrap items-center gap-2">
             {canBump ? (
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="sm"
                 onClick={() => void onBumpAndRetry()}
-                className="inline-flex items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--fg-on-dark)] shadow-sm transition-opacity hover:opacity-90"
+                className="text-[11px] uppercase tracking-[0.16em]"
               >
                 {t('bumpAndPublish', { current: currentVersion, next: bumped ?? '' })}
-              </button>
+              </Button>
             ) : null}
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={onRetry}
-              className="inline-flex items-center gap-2 rounded-md border border-[color:var(--divider)] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--fg-strong)] transition-colors hover:bg-[color:var(--bg-soft)]"
+              className="text-[11px] uppercase tracking-[0.16em]"
             >
               {t('retry')}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web-ui/app/store/builder/[id]/_components/PagesList.tsx b/web-ui/app/store/builder/[id]/_components/PagesList.tsx
index 4d0610296..37829b0fa 100644
--- a/web-ui/app/store/builder/[id]/_components/PagesList.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PagesList.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   closestCenter,
   DndContext,
@@ -138,14 +139,14 @@ export function PagesList({
             code: (chunks) => <code>{chunks}</code>,
           })}
         </p>
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={onAdd}
-          className="mt-3 inline-flex items-center gap-1 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)]"
+          className="mt-3 gap-1 text-[11px]"
         >
           <Plus className="size-3" aria-hidden />
           {t('addFirstPage')}
-        </button>
+        </Button>
       </div>
     );
   }
@@ -191,14 +192,10 @@ export function PagesList({
           </ul>
         </SortableContext>
       </DndContext>
-      <button
-        type="button"
-        onClick={onAdd}
-        className="inline-flex items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
-      >
+      <Button variant="secondary" size="sm" onClick={onAdd} className="text-[11px]">
         <Plus className="size-3" aria-hidden />
         {t('addPage')}
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx b/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
index 4b8bdf08f..e2033bc13 100644
--- a/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
@@ -4,6 +4,8 @@ import { useTranslations } from 'next-intl';
 import { useCallback, useMemo, useState, useTransition } from 'react';
 import { ChevronDown, ChevronRight, Sparkles } from 'lucide-react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import { ApiError, setPersonaConfig } from '../../../../_lib/api';
 import type { QualityConfig } from '../../../../_lib/builderTypes';
 import { cn } from '../../../../_lib/cn';
@@ -201,15 +203,15 @@ export function PersonaPillar({
               : t('templateBadge', { template: persona.template })
             : t('templateBadgeNone')}
         </span>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           data-testid="persona-template-open"
           onClick={() => setGalleryOpen(true)}
           disabled={disabled || pending}
-          className="rounded border border-[color:var(--border)] px-2 py-1 text-xs"
         >
           {t('applyTemplate')}
-        </button>
+        </Button>
       </div>
       {galleryOpen && (
         <PersonaTemplateGallery
@@ -404,28 +406,20 @@ export function PersonaPillar({
           ) : null}
         </div>
         <div className="flex items-center gap-2">
-          <button
-            type="button"
+          <Button
+            variant="secondary"
             onClick={handleReset}
             disabled={!dirty || pending || disabled}
-            className={cn(
-              'rounded-md border border-[color:var(--border)] px-3 py-2 text-sm',
-              'text-[color:var(--fg)] disabled:opacity-50',
-            )}
           >
             {t('reset')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="primary"
             onClick={handleSave}
             disabled={!dirty || pending || disabled}
-            className={cn(
-              'rounded-md bg-[color:var(--accent)] px-3 py-2 text-sm font-medium text-[color:var(--fg-on-dark)]',
-              'shadow-[var(--shadow-cta)] disabled:opacity-50',
-            )}
           >
             {pending ? t('saving') : t('save')}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx b/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
index fbda281ed..5ef8bc4ee 100644
--- a/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useCallback, useState, useTransition } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import { patchBuilderSpec, setPersonaConfig } from '../../../../_lib/api';
 import {
   PERSONA_TEMPLATES,
@@ -99,15 +101,16 @@ export function PersonaTemplateGallery({
           <h2 className="text-lg font-semibold text-[color:var(--fg-strong)]">
             {t('title')}
           </h2>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="gallery-close"
             onClick={onClose}
             disabled={pending}
-            className="rounded border border-[color:var(--border)] px-2 py-1 text-sm text-[color:var(--fg-muted)] hover:bg-[color:var(--accent-bg)]"
+            className="text-sm"
           >
             {t('close')}
-          </button>
+          </Button>
         </header>
 
         <div className="grid grid-cols-1 gap-3 md:grid-cols-3" data-testid="gallery-grid">
@@ -183,24 +186,26 @@ export function PersonaTemplateGallery({
         )}
 
         <div className="mt-3 flex justify-end gap-2">
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="gallery-cancel"
             onClick={onClose}
             disabled={pending}
-            className="rounded border border-[color:var(--border)] px-3 py-1 text-sm"
+            className="text-sm"
           >
             {t('cancel')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
             data-testid="gallery-apply"
             onClick={handleApply}
             disabled={disabled || pending || !selected}
-            className="rounded bg-[color:var(--accent)] px-3 py-1 text-sm font-medium text-[color:var(--fg-on-dark)] disabled:opacity-50"
+            className="text-sm"
           >
             {pending ? t('applying') : t('apply')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx b/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
index 3f1e7ef4d..fde9e19bf 100644
--- a/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   useCallback,
   useEffect,
@@ -578,24 +579,24 @@ export function PreviewChatPane({
             className="min-h-[44px] flex-1 resize-none rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[13px] leading-snug text-[color:var(--fg-strong)] placeholder:text-[color:var(--fg-subtle)] focus:border-[color:var(--accent)] focus:outline-none disabled:opacity-60"
           />
           {inflight ? (
-            <button
-              type="button"
+            <Button
+              variant="danger"
               onClick={onStop}
-              className="inline-flex h-[44px] shrink-0 items-center gap-2 rounded-md border border-[color:var(--danger)]/40 px-3 py-2 text-[12px] font-semibold text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/10"
+              className="h-[44px] shrink-0 text-[12px]"
             >
               <StopCircle className="size-4" aria-hidden />
               {t('stop')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
+            <Button
+              variant="primary"
               onClick={() => void onSend()}
               disabled={input.trim().length === 0}
-              className="inline-flex h-[44px] shrink-0 items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[12px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-40"
+              className="h-[44px] shrink-0 text-[12px]"
             >
               <Send className="size-4" aria-hidden />
               {t('send')}
-            </button>
+            </Button>
           )}
         </div>
         {inflight ? (
@@ -684,14 +685,15 @@ function RuntimeSmokeStrip({
           </ul>
         ) : null}
         {snap.phase === 'failed' && onFixWithBuilder ? (
-          <button
-            type="button"
+          <Button
+            variant="danger"
+            size="sm"
             onClick={onFixWithBuilder}
-            className="mt-2 inline-flex items-center gap-2 rounded-md border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/10 px-2 py-1 text-[11px] font-mono-num uppercase tracking-[0.18em] text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/15"
+            className="mt-2 font-mono-num text-[11px] uppercase tracking-[0.18em]"
           >
             <Wrench className="size-3" aria-hidden />
             {t('fixWithBuilder')}
-          </button>
+          </Button>
         ) : null}
       </div>
     </div>
diff --git a/web-ui/app/store/builder/[id]/_components/PreviewPromptPanel.tsx b/web-ui/app/store/builder/[id]/_components/PreviewPromptPanel.tsx
index 2a3df3171..1af129fcb 100644
--- a/web-ui/app/store/builder/[id]/_components/PreviewPromptPanel.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PreviewPromptPanel.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   fetchBuilderPreviewPrompt,
   type BuilderPreviewPrompt,
@@ -133,26 +135,26 @@ export function PreviewPromptPanel({
               })}
             </span>
           )}
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="preview-prompt-refresh"
             onClick={() => {
               void load();
             }}
             disabled={loading}
-            className="rounded border border-[color:var(--border)] px-2 py-1"
           >
             {loading ? t('loading') : t('refresh')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="preview-prompt-copy"
             onClick={handleCopy}
             disabled={!data || loading}
-            className="rounded border border-[color:var(--border)] px-2 py-1"
           >
             {copied ? t('copied') : t('copy')}
-          </button>
+          </Button>
         </div>
       </header>
 
diff --git a/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx b/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
index 0c2ae7b95..55cd24b28 100644
--- a/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
+++ b/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   fetchBuilderQuality,
   type BuilderQualityResult,
@@ -95,17 +97,17 @@ export function QualityPanel({ draftId, refetchKey }: QualityPanelProps): React.
               {t('tokensPrefix')} {tokenHealthLabel(data.tokenHealth)}
             </span>
           )}
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="quality-refresh"
             onClick={() => {
               void load();
             }}
             disabled={loading}
-            className="rounded border border-[color:var(--border)] px-2 py-1"
           >
             {loading ? t('loading') : t('refresh')}
-          </button>
+          </Button>
         </div>
       </header>
 
diff --git a/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx b/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
index 8ecde05cb..40fc3af34 100644
--- a/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { AnimatePresence, motion } from 'framer-motion';
 import { CheckCircle2, KeyRound, Trash2, X } from 'lucide-react';
 
@@ -206,20 +208,20 @@ export function SecretsDrawer({
             </div>
 
             <footer className="flex items-center gap-2 border-t border-[color:var(--divider)] px-4 py-3">
-              <button
-                type="button"
+              <Button
+                variant="danger"
                 onClick={() => void onClearAll()}
                 disabled={pending || bufferedKeys.length === 0}
-                className="inline-flex items-center gap-2 rounded-md border border-[color:var(--danger)]/40 px-3 py-2 text-[11px] font-semibold text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/10 disabled:opacity-40"
+                className="text-[11px]"
               >
                 <Trash2 className="size-3" aria-hidden />
                 {t('clearAll')}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant="primary"
                 onClick={() => void onSave()}
                 disabled={pending || fields.length === 0}
-                className="ml-auto inline-flex items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[12px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-50"
+                className="ml-auto text-[12px]"
               >
                 {pending ? (
                   <span className="lume-busy-dots" aria-hidden />
@@ -227,7 +229,7 @@ export function SecretsDrawer({
                   <CheckCircle2 className="size-3.5" aria-hidden />
                 )}
                 {t('apply')}
-              </button>
+              </Button>
             </footer>
           </motion.aside>
         </>
diff --git a/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx b/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
index 92736c17a..4cae8b200 100644
--- a/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useId, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { Plus, Trash2 } from 'lucide-react';
 
 import { ApiError, patchBuilderSpec } from '../../../../_lib/api';
@@ -314,8 +316,8 @@ function NewFieldForm({
             {t('required.on')}
           </span>
         </label>
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={() => {
             if (!valid) return;
             onSubmit({ key: trimmed, type, required });
@@ -323,11 +325,11 @@ function NewFieldForm({
             setRequired(false);
           }}
           disabled={!valid}
-          className="ml-auto inline-flex items-center gap-1 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-40"
+          className="ml-auto gap-1 text-[11px]"
         >
           <Plus className="size-3" aria-hidden />
           {t('add')}
-        </button>
+        </Button>
       </div>
       {key && !valid ? (
         <p className="mt-1 text-[10px] text-[color:var(--danger)]">
diff --git a/web-ui/app/store/builder/[id]/_components/SimpleIntakePane.tsx b/web-ui/app/store/builder/[id]/_components/SimpleIntakePane.tsx
index 642c56330..71b22a0a3 100644
--- a/web-ui/app/store/builder/[id]/_components/SimpleIntakePane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SimpleIntakePane.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { motion } from 'framer-motion';
 import { Send, Sparkles, StopCircle } from 'lucide-react';
 
@@ -307,24 +309,26 @@ export function SimpleIntakePane({
             className="min-h-[50px] flex-1 resize-none rounded-lg border border-[color:var(--border)] bg-[color:var(--bg)] px-4 py-3 text-[14.5px] leading-snug text-[color:var(--fg-strong)] placeholder:text-[color:var(--fg-subtle)] transition-colors focus:border-[color:var(--accent)] focus:outline-none focus:ring-4 focus:ring-[color:var(--accent)]/10 disabled:opacity-60"
           />
           {inflight ? (
-            <button
-              type="button"
+            <Button
+              variant="danger"
+              pill
               onClick={onStop}
-              className="inline-flex h-[50px] shrink-0 items-center gap-2 rounded-full border border-[color:var(--danger)]/40 px-4 text-[13px] font-semibold text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/10"
+              className="h-[50px] shrink-0 text-[13px]"
             >
               <StopCircle className="size-4" aria-hidden />
               {t('stop')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              pill
               onClick={() => void onSend()}
               disabled={input.trim().length === 0}
-              className="inline-flex h-[50px] shrink-0 items-center gap-2 rounded-full bg-[color:var(--accent)] px-4 text-[14px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] transition-all hover:opacity-90 disabled:opacity-40 disabled:shadow-none"
+              className="h-[50px] shrink-0 text-[14px]"
             >
               <Send className="size-4" aria-hidden />
               {t('send')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -437,14 +441,15 @@ function IntakeHero({
           {t('examplesLabel')}
         </p>
         {examples.map((prompt) => (
-          <button
+          <Button
             key={prompt}
-            type="button"
+            variant="secondary"
+            pill
             onClick={() => onPick(prompt)}
-            className="rounded-full border border-[color:var(--divider)] bg-[color:var(--bg)] px-4 py-2 text-[13.5px] text-[color:var(--fg-default)] transition-colors hover:border-[color:var(--accent)] hover:bg-[color:var(--accent)]/5 hover:text-[color:var(--fg-strong)]"
+            className="text-[13.5px]"
           >
             {prompt}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
diff --git a/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx b/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
index 2be3497d8..b57ae6452 100644
--- a/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   useCallback,
   useEffect,
@@ -401,15 +402,16 @@ export function SlotEditor({
           ))}
         </select>
         <SaveBadge status={status} />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
           onClick={() => void flush()}
           disabled={status.kind === 'pending'}
-          className="ml-auto inline-flex items-center gap-2 rounded-md bg-[color:var(--accent)] px-3 py-1 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-50"
+          className="ml-auto text-[11px]"
         >
           <Save className="size-3" aria-hidden />
           {t('save')}
-        </button>
+        </Button>
       </div>
 
       <div className="flex-1 min-h-0 overflow-hidden">
diff --git a/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx b/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
index dfb20a99a..d13abb974 100644
--- a/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { AlertCircle, Check, Plus, X } from 'lucide-react';
 
 import { ApiError, patchBuilderSpec } from '../../../../_lib/api';
@@ -540,15 +542,15 @@ function ArrayField({
             mono && 'font-mono-num',
           )}
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={submit}
           disabled={draft.trim().length === 0}
-          className="inline-flex items-center gap-1 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-40"
+          className="gap-1 text-[11px]"
         >
           <Plus className="size-3" aria-hidden />
           {t('array.add')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx b/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
index 1f249f455..d0b8eb92e 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
@@ -4,6 +4,7 @@ import { AlertTriangle, Check, Upload, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
 import type { JsonPatch, ToolSpec } from '../../../../_lib/builderTypes';
 import { cn } from '../../../../_lib/cn';
 import {
@@ -158,8 +159,9 @@ export function ToolBulkImportModal({
           <p className="text-[11px] text-[color:var(--fg-muted)]">
             {t('collisionNote')}
           </p>
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void onConfirm()}
             disabled={
               pending ||
@@ -167,7 +169,7 @@ export function ToolBulkImportModal({
               result.tools.length === 0 ||
               result.tools.length === collisions.length
             }
-            className="inline-flex items-center gap-1 rounded bg-[color:var(--accent)] px-3 py-1 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-50"
+            className="gap-1 text-[11px]"
           >
             {pending ? (
               <span className="lume-busy-dots" aria-hidden />
@@ -175,7 +177,7 @@ export function ToolBulkImportModal({
               <Check className="size-3" aria-hidden />
             )}
             {t('confirmImport')}
-          </button>
+          </Button>
         </footer>
       </div>
     </div>
diff --git a/web-ui/app/store/builder/[id]/_components/ToolForm.tsx b/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
index 6e2313523..6a93af9d6 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
@@ -4,6 +4,8 @@ import { Save } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useId, useRef, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import type { JsonPatch, ToolSpec } from '../../../../_lib/builderTypes';
 import { cn } from '../../../../_lib/cn';
 import { savePersonalTemplate } from '../../../../_lib/toolTemplates';
@@ -255,8 +257,9 @@ function SavePersonalTemplateButton({
   const [stamp, setStamp] = useState<'idle' | 'saved'>('idle');
   return (
     <div className="border-t border-[color:var(--border)] pt-2">
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        size="sm"
         onClick={() => {
           const label = window.prompt(
             t('templateNamePrompt'),
@@ -267,11 +270,10 @@ function SavePersonalTemplateButton({
           setStamp('saved');
           window.setTimeout(() => setStamp('idle'), 1400);
         }}
-        className="inline-flex items-center gap-1 rounded border border-[color:var(--border)] bg-[color:var(--bg)] px-2 py-1 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
       >
         <Save className="size-3" aria-hidden />
         {t('saveAsTemplate')}
-      </button>
+      </Button>
       {stamp === 'saved' ? (
         <span className="ml-2 text-[10px] text-[color:var(--fg-muted)]">
           {t('saved')}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaBuilder.tsx b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaBuilder.tsx
index b27235459..ae3746158 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaBuilder.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaBuilder.tsx
@@ -4,6 +4,8 @@ import { Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useCallback, useMemo } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   detectType,
   ensureTopLevelObject,
@@ -167,14 +169,10 @@ export function ToolInputSchemaBuilder({
           );
         })
       )}
-      <button
-        type="button"
-        onClick={addProperty}
-        className="inline-flex items-center gap-1 rounded border border-[color:var(--border)] bg-[color:var(--bg)] px-2 py-1 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
-      >
+      <Button variant="secondary" size="sm" onClick={addProperty}>
         <Plus className="size-3" aria-hidden />
         {t('addProperty')}
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
index c6944f709..11c8d2ee1 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
@@ -2,6 +2,8 @@
 
 import { ChevronDown, ChevronRight, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { useEffect, useId, useState } from 'react';
 
 import { cn } from '../../../../_lib/cn';
@@ -454,18 +456,19 @@ function EnumValuesEditor({
           placeholder={t('valueEnterPlaceholder')}
           className="flex-1 rounded border border-[color:var(--border)] bg-[color:var(--bg)] px-2 py-1 font-mono-num text-[11px] text-[color:var(--fg-strong)] focus:border-[color:var(--accent)] focus:outline-none"
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="sm"
           onClick={() => {
             if (!draft.trim()) return;
             onChange([...values, draft.trim()]);
             setDraft('');
           }}
           disabled={!draft.trim()}
-          className="rounded bg-[color:var(--accent)] px-2 py-1 text-[11px] font-semibold text-[color:var(--fg-on-dark)] disabled:opacity-40"
+          className="text-[11px]"
         >
           +
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web-ui/app/store/builder/[id]/_components/ToolList.tsx b/web-ui/app/store/builder/[id]/_components/ToolList.tsx
index 3daf511f0..d70cf77fc 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolList.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolList.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/app/_components/ui/Button';
 import {
   closestCenter,
   DndContext,
@@ -149,22 +150,23 @@ export function ToolList({
             {t('emptyState')}
           </p>
           <div className="mt-3 flex items-center justify-center gap-2">
-            <button
-              type="button"
+            <Button
+              variant="primary"
               onClick={onAdd}
-              className="inline-flex items-center gap-1 rounded-md bg-[color:var(--accent)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)]"
+              className="gap-1 text-[11px]"
             >
               <Plus className="size-3" aria-hidden />
               {t('addFirstTool')}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={() => setTemplatesOpen(true)}
-              className="inline-flex items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
+              className="text-[11px]"
             >
               <Layers className="size-3" aria-hidden />
               {t('fromTemplate')}
-            </button>
+            </Button>
           </div>
         </div>
         {templatesOpen ? (
@@ -211,30 +213,33 @@ export function ToolList({
       </DndContext>
 
       <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={onAdd}
-          className="inline-flex items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
+          className="text-[11px]"
         >
           <Plus className="size-3" aria-hidden />
           {t('addTool')}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => setTemplatesOpen(true)}
-          className="inline-flex items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
+          className="text-[11px]"
         >
           <Layers className="size-3" aria-hidden />
           {t('fromTemplate')}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => setImportOpen(true)}
-          className="inline-flex items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)]"
+          className="text-[11px]"
         >
           <Upload className="size-3" aria-hidden />
           {t('import')}
-        </button>
+        </Button>
       </div>
       {templatesOpen ? (
         <ToolTemplatesModal
diff --git a/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx b/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
index 3269f059a..53aba4b24 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
@@ -2,6 +2,8 @@
 
 import { Play, Save, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+
+import { Button } from '@/app/_components/ui/Button';
 import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 
 import { ApiError, runBuilderPreviewToolCall } from '../../../../_lib/api';
@@ -169,11 +171,12 @@ export function ToolTestModal({
           </div>
           <div className="flex items-center gap-2">
             {onSaveTestCase && outcome && !outcome.isError ? (
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={() => void onSave()}
                 disabled={savingTestCase}
-                className="inline-flex items-center gap-1 rounded border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-1 text-[11px] font-semibold text-[color:var(--fg-strong)] hover:border-[color:var(--accent)] disabled:opacity-50"
+                className="text-[11px]"
               >
                 {savingTestCase ? (
                   <span className="lume-busy-dots" aria-hidden />
@@ -181,13 +184,14 @@ export function ToolTestModal({
                   <Save className="size-3" aria-hidden />
                 )}
                 {t('saveTestCase')}
-              </button>
+              </Button>
             ) : null}
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               onClick={() => void onRun()}
               disabled={pending}
-              className="inline-flex items-center gap-1 rounded bg-[color:var(--accent)] px-3 py-1 text-[11px] font-semibold text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] disabled:opacity-50"
+              className="gap-1 text-[11px]"
             >
               {pending ? (
                 <span className="lume-busy-dots" aria-hidden />
@@ -195,7 +199,7 @@ export function ToolTestModal({
                 <Play className="size-3" aria-hidden />
               )}
               {t('run')}
-            </button>
+            </Button>
           </div>
         </footer>
       </div>
diff --git a/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx b/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
index 5daefffc6..e4d739bb8 100644
--- a/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
+++ b/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 
+import { Button } from '@/app/_components/ui/Button';
+
 import {
   captureSnapshot,
   getSnapshotDiff,
@@ -96,20 +98,16 @@ export function VersionsTab({ draftId }: VersionsTabProps): React.ReactElement {
   return (
     <div className="flex h-full flex-col p-4 text-[var(--fg)]">
       <div className="mb-4 flex items-center gap-2">
-        <button
-          type="button"
+        <Button
+          variant="primary"
           onClick={() => setCaptureOpen(true)}
-          className="rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[color:var(--fg-on-dark)] hover:opacity-90"
+          className="text-sm"
         >
           {t('createSnapshot')}
-        </button>
-        <button
-          type="button"
-          onClick={() => void refresh()}
-          className="rounded-md border border-[var(--border)] px-3 py-2 text-sm hover:border-current"
-        >
+        </Button>
+        <Button variant="secondary" onClick={() => void refresh()}>
           {t('refresh')}
-        </button>
+        </Button>
       </div>
 
       {state.kind === 'loading' && <p className="text-sm opacity-70">{t('loading')}</p>}
@@ -381,21 +379,17 @@ function CaptureModal({
         {t('vendorBundleLabel')}
       </label>
       <div className="mt-4 flex justify-end gap-2">
-        <button
-          type="button"
-          onClick={onClose}
-          className="rounded-md border border-[var(--border)] px-3 py-2 text-sm"
-        >
+        <Button variant="secondary" onClick={onClose}>
           {t('cancel')}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => void submit()}
           disabled={busy}
-          className="rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[color:var(--fg-on-dark)] disabled:opacity-50"
+          className="text-sm"
         >
           {t('create')}
-        </button>
+        </Button>
       </div>
     </ModalShell>
   );
@@ -571,13 +565,9 @@ function RollbackModal({
         autoComplete="off"
       />
       <div className="mt-4 flex justify-end gap-2">
-        <button
-          type="button"
-          onClick={onClose}
-          className="rounded-md border border-[var(--border)] px-3 py-2 text-sm"
-        >
+        <Button variant="secondary" onClick={onClose}>
           {t('cancel')}
-        </button>
+        </Button>
         <button
           type="button"
           onClick={() => void submit()}
diff --git a/web-ui/app/store/builder/[id]/_components/Workspace.tsx b/web-ui/app/store/builder/[id]/_components/Workspace.tsx
index ba2d080de..2ffe57777 100644
--- a/web-ui/app/store/builder/[id]/_components/Workspace.tsx
+++ b/web-ui/app/store/builder/[id]/_components/Workspace.tsx
@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { LayoutGroup } from 'framer-motion';
+
+import { Button } from '@/app/_components/ui/Button';
 import {
   ArrowLeft,
   MessageSquare,
@@ -1406,21 +1408,16 @@ function WorkspaceHeader({
         disabled={viewToggleDisabled}
       />
 
-      <button
-        type="button"
+      <Button
+        variant="primary"
         onClick={installEnabled ? onInstallClick : undefined}
         disabled={!installEnabled}
         title={installDisabledReason ?? undefined}
-        className={cn(
-          'inline-flex items-center gap-2 rounded-md px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.18em] transition-opacity',
-          installEnabled
-            ? 'bg-[color:var(--accent)] text-[color:var(--fg-on-dark)] shadow-[var(--shadow-cta)] hover:opacity-90'
-            : 'cursor-not-allowed bg-[color:var(--bg-soft)] text-[color:var(--fg-subtle)]',
-        )}
+        className="text-[12px] uppercase tracking-[0.18em]"
       >
         <Rocket className="size-3.5" aria-hidden />
         {tw('publish')}
-      </button>
+      </Button>
     </header>
   );
 }
@@ -1992,14 +1989,15 @@ function BuildStatusStrip({
           </span>
         ) : null}
         {onFixWithBuilder ? (
-          <button
-            type="button"
+          <Button
+            variant="danger"
+            size="sm"
             onClick={onFixWithBuilder}
-            className="inline-flex items-center gap-2 rounded-md border border-[color:var(--danger)]/40 bg-[color:var(--danger)]/10 px-2 py-1 font-mono-num text-[10px] uppercase tracking-[0.18em] text-[color:var(--danger)] transition-colors hover:bg-[color:var(--danger)]/15"
+            className="font-mono-num text-[10px] uppercase tracking-[0.18em]"
           >
             <Wrench className="size-3" aria-hidden />
             {tw('fixWithBuilder')}
-          </button>
+          </Button>
         ) : null}
         <span className="font-mono-num inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.18em] text-[color:var(--fg-subtle)]">
           <span className={`inline-block size-1.5 rounded-full ${busColor}`} />
diff --git a/web-ui/app/store/builder/_components/CreateDraftButton.tsx b/web-ui/app/store/builder/_components/CreateDraftButton.tsx
index 7ffdfe2b8..ae59a64b2 100644
--- a/web-ui/app/store/builder/_components/CreateDraftButton.tsx
+++ b/web-ui/app/store/builder/_components/CreateDraftButton.tsx
@@ -7,7 +7,7 @@ import { Plus } from 'lucide-react';
 
 import { ApiError, createBuilderDraft } from '../../../_lib/api';
 import type { DraftQuotaSnapshot } from '../../../_lib/builderTypes';
-import { cn } from '../../../_lib/cn';
+import { Button } from '@/app/_components/ui/Button';
 
 /**
  * Primary "neuer Agent"-Action. One click creates a draft row via POST
@@ -50,22 +50,16 @@ export function CreateDraftButton({
 
   return (
     <div className="flex flex-col items-end gap-2">
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        pill
         onClick={onClick}
         disabled={disabled}
-        className={cn(
-          'inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-semibold',
-          'shadow-[var(--shadow-cta)] transition-transform duration-[var(--dur-base)]',
-          'bg-[color:var(--accent)] text-[color:var(--fg-on-dark)] hover:-translate-y-0.5',
-          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--accent)]',
-          'disabled:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0',
-        )}
         title={quota.exceeded ? t('quotaReachedTooltip') : undefined}
       >
         <Plus className="size-4" aria-hidden />
         {pending ? t('pending') : t('label')}
-      </button>
+      </Button>
       {error ? (
         <p className="max-w-xs text-right text-[11px] text-[color:var(--danger)]">
           {error}
diff --git a/web-ui/app/store/builder/_components/DraftRow.tsx b/web-ui/app/store/builder/_components/DraftRow.tsx
index 358f9dc6b..d8eb1d24b 100644
--- a/web-ui/app/store/builder/_components/DraftRow.tsx
+++ b/web-ui/app/store/builder/_components/DraftRow.tsx
@@ -17,6 +17,7 @@ import type {
   DraftSummary,
 } from '../../../_lib/builderTypes';
 import { cn } from '../../../_lib/cn';
+import { Button } from '@/app/_components/ui/Button';
 import { ExportDraftButton } from './ExportDraftButton';
 
 interface DraftRowProps {
@@ -196,15 +197,16 @@ export function DraftRow({ draft, deleted = false }: DraftRowProps): React.React
 
       <div className="flex items-center gap-1">
         {deleted ? (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={onRestore}
             disabled={pending}
-            className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-[11px] font-semibold text-[color:var(--fg-muted)] hover:bg-[color:var(--bg-soft)] hover:text-[color:var(--fg-strong)] disabled:opacity-50"
+            className="text-[11px] font-semibold text-[color:var(--fg-muted)] hover:text-[color:var(--fg-strong)]"
           >
             <Undo2 className="size-3.5" aria-hidden />
             {t('restore')}
-          </button>
+          </Button>
         ) : (
           <>
             {draft.status === 'published' ? (
diff --git a/web-ui/app/store/builder/_components/ImportBundleButton.tsx b/web-ui/app/store/builder/_components/ImportBundleButton.tsx
index ffcb2da19..ef74c7801 100644
--- a/web-ui/app/store/builder/_components/ImportBundleButton.tsx
+++ b/web-ui/app/store/builder/_components/ImportBundleButton.tsx
@@ -8,6 +8,7 @@ import { Upload, FileArchive } from 'lucide-react';
 import { ApiError, importProfileBundle } from '../../../_lib/api';
 import type { ImportBundleSuccess } from '../../../_lib/profileTypes';
 import { cn } from '../../../_lib/cn';
+import { Button } from '@/app/_components/ui/Button';
 
 /**
  * Phase 2.4 (OB-66) — Bundle-Import-Button + Drag-Drop-Modal.
@@ -28,20 +29,10 @@ export function ImportBundleButton(): React.ReactElement {
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className={cn(
-          'inline-flex items-center gap-2 rounded-full px-4 py-2 text-[12px] font-semibold',
-          'border border-[color:var(--border)] bg-[color:var(--bg-soft)] text-[color:var(--fg)]',
-          'transition-colors duration-[var(--dur-base)]',
-          'hover:bg-[color:var(--gray-100)] hover:text-[color:var(--fg-strong)]',
-          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--accent)]',
-        )}
-      >
+      <Button variant="secondary" pill onClick={() => setOpen(true)}>
         <Upload className="size-4" aria-hidden />
         {t('button')}
-      </button>
+      </Button>
       {open ? (
         <ImportBundleModal
           onClose={() => setOpen(false)}
@@ -234,24 +225,18 @@ function ImportBundleModal({
         ) : null}
 
         <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md border border-[color:var(--border)] px-3 py-2 text-sm text-[color:var(--fg)]"
-          >
+          <Button variant="secondary" onClick={onClose}>
             {t('modal.cancel')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="primary"
             onClick={() => void onSubmit()}
             disabled={!file || busy}
-            className={cn(
-              'rounded-md bg-[color:var(--accent)] px-3 py-2 text-sm font-medium text-[color:var(--fg-on-dark)]',
-              'shadow-[var(--shadow-cta)] disabled:opacity-50',
-            )}
+            busy={busy}
+            busyLabel={t('modal.importing')}
           >
-            {busy ? t('modal.importing') : t('modal.import')}
-          </button>
+            {t('modal.import')}
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web-ui/vitest.config.ts b/web-ui/vitest.config.ts
index a36467e64..88c473be2 100644
--- a/web-ui/vitest.config.ts
+++ b/web-ui/vitest.config.ts
@@ -22,7 +22,11 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './app'),
+      // Match tsconfig's `@/*` -> `./*` (web-ui root), so `@/app/...` resolves
+      // the same in vitest as in tsc and Next. (The previous `@` -> ./app
+      // diverged from tsconfig; it surfaced once the first `@/app/...` imports
+      // landed.)
+      '@': path.resolve(__dirname, '.'),
     },
   },
 });