diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index 84e11924..9ebead13 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -34,21 +34,21 @@
   --color-black: #101111;
   --color-white: #fff;
 
-  --color-violet-50: #ecf2ff;
-  --color-violet-100: #dde6ff;
-  --color-violet-200: #c2d1ff;
-  --color-violet-300: #9cb1ff;
-  --color-violet-400: #7586ff;
-  --color-violet-500: #666eff;
-  --color-violet-600: #3b36f5;
-  --color-violet-700: #322ad8;
-  --color-violet-800: #2925ae;
-  --color-violet-900: #181650;
-  --color-violet: #666eff;
+  --color-brand-50: #e5efff;
+  --color-brand-100: #abcbff;
+  --color-brand-200: #72a7ff;
+  --color-brand-300: #3983ff;
+  --color-brand-400: #005fff;
+  --color-brand-500: #004bc5;
+  --color-brand-600: #00358c;
+  --color-brand-700: #002666;
+  --color-brand-800: #001f53;
+  --color-brand-900: #001333;
+  --color-brand: #005fff;
 
   --color-gray-50: #f8f8f8;
   --color-gray-100: #edeeee;
-  --color-gray-200: #e6e7e7;
+  --color-gray-200: #e5e5e5;
   --color-gray-300: #bbbebe;
   --color-gray-400: #878888;
   --color-gray-500: #686e6e;
diff --git a/packages/app-elements/src/ui/atoms/Badge/Badge.tsx b/packages/app-elements/src/ui/atoms/Badge/Badge.tsx
index bff7cda8..326b3578 100644
--- a/packages/app-elements/src/ui/atoms/Badge/Badge.tsx
+++ b/packages/app-elements/src/ui/atoms/Badge/Badge.tsx
@@ -24,7 +24,7 @@ export const Badge: React.FC<BadgeProps> = ({
       {...rest}
       className={cn([
         className,
-        "text-xs font-semibold py-[3px] px-2 rounded inline-block",
+        "text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block",
         variantCss[variant],
       ])}
     >
diff --git a/packages/app-elements/src/ui/atoms/Badge/badgeVariants.ts b/packages/app-elements/src/ui/atoms/Badge/badgeVariants.ts
index b02e1bd4..0c82a561 100644
--- a/packages/app-elements/src/ui/atoms/Badge/badgeVariants.ts
+++ b/packages/app-elements/src/ui/atoms/Badge/badgeVariants.ts
@@ -1,4 +1,6 @@
 type BadgeVariant =
+  | "brand"
+  | "brand-solid"
   | "danger-solid"
   | "danger"
   | "primary-solid"
@@ -15,14 +17,16 @@ type BadgeVariant =
 export const variantCss: Record<BadgeVariant, string> = {
   "danger-solid": "text-white bg-red",
   "primary-solid": "text-white bg-primary",
-  "secondary-solid": "text-gray bg-gray-200",
-  "success-solid": "text-white bg-green",
-  "teal-solid": "text-white bg-teal-800",
-  "warning-solid": "text-white bg-orange",
-  danger: "text-red bg-red-50",
-  primary: "text-primary bg-primary-50",
-  secondary: "text-gray-500 bg-gray-50",
-  success: "text-green-600 bg-green-50",
-  teal: "text-teal-800 bg-teal-50",
-  warning: "text-orange-600 bg-orange-50",
+  "secondary-solid": "text-white bg-gray-400",
+  "success-solid": "text-white bg-green-500",
+  "teal-solid": "text-white bg-teal-600",
+  "warning-solid": "text-white bg-orange-500",
+  "brand-solid": "text-white bg-brand",
+  danger: "text-red-700 bg-red-100",
+  primary: "text-primary bg-primary-100",
+  secondary: "text-gray-600 bg-gray-100",
+  success: "text-green-700 bg-green-100",
+  teal: "text-teal-800 bg-teal-100",
+  warning: "text-orange-700 bg-orange-100",
+  brand: "text-brand bg-brand-50",
 }
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
index 4a74684c..a8047fc6 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
+++ b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
@@ -42,7 +42,7 @@ describe("PageHeading", () => {
     const badgeElement = getByTestId("page-heading-badge")
     expect(badgeElement).toBeInTheDocument()
     expect(
-      badgeElement.querySelector(".text-green-600.bg-green-50"),
+      badgeElement.querySelector(".text-green-700.bg-green-100"),
     ).toBeInTheDocument()
   })
 
diff --git a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
index 4d1a717b..b016eb0a 100644
--- a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
+++ b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -267,7 +267,7 @@ exports[`ResourceLineItems > should render 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -365,7 +365,7 @@ exports[`ResourceLineItems > should render the Footer prop when defined 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -484,7 +484,7 @@ exports[`ResourceLineItems > should render the InputSpinner and the trash icon w
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -677,7 +677,7 @@ exports[`ResourceLineItems > should render the bundle 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -830,7 +830,7 @@ exports[`ResourceLineItems > should render the list item options 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -1158,7 +1158,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"
@@ -1361,7 +1361,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
             class="mt-2"
           >
             <div
-              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-[12px] font-semibold px-2 py-1.5 leading-3 rounded inline-block text-gray-600 bg-gray-100"
             >
               <div
                 class="flex items-center gap-1"