From afa6988ce4f30229875b558944778c7599b15778 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 16:30:19 +0000
Subject: [PATCH 1/6] Improve mobile search and composer layout

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/search-bar.tsx                 | 43 +++++++++----------
 .../_app+/recipients+/$recipientId.index.tsx  |  4 +-
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index ba88051..0d5a59d 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -39,10 +39,11 @@ export function SearchBar({
 		<Form
 			method="GET"
 			action={action}
-			className="flex flex-wrap items-center justify-center gap-2"
+			className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between"
 			onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
 		>
-			<div className="flex-1">
+			<div className="flex w-full items-center gap-2 sm:flex-1">
+				<div className="min-w-0 flex-1">
 				<Label htmlFor={id} className="sr-only">
 					Search
 				</Label>
@@ -54,46 +55,44 @@ export function SearchBar({
 					placeholder="Search"
 					className="w-full"
 					autoFocus={autoFocus}
-				/>
+					/>
+				</div>
+				<StatusButton
+					type="submit"
+					size="icon"
+					status={isSubmitting ? 'pending' : status}
+					className="flex h-12 w-12 shrink-0 items-center justify-center"
+				>
+					<Icon name="magnifying-glass" size="md" />
+					<span className="sr-only">Search</span>
+				</StatusButton>
 			</div>
 			{showDateFilter ? (
-				<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
-					<div className="w-full sm:w-[160px]">
-						<Label htmlFor={startDateId} className="sr-only">
-							Start date
-						</Label>
+				<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-end">
+					<div className="min-w-0 space-y-1 sm:w-[160px]">
+						<Label htmlFor={startDateId}>Start date</Label>
 						<Input
 							type="date"
 							name="startDate"
 							id={startDateId}
 							defaultValue={startDateValue}
+							placeholder="Start date"
 							className="w-full"
 						/>
 					</div>
-					<div className="w-full sm:w-[160px]">
-						<Label htmlFor={endDateId} className="sr-only">
-							End date
-						</Label>
+					<div className="min-w-0 space-y-1 sm:w-[160px]">
+						<Label htmlFor={endDateId}>End date</Label>
 						<Input
 							type="date"
 							name="endDate"
 							id={endDateId}
 							defaultValue={endDateValue}
+							placeholder="End date"
 							className="w-full"
 						/>
 					</div>
 				</div>
 			) : null}
-			<div>
-				<StatusButton
-					type="submit"
-					status={isSubmitting ? 'pending' : status}
-					className="flex w-full items-center justify-center"
-				>
-					<Icon name="magnifying-glass" size="md" />
-					<span className="sr-only">Search</span>
-				</StatusButton>
-			</div>
 		</Form>
 	)
 }
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index b4871a4..32d0f5d 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -643,11 +643,11 @@ export default function RecipientRoute() {
 					</div>
 				)}
 			</section>
-			<div className="flex flex-col gap-2">
+			<div className="flex flex-col gap-2 pb-6 sm:pb-8">
 				<newMessageFetcher.Form
 					method="POST"
 					action="new"
-					className="border-border/60 rounded-full border bg-white p-2 shadow-sm transition focus-within:rounded-[28px] focus-within:p-3"
+					className="border-border/50 rounded-full border bg-[hsl(var(--palette-cream))] p-2 transition focus-within:rounded-[28px] focus-within:border-border/70 focus-within:p-3"
 				>
 					<label htmlFor="new-message" className="sr-only">
 						Add a new message

From 54ddb63efcad052cf8193a850d3a0bbcd23dd76d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 17:14:44 +0000
Subject: [PATCH 2/6] Refine mobile composer styling

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/routes/_app+/recipients+/$recipientId.index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 32d0f5d..3ce807c 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -643,22 +643,22 @@ export default function RecipientRoute() {
 					</div>
 				)}
 			</section>
-			<div className="flex flex-col gap-2 pb-6 sm:pb-8">
+			<div className="flex flex-col gap-2 pb-8 sm:pb-10">
 				<newMessageFetcher.Form
 					method="POST"
 					action="new"
-					className="border-border/50 rounded-full border bg-[hsl(var(--palette-cream))] p-2 transition focus-within:rounded-[28px] focus-within:border-border/70 focus-within:p-3"
+					className="border-border/40 rounded-full border bg-white p-2 shadow-sm transition focus-within:rounded-[28px] focus-within:border-border/60 focus-within:shadow-md"
 				>
 					<label htmlFor="new-message" className="sr-only">
 						Add a new message
 					</label>
-					<div className="flex items-center gap-3">
+					<div className="flex items-center gap-2">
 						<textarea
 							id="new-message"
 							name="content"
 							ref={newMessageInputRef}
 							placeholder="Aa"
-							className="text-foreground placeholder:text-muted-foreground min-h-[44px] flex-1 resize-none rounded-full bg-transparent px-4 py-2 text-sm leading-relaxed focus-visible:outline-none"
+							className="text-foreground placeholder:text-muted-foreground min-h-[48px] flex-1 resize-none rounded-full bg-transparent px-4 py-2 text-sm leading-relaxed focus-visible:outline-none"
 							rows={1}
 							required
 						/>
@@ -666,7 +666,7 @@ export default function RecipientRoute() {
 							status={isCreating ? 'pending' : 'idle'}
 							type="submit"
 							size="pill"
-							className="shrink-0 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							className="shrink-0 bg-[hsl(var(--palette-green-300))] px-6 text-[hsl(var(--palette-dark-navy))] shadow-sm hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))]"
 						>
 							<Icon name="check">Add</Icon>
 						</StatusButton>

From dbef0cad61db9533ed26c7b71c97d39125fc11b1 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 17:37:53 +0000
Subject: [PATCH 3/6] Remove unsupported date placeholders

Co-authored-by: me <me@kentcdodds.com>
---
 app/components/search-bar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index 0d5a59d..841a7fe 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -76,7 +76,6 @@ export function SearchBar({
 							name="startDate"
 							id={startDateId}
 							defaultValue={startDateValue}
-							placeholder="Start date"
 							className="w-full"
 						/>
 					</div>
@@ -87,7 +86,6 @@ export function SearchBar({
 							name="endDate"
 							id={endDateId}
 							defaultValue={endDateValue}
-							placeholder="End date"
 							className="w-full"
 						/>
 					</div>

From 4dfd1651c3ed0a9992eb5d784c3820e0ef9dd371 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 17:49:31 +0000
Subject: [PATCH 4/6] Add button variants for search and add

Co-authored-by: me <me@kentcdodds.com>
---
 app/components/search-bar.tsx                       | 4 ++--
 app/components/ui/button.tsx                        | 3 +++
 app/routes/_app+/recipients+/$recipientId.index.tsx | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index 841a7fe..d043a6c 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -59,9 +59,9 @@ export function SearchBar({
 				</div>
 				<StatusButton
 					type="submit"
-					size="icon"
+					size="icon-lg"
 					status={isSubmitting ? 'pending' : status}
-					className="flex h-12 w-12 shrink-0 items-center justify-center"
+					className="shrink-0"
 				>
 					<Icon name="magnifying-glass" size="md" />
 					<span className="sr-only">Search</span>
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index e7a0e34..bcf9611 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -17,6 +17,8 @@ const buttonVariants = cva(
 				outline: 'border-border bg-card text-foreground hover:bg-muted border',
 				secondary:
 					'border-border text-foreground hover:bg-muted border bg-transparent',
+				success:
+					'bg-[hsl(var(--palette-green-300))] text-[hsl(var(--palette-dark-navy))] shadow-sm hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))]',
 				ghost: 'text-foreground hover:bg-muted',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
@@ -27,6 +29,7 @@ const buttonVariants = cva(
 				lg: 'h-14 px-8 text-base',
 				pill: 'h-10 px-8 text-sm',
 				icon: 'h-10 w-10 p-0',
+				'icon-lg': 'h-12 w-12 p-0',
 			},
 			icon: {
 				true: 'h-10 w-10 rounded-full p-2',
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 3ce807c..eb5da2c 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -665,8 +665,9 @@ export default function RecipientRoute() {
 						<StatusButton
 							status={isCreating ? 'pending' : 'idle'}
 							type="submit"
+							variant="success"
 							size="pill"
-							className="shrink-0 bg-[hsl(var(--palette-green-300))] px-6 text-[hsl(var(--palette-dark-navy))] shadow-sm hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))]"
+							className="shrink-0 px-6"
 						>
 							<Icon name="check">Add</Icon>
 						</StatusButton>

From 696f11fa62a68c434a35c51bd6082802cf6a226c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 17:57:00 +0000
Subject: [PATCH 5/6] Fix success button styling

Co-authored-by: me <me@kentcdodds.com>
---
 app/components/ui/button.tsx                        | 2 +-
 app/routes/_app+/recipients+/$recipientId.index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index bcf9611..e2b7433 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
 				secondary:
 					'border-border text-foreground hover:bg-muted border bg-transparent',
 				success:
-					'bg-[hsl(var(--palette-green-300))] text-[hsl(var(--palette-dark-navy))] shadow-sm hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))]',
+					'bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] shadow-sm hover:bg-[hsl(var(--palette-green-700))]',
 				ghost: 'text-foreground hover:bg-muted',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index eb5da2c..5d6c88d 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -667,7 +667,7 @@ export default function RecipientRoute() {
 							type="submit"
 							variant="success"
 							size="pill"
-							className="shrink-0 px-6"
+							className="shrink-0"
 						>
 							<Icon name="check">Add</Icon>
 						</StatusButton>

From 2e210593c87fecde0328d7264dff86950f244cba Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Feb 2026 17:57:50 +0000
Subject: [PATCH 6/6] Standardize button variants

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/ui/button.tsx                         | 10 ++++++++--
 app/routes/_app+/_auth+/forgot-password.tsx          |  3 ++-
 app/routes/_app+/_auth+/login.tsx                    |  3 ++-
 app/routes/_app+/_auth+/onboarding.tsx               |  3 ++-
 app/routes/_app+/_auth+/reset-password.tsx           |  3 ++-
 app/routes/_app+/_auth+/signup.tsx                   |  3 ++-
 app/routes/_app+/_auth+/verify.tsx                   |  3 ++-
 app/routes/_app+/_layout.tsx                         |  3 ++-
 app/routes/_app+/_marketing+/index.tsx               |  5 +++--
 app/routes/_app+/recipients+/$recipientId.index.tsx  | 12 ++++++------
 app/routes/_app+/recipients+/__editor.tsx            |  2 +-
 app/routes/_app+/recipients+/index.tsx               |  5 +++--
 app/routes/_app+/settings.profile+/change-number.tsx |  2 +-
 app/routes/_app+/settings.profile+/index.tsx         |  2 +-
 app/routes/_app+/settings.profile+/password.tsx      |  2 +-
 15 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index e2b7433..603aaa8 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -12,14 +12,20 @@ const buttonVariants = cva(
 			variant: {
 				default:
 					'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
+				brand:
+					'bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] shadow-sm',
+				'brand-soft':
+					'bg-[hsl(var(--palette-green-300))] text-[hsl(var(--palette-dark-navy))] hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))] shadow-sm',
+				warm:
+					'bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))] shadow-sm',
 				destructive:
 					'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
 				outline: 'border-border bg-card text-foreground hover:bg-muted border',
 				secondary:
 					'border-border text-foreground hover:bg-muted border bg-transparent',
-				success:
-					'bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] shadow-sm hover:bg-[hsl(var(--palette-green-700))]',
 				ghost: 'text-foreground hover:bg-muted',
+				'ghost-inverse':
+					'text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
diff --git a/app/routes/_app+/_auth+/forgot-password.tsx b/app/routes/_app+/_auth+/forgot-password.tsx
index dc831fa..adde23a 100644
--- a/app/routes/_app+/_auth+/forgot-password.tsx
+++ b/app/routes/_app+/_auth+/forgot-password.tsx
@@ -187,7 +187,8 @@ export default function ForgotPasswordRoute() {
 					</div>
 					<ErrorList errors={form.errors} id={form.errorId} />
 					<StatusButton
-						className="w-full bg-[hsl(var(--palette-hot-fire-red))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-fire-red))]"
+						variant="destructive"
+						className="w-full"
 						status={
 							forgotPassword.state === 'submitting'
 								? 'pending'
diff --git a/app/routes/_app+/_auth+/login.tsx b/app/routes/_app+/_auth+/login.tsx
index 8e954c6..dd06593 100644
--- a/app/routes/_app+/_auth+/login.tsx
+++ b/app/routes/_app+/_auth+/login.tsx
@@ -152,7 +152,8 @@ export default function LoginPage() {
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<StatusButton
-						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						variant="brand"
+						className="w-full"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_auth+/onboarding.tsx b/app/routes/_app+/_auth+/onboarding.tsx
index ab68893..82c37a7 100644
--- a/app/routes/_app+/_auth+/onboarding.tsx
+++ b/app/routes/_app+/_auth+/onboarding.tsx
@@ -217,7 +217,8 @@ export default function SignupRoute() {
 					<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 					<StatusButton
-						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						variant="brand"
+						className="w-full"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_auth+/reset-password.tsx b/app/routes/_app+/_auth+/reset-password.tsx
index c416594..692cafd 100644
--- a/app/routes/_app+/_auth+/reset-password.tsx
+++ b/app/routes/_app+/_auth+/reset-password.tsx
@@ -123,7 +123,8 @@ export default function ResetPasswordPage() {
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<StatusButton
-						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						variant="brand"
+						className="w-full"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_auth+/signup.tsx b/app/routes/_app+/_auth+/signup.tsx
index 293210a..9f1e372 100644
--- a/app/routes/_app+/_auth+/signup.tsx
+++ b/app/routes/_app+/_auth+/signup.tsx
@@ -174,7 +174,8 @@ export default function SignupRoute() {
 					</div>
 					<ErrorList errors={form.errors} id={form.errorId} />
 					<StatusButton
-						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						variant="brand"
+						className="w-full"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_auth+/verify.tsx b/app/routes/_app+/_auth+/verify.tsx
index 9e92c4b..bda909a 100644
--- a/app/routes/_app+/_auth+/verify.tsx
+++ b/app/routes/_app+/_auth+/verify.tsx
@@ -156,7 +156,8 @@ export default function VerifyRoute() {
 					/>
 					<StatusButton
 						size="lg"
-						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						variant="brand"
+						className="w-full"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_layout.tsx b/app/routes/_app+/_layout.tsx
index 3e58394..5974da3 100644
--- a/app/routes/_app+/_layout.tsx
+++ b/app/routes/_app+/_layout.tsx
@@ -289,7 +289,8 @@ function MobileMenu() {
 						<Button
 							asChild
 							size="lg"
-							className="mt-6 w-full bg-[hsl(var(--palette-orange))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-chestnut))]"
+							variant="warm"
+							className="mt-6 w-full"
 						>
 							<Link to="/login" onClick={() => setOpen(false)}>
 								<Icon name="star" size="sm" aria-hidden="true">
diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx
index ead948f..402c15d 100644
--- a/app/routes/_app+/_marketing+/index.tsx
+++ b/app/routes/_app+/_marketing+/index.tsx
@@ -67,7 +67,8 @@ export default function Index() {
 						<Button
 							asChild
 							size="lg"
-							className="w-full max-w-[320px] bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))] sm:w-auto"
+							variant="warm"
+							className="w-full max-w-[320px] sm:w-auto"
 						>
 							{user ? (
 								<Link to="/recipients">Open dashboard</Link>
@@ -234,7 +235,7 @@ export default function Index() {
 						<div className="flex flex-col gap-3 sm:flex-row">
 							<Button
 								asChild
-								className="bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))]"
+								variant="warm"
 							>
 								<Link to="/login">Get started</Link>
 							</Button>
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 5d6c88d..65ae038 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -665,9 +665,9 @@ export default function RecipientRoute() {
 						<StatusButton
 							status={isCreating ? 'pending' : 'idle'}
 							type="submit"
-							variant="success"
 							size="pill"
-							className="shrink-0"
+							variant="brand-soft"
+							className="shrink-0 px-6"
 						>
 							<Icon name="check">Add</Icon>
 						</StatusButton>
@@ -774,9 +774,9 @@ function MessageForms({ message }: { message: FutureMessage }) {
 							<StatusButton
 								form={updateContentForm.id}
 								status={updateIsPending ? 'pending' : 'idle'}
-								className="h-9 w-9 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
+								className="h-9 w-9 gap-0"
 								size="icon"
-								variant="ghost"
+								variant="ghost-inverse"
 								type="submit"
 								name="intent"
 								value={updateMessageContentActionIntent}
@@ -792,9 +792,9 @@ function MessageForms({ message }: { message: FutureMessage }) {
 						>
 							<DropdownMenuTrigger asChild>
 								<Button
-									variant="ghost"
+									variant="ghost-inverse"
 									size="icon"
-									className="h-9 w-9 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
+									className="h-9 w-9"
 									aria-label="Message actions"
 								>
 									<Icon name="dots-horizontal" size="sm" />
diff --git a/app/routes/_app+/recipients+/__editor.tsx b/app/routes/_app+/recipients+/__editor.tsx
index c1d3cf3..a36f730 100644
--- a/app/routes/_app+/recipients+/__editor.tsx
+++ b/app/routes/_app+/recipients+/__editor.tsx
@@ -233,7 +233,7 @@ export function RecipientEditor({
 							status={isPending ? 'pending' : 'idle'}
 							name="intent"
 							value={upsertRecipientActionIntent}
-							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							variant="brand"
 						>
 							<Icon name="check">{submitLabel}</Icon>
 						</StatusButton>
diff --git a/app/routes/_app+/recipients+/index.tsx b/app/routes/_app+/recipients+/index.tsx
index 33b3231..9bb4196 100644
--- a/app/routes/_app+/recipients+/index.tsx
+++ b/app/routes/_app+/recipients+/index.tsx
@@ -42,7 +42,7 @@ export default function RecipientsIndexRoute() {
 					variant="outline"
 					size="icon"
 					aria-label="Add recipient"
-					className="bg-muted hover:bg-card h-14 w-14 shadow-sm"
+					className="h-14 w-14 shadow-sm"
 				>
 					<Icon name="plus" size="xl" />
 				</ButtonLink>
@@ -148,7 +148,8 @@ export default function RecipientsIndexRoute() {
 						</div>
 						<ButtonLink
 							to="new"
-							className="flex w-full items-center justify-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:w-auto"
+							variant="brand"
+							className="flex w-full items-center justify-center gap-2 sm:w-auto"
 						>
 							<Icon name="plus">Add Recipient</Icon>
 						</ButtonLink>
diff --git a/app/routes/_app+/settings.profile+/change-number.tsx b/app/routes/_app+/settings.profile+/change-number.tsx
index 3c744bb..c7a5d6c 100644
--- a/app/routes/_app+/settings.profile+/change-number.tsx
+++ b/app/routes/_app+/settings.profile+/change-number.tsx
@@ -147,7 +147,7 @@ export default function ChangePhoneNumberIndex() {
 							<Link to="..">Cancel</Link>
 						</Button>
 						<StatusButton
-							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							variant="brand"
 							status={isPending ? 'pending' : (form.status ?? 'idle')}
 						>
 							Send Confirmation
diff --git a/app/routes/_app+/settings.profile+/index.tsx b/app/routes/_app+/settings.profile+/index.tsx
index 3b277b1..2bb93c3 100644
--- a/app/routes/_app+/settings.profile+/index.tsx
+++ b/app/routes/_app+/settings.profile+/index.tsx
@@ -260,7 +260,7 @@ function UpdateProfile() {
 					status={
 						fetcher.state !== 'idle' ? 'pending' : (form.status ?? 'idle')
 					}
-					className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+					variant="brand"
 				>
 					Save Changes
 				</StatusButton>
diff --git a/app/routes/_app+/settings.profile+/password.tsx b/app/routes/_app+/settings.profile+/password.tsx
index 0ef6e62..b790218 100644
--- a/app/routes/_app+/settings.profile+/password.tsx
+++ b/app/routes/_app+/settings.profile+/password.tsx
@@ -170,7 +170,7 @@ export default function ChangePasswordRoute() {
 						<StatusButton
 							type="submit"
 							status={isPending ? 'pending' : (form.status ?? 'idle')}
-							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							variant="brand"
 						>
 							Save
 						</StatusButton>