diff --git a/apps/web/src/features/applications/components/application-card.tsx b/apps/web/src/features/applications/components/application-card.tsx
index faf23b958..1289e904f 100644
--- a/apps/web/src/features/applications/components/application-card.tsx
+++ b/apps/web/src/features/applications/components/application-card.tsx
@@ -21,7 +21,7 @@ export function ApplicationCard({ application, onClick, withMenu = false, draggi
 	return (
 		<div
 			className={cn(
-				"group relative grid gap-2 rounded-[10px] border border-line bg-surface p-3 shadow-e1 transition-colors duration-quick hover:border-line-2",
+				"group relative grid gap-2 rounded-[10px] border border-line bg-surface p-3 shadow-e1 transition-[border-color,scale] duration-quick ease-enter hover:border-line-2 active:not-has-[[data-slot=button]:active]:scale-[0.98]",
 				dragging && "rotate-1 shadow-e3",
 			)}
 		>
diff --git a/apps/web/src/features/assistant/assistant-panel.tsx b/apps/web/src/features/assistant/assistant-panel.tsx
index 85c2d143d..7cbef0636 100644
--- a/apps/web/src/features/assistant/assistant-panel.tsx
+++ b/apps/web/src/features/assistant/assistant-panel.tsx
@@ -358,7 +358,7 @@ function EmptyState({ document, disabled, onPick }: EmptyStateProps) {
 							type="button"
 							disabled={disabled}
 							onClick={() => onPick(suggestion.label)}
-							className="flex min-h-11 w-full items-center gap-3 rounded-lg border border-line px-3 py-2 text-start transition-colors duration-quick hover:bg-hover disabled:opacity-60"
+							className="flex min-h-11 w-full items-center gap-3 rounded-lg border border-line px-3 py-2 text-start transition-[background-color,scale] duration-quick ease-enter hover:bg-hover enabled:active:scale-[0.98] disabled:opacity-60"
 						>
 							<Icon name={suggestion.icon} size={20} className="shrink-0 text-ink-2" />
 							<span className="grid min-w-0">
@@ -489,7 +489,10 @@ function ConversationRow({ thread, current, detail, onOpen, onDelete }: Conversa
 				type="button"
 				aria-current={current ? "true" : undefined}
 				onClick={onOpen}
-				className={cn("grid min-w-0 flex-1 rounded-lg px-3 py-2 text-start", current && "bg-sunken")}
+				className={cn(
+					"grid min-w-0 flex-1 rounded-lg px-3 py-2 text-start transition-colors duration-quick ease-enter active:bg-press",
+					current && "bg-sunken",
+				)}
 			>
 				<span className="truncate font-medium text-sm">{thread.title}</span>
 				<span className="truncate text-ink-3 text-xs">{detail}</span>
@@ -498,7 +501,7 @@ function ConversationRow({ thread, current, detail, onOpen, onDelete }: Conversa
 				icon="close"
 				label={t`Delete ${thread.title}`}
 				size="icon-sm"
-				className="me-1 text-ink-3 opacity-0 transition-[opacity,background-color,border-color,color,filter] focus-visible:opacity-100 group-hover/row:opacity-100"
+				className="me-1 text-ink-3 opacity-0 transition-[opacity,background-color,border-color,color,filter,scale] focus-visible:opacity-100 group-hover/row:opacity-100"
 				onClick={onDelete}
 			/>
 		</li>
diff --git a/apps/web/src/features/assistant/conversation.tsx b/apps/web/src/features/assistant/conversation.tsx
index be17530b4..6539322f0 100644
--- a/apps/web/src/features/assistant/conversation.tsx
+++ b/apps/web/src/features/assistant/conversation.tsx
@@ -669,7 +669,7 @@ export function Composer(props: ComposerProps) {
 					disabled={!streaming && (!hasText || disabled)}
 					onClick={streaming ? props.onStop : submit}
 					className={cn(
-						"grid size-[34px] shrink-0 place-items-center rounded-lg transition-colors duration-quick",
+						"grid size-[34px] shrink-0 place-items-center rounded-lg transition-[background-color,color,scale] duration-quick ease-enter enabled:active:scale-[0.97]",
 						streaming ? "bg-ink text-bg" : hasText ? "bg-accent text-on-accent" : "bg-sunken text-ink-3",
 					)}
 				>
diff --git a/apps/web/src/features/documents/document-card.tsx b/apps/web/src/features/documents/document-card.tsx
index f57821501..06a028731 100644
--- a/apps/web/src/features/documents/document-card.tsx
+++ b/apps/web/src/features/documents/document-card.tsx
@@ -125,8 +125,9 @@ export function DocumentCard({ document, onTags, onLink }: DocumentItemProps) {
 					document={document}
 					label={document.name}
 					className={cn(
-						"relative block aspect-page overflow-hidden rounded-[6px] shadow-[0_0_0_1px_var(--line),var(--shadow-1)] transition-[transform,box-shadow] duration-quick hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--line),var(--shadow-2)]",
-						isNew && "shadow-[0_0_0_2px_var(--accent),var(--shadow-1)]",
+						"relative block aspect-page overflow-hidden rounded-[6px] shadow-[0_0_0_1px_var(--line),var(--shadow-1)] transition-[translate,scale,box-shadow] duration-quick ease-enter hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--line),var(--shadow-2)] active:scale-[0.98]",
+						isNew &&
+							"shadow-[0_0_0_2px_var(--accent),var(--shadow-1)] hover:shadow-[0_0_0_2px_var(--accent),var(--shadow-2)]",
 						document.trashedAt && "pointer-events-none",
 					)}
 				>
diff --git a/apps/web/src/features/documents/documents-page.tsx b/apps/web/src/features/documents/documents-page.tsx
index f46ad48e5..8b939876f 100644
--- a/apps/web/src/features/documents/documents-page.tsx
+++ b/apps/web/src/features/documents/documents-page.tsx
@@ -160,7 +160,7 @@ export function DocumentsPage({ search, onSearchChange }: DocumentsPageProps) {
 											})
 										}
 										className={cn(
-											"h-7 rounded-full border px-3 text-[13px] transition-colors duration-quick",
+											"h-7 rounded-full border px-3 text-[13px] transition-[background-color,border-color,color,scale] duration-quick ease-enter active:scale-[0.97]",
 											active
 												? "border-accent bg-accent-soft text-accent-text"
 												: "border-line-2 text-ink-2 hover:bg-hover",
diff --git a/apps/web/src/features/documents/new-document-dialog.tsx b/apps/web/src/features/documents/new-document-dialog.tsx
index 2a02883cd..59beccfbb 100644
--- a/apps/web/src/features/documents/new-document-dialog.tsx
+++ b/apps/web/src/features/documents/new-document-dialog.tsx
@@ -282,7 +282,7 @@ export function NewDocumentDialog({ data }: { data?: NewDocumentDialogData | und
 					const file = event.dataTransfer.files[0];
 					if (file) void importFile(file);
 				}}
-				className="flex items-start gap-4 rounded-xl border-[1.5px] border-line-2 border-dashed p-5 text-start transition-colors duration-quick hover:border-accent hover:bg-accent-soft"
+				className="flex items-start gap-4 rounded-xl border-[1.5px] border-line-2 border-dashed p-5 text-start transition-[background-color,border-color,scale] duration-quick ease-enter hover:border-accent hover:bg-accent-soft active:scale-[0.98]"
 			>
 				<span className="grid size-11 shrink-0 place-items-center rounded-[10px] bg-sunken text-ink-2">
 					<Icon name="upload_file" size={24} />
@@ -420,7 +420,7 @@ function ChoiceTile({ icon, title, description, onClick, disabled }: ChoiceTileP
 			type="button"
 			disabled={disabled}
 			onClick={onClick}
-			className="flex items-start gap-3 rounded-xl border border-line p-4 text-start transition-colors duration-quick hover:border-line-2 hover:bg-hover disabled:opacity-60"
+			className="flex items-start gap-3 rounded-xl border border-line p-4 text-start transition-[background-color,border-color,scale] duration-quick ease-enter hover:border-line-2 hover:bg-hover enabled:active:scale-[0.97] disabled:opacity-60"
 		>
 			<Icon name={icon} size={22} className="mt-0.5 text-ink-2" />
 			<span className="grid gap-0.5">
@@ -578,7 +578,7 @@ function CopyForJob({ initialSourceId, initialJobId, onBack, onCreated }: CopyFo
 								setName(null);
 							}}
 							className={cn(
-								"flex h-8 items-center gap-1.5 rounded-full border px-3 text-[13px] transition-colors duration-quick",
+								"flex h-8 items-center gap-1.5 rounded-full border px-3 text-[13px] transition-[background-color,border-color,color,scale] duration-quick ease-enter active:scale-[0.97]",
 								jobId === option.id
 									? "border-accent bg-accent-soft text-accent-text"
 									: "border-line-2 text-ink-2 hover:bg-hover",
diff --git a/apps/web/src/features/resume/editor/design/style-groups.tsx b/apps/web/src/features/resume/editor/design/style-groups.tsx
index b8405313c..a1390c86f 100644
--- a/apps/web/src/features/resume/editor/design/style-groups.tsx
+++ b/apps/web/src/features/resume/editor/design/style-groups.tsx
@@ -182,7 +182,7 @@ export function ColorGroup() {
 						value={accent.hex}
 						aria-label={accent.label}
 						title={accent.label}
-						className="aspect-square cursor-pointer rounded-full transition-shadow duration-quick data-checked:shadow-[0_0_0_2px_var(--surface),0_0_0_4px_var(--swatch)]"
+						className="aspect-square cursor-pointer rounded-full transition-[box-shadow,scale] duration-quick ease-enter active:scale-[0.97] data-checked:shadow-[0_0_0_2px_var(--surface),0_0_0_4px_var(--swatch)]"
 						style={{ backgroundColor: accent.hex, "--swatch": accent.hex } as CSSProperties}
 					/>
 				))}
diff --git a/apps/web/src/features/resume/editor/design/template-group.tsx b/apps/web/src/features/resume/editor/design/template-group.tsx
index eeff46619..bccb4b077 100644
--- a/apps/web/src/features/resume/editor/design/template-group.tsx
+++ b/apps/web/src/features/resume/editor/design/template-group.tsx
@@ -190,7 +190,7 @@ function TemplateCard({ id, data, selected, onPreview }: TemplateCardProps) {
 		>
 			<span
 				className={cn(
-					"relative block aspect-page overflow-hidden rounded-md border border-line bg-white shadow-e1 transition-[transform,box-shadow] duration-quick group-hover/card:-translate-y-0.5 group-hover/card:shadow-e2",
+					"relative block aspect-page overflow-hidden rounded-md border border-line bg-white shadow-e1 transition-[translate,scale,box-shadow] duration-quick ease-enter group-hover/card:-translate-y-0.5 group-hover/card:shadow-e2 group-active/card:scale-[0.98]",
 					selected && "ring-2 ring-accent ring-offset-2 ring-offset-surface",
 				)}
 			>
diff --git a/apps/web/src/features/settings/preferences.tsx b/apps/web/src/features/settings/preferences.tsx
index 48eea77d6..fc205d8cf 100644
--- a/apps/web/src/features/settings/preferences.tsx
+++ b/apps/web/src/features/settings/preferences.tsx
@@ -73,7 +73,7 @@ function ThemeTiles() {
 					<label
 						key={option.value}
 						className={cn(
-							"flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border border-line-2 bg-surface font-medium text-sm transition-[border-color,box-shadow] duration-quick hover:bg-hover has-focus-visible:outline-2 has-focus-visible:outline-accent",
+							"flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border border-line-2 bg-surface font-medium text-sm transition-[background-color,border-color,box-shadow,scale] duration-quick ease-enter hover:bg-hover active:scale-[0.97] has-focus-visible:outline-2 has-focus-visible:outline-accent",
 							checked && "border-accent shadow-[0_0_0_3px_var(--accent-soft)]",
 						)}
 					>
diff --git a/apps/web/src/features/settings/root.tsx b/apps/web/src/features/settings/root.tsx
index 90046af41..6c3783823 100644
--- a/apps/web/src/features/settings/root.tsx
+++ b/apps/web/src/features/settings/root.tsx
@@ -25,7 +25,8 @@ function Row({ icon, label, value }: RowProps) {
 	);
 }
 
-const rowClass = "flex h-14 items-center gap-3 px-3.5 font-medium text-base";
+const rowClass =
+	"flex h-14 items-center gap-3 px-3.5 font-medium text-base transition-colors duration-quick ease-enter active:bg-press";
 
 /** Phones: the Account tab is the settings root, three rows showing their current values. */
 export function SettingsRoot() {
@@ -66,7 +67,7 @@ export function SettingsRoot() {
 				href="https://docs.rxresu.me"
 				target="_blank"
 				rel="noopener noreferrer"
-				className="flex h-12 items-center rounded-[14px] border border-line bg-surface px-3.5 font-medium"
+				className="flex h-12 items-center rounded-[14px] border border-line bg-surface px-3.5 font-medium transition-colors duration-quick ease-enter active:bg-press"
 			>
 				<Trans>Help & docs</Trans>
 			</a>
diff --git a/apps/web/src/routes/builder/letter/-components/design-panel.tsx b/apps/web/src/routes/builder/letter/-components/design-panel.tsx
index 18743dabf..068a0a8d4 100644
--- a/apps/web/src/routes/builder/letter/-components/design-panel.tsx
+++ b/apps/web/src/routes/builder/letter/-components/design-panel.tsx
@@ -152,7 +152,7 @@ export function LetterDesignPanel() {
 								>
 									<span
 										className={cn(
-											"relative block aspect-[1/1.414] overflow-hidden rounded-md border bg-white transition-shadow duration-quick",
+											"relative block aspect-[1/1.414] overflow-hidden rounded-md border bg-white transition-[translate,scale,box-shadow] duration-quick ease-enter group-hover/template:-translate-y-0.5 group-active/template:scale-[0.98]",
 											selected
 												? "border-accent shadow-[0_0_0_2px_var(--accent)]"
 												: "border-line group-hover/template:shadow-e2",
diff --git a/apps/web/src/routes/dashboard/-components/app-shell.tsx b/apps/web/src/routes/dashboard/-components/app-shell.tsx
index a0cfc4c67..b2d0f92c0 100644
--- a/apps/web/src/routes/dashboard/-components/app-shell.tsx
+++ b/apps/web/src/routes/dashboard/-components/app-shell.tsx
@@ -182,7 +182,7 @@ function NavLink({ item, current }: { item: NavItem; current: boolean }) {
 			to={item.to}
 			aria-current={current ? "page" : undefined}
 			className={cn(
-				"flex h-[34px] items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors duration-quick",
+				"flex h-[34px] items-center gap-2.5 rounded-lg px-2.5 text-sm transition-[background-color,color,scale] duration-quick ease-enter active:scale-[0.97]",
 				current ? "bg-sunken font-medium text-ink" : "text-ink-2 hover:bg-hover hover:text-ink",
 			)}
 		>
@@ -214,7 +214,7 @@ function Rail() {
 					type="button"
 					aria-label={t`Search or run…`}
 					onClick={() => openPalette(true)}
-					className="grid size-10 place-items-center rounded-lg text-ink-2 transition-colors hover:bg-hover"
+					className="grid size-10 place-items-center rounded-lg text-ink-2 transition-[background-color,scale] duration-quick ease-enter hover:bg-hover active:scale-[0.97]"
 				/>
 			</RailTip>
 			<nav aria-label={t`App`} className="grid gap-1">
@@ -225,7 +225,7 @@ function Rail() {
 							aria-label={item.label}
 							aria-current={isCurrent(item.to) ? "page" : undefined}
 							className={cn(
-								"grid size-10 place-items-center rounded-lg transition-colors duration-quick",
+								"grid size-10 place-items-center rounded-lg transition-[background-color,color,scale] duration-quick ease-enter active:scale-[0.97]",
 								isCurrent(item.to) ? "bg-sunken text-ink" : "text-ink-2 hover:bg-hover",
 							)}
 						/>
@@ -238,7 +238,7 @@ function Rail() {
 						<Link
 							to={trash.to}
 							aria-label={t`Trash`}
-							className="grid size-10 place-items-center rounded-lg text-ink-2 transition-colors hover:bg-hover"
+							className="grid size-10 place-items-center rounded-lg text-ink-2 transition-[background-color,scale] duration-quick ease-enter hover:bg-hover active:scale-[0.97]"
 						/>
 					</RailTip>
 				)}
@@ -302,21 +302,21 @@ function MobileTabs() {
 			<Link
 				to="/dashboard"
 				aria-current={isCurrent("/dashboard") ? "page" : undefined}
-				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5"
+				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5 transition-[scale] duration-quick ease-enter active:scale-[0.97]"
 			>
 				{tab("description", t`Documents`, isCurrent("/dashboard"))}
 			</Link>
 			<Link
 				to="/dashboard/applications"
 				aria-current={isCurrent("/dashboard/applications") ? "page" : undefined}
-				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5"
+				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5 transition-[scale] duration-quick ease-enter active:scale-[0.97]"
 			>
 				{tab("work", t`Applications`, isCurrent("/dashboard/applications"))}
 			</Link>
 			<button
 				type="button"
 				onClick={() => openDialog("document.new", undefined)}
-				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5"
+				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5 transition-[scale] duration-quick ease-enter active:scale-[0.97]"
 			>
 				<span className="grid h-[26px] w-[34px] place-items-center rounded-full bg-accent text-on-accent">
 					<Icon name="add" size={20} />
@@ -329,7 +329,7 @@ function MobileTabs() {
 			<Link
 				to="/dashboard/settings"
 				aria-current={isCurrent("/dashboard/settings") ? "page" : undefined}
-				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5"
+				className="flex min-h-[52px] flex-col items-center justify-center gap-0.5 transition-[scale] duration-quick ease-enter active:scale-[0.97]"
 			>
 				{tab("account_circle", t`Account`, isCurrent("/dashboard/settings"))}
 			</Link>
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index b6cc0d33b..c5191ad06 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@reactive-resume/utils/style";
 
 const buttonGroupVariants = cva(
-	"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 *:active:scale-100! has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 	{
 		variants: {
 			orientation: {
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index a2686f474..f988c0c39 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -5,7 +5,7 @@ import { Spinner } from "@reactive-resume/ui/components/spinner";
 import { cn } from "@reactive-resume/utils/style";
 
 const buttonVariants = cva(
-	"group/button touch-target relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border border-transparent font-medium text-sm transition-[background-color,border-color,color,filter] duration-quick ease-enter disabled:pointer-events-none aria-busy:cursor-progress [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"group/button touch-target relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border border-transparent font-medium text-sm transition-[background-color,border-color,color,filter,scale] duration-quick ease-enter disabled:pointer-events-none aria-busy:cursor-progress [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -27,7 +27,11 @@ const buttonVariants = cva(
 				"icon-lg": "size-11 rounded-lg",
 			},
 		},
-		compoundVariants: [{ variant: "ghost", size: "default", className: "px-3" }],
+		compoundVariants: [
+			{ variant: "ghost", size: "default", className: "px-3" },
+			// Press feedback; a text link doesn't press, and a loading button blocks activation.
+			{ variant: ["primary", "secondary", "ghost", "danger"], className: "not-aria-busy:active:scale-[0.97]" },
+		],
 		defaultVariants: {
 			variant: "primary",
 			size: "default",
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
index 71c7a211e..659515552 100644
--- a/packages/ui/src/components/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -9,7 +9,7 @@ const trackClassName =
 	"relative inline-flex shrink-0 items-center rounded-full bg-line-2 transition-colors duration-quick group-data-checked/switch:bg-accent group-data-disabled/switch:opacity-50 data-[size=default]:h-5 data-[size=default]:w-8 data-[size=touch]:h-[26px] data-[size=touch]:w-11";
 
 const thumbClassName =
-	"pointer-events-none block rounded-full bg-white shadow-e1 transition-transform duration-quick ease-enter group-data-[size=default]/track:ms-0.5 group-data-[size=touch]/track:ms-0.5 group-data-[size=default]/track:size-4 group-data-[size=touch]/track:size-[22px] group-data-[size=default]/track:data-checked:translate-x-3 group-data-[size=touch]/track:data-checked:translate-x-[18px] rtl:group-data-[size=default]/track:data-checked:-translate-x-3 rtl:group-data-[size=touch]/track:data-checked:-translate-x-[18px]";
+	"pointer-events-none block origin-left data-checked:origin-right rtl:origin-right rtl:data-checked:origin-left group-active/switch:not-data-disabled:scale-x-[1.15] rounded-full bg-white shadow-e1 transition-transform duration-quick ease-enter group-data-[size=default]/track:ms-0.5 group-data-[size=touch]/track:ms-0.5 group-data-[size=default]/track:size-4 group-data-[size=touch]/track:size-[22px] group-data-[size=default]/track:data-checked:translate-x-3 group-data-[size=touch]/track:data-checked:translate-x-[18px] rtl:group-data-[size=default]/track:data-checked:-translate-x-3 rtl:group-data-[size=touch]/track:data-checked:-translate-x-[18px]";
 
 function SwitchTrack({ size }: { size: SwitchSize }) {
 	return (