diff --git a/examples/algolia/public/favicon.ico b/examples/algolia/public/favicon.ico
index 71401e29..a61f60f1 100644
Binary files a/examples/algolia/public/favicon.ico and b/examples/algolia/public/favicon.ico differ
diff --git a/examples/algolia/public/icons/ep-icon.svg b/examples/algolia/public/icons/ep-icon.svg
index 4ffd2301..6250de53 100644
--- a/examples/algolia/public/icons/ep-icon.svg
+++ b/examples/algolia/public/icons/ep-icon.svg
@@ -1,6 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <g>
-        <path fill="#03C" d="M34.77 54a7.7 7.7 0 0 1-5.44-13.14l15.28-15.31a2.88 2.88 0 1 0-4.07-4.07L25.1 36.92A7.69 7.69 0 0 1 14.22 26l15.44-15.4a18.26 18.26 0 0 1 25.83 25.83L40.21 51.71A7.68 7.68 0 0 1 34.77 54zm39.74 1.45L52.09 77.88a2.89 2.89 0 0 1-4.07 0 2.86 2.86 0 0 1 0-4.07l5.6-5.61 16.82-16.82a2.89 2.89 0 0 1 4.92 2 2.84 2.84 0 0 1-.85 2zm10.88-15a18.26 18.26 0 0 0-25.83 0L42.74 57.32l-5.6 5.61-18.69 18.69A7.69 7.69 0 0 0 29.33 92.5l5.93-5.94a18.54 18.54 0 0 0 1.88 2.2 18.26 18.26 0 0 0 25.83 0l22.42-22.43a18.26 18.26 0 0 0 0-25.83z" />
-        <path fill="#03C" d="M74.57 40.44a10.57 10.57 0 0 0-14.95 0L44.86 55.2l-.26.25a13.45 13.45 0 1 1-19-19l.25-.26L40.6 21.43a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0-15-14.95L15 25.3a3.07 3.07 0 0 0-.26.25 28.85 28.85 0 0 0-.3 40.45 2.44 2.44 0 0 0 .27.29 28.83 28.83 0 0 0 40.78 0 3.07 3.07 0 0 0 .25-.26l14.76-14.7a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0 0-15z" />
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 35 35">
+    <path fill="#2BCC7E"
+          d="M15.758 12.903c1.164 2.923 1.197 6.232.033 9.155l9.106-.027v-9.125l-9.139-.003Zm0 0 6.46-6.45L15.752 0 10 5.738l3.009 3.002a12.315 12.315 0 0 1 2.749 4.163Zm-2.749 13.294L10 29.199l5.751 5.738 6.468-6.453-6.428-6.426c-.603 1.514-1.554 2.913-2.782 4.139Z"/>
 </svg>
\ No newline at end of file
diff --git a/examples/algolia/public/icons/ep-logo.svg b/examples/algolia/public/icons/ep-logo.svg
index 39d5d3f2..c2498f42 100644
--- a/examples/algolia/public/icons/ep-logo.svg
+++ b/examples/algolia/public/icons/ep-logo.svg
@@ -1,12 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 500 100">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 151 35">
+    <g clip-path="url(#a)">
+        <path fill="currentColor"
+              d="M26.058 7.696H36.92v2.987h-7.601v4.378h7.341v2.987h-7.341v5.201h7.861v2.987H26.06V7.696Zm16.34 18.54h-3.102V7.696h3.102v18.54Zm12.765-11.974c.388.721.596 1.597.596 3.116v5.64c0 .566.232.824.672.824.18 0 .311 0 .491-.026v2.6a6.972 6.972 0 0 1-1.163.13c-1.553 0-2.665-.747-3.025-2.19l-.08-.308c-.877 1.52-2.145 2.498-4.085 2.498-2.636 0-4.37-1.468-4.37-3.786s1.5-3.502 4.553-4.12l2.688-.54c.829-.155 1.215-.49 1.215-1.288 0-1.262-.903-2.035-2.403-2.035-1.554 0-2.405.696-2.614 1.829l-3.076-.206c.285-2.42 2.405-4.404 5.819-4.404 2.273 0 4.007.824 4.782 2.266Zm-2.508 5.382c-.284.18-.569.31-1.42.541l-1.837.49c-1.551.412-2.12 1.081-2.12 1.905 0 .901.723 1.365 1.886 1.365 1.656 0 3.49-1.133 3.49-3.657v-.644Zm10.425 6.902c-3.102 0-4.707-1.468-5.507-3.27l2.534-1.649c.594 1.313 1.5 2.138 3.025 2.138 1.137 0 1.628-.593 1.628-1.21 0-.593-.44-1.057-1.525-1.572l-2.248-1.055c-1.94-.902-2.871-2.163-2.871-3.863 0-2.137 1.862-4.069 4.422-4.069 2.405 0 3.773 1.236 4.55 2.498l-2.353 1.803c-.492-.773-1.163-1.52-2.223-1.52-.88 0-1.474.49-1.474 1.134 0 .514.309.926 1.034 1.261l2.38 1.082c2.17.978 3.282 2.24 3.282 4.249 0 2.42-1.965 4.043-4.654 4.043Zm10.55-11.46v11.15h-3.102v-11.15h-2.586v-2.78h2.586V9.472l3.102-.515v3.347h2.585v2.781H73.63Zm5.186-7.648c1.085 0 1.81.722 1.81 1.803 0 1.082-.725 1.803-1.81 1.803-1.086 0-1.811-.721-1.811-1.803 0-1.081.725-1.803 1.81-1.803Zm1.551 18.799h-3.102V12.305h3.102v13.932Zm1.718-6.953c0-4.223 3.231-7.288 7.265-7.288 3.31 0 5.199 1.597 6.153 3.683l-2.611 1.519c-.749-1.39-1.837-2.318-3.516-2.318-2.406 0-4.137 1.88-4.137 4.404 0 2.498 1.731 4.378 4.136 4.378 1.811 0 2.897-.953 3.594-2.627l2.794 1.184c-.854 2.524-2.948 4.327-6.413 4.327-4.11 0-7.265-3.065-7.265-7.262Zm24.744-.154v7.106h-3.259V7.696h7.084c4.062 0 6.362 2.343 6.362 5.716 0 3.374-2.3 5.717-6.619 5.717h-3.568Zm0-8.447v5.46h3.568c2.043 0 3.154-1.082 3.154-2.73 0-1.649-1.086-2.73-2.999-2.73h-3.723Zm21.647 3.579c.388.721.594 1.597.594 3.116v5.64c0 .566.234.824.674.824.18 0 .309 0 .492-.026v2.6a6.99 6.99 0 0 1-1.166.13c-1.551 0-2.662-.747-3.025-2.19l-.077-.308c-.88 1.52-2.145 2.498-4.085 2.498-2.637 0-4.371-1.468-4.371-3.786s1.5-3.502 4.551-4.12l2.691-.54c.825-.155 1.214-.49 1.214-1.288 0-1.262-.906-2.035-2.405-2.035-1.551 0-2.405.696-2.611 1.829l-3.077-.206c.283-2.42 2.405-4.404 5.819-4.404 2.274 0 4.008.824 4.782 2.266Zm-2.508 5.382c-.283.18-.569.31-1.423.541l-1.834.49c-1.553.412-2.122 1.081-2.122 1.905 0 .901.725 1.365 1.888 1.365 1.654 0 3.491-1.133 3.491-3.657v-.644Zm9.734-4.558v11.15H132.6v-11.15h-2.586v-2.78h2.586V9.472l3.102-.515v3.347h2.588v2.781h-2.588Zm15.092.078c.18.746.206 1.364.206 2.652v8.42h-3.102v-7.7c0-.849-.026-1.287-.103-1.75-.26-1.236-1.037-1.931-2.38-1.931-1.448 0-2.405.798-2.768 2.008-.103.36-.205.773-.205 1.88v7.493h-3.103V7.696h3.103v6.798c.774-1.365 2.145-2.498 4.11-2.498 2.303 0 3.777 1.34 4.242 3.168Z"/>
+        <path fill="#2BCC7E"
+              d="M5.758 12.903c1.164 2.923 1.197 6.232.033 9.155l9.106-.027v-9.125l-9.139-.003Zm0 0 6.46-6.45L5.752 0 0 5.738 3.009 8.74a12.315 12.315 0 0 1 2.749 4.163ZM3.009 26.197 0 29.199l5.751 5.738 6.468-6.453-6.428-6.425c-.603 1.514-1.554 2.912-2.782 4.138Z"/>
+    </g>
     <defs>
         <clipPath id="a">
-            <path fill="none" d="M6.28 5.25h488.24v89.5H6.28V5.25z" class="cls-1"/>
+            <path fill="#fff" d="M0 0h151v35H0z"/>
         </clipPath>
     </defs>
-    <g class="cls-2" clip-path="url(&quot;#a&quot;)">
-        <path fill="#03C" d="M34.77 54a7.7 7.7 0 0 1-5.44-13.14l15.28-15.31a2.88 2.88 0 1 0-4.07-4.07L25.1 36.92A7.69 7.69 0 0 1 14.22 26l15.44-15.4a18.26 18.26 0 0 1 25.83 25.83L40.21 51.71A7.68 7.68 0 0 1 34.77 54zm39.74 1.45L52.09 77.88a2.89 2.89 0 0 1-4.07 0 2.86 2.86 0 0 1 0-4.07l5.6-5.61 16.82-16.82a2.89 2.89 0 0 1 4.92 2 2.84 2.84 0 0 1-.85 2zm10.88-15a18.26 18.26 0 0 0-25.83 0L42.74 57.32l-5.6 5.61-18.69 18.69A7.69 7.69 0 0 0 29.33 92.5l5.93-5.94a18.54 18.54 0 0 0 1.88 2.2 18.26 18.26 0 0 0 25.83 0l22.42-22.43a18.26 18.26 0 0 0 0-25.83z" class="cls-3"/>
-        <path fill="#03C" d="M74.57 40.44a10.57 10.57 0 0 0-14.95 0L44.86 55.2l-.26.25a13.45 13.45 0 1 1-19-19l.25-.26L40.6 21.43a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0-15-14.95L15 25.3a3.07 3.07 0 0 0-.26.25 28.85 28.85 0 0 0-.3 40.45 2.44 2.44 0 0 0 .27.29 28.83 28.83 0 0 0 40.78 0 3.07 3.07 0 0 0 .25-.26l14.76-14.7a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0 0-15z" class="cls-3"/>
-        <path fill="#333" d="M494.52 46.42v22.65h-11.07v-21c0-4.58-2.87-6.72-6.41-6.72-4.06 0-6.87 2.36-6.87 7.6v20.12h-11.06V19l11.06-3.36v20.01c2-2.73 5.68-4.5 10.55-4.5 7.45 0 13.8 5.31 13.8 15.27zm-49.28-3.61v13.06c0 3.17 2.73 3.46 7.6 3.17v10c-14.46 1.48-18.67-2.88-18.67-13.2V42.81h-5.9V32.19h5.9v-5.68l11.07-3.36v9h7.6v10.66zM412 50.63c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.07-18.44v36.88H412V65.6c-2.43 2.81-6.05 4.5-11 4.5-9.66 0-17.63-8.48-17.63-19.47s8-19.48 17.63-19.48c4.94 0 8.56 1.7 11 4.5v-3.46zm-55.14 18.44c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.06 0c0 11-8 19.47-17.63 19.47-4.94 0-8.56-1.69-11-4.5v18.23H339.3V32.19h11.07v3.46c2.43-2.8 6.05-4.5 11-4.5 9.63 0 17.63 8.49 17.63 19.48zm-80.71 0a19.51 19.51 0 0 1 36.23-10l-9.67 5.6a7.63 7.63 0 0 0-7.15-4.13c-4.8 0-8.34 3.47-8.34 8.56s3.54 8.56 8.34 8.56a7.55 7.55 0 0 0 7.15-4.14l9.67 5.54a18.85 18.85 0 0 1-16.68 9.51 19.11 19.11 0 0 1-19.55-19.47zM281 32.19h11v36.88h-11V32.19zm-1.11-9.89a6.64 6.64 0 1 1 6.64 6.64 6.71 6.71 0 0 1-6.64-6.64zm-12.8 20.51v13.06c0 3.17 2.73 3.46 7.6 3.17v10C260.23 70.55 256 66.19 256 55.87V42.81h-5.9V32.19h5.9v-5.68l11.06-3.36v9h7.6v10.66zM248.63 58c0 8.48-7.37 12.09-15.34 12.09-7.38 0-13-2.8-15.86-8.77l9.57-5.45a6.06 6.06 0 0 0 6.27 4.35c2.66 0 4-.81 4-2.29 0-4.06-18.14-1.92-18.14-14.68 0-8 6.78-12.1 14.45-12.1a16.14 16.14 0 0 1 14.42 7.9l-9.44 5.09a5.37 5.37 0 0 0-4.95-3.25c-1.91 0-3.09.74-3.09 2.07 0 4.2 18.14 1.4 18.14 15zm-47.43-7.37c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.06-18.44v36.88H201.2V65.6c-2.44 2.81-6 4.5-11 4.5-9.67 0-17.64-8.48-17.64-19.47s8-19.48 17.64-19.48c4.94 0 8.55 1.7 11 4.5v-3.46zm-57.02-16.97h11.06v53.85h-11.06V15.22zM138 46.79a7.59 7.59 0 0 0-7.84-5.79c-4.21 0-7 2.07-8 5.83zm-6.78 13.43a9.65 9.65 0 0 0 7.08-2.8l8.85 5.09c-3.61 5-9.07 7.59-16.08 7.59-12.61 0-20.43-8.48-20.43-19.47s8-19.48 19.62-19.48C141 31.15 149 39.49 149 50.63a21 21 0 0 1-.45 4.42h-26.22c1.41 3.84 4.8 5.17 8.86 5.17z" class="cls-4"/>
-    </g>
 </svg>
diff --git a/examples/algolia/src/components/Spinner.tsx b/examples/algolia/src/components/Spinner.tsx
index cd7a79ab..916be6ba 100644
--- a/examples/algolia/src/components/Spinner.tsx
+++ b/examples/algolia/src/components/Spinner.tsx
@@ -12,7 +12,7 @@ const Spinner = (props: IProps) => {
         props.width
       } ${
         props.height
-      } animate-spin fill-blue-800 text-gray-200 dark:text-gray-600`}
+      } animate-spin fill-brand-primary text-gray-200 dark:text-gray-600`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/examples/algolia/src/components/breadcrumb.tsx b/examples/algolia/src/components/breadcrumb.tsx
index 3740d7fc..91da88f2 100644
--- a/examples/algolia/src/components/breadcrumb.tsx
+++ b/examples/algolia/src/components/breadcrumb.tsx
@@ -15,7 +15,7 @@ export default function Breadcrumb({ entries }: IBreadcrumb): JSX.Element {
               <span className="font-bold">{entry.label}</span>
             ) : (
               <Link href={`/search/${entry.breadcrumb}`} passHref>
-                <a className="text-gray-500 hover:text-blue-800">
+                <a className="text-gray-500 hover:text-brand-primary">
                   {entry.label}
                 </a>
               </Link>
diff --git a/examples/algolia/src/components/footer/Footer.tsx b/examples/algolia/src/components/footer/Footer.tsx
index aa642979..f5eae085 100644
--- a/examples/algolia/src/components/footer/Footer.tsx
+++ b/examples/algolia/src/components/footer/Footer.tsx
@@ -40,7 +40,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <GithubIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={22}
                 height={22}
               />
@@ -54,7 +54,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <InformationCircleIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />
@@ -67,7 +67,7 @@ const Footer = (): JSX.Element => (
           >
             <a>
               <PhoneIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />
diff --git a/examples/algolia/src/components/header/cart/CartMenu.tsx b/examples/algolia/src/components/header/cart/CartMenu.tsx
index cba3f72c..49503805 100644
--- a/examples/algolia/src/components/header/cart/CartMenu.tsx
+++ b/examples/algolia/src/components/header/cart/CartMenu.tsx
@@ -28,11 +28,11 @@ export default function CartMenu(): JSX.Element {
       <Popover className="relative">
         {({ close }) => (
           <>
-            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-blue-800 active:text-blue-800">
+            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-brand-primary active:text-brand-primary">
               <span
                 className={`${
                   stateItems ? "flex" : "hidden"
-                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-blue-800 p-[0.1rem] text-[0.6rem] text-white`}
+                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-brand-primary p-[0.1rem] text-[0.6rem] text-white`}
               >
                 {stateItems?.length}
               </span>
diff --git a/examples/algolia/src/components/header/cart/CartUpdatingSpinner.tsx b/examples/algolia/src/components/header/cart/CartUpdatingSpinner.tsx
index 7a3b32f9..fd1a5b8e 100644
--- a/examples/algolia/src/components/header/cart/CartUpdatingSpinner.tsx
+++ b/examples/algolia/src/components/header/cart/CartUpdatingSpinner.tsx
@@ -1,7 +1,7 @@
 export default function CartUpdatingSpinner(): JSX.Element {
   return (
     <svg
-      className="animate-spin h-4 w-4 text-blue-800"
+      className="animate-spin h-4 w-4 text-brand-primary"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/examples/algolia/src/components/header/cart/ModalCartItem.tsx b/examples/algolia/src/components/header/cart/ModalCartItem.tsx
index 94df9751..94fae2f0 100644
--- a/examples/algolia/src/components/header/cart/ModalCartItem.tsx
+++ b/examples/algolia/src/components/header/cart/ModalCartItem.tsx
@@ -64,7 +64,7 @@ function ModalCartItem({
           {removing ? (
             <svg
               aria-hidden="true"
-              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -129,7 +129,7 @@ export default function ModalCartItems({
         {/* Turn this spinner into a component with size props */}
         <svg
           aria-hidden="true"
-          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/examples/algolia/src/components/header/navigation/NavBar.tsx b/examples/algolia/src/components/header/navigation/NavBar.tsx
index b4d54d59..752abf74 100644
--- a/examples/algolia/src/components/header/navigation/NavBar.tsx
+++ b/examples/algolia/src/components/header/navigation/NavBar.tsx
@@ -17,7 +17,7 @@ const NavBar = ({ nav }: INavBar): JSX.Element => {
             <Popover key={index} className="relative">
               {({ close }) => (
                 <>
-                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-blue-800 focus:outline-none active:text-blue-800">
+                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-brand-primary focus:outline-none active:text-brand-primary">
                     <span>{item.name}</span>
                   </Popover.Button>
 
diff --git a/examples/algolia/src/components/header/navigation/NavMenu.tsx b/examples/algolia/src/components/header/navigation/NavMenu.tsx
index 096d676b..9469860c 100644
--- a/examples/algolia/src/components/header/navigation/NavMenu.tsx
+++ b/examples/algolia/src/components/header/navigation/NavMenu.tsx
@@ -81,7 +81,7 @@ const NavMenu = (props: IProps) => {
                           <Disclosure.Button
                             aria-label="panel"
                             className={`${
-                              open ? "text-blue-800" : "text-black"
+                              open ? "text-brand-primary" : "text-black"
                             } flex w-full justify-between bg-transparent px-4 py-2 text-left text-base font-bold hover:bg-gray-100`}
                             onClick={() => handleDisclosureChange(index)}
                           >
@@ -89,7 +89,7 @@ const NavMenu = (props: IProps) => {
                             <ChevronUpIcon
                               className={`${
                                 open ? "rotate-180 transform" : ""
-                              } text- h-5 w-5 text-blue-800`}
+                              } text- h-5 w-5 text-brand-primary`}
                             />
                           </Disclosure.Button>
                           <Disclosure.Panel className="z-50 flex flex-col bg-white px-4 pb-2 pt-4">
diff --git a/examples/algolia/src/styles/globals.css b/examples/algolia/src/styles/globals.css
index 3f53d0e5..290750fe 100644
--- a/examples/algolia/src/styles/globals.css
+++ b/examples/algolia/src/styles/globals.css
@@ -8,15 +8,15 @@
   }
 
   .link-hover {
-    @apply hover:text-blue-800 hover:underline;
+    @apply hover:text-brand-primary hover:underline;
   }
 
   .primary-btn {
-    @apply flex w-full items-center justify-center rounded-md bg-blue-800 px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-blue-800/90;
+    @apply flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight;
   }
 
   .secondary-btn {
-    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-blue-800 hover:text-blue-800;
+    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-brand-highlight hover:text-brand-primary;
   }
 }
 
diff --git a/examples/algolia/tailwind.config.ts b/examples/algolia/tailwind.config.ts
index 6a7e3476..be7f6035 100644
--- a/examples/algolia/tailwind.config.ts
+++ b/examples/algolia/tailwind.config.ts
@@ -9,9 +9,9 @@ export default {
       },
       colors: {
         brand: {
-          primary: "#0033CC",
-          secondary: "#091740",
-          highlight: "#1E40AF",
+          primary: "#2BCC7E",
+          secondary: "#144E31",
+          highlight: "#56DC9B",
           primaryAlt: "#EA7317",
           secondaryAlt: "#ffcb47",
         },
diff --git a/examples/basic/public/favicon.ico b/examples/basic/public/favicon.ico
index 71401e29..a61f60f1 100644
Binary files a/examples/basic/public/favicon.ico and b/examples/basic/public/favicon.ico differ
diff --git a/examples/basic/public/icons/ep-icon.svg b/examples/basic/public/icons/ep-icon.svg
index 4ffd2301..6250de53 100644
--- a/examples/basic/public/icons/ep-icon.svg
+++ b/examples/basic/public/icons/ep-icon.svg
@@ -1,6 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <g>
-        <path fill="#03C" d="M34.77 54a7.7 7.7 0 0 1-5.44-13.14l15.28-15.31a2.88 2.88 0 1 0-4.07-4.07L25.1 36.92A7.69 7.69 0 0 1 14.22 26l15.44-15.4a18.26 18.26 0 0 1 25.83 25.83L40.21 51.71A7.68 7.68 0 0 1 34.77 54zm39.74 1.45L52.09 77.88a2.89 2.89 0 0 1-4.07 0 2.86 2.86 0 0 1 0-4.07l5.6-5.61 16.82-16.82a2.89 2.89 0 0 1 4.92 2 2.84 2.84 0 0 1-.85 2zm10.88-15a18.26 18.26 0 0 0-25.83 0L42.74 57.32l-5.6 5.61-18.69 18.69A7.69 7.69 0 0 0 29.33 92.5l5.93-5.94a18.54 18.54 0 0 0 1.88 2.2 18.26 18.26 0 0 0 25.83 0l22.42-22.43a18.26 18.26 0 0 0 0-25.83z" />
-        <path fill="#03C" d="M74.57 40.44a10.57 10.57 0 0 0-14.95 0L44.86 55.2l-.26.25a13.45 13.45 0 1 1-19-19l.25-.26L40.6 21.43a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0-15-14.95L15 25.3a3.07 3.07 0 0 0-.26.25 28.85 28.85 0 0 0-.3 40.45 2.44 2.44 0 0 0 .27.29 28.83 28.83 0 0 0 40.78 0 3.07 3.07 0 0 0 .25-.26l14.76-14.7a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0 0-15z" />
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 35 35">
+    <path fill="#2BCC7E"
+          d="M15.758 12.903c1.164 2.923 1.197 6.232.033 9.155l9.106-.027v-9.125l-9.139-.003Zm0 0 6.46-6.45L15.752 0 10 5.738l3.009 3.002a12.315 12.315 0 0 1 2.749 4.163Zm-2.749 13.294L10 29.199l5.751 5.738 6.468-6.453-6.428-6.426c-.603 1.514-1.554 2.913-2.782 4.139Z"/>
 </svg>
\ No newline at end of file
diff --git a/examples/basic/public/icons/ep-logo.svg b/examples/basic/public/icons/ep-logo.svg
index 39d5d3f2..c2498f42 100644
--- a/examples/basic/public/icons/ep-logo.svg
+++ b/examples/basic/public/icons/ep-logo.svg
@@ -1,12 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 500 100">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 151 35">
+    <g clip-path="url(#a)">
+        <path fill="currentColor"
+              d="M26.058 7.696H36.92v2.987h-7.601v4.378h7.341v2.987h-7.341v5.201h7.861v2.987H26.06V7.696Zm16.34 18.54h-3.102V7.696h3.102v18.54Zm12.765-11.974c.388.721.596 1.597.596 3.116v5.64c0 .566.232.824.672.824.18 0 .311 0 .491-.026v2.6a6.972 6.972 0 0 1-1.163.13c-1.553 0-2.665-.747-3.025-2.19l-.08-.308c-.877 1.52-2.145 2.498-4.085 2.498-2.636 0-4.37-1.468-4.37-3.786s1.5-3.502 4.553-4.12l2.688-.54c.829-.155 1.215-.49 1.215-1.288 0-1.262-.903-2.035-2.403-2.035-1.554 0-2.405.696-2.614 1.829l-3.076-.206c.285-2.42 2.405-4.404 5.819-4.404 2.273 0 4.007.824 4.782 2.266Zm-2.508 5.382c-.284.18-.569.31-1.42.541l-1.837.49c-1.551.412-2.12 1.081-2.12 1.905 0 .901.723 1.365 1.886 1.365 1.656 0 3.49-1.133 3.49-3.657v-.644Zm10.425 6.902c-3.102 0-4.707-1.468-5.507-3.27l2.534-1.649c.594 1.313 1.5 2.138 3.025 2.138 1.137 0 1.628-.593 1.628-1.21 0-.593-.44-1.057-1.525-1.572l-2.248-1.055c-1.94-.902-2.871-2.163-2.871-3.863 0-2.137 1.862-4.069 4.422-4.069 2.405 0 3.773 1.236 4.55 2.498l-2.353 1.803c-.492-.773-1.163-1.52-2.223-1.52-.88 0-1.474.49-1.474 1.134 0 .514.309.926 1.034 1.261l2.38 1.082c2.17.978 3.282 2.24 3.282 4.249 0 2.42-1.965 4.043-4.654 4.043Zm10.55-11.46v11.15h-3.102v-11.15h-2.586v-2.78h2.586V9.472l3.102-.515v3.347h2.585v2.781H73.63Zm5.186-7.648c1.085 0 1.81.722 1.81 1.803 0 1.082-.725 1.803-1.81 1.803-1.086 0-1.811-.721-1.811-1.803 0-1.081.725-1.803 1.81-1.803Zm1.551 18.799h-3.102V12.305h3.102v13.932Zm1.718-6.953c0-4.223 3.231-7.288 7.265-7.288 3.31 0 5.199 1.597 6.153 3.683l-2.611 1.519c-.749-1.39-1.837-2.318-3.516-2.318-2.406 0-4.137 1.88-4.137 4.404 0 2.498 1.731 4.378 4.136 4.378 1.811 0 2.897-.953 3.594-2.627l2.794 1.184c-.854 2.524-2.948 4.327-6.413 4.327-4.11 0-7.265-3.065-7.265-7.262Zm24.744-.154v7.106h-3.259V7.696h7.084c4.062 0 6.362 2.343 6.362 5.716 0 3.374-2.3 5.717-6.619 5.717h-3.568Zm0-8.447v5.46h3.568c2.043 0 3.154-1.082 3.154-2.73 0-1.649-1.086-2.73-2.999-2.73h-3.723Zm21.647 3.579c.388.721.594 1.597.594 3.116v5.64c0 .566.234.824.674.824.18 0 .309 0 .492-.026v2.6a6.99 6.99 0 0 1-1.166.13c-1.551 0-2.662-.747-3.025-2.19l-.077-.308c-.88 1.52-2.145 2.498-4.085 2.498-2.637 0-4.371-1.468-4.371-3.786s1.5-3.502 4.551-4.12l2.691-.54c.825-.155 1.214-.49 1.214-1.288 0-1.262-.906-2.035-2.405-2.035-1.551 0-2.405.696-2.611 1.829l-3.077-.206c.283-2.42 2.405-4.404 5.819-4.404 2.274 0 4.008.824 4.782 2.266Zm-2.508 5.382c-.283.18-.569.31-1.423.541l-1.834.49c-1.553.412-2.122 1.081-2.122 1.905 0 .901.725 1.365 1.888 1.365 1.654 0 3.491-1.133 3.491-3.657v-.644Zm9.734-4.558v11.15H132.6v-11.15h-2.586v-2.78h2.586V9.472l3.102-.515v3.347h2.588v2.781h-2.588Zm15.092.078c.18.746.206 1.364.206 2.652v8.42h-3.102v-7.7c0-.849-.026-1.287-.103-1.75-.26-1.236-1.037-1.931-2.38-1.931-1.448 0-2.405.798-2.768 2.008-.103.36-.205.773-.205 1.88v7.493h-3.103V7.696h3.103v6.798c.774-1.365 2.145-2.498 4.11-2.498 2.303 0 3.777 1.34 4.242 3.168Z"/>
+        <path fill="#2BCC7E"
+              d="M5.758 12.903c1.164 2.923 1.197 6.232.033 9.155l9.106-.027v-9.125l-9.139-.003Zm0 0 6.46-6.45L5.752 0 0 5.738 3.009 8.74a12.315 12.315 0 0 1 2.749 4.163ZM3.009 26.197 0 29.199l5.751 5.738 6.468-6.453-6.428-6.425c-.603 1.514-1.554 2.912-2.782 4.138Z"/>
+    </g>
     <defs>
         <clipPath id="a">
-            <path fill="none" d="M6.28 5.25h488.24v89.5H6.28V5.25z" class="cls-1"/>
+            <path fill="#fff" d="M0 0h151v35H0z"/>
         </clipPath>
     </defs>
-    <g class="cls-2" clip-path="url(&quot;#a&quot;)">
-        <path fill="#03C" d="M34.77 54a7.7 7.7 0 0 1-5.44-13.14l15.28-15.31a2.88 2.88 0 1 0-4.07-4.07L25.1 36.92A7.69 7.69 0 0 1 14.22 26l15.44-15.4a18.26 18.26 0 0 1 25.83 25.83L40.21 51.71A7.68 7.68 0 0 1 34.77 54zm39.74 1.45L52.09 77.88a2.89 2.89 0 0 1-4.07 0 2.86 2.86 0 0 1 0-4.07l5.6-5.61 16.82-16.82a2.89 2.89 0 0 1 4.92 2 2.84 2.84 0 0 1-.85 2zm10.88-15a18.26 18.26 0 0 0-25.83 0L42.74 57.32l-5.6 5.61-18.69 18.69A7.69 7.69 0 0 0 29.33 92.5l5.93-5.94a18.54 18.54 0 0 0 1.88 2.2 18.26 18.26 0 0 0 25.83 0l22.42-22.43a18.26 18.26 0 0 0 0-25.83z" class="cls-3"/>
-        <path fill="#03C" d="M74.57 40.44a10.57 10.57 0 0 0-14.95 0L44.86 55.2l-.26.25a13.45 13.45 0 1 1-19-19l.25-.26L40.6 21.43a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0-15-14.95L15 25.3a3.07 3.07 0 0 0-.26.25 28.85 28.85 0 0 0-.3 40.45 2.44 2.44 0 0 0 .27.29 28.83 28.83 0 0 0 40.78 0 3.07 3.07 0 0 0 .25-.26l14.76-14.7a2.88 2.88 0 0 1 4.06 4.06 10.57 10.57 0 0 0 0-15z" class="cls-3"/>
-        <path fill="#333" d="M494.52 46.42v22.65h-11.07v-21c0-4.58-2.87-6.72-6.41-6.72-4.06 0-6.87 2.36-6.87 7.6v20.12h-11.06V19l11.06-3.36v20.01c2-2.73 5.68-4.5 10.55-4.5 7.45 0 13.8 5.31 13.8 15.27zm-49.28-3.61v13.06c0 3.17 2.73 3.46 7.6 3.17v10c-14.46 1.48-18.67-2.88-18.67-13.2V42.81h-5.9V32.19h5.9v-5.68l11.07-3.36v9h7.6v10.66zM412 50.63c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.07-18.44v36.88H412V65.6c-2.43 2.81-6.05 4.5-11 4.5-9.66 0-17.63-8.48-17.63-19.47s8-19.48 17.63-19.48c4.94 0 8.56 1.7 11 4.5v-3.46zm-55.14 18.44c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.06 0c0 11-8 19.47-17.63 19.47-4.94 0-8.56-1.69-11-4.5v18.23H339.3V32.19h11.07v3.46c2.43-2.8 6.05-4.5 11-4.5 9.63 0 17.63 8.49 17.63 19.48zm-80.71 0a19.51 19.51 0 0 1 36.23-10l-9.67 5.6a7.63 7.63 0 0 0-7.15-4.13c-4.8 0-8.34 3.47-8.34 8.56s3.54 8.56 8.34 8.56a7.55 7.55 0 0 0 7.15-4.14l9.67 5.54a18.85 18.85 0 0 1-16.68 9.51 19.11 19.11 0 0 1-19.55-19.47zM281 32.19h11v36.88h-11V32.19zm-1.11-9.89a6.64 6.64 0 1 1 6.64 6.64 6.71 6.71 0 0 1-6.64-6.64zm-12.8 20.51v13.06c0 3.17 2.73 3.46 7.6 3.17v10C260.23 70.55 256 66.19 256 55.87V42.81h-5.9V32.19h5.9v-5.68l11.06-3.36v9h7.6v10.66zM248.63 58c0 8.48-7.37 12.09-15.34 12.09-7.38 0-13-2.8-15.86-8.77l9.57-5.45a6.06 6.06 0 0 0 6.27 4.35c2.66 0 4-.81 4-2.29 0-4.06-18.14-1.92-18.14-14.68 0-8 6.78-12.1 14.45-12.1a16.14 16.14 0 0 1 14.42 7.9l-9.44 5.09a5.37 5.37 0 0 0-4.95-3.25c-1.91 0-3.09.74-3.09 2.07 0 4.2 18.14 1.4 18.14 15zm-47.43-7.37c0-5.53-3.69-9-8.78-9s-8.78 3.47-8.78 9 3.69 9 8.78 9 8.78-3.47 8.78-9zm11.06-18.44v36.88H201.2V65.6c-2.44 2.81-6 4.5-11 4.5-9.67 0-17.64-8.48-17.64-19.47s8-19.48 17.64-19.48c4.94 0 8.55 1.7 11 4.5v-3.46zm-57.02-16.97h11.06v53.85h-11.06V15.22zM138 46.79a7.59 7.59 0 0 0-7.84-5.79c-4.21 0-7 2.07-8 5.83zm-6.78 13.43a9.65 9.65 0 0 0 7.08-2.8l8.85 5.09c-3.61 5-9.07 7.59-16.08 7.59-12.61 0-20.43-8.48-20.43-19.47s8-19.48 19.62-19.48C141 31.15 149 39.49 149 50.63a21 21 0 0 1-.45 4.42h-26.22c1.41 3.84 4.8 5.17 8.86 5.17z" class="cls-4"/>
-    </g>
 </svg>
diff --git a/examples/basic/src/components/Spinner.tsx b/examples/basic/src/components/Spinner.tsx
index cd7a79ab..916be6ba 100644
--- a/examples/basic/src/components/Spinner.tsx
+++ b/examples/basic/src/components/Spinner.tsx
@@ -12,7 +12,7 @@ const Spinner = (props: IProps) => {
         props.width
       } ${
         props.height
-      } animate-spin fill-blue-800 text-gray-200 dark:text-gray-600`}
+      } animate-spin fill-brand-primary text-gray-200 dark:text-gray-600`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/examples/basic/src/components/checkout/payments/CheckoutForm.tsx b/examples/basic/src/components/checkout/payments/CheckoutForm.tsx
index aa4f09c2..b497f280 100644
--- a/examples/basic/src/components/checkout/payments/CheckoutForm.tsx
+++ b/examples/basic/src/components/checkout/payments/CheckoutForm.tsx
@@ -138,7 +138,7 @@ const CheckoutForm: CheckoutFormComponent = ({
                   <ShippingForm />
                   <label className="w-fit cursor-pointer">
                     <input
-                      className="mb-4 mr-2 accent-blue-800"
+                      className="mb-4 mr-2 accent-brand-primary"
                       type="checkbox"
                       id="same-as-shipping"
                       name="sameAsShipping"
diff --git a/examples/basic/src/components/footer/Footer.tsx b/examples/basic/src/components/footer/Footer.tsx
index aa642979..f5eae085 100644
--- a/examples/basic/src/components/footer/Footer.tsx
+++ b/examples/basic/src/components/footer/Footer.tsx
@@ -40,7 +40,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <GithubIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={22}
                 height={22}
               />
@@ -54,7 +54,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <InformationCircleIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />
@@ -67,7 +67,7 @@ const Footer = (): JSX.Element => (
           >
             <a>
               <PhoneIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />
diff --git a/examples/basic/src/components/header/cart/CartMenu.tsx b/examples/basic/src/components/header/cart/CartMenu.tsx
index cba3f72c..49503805 100644
--- a/examples/basic/src/components/header/cart/CartMenu.tsx
+++ b/examples/basic/src/components/header/cart/CartMenu.tsx
@@ -28,11 +28,11 @@ export default function CartMenu(): JSX.Element {
       <Popover className="relative">
         {({ close }) => (
           <>
-            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-blue-800 active:text-blue-800">
+            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-brand-primary active:text-brand-primary">
               <span
                 className={`${
                   stateItems ? "flex" : "hidden"
-                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-blue-800 p-[0.1rem] text-[0.6rem] text-white`}
+                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-brand-primary p-[0.1rem] text-[0.6rem] text-white`}
               >
                 {stateItems?.length}
               </span>
diff --git a/examples/basic/src/components/header/cart/CartUpdatingSpinner.tsx b/examples/basic/src/components/header/cart/CartUpdatingSpinner.tsx
index 7a3b32f9..fd1a5b8e 100644
--- a/examples/basic/src/components/header/cart/CartUpdatingSpinner.tsx
+++ b/examples/basic/src/components/header/cart/CartUpdatingSpinner.tsx
@@ -1,7 +1,7 @@
 export default function CartUpdatingSpinner(): JSX.Element {
   return (
     <svg
-      className="animate-spin h-4 w-4 text-blue-800"
+      className="animate-spin h-4 w-4 text-brand-primary"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/examples/basic/src/components/header/cart/ModalCartItem.tsx b/examples/basic/src/components/header/cart/ModalCartItem.tsx
index 94df9751..94fae2f0 100644
--- a/examples/basic/src/components/header/cart/ModalCartItem.tsx
+++ b/examples/basic/src/components/header/cart/ModalCartItem.tsx
@@ -64,7 +64,7 @@ function ModalCartItem({
           {removing ? (
             <svg
               aria-hidden="true"
-              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -129,7 +129,7 @@ export default function ModalCartItems({
         {/* Turn this spinner into a component with size props */}
         <svg
           aria-hidden="true"
-          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/examples/basic/src/components/header/navigation/NavBar.tsx b/examples/basic/src/components/header/navigation/NavBar.tsx
index b4d54d59..752abf74 100644
--- a/examples/basic/src/components/header/navigation/NavBar.tsx
+++ b/examples/basic/src/components/header/navigation/NavBar.tsx
@@ -17,7 +17,7 @@ const NavBar = ({ nav }: INavBar): JSX.Element => {
             <Popover key={index} className="relative">
               {({ close }) => (
                 <>
-                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-blue-800 focus:outline-none active:text-blue-800">
+                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-brand-primary focus:outline-none active:text-brand-primary">
                     <span>{item.name}</span>
                   </Popover.Button>
 
diff --git a/examples/basic/src/components/header/navigation/NavMenu.tsx b/examples/basic/src/components/header/navigation/NavMenu.tsx
index 096d676b..9469860c 100644
--- a/examples/basic/src/components/header/navigation/NavMenu.tsx
+++ b/examples/basic/src/components/header/navigation/NavMenu.tsx
@@ -81,7 +81,7 @@ const NavMenu = (props: IProps) => {
                           <Disclosure.Button
                             aria-label="panel"
                             className={`${
-                              open ? "text-blue-800" : "text-black"
+                              open ? "text-brand-primary" : "text-black"
                             } flex w-full justify-between bg-transparent px-4 py-2 text-left text-base font-bold hover:bg-gray-100`}
                             onClick={() => handleDisclosureChange(index)}
                           >
@@ -89,7 +89,7 @@ const NavMenu = (props: IProps) => {
                             <ChevronUpIcon
                               className={`${
                                 open ? "rotate-180 transform" : ""
-                              } text- h-5 w-5 text-blue-800`}
+                              } text- h-5 w-5 text-brand-primary`}
                             />
                           </Disclosure.Button>
                           <Disclosure.Panel className="z-50 flex flex-col bg-white px-4 pb-2 pt-4">
diff --git a/examples/basic/src/styles/globals.css b/examples/basic/src/styles/globals.css
index 3f53d0e5..290750fe 100644
--- a/examples/basic/src/styles/globals.css
+++ b/examples/basic/src/styles/globals.css
@@ -8,15 +8,15 @@
   }
 
   .link-hover {
-    @apply hover:text-blue-800 hover:underline;
+    @apply hover:text-brand-primary hover:underline;
   }
 
   .primary-btn {
-    @apply flex w-full items-center justify-center rounded-md bg-blue-800 px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-blue-800/90;
+    @apply flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight;
   }
 
   .secondary-btn {
-    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-blue-800 hover:text-blue-800;
+    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-brand-highlight hover:text-brand-primary;
   }
 }
 
diff --git a/examples/basic/tailwind.config.ts b/examples/basic/tailwind.config.ts
index 6a7e3476..be7f6035 100644
--- a/examples/basic/tailwind.config.ts
+++ b/examples/basic/tailwind.config.ts
@@ -9,9 +9,9 @@ export default {
       },
       colors: {
         brand: {
-          primary: "#0033CC",
-          secondary: "#091740",
-          highlight: "#1E40AF",
+          primary: "#2BCC7E",
+          secondary: "#144E31",
+          highlight: "#56DC9B",
           primaryAlt: "#EA7317",
           secondaryAlt: "#ffcb47",
         },