diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index ba88051d..d043a6c9 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,14 +55,22 @@ export function SearchBar({
 					placeholder="Search"
 					className="w-full"
 					autoFocus={autoFocus}
-				/>
+					/>
+				</div>
+				<StatusButton
+					type="submit"
+					size="icon-lg"
+					status={isSubmitting ? 'pending' : status}
+					className="shrink-0"
+				>
+					<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"
@@ -70,10 +79,8 @@ export function SearchBar({
 							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"
@@ -84,16 +91,6 @@ export function SearchBar({
 					</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/components/ui/button.tsx b/app/components/ui/button.tsx
index e7a0e349..603aaa87 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -12,12 +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',
 				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: {
@@ -27,6 +35,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+/_auth+/forgot-password.tsx b/app/routes/_app+/_auth+/forgot-password.tsx
index dc831fa8..adde23a8 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 8e954c68..dd065930 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 ab688932..82c37a7c 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 c416594f..692cafd7 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 293210a6..9f1e3726 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 9e92c4bc..bda909ad 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 3e583942..5974da3d 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 ead948f5..402c15db 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 b4871a44..65ae038d 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">
+			<div className="flex flex-col gap-2 pb-8 sm:pb-10">
 				<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/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,8 @@ 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))]"
+							variant="brand-soft"
+							className="shrink-0 px-6"
 						>
 							<Icon name="check">Add</Icon>
 						</StatusButton>
@@ -773,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}
@@ -791,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 c1d3cf33..a36f730e 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 33b3231c..9bb41968 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 3c744bb1..c7a5d6ca 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 3b277b11..2bb93c3f 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 0ef6e62b..b7902184 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>