diff --git a/src/app/globals.css b/src/app/globals.css
index f4a1be6..e23eaad 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -75,9 +75,11 @@
   }
 
   :root {
-    --brand: 181 69% 14%;
-    --brand-600: 166 12% 48%;
-    --brand-300: 167 11% 69%;
+    --brand-50: 135 20% 96%;
     --brand-100: 129 18% 92%;
+    --brand-300: 167 11% 69%;
+    --brand-600: 166 12% 48%;
+    --brand-800: 181 69% 14%;
+    --brand-hero: 109 13% 67%;
   }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index eccdfb2..00f1388 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,18 +9,18 @@ export default function Home() {
   return (
     <main>
       {/* Hero */}
-      <div className="flex flex-col md:flex-row pt-8 px-6 lg:px-0 bg-brand/25">
+      <div className="flex flex-col md:flex-row pt-8 px-6 lg:px-0 bg-brand-hero">
         <div className="mx-auto max-w-2xl">
           <div>
             <span className="sr-only">Manual</span>
             <ManualLogo className="w-10 h-10" />
           </div>
           <div className="my-8 sm:mt-28">
-            <h1 className="font-medium tracking-tight text-6xl sm:text-8xl text-brand">
+            <h1 className="font-medium tracking-tight text-6xl sm:text-8xl text-brand-800">
               Be good
               <br /> to yourself
             </h1>
-            <p className="mt-5 text-lg text-brand">
+            <p className="mt-5 text-lg text-brand-800">
               We’re working around the clock to bring you a holistic approach to
               your wellness. From top to bottom, inside and out.
             </p>
@@ -40,7 +40,7 @@ export default function Home() {
 
       {/* Treatments */}
       <div className="flex flex-col items-center pt-10 sm:pt-16 pb-20 sm:pb-24 px-6 lg:px-0">
-        <h2 className="font-medium text-center text-brand tracking-tight text-3xl sm:text-4xl">
+        <h2 className="font-medium text-center text-brand-800 tracking-tight text-3xl sm:text-4xl">
           What we can help with
         </h2>
         <div className="mt-8 sm:mt-16">
@@ -53,18 +53,18 @@ export default function Home() {
               height={445}
               priority
             />
-            <span className="hidden sm:inline select-none text-brand/5 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
+            <span className="hidden sm:inline select-none text-brand-50 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
               01
             </span>
             <div className="sm:pl-32 sm:z-10">
               <div className="flex flex-col max-w-80 mt-4 sm:mt-0">
-                <h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
+                <h3 className="font-bold text-xs text-brand-600 uppercase tracking-wider">
                   Hair loss
                 </h3>
-                <h4 className="font-medium text-xl sm:text-2xl text-brand mt-2">
+                <h4 className="font-medium text-xl sm:text-2xl text-brand-800 mt-2">
                   Hair loss needn’t be irreversible. We can help!
                 </h4>
-                <p className="mt-5 text-brand">
+                <p className="mt-5 text-brand-800">
                   We’re working around the clock to bring you a holistic
                   approach to your wellness. From top to bottom, inside and out.
                 </p>
@@ -72,18 +72,18 @@ export default function Home() {
             </div>
           </div>
           <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:relative mt-20 sm:mt-44">
-            <span className="hidden sm:inline select-none text-brand/5 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
+            <span className="hidden sm:inline select-none text-brand-50 text-[450px] leading-none sm:absolute sm:right-[30%] sm:z-0">
               02
             </span>
-            <div className="sm:pl-32 sm:z-10">
+            <div className="sm:pr-32 sm:z-10">
               <div className="flex flex-col max-w-80 mt-4 sm:mt-0">
-                <h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
+                <h3 className="font-bold text-xs text-brand-600 uppercase tracking-wider">
                   Erectile dysfunction
                 </h3>
-                <h4 className="font-medium text-xl sm:text-2xl text-brand mt-2">
+                <h4 className="font-medium text-xl sm:text-2xl text-brand-800 mt-2">
                   Erections can be a tricky thing. But no need to feel down!
                 </h4>
-                <p className="mt-5 text-brand">
+                <p className="mt-5 text-brand-800">
                   We’re working around the clock to bring you a holistic
                   approach to your wellness. From top to bottom, inside and out.
                 </p>
@@ -127,7 +127,7 @@ const footerNavigation = {
 
 function Footer() {
   return (
-    <footer aria-labelledby="footer-heading" className="bg-brand/10">
+    <footer aria-labelledby="footer-heading" className="bg-brand-100">
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
@@ -137,7 +137,7 @@ function Footer() {
           <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
                   Product
                 </h3>
                 <ul role="list" className="mt-6 space-y-5">
@@ -145,7 +145,7 @@ function Footer() {
                     <li key={item.name}>
                       <a
                         href={item.href}
-                        className="leading-6 text-brand hover:text-brand/70"
+                        className="leading-6 text-brand-800 hover:text-brand-600"
                       >
                         {item.name}
                       </a>
@@ -154,7 +154,7 @@ function Footer() {
                 </ul>
               </div>
               <div className="mt-10 md:mt-0">
-                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
                   Company
                 </h3>
                 <ul role="list" className="mt-6 space-y-5">
@@ -162,7 +162,7 @@ function Footer() {
                     <li key={item.name}>
                       <a
                         href={item.href}
-                        className="leading-6 text-brand hover:text-brand/70"
+                        className="leading-6 text-brand-800 hover:text-brand-600"
                       >
                         {item.name}
                       </a>
@@ -173,7 +173,7 @@ function Footer() {
             </div>
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
                   Info
                 </h3>
                 <ul role="list" className="mt-6 space-y-5">
@@ -181,7 +181,7 @@ function Footer() {
                     <li key={item.name}>
                       <a
                         href={item.href}
-                        className="leading-6 text-brand hover:text-brand/70"
+                        className="leading-6 text-brand-800 hover:text-brand-600"
                       >
                         {item.name}
                       </a>
@@ -190,7 +190,7 @@ function Footer() {
                 </ul>
               </div>
               <div className="mt-10 md:mt-0">
-                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
                   Follow us
                 </h3>
                 <ul role="list" className="mt-6 flex gap-5">
@@ -215,8 +215,8 @@ function Footer() {
           </div>
         </div>
       </div>
-      <div className="mx-auto max-w-7xl border-brand/10 border-t">
-        <p className="text-center text-brand p-6">
+      <div className="mx-auto max-w-7xl border-brand-300/50 border-t">
+        <p className="text-center text-brand-800 p-6">
           &copy; 2024 Manual. All rights reserved.
         </p>
       </div>
diff --git a/src/components/quiz-button.tsx b/src/components/quiz-button.tsx
index b0dd67a..656c41b 100644
--- a/src/components/quiz-button.tsx
+++ b/src/components/quiz-button.tsx
@@ -22,10 +22,10 @@ export function QuizButton() {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="text-brand">
+          <DialogTitle className="text-brand-800">
             Is Manual Right For You?
           </DialogTitle>
-          <DialogDescription className="text-brand">
+          <DialogDescription className="text-brand-800">
             Help us provide you with the best possible care by answering a few
             quick questions.
           </DialogDescription>
diff --git a/src/components/quiz-navigation.tsx b/src/components/quiz-navigation.tsx
index cfa9b89..764a6db 100644
--- a/src/components/quiz-navigation.tsx
+++ b/src/components/quiz-navigation.tsx
@@ -28,7 +28,7 @@ export function QuizNavigation({
                   aria-hidden="true"
                   className="absolute inset-0 flex items-center"
                 >
-                  <div className="h-0.5 w-full bg-brand/50" />
+                  <div className="h-0.5 w-full bg-brand-50" />
                 </div>
                 <button
                   onClick={() => onButtonClick(questionIndex)}
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index 635a7e8..3ec2821 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -138,7 +138,7 @@ export function Quiz() {
                 }));
               }}
             />
-            <h3 className="font-medium text-2xl text-center mt-6 sm:mt-16">
+            <h3 className="font-medium text-brand-800 text-2xl text-center mt-6 sm:mt-16">
               {currentQuestion.title}
             </h3>
             <div
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 9644796..d270da0 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-brand/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-brand-800/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -59,7 +59,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left bg-brand/10 p-4",
+      "flex flex-col space-y-1.5 text-center sm:text-left bg-brand-100 p-4",
       className,
     )}
     {...props}
diff --git a/src/components/ui/logos/manual-logo.tsx b/src/components/ui/logos/manual-logo.tsx
index 76f4eca..45fa3c7 100644
--- a/src/components/ui/logos/manual-logo.tsx
+++ b/src/components/ui/logos/manual-logo.tsx
@@ -3,7 +3,7 @@ type ManualLogoProps = {
   className?: string;
 };
 
-export function ManualLogo({ className = "text-brand" }: ManualLogoProps) {
+export function ManualLogo({ className = "text-brand-800" }: ManualLogoProps) {
   return (
     <svg className={className} viewBox="0 0 40 40" fill="none">
       <path
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 21ba432..01f4c98 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -54,10 +54,12 @@ const config = {
           foreground: "hsl(var(--card-foreground))",
         },
         brand: {
-          DEFAULT: "hsl(var(--brand))",
-          600: "hsl(var(--brand-600))",
-          300: "hsl(var(--brand-300))",
+          50: "hsl(var(--brand-50))",
           100: "hsl(var(--brand-100))",
+          300: "hsl(var(--brand-300))",
+          600: "hsl(var(--brand-600))",
+          800: "hsl(var(--brand-800))",
+          hero: "hsl(var(--brand-hero))",
         },
       },
       borderRadius: {