diff --git a/app/sections/header-image/description-text-item.tsx b/app/sections/header-image/description-text-item.tsx
index 4cf3ea5..b569103 100644
--- a/app/sections/header-image/description-text-item.tsx
+++ b/app/sections/header-image/description-text-item.tsx
@@ -13,7 +13,7 @@ let DescriptionTextItem = forwardRef<HTMLDivElement, DescriptionTextItemProps>((
   let { descriptionText, ...rest } = props;
   return (
     <div ref={ref} {...rest}>
-        <p className='font-sans mb-5 text-base font-normal leading-6' dangerouslySetInnerHTML={{ __html: descriptionText }}></p>
+        <p className='font-sans mb-5 font-normal leading-6' dangerouslySetInnerHTML={{ __html: descriptionText }}></p>
     </div>
   );
 });
diff --git a/app/sections/header-image/heading-item.tsx b/app/sections/header-image/heading-item.tsx
index a34ad39..095893f 100644
--- a/app/sections/header-image/heading-item.tsx
+++ b/app/sections/header-image/heading-item.tsx
@@ -18,7 +18,7 @@ let HeadingItem = forwardRef<HTMLDivElement, HeadingItemProps>((props, ref) => {
   } as CSSProperties;
   return (
     <div ref={ref} {...rest} style={headingStyle}>
-      <h1 className='font-sans mb-4 text-display font-medium leading-5'>{heading}</h1>
+      <h1 className='font-sans mb-4 text-4xl font-medium leading-5'>{heading}</h1>
     </div>
   );
 });
diff --git a/app/sections/header-image/subheading-item.tsx b/app/sections/header-image/subheading-item.tsx
index 82fdf30..3916d8a 100644
--- a/app/sections/header-image/subheading-item.tsx
+++ b/app/sections/header-image/subheading-item.tsx
@@ -18,7 +18,7 @@ let SubHeadingItem = forwardRef<HTMLDivElement, SubHeadingItemProps>((props, ref
   } as CSSProperties;
   return (
     <div ref={ref} {...rest} style={headingStyle}>
-      <p className='font-sans mb-4 text-heading font-normal leading-6'>{subHeading}</p>
+      <p className='font-sans mb-4 text-2xl font-normal leading-6'>{subHeading}</p>
     </div>
   );
 });
diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx
index e0c0260..c45c0be 100644
--- a/app/sections/product-information/product-detail.tsx
+++ b/app/sections/product-information/product-detail.tsx
@@ -37,7 +37,7 @@ export function ProductDetail({
             {learnMore && (
               <div className="">
                 <Link
-                  className="pb-px border-b border-primary/30 text-primary/50"
+                  className="pb-px border-b border-bar/30 text-body/50"
                   to={learnMore}
                 >
                   Learn more
diff --git a/app/sections/product-information/product-form.tsx b/app/sections/product-information/product-form.tsx
index 1f6ac45..7c607c9 100644
--- a/app/sections/product-information/product-form.tsx
+++ b/app/sections/product-information/product-form.tsx
@@ -79,7 +79,7 @@ export function ProductForm(props: {
                             <Listbox.Button
                               ref={closeRef}
                               className={clsx(
-                                'flex items-center justify-between w-full py-3 px-4 border border-primary',
+                                'flex items-center justify-between w-full py-3 px-4 border border-bar',
                                 open
                                   ? 'rounded-b md:rounded-t md:rounded-b-none'
                                   : 'rounded',
@@ -90,7 +90,7 @@ export function ProductForm(props: {
                             </Listbox.Button>
                             <Listbox.Options
                               className={clsx(
-                                'border-primary bg-contrast absolute bottom-12 z-30 grid h-48 w-full overflow-y-scroll rounded-t border px-2 py-2 transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none md:border-t-0 md:border-b',
+                                'border-bar bg-contrast absolute bottom-12 z-30 grid h-48 w-full overflow-y-scroll rounded-t border px-2 py-2 transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none md:border-t-0 md:border-b',
                                 open ? 'max-h-48' : 'max-h-0',
                               )}
                             >
@@ -105,7 +105,7 @@ export function ProductForm(props: {
                                       <Link
                                         to={to}
                                         className={clsx(
-                                          'text-primary w-full p-2 transition rounded flex justify-start items-center text-left cursor-pointer',
+                                          'text-body w-full p-2 transition rounded flex justify-start items-center text-left cursor-pointer',
                                           active && 'bg-primary/10',
                                         )}
                                         onClick={() => {
@@ -138,7 +138,7 @@ export function ProductForm(props: {
                         replace
                         className={clsx(
                           'leading-none py-1 border-b-[1.5px] cursor-pointer transition-all duration-200',
-                          isActive ? 'border-primary/50' : 'border-primary/0',
+                          isActive ? 'border-bar/50' : 'border-bar/0',
                           isAvailable ? 'opacity-100' : 'opacity-50',
                         )}
                       >
diff --git a/app/sections/testimonial/index.tsx b/app/sections/testimonial/index.tsx
index ec49d25..c0e1021 100644
--- a/app/sections/testimonial/index.tsx
+++ b/app/sections/testimonial/index.tsx
@@ -15,7 +15,7 @@ let Testimonial = forwardRef<HTMLElement, TestimonialProps>((props, ref) => {
     <section ref={ref} {...rest}>
       <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
         <div className="mx-auto max-w-screen-md text-center">
-          <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
+          <h2 className="mb-4 tracking-tight font-extrabold text-gray-900 dark:text-white">
             {heading}
           </h2>
           {description && (
diff --git a/app/sections/testimonial/item.tsx b/app/sections/testimonial/item.tsx
index 6a26efa..841763b 100644
--- a/app/sections/testimonial/item.tsx
+++ b/app/sections/testimonial/item.tsx
@@ -39,7 +39,7 @@ let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>(
       >
         <figure className="p-6 bg-gray-50 rounded dark:bg-gray-800">
           <blockquote className="text-sm text-gray-500 dark:text-gray-400">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            <h3 className="font-semibold text-gray-900 dark:text-white">
               {heading}
             </h3>
             <p className="my-4">"{content}"</p>