diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 2d040414..a166e95a 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-lg text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
@@ -21,10 +21,10 @@ const buttonVariants = cva(
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
-				default: 'h-10 px-4 py-2',
+				default: 'h-12 px-6 py-3',
 				wide: 'px-24 py-5',
-				sm: 'h-9 rounded-md px-3',
-				lg: 'h-11 rounded-md px-8',
+				sm: 'h-9 rounded-lg px-3',
+				lg: 'h-14 rounded-lg px-8',
 				pill: 'px-12 py-3 leading-3',
 				icon: 'h-10 w-10',
 			},
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index 3bb4fe3a..b1b3a070 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 			className,
 		)}
 		{...props}
@@ -61,10 +61,10 @@ const DropdownMenuContent = React.forwardRef<
 		<DropdownMenuPrimitive.Content
 			ref={ref}
 			sideOffset={sideOffset}
-			className={cn(
-				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-				className,
-			)}
+		className={cn(
+			'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
 			{...props}
 		/>
 	</DropdownMenuPrimitive.Portal>
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 1bbc64d9..6090dedc 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex h-12 w-full rounded-lg border border-input bg-background px-4 py-3 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
 					className,
 				)}
 				ref={ref}
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
index 2e8ea5e0..b93f9b8c 100644
--- a/app/components/ui/textarea.tsx
+++ b/app/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex min-h-[80px] w-full rounded-lg border border-input bg-background px-4 py-3 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
 					className,
 				)}
 				ref={ref}
diff --git a/app/routes/_app+/_layout.tsx b/app/routes/_app+/_layout.tsx
index f2d86533..65696964 100644
--- a/app/routes/_app+/_layout.tsx
+++ b/app/routes/_app+/_layout.tsx
@@ -90,33 +90,33 @@ export default function Layout() {
 			<div className="flex-1">
 				<Outlet />
 			</div>
-			<footer className="container my-4 flex items-center justify-between pb-5">
+			<footer className="container my-4 flex items-center justify-between pb-5 border-t border-border pt-8">
 				<div className="flex items-center gap-4">
 					<Logo />
 					<nav>
 						<ul className="flex list-none flex-col gap-2 md:flex-row md:gap-4">
 							<li>
-								<Link to="/about" className="text-gray-600 hover:text-gray-900">
+								<Link to="/about" className="text-muted-foreground hover:text-foreground">
 									About
 								</Link>
 							</li>
 							<li>
 								<Link
 									to="/privacy"
-									className="text-gray-600 hover:text-gray-900"
+									className="text-muted-foreground hover:text-foreground"
 								>
 									Privacy
 								</Link>
 							</li>
 							<li>
-								<Link to="/tos" className="text-gray-600 hover:text-gray-900">
+								<Link to="/tos" className="text-muted-foreground hover:text-foreground">
 									Terms of Service
 								</Link>
 							</li>
 							<li>
 								<Link
 									to="/support"
-									className="text-gray-600 hover:text-gray-900"
+									className="text-muted-foreground hover:text-foreground"
 								>
 									Support
 								</Link>
@@ -124,7 +124,7 @@ export default function Layout() {
 							<li>
 								<Link
 									to="/contact"
-									className="text-gray-600 hover:text-gray-900"
+									className="text-muted-foreground hover:text-foreground"
 								>
 									Contact
 								</Link>
diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx
index a69e616c..9e657b76 100644
--- a/app/routes/_app+/_marketing+/index.tsx
+++ b/app/routes/_app+/_marketing+/index.tsx
@@ -8,13 +8,13 @@ export const meta: MetaFunction = () => [{ title: 'GratiText' }]
 export default function Index() {
 	const user = useOptionalUser()
 	return (
-		<main className="bg-gray-100 py-12">
+		<main className="bg-secondary/30 py-12">
 			<section className="container mx-auto px-4">
 				<div className="mb-12">
-					<h1 className="text-center text-4xl font-bold text-gray-900">
+					<h1 className="text-center text-h1 font-bold text-foreground">
 						Welcome to GratiText
 					</h1>
-					<p className="mt-4 text-center text-lg text-gray-700">
+					<p className="mt-4 text-center text-body-lg text-muted-foreground">
 						Strengthen your relationships with regular personalized messages of
 						love and gratitude.
 					</p>
@@ -23,27 +23,27 @@ export default function Index() {
 							<img
 								src="/images/smiling-phone-flowers.jpg"
 								alt="Attention grabbing visual"
-								className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg"
+								className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg ring-4 ring-white"
 							/>
-							<p className="mt-2 text-sm text-gray-500">
+							<p className="mt-2 text-sm text-muted-foreground">
 								Photo by{' '}
 								<a
-									className="underline"
+									className="underline hover:text-foreground"
 									href="https://unsplash.com/@goodfacesagency?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
 								>
 									Good Faces
 								</a>{' '}
 								on{' '}
 								<a
-									className="underline"
+									className="underline hover:text-foreground"
 									href="https://unsplash.com/photos/a-woman-walking-down-the-street-looking-at-her-cell-phone-58xYWBSr0aQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
 								>
 									Unsplash
 								</a>
 							</p>
 						</div>
-						<div className="flex flex-col justify-between self-stretch text-body-md text-gray-700 md:mt-0 md:w-1/2">
-							<div className="flex flex-col gap-2">
+						<div className="flex flex-col justify-between self-stretch text-body-md text-foreground md:mt-0 md:w-1/2">
+							<div className="flex flex-col gap-4">
 								<p>
 									GratiText empowers you to express love and appreciation
 									effortlessly.
@@ -51,18 +51,18 @@ export default function Index() {
 								<p>
 									Our platform schedules and delivers personal heartfelt
 									messages from you, making it easy to{' '}
-									<strong>stay connected</strong> and <em>nurture</em> your most
+									<strong className="text-primary">stay connected</strong> and <em className="text-accent not-italic">nurture</em> your most
 									important relationships.
 								</p>
 								<p>
 									Whether it's a simple thank you or a meaningful reminder of
 									your affection, GratiText helps you make a{' '}
-									<strong>lasting impact</strong> on the people you care about.
+									<strong className="text-primary">lasting impact</strong> on the people you care about.
 								</p>
 							</div>
-							<p className="align-baseline text-body-2xl">
+							<p className="mt-6 align-baseline text-body-xl font-medium text-foreground">
 								<small>
-									Messages written by you... A human. <strong>Not</strong> by
+									Messages written by you... A human. <strong className="text-destructive">Not</strong> by
 									AI.
 								</small>
 							</p>
@@ -70,53 +70,53 @@ export default function Index() {
 					</div>
 				</div>
 				<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Sign Up</h2>
-						<p className="mt-4 text-gray-600">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">Sign Up</h2>
+						<p className="mt-4 text-muted-foreground">
 							Create an account and start sending thoughtful messages to your
 							loved ones.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">
 							Add a Loved One
 						</h2>
-						<p className="mt-4 text-gray-600">
+						<p className="mt-4 text-muted-foreground">
 							Add the phone number of your loved one to get started.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">
 							Select a Schedule
 						</h2>
-						<p className="mt-4 text-gray-600">
+						<p className="mt-4 text-muted-foreground">
 							Choose how often you want to send messages.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">
 							Write a Personal Message
 						</h2>
-						<p className="mt-4 text-gray-600">
+						<p className="mt-4 text-muted-foreground">
 							Craft meaningful messages that will be sent to your loved ones.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Messages Sent</h2>
-						<p className="mt-4 text-gray-600">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">Messages Sent</h2>
+						<p className="mt-4 text-muted-foreground">
 							Our system sends your messages to your loved ones automatically on
 							the schedule.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Reminders</h2>
-						<p className="mt-4 text-gray-600">
+					<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
+						<h2 className="text-h4 font-bold text-foreground">Reminders</h2>
+						<p className="mt-4 text-muted-foreground">
 							Get notified if you've not yet queued up a message for delivery.
 						</p>
 					</div>
 				</div>
 				<div className="mt-12 text-center">
-					<Button asChild>
+					<Button asChild size="lg">
 						{user ? (
 							<Link to="/recipients">Your Recipients</Link>
 						) : (
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 387ce231..c22f2b79 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -11,37 +11,37 @@
 	--foreground-destructive: 345 82.7% 40.8%;
 
 	--background: 0 0% 100%;
-	--foreground: 222.2 84% 4.9%;
+	--foreground: 0 0% 10%;
 
-	--muted: 210 40% 93%;
-	--muted-foreground: 215.4 16.3% 30%;
+	--muted: 220 9% 46%;
+	--muted-foreground: 220 9% 46%;
 
 	--muted-secondary: 210 40% 93%;
 	--muted-secondary-foreground: 215.4 9.3% 41%;
 
 	--popover: 0 0% 100%;
-	--popover-foreground: 222.2 84% 4.9%;
+	--popover-foreground: 0 0% 10%;
 
 	--card: 0 0% 100%;
-	--card-foreground: 222.2 84% 4.9%;
+	--card-foreground: 0 0% 10%;
 
-	--border: 214.3 31.8% 91.4%;
-	--input: 214.3 31.8% 91.4%;
+	--border: 220 13% 91%;
+	--input: 220 13% 91%;
 	--input-invalid: 0 84.2% 60.2%;
 
-	--primary: 222.2 47.4% 11.2%;
-	--primary-foreground: 210 40% 98%;
+	--primary: 180 79% 24%;
+	--primary-foreground: 0 0% 100%;
 
-	--secondary: 210 20% 83%;
-	--secondary-foreground: 222.2 47.4% 11.2%;
+	--secondary: 44 77% 94%;
+	--secondary-foreground: 180 79% 24%;
 
-	--accent: 210 40% 90%;
-	--accent-foreground: 222.2 47.4% 11.2%;
+	--accent: 24 74% 55%;
+	--accent-foreground: 0 0% 100%;
 
 	--destructive: 0 70% 50%;
 	--destructive-foreground: 210 40% 98%;
 
-	--ring: 215 20.2% 65.1%;
+	--ring: 180 79% 24%;
 
 	--radius: 0.5rem;
 }