diff --git a/src/app/AppSidebar.css b/src/app/AppSidebar.css
index 47418e6..ea37e5d 100644
--- a/src/app/AppSidebar.css
+++ b/src/app/AppSidebar.css
@@ -200,31 +200,6 @@
 
 .sidebar__authBtn {
   flex: 1 1 0;
-  padding: 0.45rem 0.55rem;
-  border-radius: 12px;
-  border: 1px solid var(--sidebar-border);
-  background: transparent;
-  color: var(--sidebar-text);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background 160ms ease,
-    border-color 160ms ease;
-}
-
-.sidebar__authBtn:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: var(--sidebar-primary-dim);
-}
-
-.sidebar__authBtn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.sidebar__authBtn--ghost {
-  opacity: 0.9;
 }
 
 .sidebar__authSelect {
diff --git a/src/app/AppSidebar.tsx b/src/app/AppSidebar.tsx
index 8914a59..a57ebb3 100644
--- a/src/app/AppSidebar.tsx
+++ b/src/app/AppSidebar.tsx
@@ -22,6 +22,7 @@ import {
   X,
 } from "lucide-react";
 import { AuthSidebarPanel } from "@/app/auth/AuthContext";
+import { Button } from "@/components/primitives/button";
 
 const navClass = ({ isActive }: { isActive: boolean }) =>
   clsx("sidebar__link", isActive && "sidebar__link--active");
@@ -84,8 +85,10 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
     <aside className={clsx("sidebar", mobileNavOpen && "sidebar--mobileOpen")}>
       <div className="sidebar__brand">
         <span>Vortex</span>
-        <button
+        <Button
           type="button"
+          size="iconMd"
+          variant="ghost"
           className="sidebar__mobileToggle"
           onClick={() => setMobileNavOpen((open) => !open)}
           aria-expanded={mobileNavOpen}
@@ -99,7 +102,7 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
           ) : (
             <Menu className="sidebar__mobileToggleIcon" aria-hidden="true" />
           )}
-        </button>
+        </Button>
       </div>
       <div className="sidebar__mobilePanel">
         <AuthSidebarPanel />
diff --git a/src/app/auth/AuthContext.tsx b/src/app/auth/AuthContext.tsx
index 96e350e..693c9e0 100644
--- a/src/app/auth/AuthContext.tsx
+++ b/src/app/auth/AuthContext.tsx
@@ -22,6 +22,7 @@ import {
   signPolkadotMessage,
 } from "@/lib/polkadotExtension";
 import { governanceIdentityStatuses } from "@/lib/humanNodesUi";
+import { Button } from "@/components/primitives/button";
 
 type AuthState = {
   enabled: boolean;
@@ -330,23 +331,27 @@ export function AuthSidebarPanel() {
 
       <div className="sidebar__authButtons">
         {auth.authenticated ? (
-          <button
+          <Button
             type="button"
-            className="sidebar__authBtn sidebar__authBtn--ghost"
+            size="compact"
+            variant="ghost"
+            className="sidebar__authBtn"
             disabled={auth.loading}
             onClick={() => void auth.disconnect()}
           >
             Disconnect
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
             type="button"
+            size="compact"
+            variant="primary"
             className="sidebar__authBtn"
             disabled={auth.loading}
             onClick={() => void auth.connect()}
           >
             Connect
-          </button>
+          </Button>
         )}
       </div>
     </div>
diff --git a/src/components/AddressInline.tsx b/src/components/AddressInline.tsx
index 282d35d..4518021 100644
--- a/src/components/AddressInline.tsx
+++ b/src/components/AddressInline.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router";
 import { Check, Copy } from "lucide-react";
 import { shortAddress } from "@/lib/profileUi";
+import { Button } from "@/components/primitives/button";
 
 type AddressInlineProps = {
   address?: string | null;
@@ -57,9 +58,11 @@ export const AddressInline: React.FC<AddressInlineProps> = ({
         </span>
       )}
       {showCopy && normalizedAddress ? (
-        <button
+        <Button
           type="button"
-          className="hover:bg-surface-alt inline-flex h-6 w-6 items-center justify-center rounded-full text-muted transition hover:text-text"
+          size="iconXs"
+          variant="ghost"
+          className="shrink-0 text-muted hover:text-text"
           aria-label={copied ? "Copied" : "Copy address"}
           title={copied ? "Copied" : "Copy address"}
           onClick={() => void copy()}
@@ -69,7 +72,7 @@ export const AddressInline: React.FC<AddressInlineProps> = ({
           ) : (
             <Copy className="h-3.5 w-3.5" />
           )}
-        </button>
+        </Button>
       ) : null}
     </span>
   );
diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
index 5b27907..baa112b 100644
--- a/src/components/ExpandableCard.tsx
+++ b/src/components/ExpandableCard.tsx
@@ -5,6 +5,7 @@ import { ChevronDown } from "lucide-react";
 import { Card } from "@/components/primitives/card";
 import { GlassyCard } from "@/components/GlassyCard";
 import { Kicker } from "@/components/Kicker";
+import { Button } from "@/components/primitives/button";
 import { cn } from "@/lib/utils";
 
 type ExpandableCardProps = {
@@ -30,8 +31,10 @@ export function ExpandableCard({
 }: ExpandableCardProps) {
   const content = (
     <>
-      <button
+      <Button
         type="button"
+        size="content"
+        variant="bare"
         className="flex w-full flex-col gap-4 px-5 py-4 text-left transition hover:bg-[color:var(--surface-glass-hover-bg)] sm:flex-row sm:items-center sm:justify-between"
         aria-expanded={expanded}
         onClick={onToggle}
@@ -49,7 +52,7 @@ export function ExpandableCard({
             )}
           />
         </div>
-      </button>
+      </Button>
 
       {expanded ? (
         <div className="space-y-5 border-t border-border px-5 py-5">
diff --git a/src/components/GlassyRecordCard.tsx b/src/components/GlassyRecordCard.tsx
index 3c6a56d..740b0a7 100644
--- a/src/components/GlassyRecordCard.tsx
+++ b/src/components/GlassyRecordCard.tsx
@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
 
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
+import { Button } from "@/components/primitives/button";
 import { StageChip } from "@/components/StageChip";
 import { normalizePreviewText } from "@/lib/textPreview";
 import { cn } from "@/lib/utils";
@@ -53,8 +54,10 @@ export function GlassyRecordCard({
         className,
       )}
     >
-      <button
+      <Button
         type="button"
+        size="content"
+        variant="bare"
         className="glassy-record-card__button"
         aria-expanded={expanded}
         onClick={onToggle}
@@ -90,7 +93,7 @@ export function GlassyRecordCard({
             )}
           />
         </span>
-      </button>
+      </Button>
 
       {expanded ? (
         <div className="glassy-record-card__details">{children}</div>
diff --git a/src/components/Hint.tsx b/src/components/Hint.tsx
index 2f8c0b4..0b083af 100644
--- a/src/components/Hint.tsx
+++ b/src/components/Hint.tsx
@@ -206,12 +206,7 @@ const HintSurface: React.FC<HintSurfaceProps> = ({
         </p>
       </CardHeader>
       <CardContent className="hint-actions flex justify-center px-4 pt-1 pb-3">
-        <Button
-          size="sm"
-          variant="primary"
-          className="text-xs"
-          onClick={onNavigate}
-        >
+        <Button size="sm" variant="primary" onClick={onNavigate}>
           {actionLabel}
         </Button>
       </CardContent>
diff --git a/src/components/PageHint.tsx b/src/components/PageHint.tsx
index 07bbd54..ebfb3d5 100644
--- a/src/components/PageHint.tsx
+++ b/src/components/PageHint.tsx
@@ -28,12 +28,12 @@ export const PageHint: React.FC<PageHintProps> = ({ pageId, className }) => {
     <div className={cn("pagehint-root", className)}>
       <Button
         variant="ghost"
-        size="sm"
-        className="h-10 w-10 rounded-full border border-(--pagehint) bg-(--pagehint) text-(--pagehint-foreground) shadow-(--shadow-pagehint) hover:bg-(--pagehint-hover) hover:text-(--pagehint-foreground) focus-visible:ring-(--pagehint-dim)"
+        size="iconMd"
+        className="border border-(--pagehint) bg-(--pagehint) text-(--pagehint-foreground) shadow-(--shadow-pagehint) hover:bg-(--pagehint-hover) hover:text-(--pagehint-foreground) focus-visible:ring-(--pagehint-dim)"
         onClick={() => setOpen(true)}
         aria-label="Open page hint"
       >
-        <span className="text-3xl leading-none font-bold" aria-hidden="true">
+        <span className="text-base leading-none font-bold" aria-hidden="true">
           ?
         </span>
       </Button>
@@ -55,7 +55,7 @@ export const PageHint: React.FC<PageHintProps> = ({ pageId, className }) => {
               </div>
               <Button
                 variant="ghost"
-                size="sm"
+                size="iconSm"
                 aria-label="Close page hint"
                 onClick={() => setOpen(false)}
                 className="text-text"
diff --git a/src/components/ProposalNarrative.css b/src/components/ProposalNarrative.css
index ef9d0ae..941f1fa 100644
--- a/src/components/ProposalNarrative.css
+++ b/src/components/ProposalNarrative.css
@@ -75,13 +75,6 @@ ol.proposal-narrative__list {
   padding: 0.375rem;
 }
 
-.proposal-narrative-editor__toolbar button {
-  min-height: 2rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  font-size: 0.75rem;
-}
-
 .proposal-narrative-editor__input {
   display: block;
   width: 100%;
diff --git a/src/components/ProposalNarrativeEditor.tsx b/src/components/ProposalNarrativeEditor.tsx
index 01dc278..b26eb1a 100644
--- a/src/components/ProposalNarrativeEditor.tsx
+++ b/src/components/ProposalNarrativeEditor.tsx
@@ -139,7 +139,7 @@ export default function ProposalNarrativeEditor({
             key={label}
             aria-label={label}
             aria-controls={id}
-            size="sm"
+            size="toolbar"
             type="button"
             variant="ghost"
             onMouseDown={(event) => event.preventDefault()}
@@ -151,7 +151,7 @@ export default function ProposalNarrativeEditor({
         <Button
           aria-label="Link"
           aria-controls={id}
-          size="sm"
+          size="toolbar"
           type="button"
           variant="ghost"
           onMouseDown={(event) => event.preventDefault()}
diff --git a/src/components/VoteButton.tsx b/src/components/VoteButton.tsx
index cf71b09..69304a8 100644
--- a/src/components/VoteButton.tsx
+++ b/src/components/VoteButton.tsx
@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 
+import { Button } from "@/components/primitives/button";
 import { cn } from "@/lib/utils";
 import { SIM_AUTH_ENABLED } from "@/lib/featureFlags";
 import { useAuth } from "@/app/auth/AuthContext";
@@ -62,8 +63,10 @@ export function VoteButton({
       : undefined);
 
   return (
-    <button
+    <Button
       type="button"
+      size="content"
+      variant="bare"
       className={cn(
         baseClasses,
         sizeClasses[size],
@@ -82,6 +85,6 @@ export function VoteButton({
       <span className={size === "lg" ? "text-2xl leading-none" : ""}>
         {label}
       </span>
-    </button>
+    </Button>
   );
 }
diff --git a/src/components/WorkspaceHeader.tsx b/src/components/WorkspaceHeader.tsx
index 1935613..4297717 100644
--- a/src/components/WorkspaceHeader.tsx
+++ b/src/components/WorkspaceHeader.tsx
@@ -81,7 +81,7 @@ export function WorkspaceHeaderAction({
       type="button"
       size="sm"
       variant="outline"
-      className="w-36 text-sm font-semibold opacity-90 hover:opacity-100"
+      className="w-36"
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/src/components/discussions/ThreadPrimitives.tsx b/src/components/discussions/ThreadPrimitives.tsx
index 974c77d..0e9aa6f 100644
--- a/src/components/discussions/ThreadPrimitives.tsx
+++ b/src/components/discussions/ThreadPrimitives.tsx
@@ -209,33 +209,34 @@ export function ThreadList<
           variant={selectedThreadId === thread.id ? "panel" : "panelAlt"}
           radius="xl"
           shadow="none"
-          role="button"
-          tabIndex={0}
-          className="cursor-pointer px-4 py-3 transition hover:border-primary/60 focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
-          onClick={() => onSelect(thread.id)}
-          onKeyDown={(event) => {
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            onSelect(thread.id);
-          }}
+          className="overflow-hidden transition hover:border-primary/60"
         >
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-            <div className="min-w-0 flex-1 text-left">
-              <span className="text-xs font-semibold text-muted">
-                {categoryLabel(thread.category)} · {statusLabel(thread.status)}
-              </span>
-              <h3 className="mt-1 text-base font-semibold text-text">
-                {thread.title}
-              </h3>
-              <p className="mt-1 line-clamp-2 text-sm text-muted">
-                {thread.body}
-              </p>
-              <p className="mt-2 text-xs text-muted">
-                {thread.replies} replies · Updated{" "}
-                {formatDateTime(thread.updatedAt)}
-              </p>
+          <Button
+            type="button"
+            size="content"
+            variant="bare"
+            className="w-full cursor-pointer px-4 py-3 text-left"
+            onClick={() => onSelect(thread.id)}
+          >
+            <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div className="min-w-0 flex-1 text-left">
+                <span className="text-xs font-semibold text-muted">
+                  {categoryLabel(thread.category)} ·{" "}
+                  {statusLabel(thread.status)}
+                </span>
+                <h3 className="mt-1 text-base font-semibold text-text">
+                  {thread.title}
+                </h3>
+                <p className="mt-1 line-clamp-2 text-sm text-muted">
+                  {thread.body}
+                </p>
+                <p className="mt-2 text-xs text-muted">
+                  {thread.replies} replies · Updated{" "}
+                  {formatDateTime(thread.updatedAt)}
+                </p>
+              </div>
             </div>
-          </div>
+          </Button>
         </Surface>
       ))}
     </>
diff --git a/src/components/primitives/button.tsx b/src/components/primitives/button.tsx
index aa37e65..94f944e 100644
--- a/src/components/primitives/button.tsx
+++ b/src/components/primitives/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+  "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-[8px] [font-family:inherit] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -14,12 +14,20 @@ const buttonVariants = cva(
           "bg-transparent text-[var(--primary)] border border-border shadow-[var(--shadow-control)] hover:bg-[var(--primary-dim)] hover:border-[var(--primary)] focus-visible:ring-[var(--primary)] focus-visible:ring-offset-[var(--panel)]",
         outline:
           "bg-[var(--panel)] text-[var(--primary)] border border-[var(--primary)] shadow-[var(--shadow-control)] hover:bg-[var(--primary)] hover:text-[var(--primary-foreground)] focus-visible:ring-[var(--primary)] focus-visible:ring-offset-[var(--panel)]",
+        destructive:
+          "bg-transparent text-[var(--destructive)] border border-[var(--destructive)] shadow-[var(--shadow-control)] hover:bg-[var(--destructive)] hover:text-[var(--destructive-foreground)] focus-visible:ring-[var(--destructive)] focus-visible:ring-offset-[var(--panel)]",
+        bare: "min-w-0 whitespace-normal rounded-none bg-transparent p-0 text-[inherit] font-[inherit] shadow-none",
       },
       size: {
         compact: "h-8 min-w-16 px-3 text-xs",
         sm: "h-9 px-3 text-sm",
         md: "h-10 px-4 text-base",
         lg: "h-11 px-5 text-lg",
+        iconXs: "h-6 w-6 min-w-6 p-0 text-xs",
+        iconSm: "h-7 w-7 min-w-7 p-0 text-sm",
+        iconMd: "h-9 w-9 min-w-9 p-0 text-base",
+        toolbar: "h-8 px-2 text-xs",
+        content: "h-auto min-w-0 p-0 text-[inherit]",
       },
     },
     defaultVariants: {
@@ -38,9 +46,17 @@ export interface ButtonProps
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const resolvedVariant = variant ?? "primary";
+    const resolvedSize = size ?? "md";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size }), className)}
+        data-ui="button"
+        data-button-size={resolvedSize}
+        data-button-variant={resolvedVariant}
+        className={cn(
+          buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+          className,
+        )}
         ref={ref}
         {...props}
       />
diff --git a/src/components/primitives/tabs.tsx b/src/components/primitives/tabs.tsx
index 8dc15d0..b7f2ee8 100644
--- a/src/components/primitives/tabs.tsx
+++ b/src/components/primitives/tabs.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/primitives/button";
 
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
@@ -29,9 +30,11 @@ export function Tabs({
       {options.map((opt) => {
         const active = opt.value === value;
         return (
-          <button
+          <Button
             key={opt.value}
             type="button"
+            size="content"
+            variant="bare"
             aria-pressed={active}
             onClick={() =>
               onValueChange(
@@ -46,7 +49,7 @@ export function Tabs({
             )}
           >
             {opt.label}
-          </button>
+          </Button>
         );
       })}
     </div>
diff --git a/src/pages/Vortexopedia.tsx b/src/pages/Vortexopedia.tsx
index 8082e8f..2f3ef70 100644
--- a/src/pages/Vortexopedia.tsx
+++ b/src/pages/Vortexopedia.tsx
@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
 import { Pill } from "@/components/Pill";
 import { Kicker } from "@/components/Kicker";
 import { formatDateTime } from "@/lib/dateTime";
+import { Button } from "@/components/primitives/button";
 
 const Vortexopedia: React.FC = () => {
   const [search, setSearch] = useState("");
@@ -119,8 +120,10 @@ const Vortexopedia: React.FC = () => {
                 expandedId === item.id && "border-primary",
               )}
             >
-              <button
+              <Button
                 type="button"
+                size="content"
+                variant="bare"
                 className="w-full text-left"
                 onClick={() => toggleExpand(item.id)}
               >
@@ -132,7 +135,7 @@ const Vortexopedia: React.FC = () => {
                       </Kicker>
                       <CardTitle className="text-lg">{item.name}</CardTitle>
                     </div>
-                    <div className="flex items-center gap-2 text-xs text-muted">
+                    <div className="flex min-w-0 flex-wrap items-center justify-end gap-2 text-xs text-muted">
                       <Pill
                         size="sm"
                         tone="muted"
@@ -163,7 +166,7 @@ const Vortexopedia: React.FC = () => {
                     ))}
                   </div>
                 </CardHeader>
-              </button>
+              </Button>
               {expandedId === item.id && (
                 <CardContent className="space-y-3 text-sm text-foreground">
                   <div className="space-y-1">
diff --git a/src/pages/courts/components/CourtPrimitives.tsx b/src/pages/courts/components/CourtPrimitives.tsx
index caaa59b..49c63ee 100644
--- a/src/pages/courts/components/CourtPrimitives.tsx
+++ b/src/pages/courts/components/CourtPrimitives.tsx
@@ -57,9 +57,11 @@ export function CourtCopyValue({
       >
         {visibleValue}
       </span>
-      <button
+      <Button
         type="button"
-        className="hover:bg-surface-alt inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted transition hover:text-text"
+        size="iconSm"
+        variant="ghost"
+        className="shrink-0 text-muted hover:text-text"
         aria-label={status === "copied" ? `${label} copied` : `Copy ${label}`}
         title={
           status === "copied"
@@ -85,7 +87,7 @@ export function CourtCopyValue({
         ) : (
           <Copy className="h-3.5 w-3.5" />
         )}
-      </button>
+      </Button>
       <span className="sr-only" aria-live="polite">
         {feedback}
       </span>
diff --git a/src/pages/factions/FactionCreate.tsx b/src/pages/factions/FactionCreate.tsx
index 275f3e1..efa19c4 100644
--- a/src/pages/factions/FactionCreate.tsx
+++ b/src/pages/factions/FactionCreate.tsx
@@ -398,9 +398,10 @@ const FactionCreate: React.FC = () => {
             </div>
           ) : null}
 
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <Button
               type="button"
+              size="sm"
               variant="outline"
               onClick={() =>
                 setStep((prev) => (prev > 1 ? ((prev - 1) as 1 | 2 | 3) : prev))
@@ -409,9 +410,10 @@ const FactionCreate: React.FC = () => {
             >
               Back
             </Button>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center justify-end gap-2">
               <Button
                 type="button"
+                size="sm"
                 variant="outline"
                 onClick={onSaveDraft}
                 disabled={saving}
@@ -420,6 +422,7 @@ const FactionCreate: React.FC = () => {
               </Button>
               <Button
                 type="button"
+                size="sm"
                 variant="ghost"
                 onClick={onClearDraft}
                 disabled={saving}
@@ -429,6 +432,7 @@ const FactionCreate: React.FC = () => {
               {step < 3 ? (
                 <Button
                   type="button"
+                  size="sm"
                   onClick={() => setStep((prev) => (prev + 1) as 2 | 3)}
                   disabled={(step === 1 && !canGoNextStep1) || saving}
                 >
@@ -437,6 +441,7 @@ const FactionCreate: React.FC = () => {
               ) : (
                 <Button
                   type="button"
+                  size="sm"
                   onClick={onCreate}
                   disabled={!canSubmit || saving}
                 >
diff --git a/src/pages/factions/Factions.tsx b/src/pages/factions/Factions.tsx
index da8f9b0..cbb513a 100644
--- a/src/pages/factions/Factions.tsx
+++ b/src/pages/factions/Factions.tsx
@@ -105,7 +105,7 @@ const Factions: React.FC = () => {
     <div className="flex flex-col gap-6">
       <PageHint pageId="factions" />
       <div className="flex justify-end">
-        <Button asChild>
+        <Button asChild size="sm">
           <Link to="/app/factions/new">Create faction</Link>
         </Button>
       </div>
diff --git a/src/pages/human-nodes/FullHistory.tsx b/src/pages/human-nodes/FullHistory.tsx
index 3d8b06a..f5d26cf 100644
--- a/src/pages/human-nodes/FullHistory.tsx
+++ b/src/pages/human-nodes/FullHistory.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader } from "@/components/primitives/card";
+import { Button } from "@/components/primitives/button";
 import { PageHint } from "@/components/PageHint";
 import { PageHeader } from "@/components/PageHeader";
 import { SectionHeader } from "@/components/SectionHeader";
@@ -78,9 +79,9 @@ const FullHistory: React.FC = () => {
         <CardHeader className="pb-2">
           <div className="flex items-center justify-between">
             <SectionHeader>All actions</SectionHeader>
-            <ButtonLink to={`/app/human-nodes/${id ?? ""}`}>
-              Back to profile
-            </ButtonLink>
+            <Button asChild size="sm" variant="outline">
+              <Link to={`/app/human-nodes/${id ?? ""}`}>Back to profile</Link>
+            </Button>
           </div>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -119,16 +120,4 @@ const FullHistory: React.FC = () => {
   );
 };
 
-const ButtonLink: React.FC<{ to: string; children: React.ReactNode }> = ({
-  to,
-  children,
-}) => (
-  <Link
-    to={to}
-    className="rounded-md border border-border px-3 py-1 text-sm font-medium text-foreground hover:border-primary"
-  >
-    {children}
-  </Link>
-);
-
 export default FullHistory;
diff --git a/src/pages/human-nodes/components/HumanNodeHero.tsx b/src/pages/human-nodes/components/HumanNodeHero.tsx
index c5109f8..5935a6b 100644
--- a/src/pages/human-nodes/components/HumanNodeHero.tsx
+++ b/src/pages/human-nodes/components/HumanNodeHero.tsx
@@ -4,6 +4,7 @@ import { Surface } from "@/components/Surface";
 import { AvatarPlaceholder } from "@/components/AvatarPlaceholder";
 import { GovernanceStatusPills } from "@/components/GovernanceStatusPills";
 import { Kicker } from "@/components/Kicker";
+import { Button } from "@/components/primitives/button";
 import type { HumanNodeProfileDto } from "@/types/api";
 import { Check, Copy } from "lucide-react";
 
@@ -56,9 +57,11 @@ export function HumanNodeHero({
               {showShortBadge ? (
                 <Badge variant="muted">{shortAddressLabel}</Badge>
               ) : null}
-              <button
+              <Button
                 type="button"
-                className="hover:bg-surface-alt inline-flex h-7 w-7 items-center justify-center rounded-full text-muted transition hover:text-text"
+                size="iconSm"
+                variant="ghost"
+                className="text-muted hover:text-text"
                 onClick={onCopyAddress}
                 aria-label={copied ? "Copied" : "Copy address"}
                 title={copied ? "Copied" : "Copy address"}
@@ -68,7 +71,7 @@ export function HumanNodeHero({
                 ) : (
                   <Copy className="h-4 w-4" />
                 )}
-              </button>
+              </Button>
             </div>
           </div>
           <GovernanceStatusPills
diff --git a/src/pages/initiatives/Initiatives.tsx b/src/pages/initiatives/Initiatives.tsx
index 883dfc9..345331e 100644
--- a/src/pages/initiatives/Initiatives.tsx
+++ b/src/pages/initiatives/Initiatives.tsx
@@ -109,7 +109,7 @@ const Initiatives: React.FC = () => {
     <div className="flex flex-col gap-6">
       <div className="flex justify-end">
         {canCreate ? (
-          <Button asChild>
+          <Button asChild size="sm">
             <Link to="/app/initiatives/new">Create initiative</Link>
           </Button>
         ) : null}
diff --git a/src/pages/profile/components/ProfileHero.tsx b/src/pages/profile/components/ProfileHero.tsx
index f1796d5..e556e3f 100644
--- a/src/pages/profile/components/ProfileHero.tsx
+++ b/src/pages/profile/components/ProfileHero.tsx
@@ -4,6 +4,7 @@ import { Surface } from "@/components/Surface";
 import { AvatarPlaceholder } from "@/components/AvatarPlaceholder";
 import { GovernanceStatusPills } from "@/components/GovernanceStatusPills";
 import { Kicker } from "@/components/Kicker";
+import { Button } from "@/components/primitives/button";
 import type { HumanNodeProfileDto } from "@/types/api";
 import { Check, Copy } from "lucide-react";
 
@@ -53,9 +54,11 @@ export function ProfileHero({
                 {showShortBadge ? (
                   <Badge variant="muted">{shortAddressLabel}</Badge>
                 ) : null}
-                <button
+                <Button
                   type="button"
-                  className="hover:bg-surface-alt inline-flex h-7 w-7 items-center justify-center rounded-full text-muted transition hover:text-text"
+                  size="iconSm"
+                  variant="ghost"
+                  className="text-muted hover:text-text"
                   onClick={onCopyAddress}
                   aria-label={copied ? "Copied" : "Copy address"}
                   title={copied ? "Copied" : "Copy address"}
@@ -65,7 +68,7 @@ export function ProfileHero({
                   ) : (
                     <Copy className="h-4 w-4" />
                   )}
-                </button>
+                </Button>
               </div>
             ) : null}
           </div>
diff --git a/src/pages/proposals/Proposals.tsx b/src/pages/proposals/Proposals.tsx
index 1225dac..0b290e2 100644
--- a/src/pages/proposals/Proposals.tsx
+++ b/src/pages/proposals/Proposals.tsx
@@ -73,25 +73,15 @@ const Proposals: React.FC = () => {
       <PageHint pageId="proposals" />
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-wrap items-center gap-2">
-          <Button
-            asChild
-            size="sm"
-            variant="outline"
-            className="rounded-full px-4"
-          >
+          <Button asChild size="sm" variant="outline">
             <Link to={proposalDraftRoutes.public}>Public drafts</Link>
           </Button>
-          <Button
-            asChild
-            size="sm"
-            variant="outline"
-            className="rounded-full px-4"
-          >
+          <Button asChild size="sm" variant="outline">
             <Link to={proposalDraftRoutes.mine}>My drafts</Link>
           </Button>
         </div>
         <div className="flex flex-wrap items-center gap-2 sm:justify-end">
-          <Button asChild size="sm" className="rounded-full px-4">
+          <Button asChild size="sm">
             <Link to={proposalDraftRoutes.create}>Create proposal</Link>
           </Button>
         </div>
diff --git a/src/pages/proposals/draft/DraftPublicationActions.tsx b/src/pages/proposals/draft/DraftPublicationActions.tsx
index 5cff966..e0316d7 100644
--- a/src/pages/proposals/draft/DraftPublicationActions.tsx
+++ b/src/pages/proposals/draft/DraftPublicationActions.tsx
@@ -1,12 +1,10 @@
 import { Link } from "react-router";
 
 import { Button } from "@/components/primitives/button";
-import { cn } from "@/lib/utils";
 import type { DraftPublicationSummaryDto } from "@/types/api";
 import { CopyLinkButton } from "./CopyLinkButton";
 import { isPublicDraftVisible } from "./draftUi";
 import { useDraftPublicationActions } from "./useDraftPublicationActions";
-import "@/components/StageChip.css";
 
 type DraftPublicationActionsProps = {
   draftId: string;
@@ -45,8 +43,10 @@ export function DraftPublicationActions({
           : "Private";
     return (
       <div className="flex min-w-0 flex-col items-end gap-1.5">
-        <button
+        <Button
           type="button"
+          size="sm"
+          variant={isPublic ? "primary" : "outline"}
           aria-label={
             submitted
               ? "Submitted draft"
@@ -63,14 +63,11 @@ export function DraftPublicationActions({
                 ? "Public draft. Select to make it private."
                 : "Private draft. Select to publish it."
           }
-          className={cn(
-            "stage-chip inline-flex h-7 min-w-[4.75rem] items-center justify-center rounded-full px-3 text-xs font-semibold transition focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-panel focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60",
-            isPublic ? "stage-chip--passed" : "stage-chip--draft",
-          )}
+          className="min-w-24"
           onClick={() => void (isPublic ? unpublish() : publish())}
         >
           {label}
-        </button>
+        </Button>
         {publication.hasUnpublishedChanges && isPublic ? (
           <span className="text-[0.68rem] text-muted">
             Saved edits are private
diff --git a/src/pages/proposals/pool/ProposalPoolRulesModal.tsx b/src/pages/proposals/pool/ProposalPoolRulesModal.tsx
index 065cded..df3d56e 100644
--- a/src/pages/proposals/pool/ProposalPoolRulesModal.tsx
+++ b/src/pages/proposals/pool/ProposalPoolRulesModal.tsx
@@ -1,4 +1,5 @@
 import { Modal } from "@/components/Modal";
+import { Button } from "@/components/primitives/button";
 import { Surface } from "@/components/Surface";
 import { formatLoadError } from "@/lib/errorFormatting";
 
@@ -52,13 +53,14 @@ export const ProposalPoolRulesModal: React.FC<ProposalPoolRulesModalProps> = ({
       >
         <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
           <p className="text-lg font-semibold">Pool rules</p>
-          <button
+          <Button
             type="button"
-            className="text-sm text-muted hover:text-text"
+            size="compact"
+            variant="ghost"
             onClick={() => onOpenChange(false)}
           >
             Close
-          </button>
+          </Button>
         </div>
         <div className="space-y-2 text-sm text-muted">
           <ul className="list-disc space-y-1 pl-4">
@@ -85,27 +87,23 @@ export const ProposalPoolRulesModal: React.FC<ProposalPoolRulesModalProps> = ({
           </label>
         </Surface>
         <div className="mt-4 flex justify-end gap-2">
-          <button
+          <Button
             type="button"
-            className="rounded-full border border-border px-4 py-2 text-sm font-semibold text-text hover:bg-panel-alt"
+            size="sm"
+            variant="outline"
             onClick={() => onOpenChange(false)}
           >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
+            size="sm"
+            variant={confirmingDownvote ? "destructive" : "primary"}
             disabled={confirmDisabled}
-            className={`rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
-              confirmDisabled
-                ? "cursor-not-allowed bg-muted text-primary-foreground opacity-60"
-                : confirmingDownvote
-                  ? "border-2 border-destructive bg-destructive text-destructive-foreground hover:opacity-95"
-                  : "border-2 border-accent bg-accent text-accent-foreground hover:opacity-95"
-            }`}
             onClick={onConfirm}
           >
             {confirmLabel}
-          </button>
+          </Button>
         </div>
         {error ? (
           <p className="mt-3 text-sm text-destructive">
diff --git a/src/pages/proposals/proposalCreation/ProposalWizard.css b/src/pages/proposals/proposalCreation/ProposalWizard.css
index 7c54c76..af17029 100644
--- a/src/pages/proposals/proposalCreation/ProposalWizard.css
+++ b/src/pages/proposals/proposalCreation/ProposalWizard.css
@@ -17,10 +17,7 @@
 }
 
 .proposal-wizard__header-actions > * {
-  min-height: 2.5rem;
   min-width: 0;
-  font-size: 0.875rem;
-  opacity: 0.92;
 }
 
 .proposal-wizard__header-title,
@@ -324,7 +321,6 @@
 
 .proposal-wizard__actions > * {
   min-width: 7.5rem;
-  min-height: 2.75rem;
 }
 
 .proposal-wizard__recovery {
diff --git a/src/pages/proposals/proposalCreation/ProposalWizardShell.tsx b/src/pages/proposals/proposalCreation/ProposalWizardShell.tsx
index fbe4098..5616e0d 100644
--- a/src/pages/proposals/proposalCreation/ProposalWizardShell.tsx
+++ b/src/pages/proposals/proposalCreation/ProposalWizardShell.tsx
@@ -128,9 +128,11 @@ export function WizardProgress({
         const complete = index < currentIndex;
         const reachable = reachableStepIds.includes(step.id);
         return (
-          <button
+          <Button
             key={step.id}
             type="button"
+            size="content"
+            variant="bare"
             className={cn(
               "proposal-wizard__progress-step",
               current && "is-current",
@@ -148,7 +150,7 @@ export function WizardProgress({
             <span className="proposal-wizard__progress-label">
               {step.shortLabel}
             </span>
-          </button>
+          </Button>
         );
       })}
     </nav>
diff --git a/src/styles/base.css b/src/styles/base.css
index d4269d1..518664a 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -288,16 +288,6 @@ a {
   text-decoration: none;
 }
 
-button {
-  font: inherit;
-  cursor: pointer;
-}
-
-button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
 ::selection {
   background: var(--primary-dim);
 }
diff --git a/tests/e2e/public-drafts.spec.ts b/tests/e2e/public-drafts.spec.ts
index 08fca32..bbd50f2 100644
--- a/tests/e2e/public-drafts.spec.ts
+++ b/tests/e2e/public-drafts.spec.ts
@@ -310,6 +310,31 @@ test("My Drafts keeps private and public drafts together and toggles visibility"
   await expect(
     page.getByText(publicDraft.title, { exact: true }),
   ).toBeVisible();
+  const privateCard = page
+    .getByRole("article")
+    .filter({ hasText: privateDraft.title });
+  const visibilityControl = privateCard.getByRole("button", {
+    name: "Make draft public",
+  });
+  const editControl = privateCard.getByRole("link", {
+    name: "Continue editing",
+  });
+  const controlStyle = async (locator: typeof visibilityControl) =>
+    locator.evaluate((element) => {
+      const style = window.getComputedStyle(element);
+      return {
+        borderRadius: style.borderRadius,
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        height: element.getBoundingClientRect().height,
+      };
+    });
+  await expect(visibilityControl).toHaveAttribute("data-button-size", "sm");
+  await expect(editControl).toHaveAttribute("data-button-size", "sm");
+  expect(await controlStyle(visibilityControl)).toEqual(
+    await controlStyle(editControl),
+  );
   await page.getByRole("button", { name: "Make draft public" }).click();
   await expect(
     page.getByRole("button", { name: "Make draft private" }),
diff --git a/tests/unit/button-system.test.ts b/tests/unit/button-system.test.ts
new file mode 100644
index 0000000..40d7614
--- /dev/null
+++ b/tests/unit/button-system.test.ts
@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+
+function sourceFiles(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return sourceFiles(path);
+    return entry.name.endsWith(".tsx") ? [path] : [];
+  });
+}
+
+test("interactive buttons use the shared Button primitive", () => {
+  const violations = sourceFiles(join(process.cwd(), "src")).flatMap((path) => {
+    const source = readFileSync(path, "utf8");
+    const reasons = [
+      source.includes("<button") ? "native button" : null,
+      source.includes('role="button"') ? "simulated button role" : null,
+    ].filter(Boolean);
+    return reasons.map((reason) => `${path}: ${reason}`);
+  });
+
+  assert.deepEqual(violations, []);
+});
+
+test("draft visibility uses the standard action-button dimensions", () => {
+  const source = readFileSync(
+    join(
+      process.cwd(),
+      "src/pages/proposals/draft/DraftPublicationActions.tsx",
+    ),
+    "utf8",
+  );
+
+  assert.match(source, /variant=\{isPublic \? "primary" : "outline"\}/);
+  assert.match(source, /size="sm"/);
+  assert.doesNotMatch(source, /stage-chip|h-7|rounded-full/);
+});
diff --git a/tests/unit/workspace-header-contract.test.ts b/tests/unit/workspace-header-contract.test.ts
index fbfc023..c87273d 100644
--- a/tests/unit/workspace-header-contract.test.ts
+++ b/tests/unit/workspace-header-contract.test.ts
@@ -19,7 +19,7 @@ test("Initiatives and factions share one workspace header grammar", () => {
   assert.match(header, /type="button"/);
   assert.match(header, /size="sm"/);
   assert.match(header, /variant="outline"/);
-  assert.match(header, /className="w-36[^"]*opacity-90/);
+  assert.match(header, /className="w-36"/);
   assert.doesNotMatch(header, /asChild/);
 
   assert.match(initiative, /<WorkspaceHeader/);