diff --git a/docs/src/components/homepage/AnimatedText.tsx b/docs/src/components/homepage/AnimatedText.tsx
index 4c7c58e397a..ef4f68c4ba4 100644
--- a/docs/src/components/homepage/AnimatedText.tsx
+++ b/docs/src/components/homepage/AnimatedText.tsx
@@ -63,7 +63,7 @@ const AnimatedText: FC = () => {
         onAnimationComplete={() => setPopTextClass("text-[#696E70]")}
       >
         {processText(
-          <h2 className="homepageText text-teal">
+          <h2 className="homepageText text-primary">
             Provides a{" "}
             <span
               className={clsx("transition-colors duration-500", popTextClass)}
diff --git a/docs/src/components/homepage/Carousel/Carousel.tsx b/docs/src/components/homepage/Carousel/Carousel.tsx
index 2e72e7ce548..baf4f47c5b3 100644
--- a/docs/src/components/homepage/Carousel/Carousel.tsx
+++ b/docs/src/components/homepage/Carousel/Carousel.tsx
@@ -24,7 +24,7 @@ const CarouselEntry: FC<Props> = ({ idx, src, description }) => {
         <img src={src} className="w-full rounded-lg object-cover" />
       </div>
       <div className="flex flex-col gap-4 max-w-md justify-center">
-        <h4 className="text-2xl text-teal font-medium">How it works</h4>
+        <h4 className="text-2xl text-primary font-medium">How it works</h4>
         <p>{description}</p>
         {idx === 0 && (
           <div className="flex gap-4">
@@ -56,7 +56,7 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
         <Arrow
           className={clsx(
             "rotate-180 rounded-full",
-            showing < 1 ? "text-teal-lightest" : "text-teal hover:bg-teal/15"
+            showing < 1 ? "text-primary-lightest" : "text-primary hover:bg-primary/15"
           )}
         />
       </button>
@@ -65,7 +65,7 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
           key={`dot-${index}`}
           className={clsx(
             "self-center",
-            index === showing ? "text-teal" : "text-teal-lightest"
+            index === showing ? "text-primary" : "text-primary-lightest"
           )}
         />
       ))}
@@ -77,8 +77,8 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
           className={clsx(
             "rounded-full",
             showing > HowItWorksCarouselContent.length - 2
-              ? "text-teal-lightest"
-              : "text-teal hover:bg-teal/15"
+              ? "text-primary-lightest"
+              : "text-primary hover:bg-primary/15"
           )}
         />
       </button>
diff --git a/docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx b/docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx
index dc7243ad1f2..be34ccf3639 100644
--- a/docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx
+++ b/docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx
@@ -60,7 +60,7 @@ const Controls: FC<ControlProps> = ({ showing, onClickBullet, ...props }) => {
           <Dot
             className={clsx(
               "self-center",
-              index === showing ? "text-teal" : "text-teal-lightest"
+              index === showing ? "text-primary" : "text-primary-lightest"
             )}
           />
         </button>
@@ -101,7 +101,7 @@ const ResponsiveCarousel: FC = () => {
   return (
     <section className="bg-[#F4F5F5]">
       <div className="component relative pageContainer flex flex-col">
-        <h4 className="text-2xl text-teal font-medium pb-14">How it works</h4>
+        <h4 className="text-2xl text-primary font-medium pb-14">How it works</h4>
         <div className="flex self-center flex-col justify-center">
           <Swiper
             key={isTabletUp ? "tablet" : "mobile"}
diff --git a/docs/src/components/homepage/CaseStudies.tsx b/docs/src/components/homepage/CaseStudies.tsx
index ec32360ca0c..ef2efd4b383 100644
--- a/docs/src/components/homepage/CaseStudies.tsx
+++ b/docs/src/components/homepage/CaseStudies.tsx
@@ -10,7 +10,7 @@ const CaseStudies: FC = () => {
   const isTabletOnly = useMediaQuery(forTabletOnly);
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
-    <section className="bg-teal-extralight">
+    <section className="bg-primary-extralight">
       <motion.div
         className="component pageContainer"
         initial="hidden"
@@ -22,17 +22,17 @@ const CaseStudies: FC = () => {
           hidden: { opacity: 0, y: 100 },
         }}
       >
-        <h5 className="text-base text-teal pb-14">/ CASE STUDIES</h5>
+        <h5 className="text-base text-primary pb-14">/ CASE STUDIES</h5>
         <div className="bg-white flex tablet:flex-row flex-col rounded-2xl overflow-hidden laptop:mb-10 tablet:p-8 justify-between gap-8">
           <div className="flex flex-col laptop:pt-20 gap-8 laptop:max-w-md px-4 py-8 tablet:p-0 tablet:basis-2/5">
-            <h4 className="text-2xl text-teal font-medium">Case studies</h4>
+            <h4 className="text-2xl text-primary font-medium">Case studies</h4>
             <p>{FeaturedCaseStudy.content}</p>
             <Link
-              className="bg-none text-teal self-start inline-flex gap-3 group hover:no-underline hover:text-teal"
+              className="bg-none text-primary self-start inline-flex gap-3 group hover:no-underline hover:text-primary"
               href="/use-cases"
             >
               {"View case studies "}
-              <Arrow className="mt-[3px] rounded-full group-hover:bg-teal/15" />
+              <Arrow className="mt-[3px] rounded-full group-hover:bg-primary/15" />
             </Link>
           </div>
           <motion.div
diff --git a/docs/src/components/homepage/Features.tsx b/docs/src/components/homepage/Features.tsx
index d47d0a6287d..e14793c4743 100644
--- a/docs/src/components/homepage/Features.tsx
+++ b/docs/src/components/homepage/Features.tsx
@@ -39,7 +39,7 @@ const Features: FC = () => {
     <section className="component bg-white">
       <div className="pageContainer">
         <motion.h5
-          className="text-base text-teal pb-14"
+          className="text-base text-primary pb-14"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}
diff --git a/docs/src/components/homepage/HomepageHero.tsx b/docs/src/components/homepage/HomepageHero.tsx
index 48f5d913890..0c39ba54158 100644
--- a/docs/src/components/homepage/HomepageHero.tsx
+++ b/docs/src/components/homepage/HomepageHero.tsx
@@ -37,7 +37,7 @@ const HomepageHero: FC = () => {
         <div className="component-lg tablet:py-[72px]">
           <div className="pb-9 tablet:max-w-[485px]">
             <motion.h1
-              className="tablet:text-[56px] tablet:leading-[67px] text-4xl leading-[48px] text-teal font-medium pb-4"
+              className="tablet:text-[56px] tablet:leading-[67px] text-4xl leading-[48px] text-primary font-medium pb-4"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ ease: "easeInOut", duration: 0.75, delay: 0.4 }}
@@ -61,7 +61,7 @@ const HomepageHero: FC = () => {
             transition={{ ease: "easeInOut", duration: 0.75, delay: 1.2 }}
           >
             <Link
-              className="inline-block px-4 py-3 border border-solid border-teal font-bold text-sm text-teal rounded-lg no-underline bg-white hover:bg-teal-extralight hover:no-underline hover:text-teal"
+              className="inline-block px-4 py-3 border border-solid border-primary font-bold text-sm text-primary rounded-lg no-underline bg-white hover:bg-primary-extralight hover:no-underline hover:text-primary"
               to="/docs/protocol-overview"
             >
               Learn more
diff --git a/docs/src/components/homepage/Properties.tsx b/docs/src/components/homepage/Properties.tsx
index 6d81439b9c1..f555f64d52b 100644
--- a/docs/src/components/homepage/Properties.tsx
+++ b/docs/src/components/homepage/Properties.tsx
@@ -36,7 +36,7 @@ const Properties: FC = () => {
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
     <motion.section
-      className="bg-teal"
+      className="bg-primary"
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}
diff --git a/docs/src/components/homepage/WhyHydraHead.tsx b/docs/src/components/homepage/WhyHydraHead.tsx
index e04ef80d007..a29c3f0769b 100644
--- a/docs/src/components/homepage/WhyHydraHead.tsx
+++ b/docs/src/components/homepage/WhyHydraHead.tsx
@@ -21,7 +21,7 @@ const WhyHydraHead: FC = () => {
     >
       <div className="grid laptop:flex laptop:flex-row laptop:gap-6">
         <div className="flex flex-col basis-[41%] pt-4 order-2 laptop:-order-1 laptop:w-[472px] laptop:pt-0">
-          <h4 className="text-2xl color-darkRed font-medium text-darkRed pb-4">
+          <h4 className="text-2xl text-primary font-medium pb-4">
             {WhyHydraHeadContent.title}
           </h4>
           <p>{WhyHydraHeadContent.descriptionParagraphOne}</p>
@@ -42,13 +42,13 @@ const WhyHydraHead: FC = () => {
           </motion.div>
           <div className="w-full relative mt-4">
             <button
-              className="bg-none text-teal self-start inline-flex gap-3 group"
+              className="bg-none text-primary self-start inline-flex gap-3 group"
               onClick={() => setExpanded(!expanded)}
             >
               {`Read ${expanded ? "less" : "more"}`}{" "}
               <Arrow
                 className={clsx(
-                  "mt-[3px] rounded-full group-hover:bg-teal/15",
+                  "mt-[3px] rounded-full group-hover:bg-primary/15",
                   expanded ? "-rotate-90" : "rotate-90"
                 )}
               />
@@ -58,7 +58,7 @@ const WhyHydraHead: FC = () => {
         <div className="hidden basis-[59%] -order-1 laptop:order-2 tablet:block">
           <img
             src="hydra-docs-landing-graphic.png"
-            className="border-b border-solid border-teal laptop:border-none"
+            className="border-b border-solid border-primary laptop:border-none"
           />
         </div>
       </div>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 91906b665c6..1e4fe004ee3 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -53,8 +53,32 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: hsl(184, 75%, 30%);
-  --ifm-color-primary-dark: hsl(184, 75%, 20%);
+  /* The original violet accent we use */
+  --ifm-color-primary: #6875e8;
+  /* Created using https://colordesigner.io/color-scheme-builder */
+  /* 6 steps to white, first 4 after main */
+  --ifm-color-primary-light: #9099e2;
+  --ifm-color-primary-lighter: #b4b8e2;
+  --ifm-color-primary-lightest: #d2d4e6;
+  --ifm-color-primary-extralight: #ebecf0;
+  /* 6 steps to black, first 3 after main */
+  --ifm-color-primary-dark: #3847c4;
+  --ifm-color-primary-darker: #353b73;
+  --ifm-color-primary-darkest: #222432;
+
+  /* Another blue color we like */
+  --ifm-color-secondary: #3c9ec8;
+  /* Created using https://colordesigner.io/color-scheme-builder */
+  /* 6 steps to white, first 4 after main */
+  --ifm-color-secondary-light: #6eadc8;
+  --ifm-color-secondary-lighter: #9bbecd;
+  --ifm-color-secondary-lightest: #c2d1d8;
+  --ifm-color-secondary-extralight: #e3e7e9;
+  /* 6 steps to black, first 3 after main */
+  --ifm-color-secondary-dark: #397b97;
+  --ifm-color-secondary-darker: #345868;
+  --ifm-color-secondary-darkest: #283940;
+
   --ifm-code-font-size: 95%;
   --ifm-navbar-height: 56px;
   font-family: "Inter";
@@ -62,6 +86,11 @@
   --doc-sidebar-hidden-width: 100px !important;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: var(--ifm-color-primary-light);
+}
+
 @media (min-width: 768px) {
   :root {
     --ifm-navbar-height: 96px;
@@ -84,11 +113,6 @@ h4 {
   line-height: 30px !important;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: hsl(184, 35%, 60%);
-}
-
 html {
   @apply text-black;
 }
@@ -417,7 +441,7 @@ svg.architecture {
 }
 
 .theme-doc-toc-mobile > button {
-  @apply font-semibold text-true-black rounded p-4 mt-12 bg-teal-extralight;
+  @apply font-semibold text-black rounded p-4 mt-12 bg-primary-extralight;
 }
 
 .theme-doc-toc-mobile > div > ul {
@@ -463,8 +487,8 @@ svg.architecture {
 }
 
 .markdown a {
-  color: #128189;
-  text-decoration-color: #128189;
+  color: var(--ifm-color-primary);
+  text-decoration-color: var(--ifm-color-primary);
 }
 
 .markdown a.card {
diff --git a/docs/src/theme/Footer/Copyright/index.js b/docs/src/theme/Footer/Copyright/index.js
index 957b48d7587..034f92185e3 100644
--- a/docs/src/theme/Footer/Copyright/index.js
+++ b/docs/src/theme/Footer/Copyright/index.js
@@ -3,7 +3,7 @@ import HydraLogo from "../../../components/icons/HydraLogo";
 export default function FooterCopyright({ copyright }) {
   return (
     <div
-      className="text-teal-light inline-flex gap-4 text-center"
+      className="text-primary-light inline-flex gap-4 text-center"
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
     >
diff --git a/docs/src/theme/Footer/Layout/index.js b/docs/src/theme/Footer/Layout/index.js
index f50b8db6eac..fbaa554352c 100644
--- a/docs/src/theme/Footer/Layout/index.js
+++ b/docs/src/theme/Footer/Layout/index.js
@@ -11,7 +11,7 @@ export default function FooterLayout({ style, links, logo, copyright }) {
       className={clsx(
         "laptop:footer",
         isLandingPage
-          ? "bg-teal-dark component laptop:component-xs"
+          ? "bg-primary-darker component laptop:component-xs"
           : "bg-white py-[56px]"
       )}
     >
@@ -28,18 +28,18 @@ export default function FooterLayout({ style, links, logo, copyright }) {
         >
           <div
             className={clsx(
-              "flex flex-col gap-4 border border-solid border-teal-light p-6 rounded-lg mb-14 laptop:mb-[70px]",
+              "flex flex-col gap-4 border border-solid border-primary-light p-6 rounded-lg mb-14 laptop:mb-[70px]",
               !isLandingPage && "w-[250px]"
             )}
           >
-            <div className="inline-flex items-center text-teal-light">
+            <div className="inline-flex items-center text-primary-light">
               <HydraLogo className="shrink-0" width={24} height={24} />
               <span className="border-l pl-4 ml-4 text-xl leading-[27px]">
                 Join the family
               </span>
             </div>
             <Link
-              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-teal-lightest border-teal font-bold text-teal rounded-lg no-underline hover:bg-white hover:no-underline hover:text-teal"
+              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-primary-lightest border-primary font-bold text-primary rounded-lg no-underline hover:bg-white hover:no-underline hover:text-primary"
               to={"/docs/get-involved"}
             >
               Get involved
diff --git a/docs/src/theme/Footer/LinkItem/index.js b/docs/src/theme/Footer/LinkItem/index.js
index 5d7efaf715f..ada167013ea 100644
--- a/docs/src/theme/Footer/LinkItem/index.js
+++ b/docs/src/theme/Footer/LinkItem/index.js
@@ -11,7 +11,7 @@ export default function FooterLinkItem({ item }) {
   return (
     <Link
       className={clsx(
-        "footer__link-item inline-flex hover:text-teal-light",
+        "footer__link-item inline-flex hover:text-primary-light",
         isLandingPage ? "text-[#F3F4F4]" : "text-black"
       )}
       {...(href
diff --git a/docs/src/theme/Navbar/Content/index.js b/docs/src/theme/Navbar/Content/index.js
index e134b1d27de..27a28d20fc9 100644
--- a/docs/src/theme/Navbar/Content/index.js
+++ b/docs/src/theme/Navbar/Content/index.js
@@ -73,7 +73,7 @@ export default function NavbarContent() {
             href="https://github.com/cardano-scaling/hydra"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-teal-light mx-3 py-1"
+            className="hover:text-primary-light mx-3 py-1"
           >
             <GithubSmall />
           </a>
@@ -81,7 +81,7 @@ export default function NavbarContent() {
             href="https://discord.com/invite/Qq5vNTg9PT"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-teal-light mx-3 py-1"
+            className="hover:text-primary-light mx-3 py-1"
           >
             <Discord />
           </a>
diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js
index 67f85c4bc28..f671ca41d2d 100644
--- a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js
+++ b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js
@@ -9,7 +9,7 @@ export default function NavbarMobileSidebarLayout({
 }) {
   const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
   return (
-    <div className="navbar-sidebar bg-teal-extralight w-full transition-transform -translate-y-full">
+    <div className="navbar-sidebar bg-primary-extralight w-full transition-transform -translate-y-full">
       {header}
       <div
         className={clsx("navbar-sidebar__items", {
diff --git a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js b/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
index d9b3e877e8a..4bddba02cfe 100644
--- a/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
+++ b/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
@@ -36,7 +36,7 @@ export default function NavbarMobilePrimaryMenu() {
         href="https://github.com/cardano-scaling/hydra"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-teal-light mx-3 py-1 inline-flex gap-3"
+        className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
       >
         <GithubSmall /> Github
       </a>
@@ -44,7 +44,7 @@ export default function NavbarMobilePrimaryMenu() {
         href="https://github.com/cardano-scaling/hydra"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-teal-light mx-3 py-1 inline-flex gap-3"
+        className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
       >
         <Discord className="mt-1" /> Discord
       </a>
diff --git a/docs/src/theme/NavbarItem/DefaultNavbarItem.js b/docs/src/theme/NavbarItem/DefaultNavbarItem.js
index dc2d7b74f9f..ac9671e8472 100644
--- a/docs/src/theme/NavbarItem/DefaultNavbarItem.js
+++ b/docs/src/theme/NavbarItem/DefaultNavbarItem.js
@@ -9,7 +9,7 @@ function DefaultNavbarItemDesktop({
   const element = (
     <NavbarNavLink
       className={clsx(
-        "hover:text-teal-light",
+        "hover:text-primary-light",
         isDropdownItem ? "dropdown__link" : "navbar__item navbar__link",
         className
       )}
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index f75df21afe8..2d1a5e4f559 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -42,23 +42,18 @@ const config: Config = {
     colors: {
       transparent: "transparent",
       current: "currentColor",
-      red: "#F00000",
-      darkRed: "#721F41",
-      yellow: "#FFF500",
-      violet: "#00006D",
-      teal: {
-        DEFAULT: "hsl(184, 75%, 30%)",
-        dark: "hsl(184, 75%, 20%)",
-        light: "hsl(184, 25%, 60%)",
-        lightest: "hsl(184, 55%, 93%)",
-        extralight: "hsl(184, 12%, 93%)",
+      primary: {
+        DEFAULT: "#6875e8",
+        dark: "#3847c4",
+        darker: "#222432",
+        light: "#9099e2",
+        lighter: "#b4b8e2",
+        lightest: "#d2d4e6",
+        extralight: "#ebecf0",
       },
-      blue: {},
+      secondary: "#3c9ec8",
       black: "#283032",
-      "true-black": "#000000",
-      gray: {
-        DEFAULT: "#D4D6D6",
-      },
+      gray: "#D4D6D6",
       white: "#FFFFFF",
     },
   },