diff --git a/apps/site/components/Blog/BlogPostCard/index.module.css b/apps/site/components/Blog/BlogPostCard/index.module.css
index 53ec2686369f0..e9e8f6a26c377 100644
--- a/apps/site/components/Blog/BlogPostCard/index.module.css
+++ b/apps/site/components/Blog/BlogPostCard/index.module.css
@@ -6,13 +6,13 @@
 }
 
 .subtitle {
-  @apply mt-6
+  @apply text-brand-600
+    dark:text-brand-400
+    mt-6
     mb-2
     inline-block
     text-xs
-    font-semibold
-    text-green-600
-    dark:text-green-400;
+    font-semibold;
 }
 
 .title {
diff --git a/apps/site/components/Common/LinkWithArrow/index.module.css b/apps/site/components/Common/LinkWithArrow/index.module.css
index 8f1566281e65a..b523bdb4b0e6b 100644
--- a/apps/site/components/Common/LinkWithArrow/index.module.css
+++ b/apps/site/components/Common/LinkWithArrow/index.module.css
@@ -9,8 +9,8 @@
 }
 
 .button {
-  @apply text-green-600
-    hover:text-green-900
-    dark:text-green-400
-    dark:hover:text-green-200;
+  @apply text-brand-600
+    hover:text-brand-900
+    dark:text-brand-400
+    dark:hover:text-brand-200;
 }
diff --git a/packages/ui-components/__design__/colors.stories.tsx b/packages/ui-components/__design__/colors.stories.tsx
index ab07ebb262ade..fc5ca0a7e2cf3 100644
--- a/packages/ui-components/__design__/colors.stories.tsx
+++ b/packages/ui-components/__design__/colors.stories.tsx
@@ -5,14 +5,14 @@ export const Colors: StoryObj = {
     <div className="flex flex-row justify-between">
       <div className="flex w-full flex-col items-center justify-between gap-1">
         <div className="flex flex-row gap-1">
-          <div className="h-20 w-20 bg-green-100" />
-          <div className="h-20 w-20 bg-green-200" />
-          <div className="h-20 w-20 bg-green-300" />
-          <div className="h-20 w-20 bg-green-400" />
-          <div className="h-20 w-20 bg-green-600" />
-          <div className="h-20 w-20 bg-green-700" />
-          <div className="h-20 w-20 bg-green-800" />
-          <div className="h-20 w-20 bg-green-900" />
+          <div className="bg-brand-100 h-20 w-20" />
+          <div className="bg-brand-200 h-20 w-20" />
+          <div className="bg-brand-300 h-20 w-20" />
+          <div className="bg-brand-400 h-20 w-20" />
+          <div className="bg-brand-600 h-20 w-20" />
+          <div className="bg-brand-700 h-20 w-20" />
+          <div className="bg-brand-800 h-20 w-20" />
+          <div className="bg-brand-900 h-20 w-20" />
         </div>
         <div className="flex flex-row gap-1">
           <div className="h-20 w-20 bg-neutral-100" />
diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css
index 685f20a75e64a..0c5e6e097f4ae 100644
--- a/packages/ui-components/src/Common/AlertBox/index.module.css
+++ b/packages/ui-components/src/Common/AlertBox/index.module.css
@@ -63,10 +63,10 @@
   }
 
   &.success {
-    @apply bg-green-600;
+    @apply bg-brand-600;
 
     .title {
-      @apply bg-green-700;
+      @apply bg-brand-700;
     }
   }
 
diff --git a/packages/ui-components/src/Common/Badge/index.module.css b/packages/ui-components/src/Common/Badge/index.module.css
index 008f025cf3d95..5c757e89e2acd 100644
--- a/packages/ui-components/src/Common/Badge/index.module.css
+++ b/packages/ui-components/src/Common/Badge/index.module.css
@@ -19,7 +19,7 @@
   }
 
   &.default {
-    @apply bg-green-600;
+    @apply bg-brand-600;
   }
 
   &.error {
diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css
index 2304c408078a0..f91628a893b88 100644
--- a/packages/ui-components/src/Common/BadgeGroup/index.module.css
+++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css
@@ -25,20 +25,20 @@
   }
 
   &.default {
-    @apply border-green-200
-      bg-green-100
-      dark:border-green-700
+    @apply border-brand-200
+      bg-brand-100
+      dark:border-brand-700
       dark:bg-neutral-900;
 
     .icon {
-      @apply text-green-500
-        dark:text-green-300;
+      @apply text-brand-500
+        dark:text-brand-300;
     }
 
     .message,
     .message a:not(:hover) {
-      @apply text-green-700
-        dark:text-green-300;
+      @apply text-brand-700
+        dark:text-brand-300;
     }
   }
 
diff --git a/packages/ui-components/src/Common/Banner/index.module.css b/packages/ui-components/src/Common/Banner/index.module.css
index 282a93668d2ad..d55d5359cf8c8 100644
--- a/packages/ui-components/src/Common/Banner/index.module.css
+++ b/packages/ui-components/src/Common/Banner/index.module.css
@@ -30,7 +30,7 @@
 }
 
 .default {
-  @apply bg-green-600;
+  @apply bg-brand-600;
 }
 
 .error {
diff --git a/packages/ui-components/src/Common/BaseButton/index.module.css b/packages/ui-components/src/Common/BaseButton/index.module.css
index 4eb0e97fd2500..bb4c5ce10619e 100644
--- a/packages/ui-components/src/Common/BaseButton/index.module.css
+++ b/packages/ui-components/src/Common/BaseButton/index.module.css
@@ -46,26 +46,26 @@
   }
 
   &.primary {
-    @apply rounded-sm
+    @apply border-brand-600
+      bg-brand-600
+      rounded-sm
       border
-      border-green-600
-      bg-green-600
       text-white
       shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
-      @apply border-green-700
-        bg-green-700
+      @apply border-brand-700
+        bg-brand-700
         text-white;
     }
 
     &:focus {
-      @apply border-green-700
-        bg-green-700;
+      @apply border-brand-700
+        bg-brand-700;
     }
 
     &[aria-disabled='true'] {
-      @apply bg-green-600
+      @apply bg-brand-600
         opacity-50;
     }
   }
@@ -100,10 +100,13 @@
 
   &.special {
     @apply before:bg-gradient-glow-backdrop
+      border-brand-600/30
+      bg-brand-600/10
+      after:from-brand-600/0
+      after:via-brand-600
+      after:to-brand-600/0
       rounded-lg
       border
-      border-green-600/30
-      bg-green-600/10
       text-white
       shadow-xs
       before:absolute
@@ -124,9 +127,6 @@
       after:h-px
       after:w-2/5
       after:bg-linear-to-r
-      after:from-green-600/0
-      after:via-green-600
-      after:to-green-600/0
       after:content-[''];
 
     &[aria-disabled='true'] {
@@ -134,11 +134,11 @@
     }
 
     &:hover:not([aria-disabled='true']) {
-      @apply bg-green-600/20;
+      @apply bg-brand-600/20;
     }
 
     &:focus {
-      @apply bg-green-600/20;
+      @apply bg-brand-600/20;
     }
   }
 
diff --git a/packages/ui-components/src/Common/BaseLinkTabs/index.module.css b/packages/ui-components/src/Common/BaseLinkTabs/index.module.css
index ca9292fdb8bf4..4426e0179430c 100644
--- a/packages/ui-components/src/Common/BaseLinkTabs/index.module.css
+++ b/packages/ui-components/src/Common/BaseLinkTabs/index.module.css
@@ -29,14 +29,15 @@
     }
 
     &[data-state='active'] {
-      @apply border-b-green-600
-        text-green-600
-        dark:border-b-green-400
-        dark:text-green-400;
+      @apply border-b-brand-600
+        text-brand-600
+        dark:border-b-brand-400
+        dark:text-brand-400;
     }
   }
 }
 
 .tabsSelect {
-  @apply md:hidden!;
+  @apply !
+    md:hidden;
 }
diff --git a/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css b/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
index 44fe08cd5fb70..d512397c2edb2 100644
--- a/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
+++ b/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
@@ -7,7 +7,8 @@
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply flex
+  @apply aria-current:bg-brand-600
+    flex
     size-10
     cursor-pointer
     items-center
@@ -17,7 +18,6 @@
     py-2.5
     text-neutral-800
     aria-current:cursor-default
-    aria-current:bg-green-600
     aria-current:text-white
     motion-safe:transition-colors
     dark:text-neutral-200;
diff --git a/packages/ui-components/src/Common/Blockquote/index.module.css b/packages/ui-components/src/Common/Blockquote/index.module.css
index cdb4642e9f40e..53d8d3e6e8ecc 100644
--- a/packages/ui-components/src/Common/Blockquote/index.module.css
+++ b/packages/ui-components/src/Common/Blockquote/index.module.css
@@ -1,20 +1,20 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply flex
+  @apply border-brand-600
+    dark:border-brand-400
+    flex
     max-w-2xl
     flex-col
     items-start
     gap-4
     self-stretch
     border-l-2
-    border-green-600
     py-2
     pl-5
     text-lg
     font-semibold
     text-neutral-900
-    dark:border-green-400
     dark:text-white;
 
   & cite {
diff --git a/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index e708032a4bfbb..9f1e5572631c1 100644
--- a/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -5,8 +5,8 @@
     truncate;
 
   &.active {
-    @apply rounded
-      bg-green-800
+    @apply bg-brand-800
+      rounded
       px-2
       py-1
       font-semibold
@@ -15,7 +15,7 @@
       dark:text-white;
 
     &:hover {
-      @apply bg-green-700
+      @apply bg-brand-700
         text-white;
     }
   }
diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css
index 3f6225b555c48..91241657f5d18 100644
--- a/packages/ui-components/src/Common/ChangeHistory/index.module.css
+++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css
@@ -63,7 +63,7 @@
 
   &:hover,
   &:focus-visible {
-    @apply bg-green-600
+    @apply bg-brand-600
       text-white;
   }
 }
diff --git a/packages/ui-components/src/Common/CodeTabs/index.module.css b/packages/ui-components/src/Common/CodeTabs/index.module.css
index 879ae26ace6b5..5f738303ceff0 100644
--- a/packages/ui-components/src/Common/CodeTabs/index.module.css
+++ b/packages/ui-components/src/Common/CodeTabs/index.module.css
@@ -23,8 +23,8 @@
         text-neutral-200;
 
       &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
+        @apply border-b-brand-400
+          text-brand-400;
       }
     }
 
diff --git a/packages/ui-components/src/Common/DataTag/index.module.css b/packages/ui-components/src/Common/DataTag/index.module.css
index ef244b3765153..77d2db5c398fe 100644
--- a/packages/ui-components/src/Common/DataTag/index.module.css
+++ b/packages/ui-components/src/Common/DataTag/index.module.css
@@ -32,7 +32,7 @@
   }
 
   &.property {
-    @apply bg-green-600;
+    @apply bg-brand-600;
   }
 
   &.class {
diff --git a/packages/ui-components/src/Common/GlowingBackdrop/index.module.css b/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
index 75f47615984c0..427232f2210a7 100644
--- a/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
+++ b/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
@@ -1,7 +1,9 @@
 @reference "../../styles/index.css";
 
 .glowingBackdrop {
-  @apply absolute
+  @apply after:bg-brand-300
+    dark:after:bg-brand-700
+    absolute
     top-0
     left-0
     -z-10
@@ -13,11 +15,9 @@
     after:aspect-square
     after:w-[300px]
     after:rounded-full
-    after:bg-green-300
     after:blur-[120px]
     after:content-['']
-    md:opacity-100
-    dark:after:bg-green-700;
+    md:opacity-100;
 
   svg {
     @apply absolute
diff --git a/packages/ui-components/src/Common/LanguageDropDown/index.module.css b/packages/ui-components/src/Common/LanguageDropDown/index.module.css
index 8cbcf1b574796..c482a2963e0a3 100644
--- a/packages/ui-components/src/Common/LanguageDropDown/index.module.css
+++ b/packages/ui-components/src/Common/LanguageDropDown/index.module.css
@@ -35,19 +35,19 @@
 }
 
 .dropDownItem {
-  @apply cursor-pointer
+  @apply data-[highlighted]:bg-brand-600
+    cursor-pointer
     px-2.5
     py-1.5
     text-sm
     font-medium
     text-neutral-800
     outline-hidden
-    data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;
 }
 
 .currentDropDown {
-  @apply bg-green-600
+  @apply bg-brand-600
     text-white;
 }
diff --git a/packages/ui-components/src/Common/Preview/index.module.css b/packages/ui-components/src/Common/Preview/index.module.css
index e70cfb4ca3bb5..808df784a6485 100644
--- a/packages/ui-components/src/Common/Preview/index.module.css
+++ b/packages/ui-components/src/Common/Preview/index.module.css
@@ -21,7 +21,7 @@
     after:content-[''];
 
   &.announcements {
-    @apply after:from-green-700/90;
+    @apply after:from-brand-700/90;
   }
 
   &.release {
diff --git a/packages/ui-components/src/Common/Search/Results/Hit/index.module.css b/packages/ui-components/src/Common/Search/Results/Hit/index.module.css
index edb4bf24de14e..d1bc33ab69e02 100644
--- a/packages/ui-components/src/Common/Search/Results/Hit/index.module.css
+++ b/packages/ui-components/src/Common/Search/Results/Hit/index.module.css
@@ -1,7 +1,8 @@
 @reference "../../../../styles/index.css";
 
 .link {
-  @apply flex
+  @apply focus-visible:border-brand-600
+    flex
     items-center
     gap-4
     rounded-xl
@@ -15,7 +16,6 @@
     outline-none
     hover:bg-neutral-200
     focus:bg-neutral-200
-    focus-visible:border-green-600
     focus-visible:bg-transparent
     motion-safe:transition-colors
     dark:bg-zinc-950
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
index 223374299130b..2cdf6ae0fcfda 100644
--- a/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
@@ -29,9 +29,9 @@
 }
 
 .facetTabItemSelected {
-  @apply border-2
-    border-green-600
-    dark:border-green-400;
+  @apply border-brand-600
+    dark:border-brand-400
+    border-2;
 }
 
 .facetTabsList {
diff --git a/packages/ui-components/src/Common/Select/index.module.css b/packages/ui-components/src/Common/Select/index.module.css
index 98f528ae283c9..fcb1e0bc68c50 100644
--- a/packages/ui-components/src/Common/Select/index.module.css
+++ b/packages/ui-components/src/Common/Select/index.module.css
@@ -84,12 +84,12 @@
   }
 
   .text {
-    @apply text-neutral-800
-      data-highlighted:bg-green-500
+    @apply data-highlighted:bg-brand-500
+      dark:data-highlighted:bg-brand-600
+      text-neutral-800
       data-highlighted:text-white
       data-highlighted:outline-hidden
       dark:text-neutral-200
-      dark:data-highlighted:bg-green-600
       dark:data-highlighted:text-white;
   }
 
@@ -191,15 +191,15 @@
   }
 
   .text {
-    @apply block
+    @apply hover:bg-brand-500
+      dark:hover:bg-brand-600
+      block
       pl-4
       whitespace-normal
       text-neutral-800
-      hover:bg-green-500
       hover:text-white
       hover:outline-hidden
       dark:text-neutral-200
-      dark:hover:bg-green-600
       dark:hover:text-white;
 
     span {
diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css
index da2da6867d349..67c9aec43272f 100644
--- a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css
+++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css
@@ -39,7 +39,7 @@
     break-all;
 
   a {
-    @apply text-green-700
-      dark:text-green-400;
+    @apply text-brand-700
+      dark:text-brand-400;
   }
 }
diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css
index d1554950a9370..09d723796b7ae 100644
--- a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css
+++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css
@@ -7,8 +7,8 @@
 }
 
 .return {
-  @apply rounded-sm
-    bg-green-100
+  @apply bg-brand-100
+    rounded-sm
     px-4
     py-3
     dark:bg-neutral-900/40;
diff --git a/packages/ui-components/src/Common/SkipToContentButton/index.module.css b/packages/ui-components/src/Common/SkipToContentButton/index.module.css
index cd8457908d2d3..b0359f43d7912 100644
--- a/packages/ui-components/src/Common/SkipToContentButton/index.module.css
+++ b/packages/ui-components/src/Common/SkipToContentButton/index.module.css
@@ -1,19 +1,19 @@
 @reference "../../styles/index.css";
 
 .skipToContent {
-  @apply sr-only
+  @apply focus:bg-brand-600
+    focus:ring-brand-500
+    dark:focus:ring-brand-400
+    sr-only
     focus:not-sr-only
     focus:absolute
     focus:top-4
     focus:left-4
     focus:z-50
     focus:rounded
-    focus:bg-green-600
     focus:px-4
     focus:py-2
     focus:text-white
     focus:ring-2
-    focus:ring-green-500
-    focus:outline-none
-    dark:focus:ring-green-400;
+    focus:outline-none;
 }
diff --git a/packages/ui-components/src/Common/Switch/index.module.css b/packages/ui-components/src/Common/Switch/index.module.css
index 7d700b862b0d1..8dd9ee20085aa 100644
--- a/packages/ui-components/src/Common/Switch/index.module.css
+++ b/packages/ui-components/src/Common/Switch/index.module.css
@@ -34,16 +34,16 @@
   }
 
   .input:focus-visible + .root {
-    @apply ring-2
-      ring-green-500
+    @apply ring-brand-500
+      dark:ring-brand-400
+      ring-2
       ring-offset-2
       ring-offset-neutral-100
-      dark:ring-green-400
       dark:ring-offset-neutral-900;
   }
 
   .input:checked + .root {
-    @apply bg-green-600;
+    @apply bg-brand-600;
   }
 
   .thumb {
diff --git a/packages/ui-components/src/Common/Tabs/index.module.css b/packages/ui-components/src/Common/Tabs/index.module.css
index f700b7b1321aa..c7f3d6d32a3e3 100644
--- a/packages/ui-components/src/Common/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Tabs/index.module.css
@@ -42,19 +42,19 @@
       }
 
       &[data-state='active'] {
-        @apply border-b-green-600
-          text-green-600
-          dark:border-b-green-400
-          dark:text-green-400;
+        @apply border-b-brand-600
+          text-brand-600
+          dark:border-b-brand-400
+          dark:text-brand-400;
 
         .tabExtension {
-          @apply border-green-400
-            text-green-400;
+          @apply border-brand-400
+            text-brand-400;
         }
 
         .tabSecondaryLabel {
-          @apply text-green-800
-            dark:text-green-600;
+          @apply text-brand-800
+            dark:text-brand-600;
         }
       }
     }
diff --git a/packages/ui-components/src/Common/ThemeToggle/index.module.css b/packages/ui-components/src/Common/ThemeToggle/index.module.css
index d1480cf221026..a9e28f2325466 100644
--- a/packages/ui-components/src/Common/ThemeToggle/index.module.css
+++ b/packages/ui-components/src/Common/ThemeToggle/index.module.css
@@ -28,7 +28,8 @@
 }
 
 .dropDownItem {
-  @apply flex
+  @apply data-highlighted:bg-brand-600
+    flex
     cursor-pointer
     items-center
     gap-2
@@ -38,12 +39,11 @@
     font-medium
     text-neutral-800
     outline-hidden
-    data-highlighted:bg-green-600
     data-highlighted:text-white
     dark:text-white;
 }
 
 .activeItem {
-  @apply bg-green-600
+  @apply bg-brand-600
     text-white;
 }
diff --git a/packages/ui-components/src/Containers/Footer/index.module.css b/packages/ui-components/src/Containers/Footer/index.module.css
index b4f6a0f44f9b9..77b36eb06e26c 100644
--- a/packages/ui-components/src/Containers/Footer/index.module.css
+++ b/packages/ui-components/src/Containers/Footer/index.module.css
@@ -76,13 +76,13 @@
 
         a {
           @apply max-ml:font-semibold
-            text-green-600
-            dark:text-green-400;
+            text-brand-600
+            dark:text-brand-400;
 
           &:hover {
-            @apply cursor-pointer
-              text-green-900
-              dark:text-green-200;
+            @apply text-brand-900
+              dark:text-brand-200
+              cursor-pointer;
           }
         }
       }
diff --git a/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css b/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
index be3520a41e57f..7b49c39378c02 100644
--- a/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
@@ -32,7 +32,7 @@
     }
 
     &.active {
-      @apply bg-green-600;
+      @apply bg-brand-600;
 
       .label {
         @apply text-white;
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
index f7469c0995b5a..17d4cf1bc4b75 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
@@ -53,8 +53,8 @@
   }
 
   .subGroup[open] > .summary {
-    @apply text-green-600
-      dark:text-green-400;
+    @apply text-brand-600
+      dark:text-brand-400;
   }
 
   .subItemList {
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
index 1b291235c344c..a7e66a9170e9e 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
@@ -41,15 +41,15 @@
     }
 
     .icon {
-      @apply scale-110
-        text-green-600
-        dark:text-green-400;
+      @apply text-brand-600
+        dark:text-brand-400
+        scale-110;
     }
   }
 
   &.active {
     /* Full-width active background and readable text */
-    @apply bg-green-600
+    @apply bg-brand-600
       text-white;
 
     /* Remove pill background on the label; keep full-width bg on the item */
@@ -61,7 +61,7 @@
 
     /* Preserve active background on hover */
     &:hover {
-      @apply bg-green-600;
+      @apply bg-brand-600;
     }
   }
 }
diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css
index c0a56a345dd12..4a27836f1c55b 100644
--- a/packages/ui-components/src/styles/markdown.css
+++ b/packages/ui-components/src/styles/markdown.css
@@ -100,12 +100,12 @@ main {
   /* link that isn't inside a heading */
   a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a) {
     @apply max-ml:font-semibold
-      text-green-600
-      dark:text-green-400;
+      text-brand-600
+      dark:text-brand-400;
 
     &:hover {
-      @apply text-green-900
-        dark:text-green-200;
+      @apply text-brand-900
+        dark:text-brand-200;
     }
 
     &[role='button'] {
@@ -137,7 +137,8 @@ main {
     }
 
     li div:has(> pre) {
-      @apply my-1!;
+      @apply !
+        my-1;
     }
   }
 
@@ -156,7 +157,8 @@ main {
     }
 
     li div:has(> pre) {
-      @apply my-1!;
+      @apply !
+        my-1;
     }
   }
 
diff --git a/packages/ui-components/src/styles/theme.css b/packages/ui-components/src/styles/theme.css
index 0d70b7bcdd0d2..1337537775226 100644
--- a/packages/ui-components/src/styles/theme.css
+++ b/packages/ui-components/src/styles/theme.css
@@ -12,15 +12,15 @@
   --container-12xl: 120rem;
   --breakpoint-ml: 896px;
   --breakpoint-3xl: 120rem;
-  --color-green-100: #edf2eb;
-  --color-green-200: #c5e5b4;
-  --color-green-300: #99cc7d;
-  --color-green-400: #84ba64;
-  --color-green-500: #5fa04e;
-  --color-green-600: #417e38;
-  --color-green-700: #2c682c;
-  --color-green-800: #2c682c;
-  --color-green-900: #1a3f1d;
+  --color-brand-100: #edf2eb;
+  --color-brand-200: #c5e5b4;
+  --color-brand-300: #99cc7d;
+  --color-brand-400: #84ba64;
+  --color-brand-500: #5fa04e;
+  --color-brand-600: #417e38;
+  --color-brand-700: #2c682c;
+  --color-brand-800: #2c682c;
+  --color-brand-900: #1a3f1d;
   --color-neutral-100: #f6f7f9;
   --color-neutral-200: #e9edf0;
   --color-neutral-300: #d9e1e4;
@@ -160,7 +160,7 @@
 @utility bg-gradient-glow-backdrop {
   background-image: radial-gradient(
     8em circle at calc(50%) 10px,
-    var(--color-green-400),
+    var(--color-brand-400),
     transparent 30%
   );
 }