diff --git a/src/styles/brand/blue.css b/src/styles/brand/blue.css
new file mode 100644
index 000000000..45628f532
--- /dev/null
+++ b/src/styles/brand/blue.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-blue-95);
+  --wa-color-brand-90: var(--wa-color-blue-90);
+  --wa-color-brand-80: var(--wa-color-blue-80);
+  --wa-color-brand-70: var(--wa-color-blue-70);
+  --wa-color-brand-60: var(--wa-color-blue-60);
+  --wa-color-brand-50: var(--wa-color-blue-50);
+  --wa-color-brand-40: var(--wa-color-blue-40);
+  --wa-color-brand-30: var(--wa-color-blue-30);
+  --wa-color-brand-20: var(--wa-color-blue-20);
+  --wa-color-brand-10: var(--wa-color-blue-10);
+  --wa-color-brand-05: var(--wa-color-blue-05);
+  --wa-color-brand: var(--wa-color-blue);
+}
diff --git a/src/styles/brand/green.css b/src/styles/brand/green.css
new file mode 100644
index 000000000..9039925a8
--- /dev/null
+++ b/src/styles/brand/green.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-green-95);
+  --wa-color-brand-90: var(--wa-color-green-90);
+  --wa-color-brand-80: var(--wa-color-green-80);
+  --wa-color-brand-70: var(--wa-color-green-70);
+  --wa-color-brand-60: var(--wa-color-green-60);
+  --wa-color-brand-50: var(--wa-color-green-50);
+  --wa-color-brand-40: var(--wa-color-green-40);
+  --wa-color-brand-30: var(--wa-color-green-30);
+  --wa-color-brand-20: var(--wa-color-green-20);
+  --wa-color-brand-10: var(--wa-color-green-10);
+  --wa-color-brand-05: var(--wa-color-green-05);
+  --wa-color-brand: var(--wa-color-green);
+}
diff --git a/src/styles/brand/indigo.css b/src/styles/brand/indigo.css
new file mode 100644
index 000000000..29580393b
--- /dev/null
+++ b/src/styles/brand/indigo.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-indigo-95);
+  --wa-color-brand-90: var(--wa-color-indigo-90);
+  --wa-color-brand-80: var(--wa-color-indigo-80);
+  --wa-color-brand-70: var(--wa-color-indigo-70);
+  --wa-color-brand-60: var(--wa-color-indigo-60);
+  --wa-color-brand-50: var(--wa-color-indigo-50);
+  --wa-color-brand-40: var(--wa-color-indigo-40);
+  --wa-color-brand-30: var(--wa-color-indigo-30);
+  --wa-color-brand-20: var(--wa-color-indigo-20);
+  --wa-color-brand-10: var(--wa-color-indigo-10);
+  --wa-color-brand-05: var(--wa-color-indigo-05);
+  --wa-color-brand: var(--wa-color-indigo);
+}
diff --git a/src/styles/brand/teal.css b/src/styles/brand/teal.css
new file mode 100644
index 000000000..41b24de81
--- /dev/null
+++ b/src/styles/brand/teal.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-teal-95);
+  --wa-color-brand-90: var(--wa-color-teal-90);
+  --wa-color-brand-80: var(--wa-color-teal-80);
+  --wa-color-brand-70: var(--wa-color-teal-70);
+  --wa-color-brand-60: var(--wa-color-teal-60);
+  --wa-color-brand-50: var(--wa-color-teal-50);
+  --wa-color-brand-40: var(--wa-color-teal-40);
+  --wa-color-brand-30: var(--wa-color-teal-30);
+  --wa-color-brand-20: var(--wa-color-teal-20);
+  --wa-color-brand-10: var(--wa-color-teal-10);
+  --wa-color-brand-05: var(--wa-color-teal-05);
+  --wa-color-brand: var(--wa-color-teal);
+}
diff --git a/src/styles/brand/violet.css b/src/styles/brand/violet.css
new file mode 100644
index 000000000..1c82715b4
--- /dev/null
+++ b/src/styles/brand/violet.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-violet-95);
+  --wa-color-brand-90: var(--wa-color-violet-90);
+  --wa-color-brand-80: var(--wa-color-violet-80);
+  --wa-color-brand-70: var(--wa-color-violet-70);
+  --wa-color-brand-60: var(--wa-color-violet-60);
+  --wa-color-brand-50: var(--wa-color-violet-50);
+  --wa-color-brand-40: var(--wa-color-violet-40);
+  --wa-color-brand-30: var(--wa-color-violet-30);
+  --wa-color-brand-20: var(--wa-color-violet-20);
+  --wa-color-brand-10: var(--wa-color-violet-10);
+  --wa-color-brand-05: var(--wa-color-violet-05);
+  --wa-color-brand: var(--wa-color-violet);
+}
diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css
index a94ddc160..ae05615c7 100644
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
+@import url('../../brand/green.css');
 
 :where(:root),
 :host,
@@ -13,7 +14,7 @@
    * Foundational Colors
    */
   --wa-color-text-normal: var(--wa-color-gray-05);
-  --wa-color-text-link: var(--wa-color-green-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
   --wa-color-focus: var(--wa-color-blue-60);
 
@@ -23,14 +24,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
-  --wa-color-brand-fill-normal: var(--wa-color-green-90);
-  --wa-color-brand-fill-loud: var(--wa-color-green-80);
-  --wa-color-brand-border-quiet: var(--wa-color-green-90);
-  --wa-color-brand-border-normal: var(--wa-color-green-80);
-  --wa-color-brand-border-loud: var(--wa-color-green-70);
-  --wa-color-brand-on-quiet: var(--wa-color-green-40);
-  --wa-color-brand-on-normal: var(--wa-color-green-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: black;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -82,19 +83,19 @@
    */
   --wa-color-surface-lowered: black;
 
-  --wa-color-text-link: var(--wa-color-green-70);
+  --wa-color-text-link: var(--wa-color-brand-70);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
-  --wa-color-brand-fill-normal: var(--wa-color-green-20);
-  --wa-color-brand-fill-loud: var(--wa-color-green-80);
-  --wa-color-brand-border-quiet: var(--wa-color-green-20);
-  --wa-color-brand-border-normal: var(--wa-color-green-30);
-  --wa-color-brand-border-loud: var(--wa-color-green-60);
-  --wa-color-brand-on-quiet: var(--wa-color-green-80);
-  --wa-color-brand-on-normal: var(--wa-color-green-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: black;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-10);
diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css
index b6ac140c0..63bc8096c 100644
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/bright.css');
 @import url('../default/color.css');
+@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -14,14 +15,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-border-normal: var(--wa-color-blue-50);
-  --wa-color-brand-border-loud: var(--wa-color-blue-30);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-border-normal: var(--wa-color-brand-50);
+  --wa-color-brand-border-loud: var(--wa-color-brand-30);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: var(--wa-color-text-normal);
 
   --wa-color-success-fill-quiet: var(--wa-color-teal-95);
@@ -74,14 +75,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-50);
-  --wa-color-brand-border-loud: var(--wa-color-blue-80);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-on-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-50);
+  --wa-color-brand-border-loud: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-teal-10);
diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css
index aa81c5acd..9bdb503d0 100644
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/default.css');
 @import url('../default/color.css');
+@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -21,14 +22,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-border-normal: var(--wa-color-blue-60);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-60);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -93,15 +94,15 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-40);
-  --wa-color-brand-border-loud: var(--wa-color-blue-80);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-on-normal: var(--wa-color-blue-95);
-  --wa-color-brand-on-loud: var(--wa-color-blue-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-normal: var(--wa-color-brand-95);
+  --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
   --wa-color-success-fill-normal: var(--wa-color-green-30);
diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css
index ccbc3c759..c2ded2237 100644
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/classic.css');
 @import url('../default/color.css');
+@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -11,14 +12,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-50);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-50);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -73,14 +74,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-40);
-  --wa-color-brand-border-loud: var(--wa-color-blue-50);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-on-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: var(--wa-color-gray-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
index 029239f98..1722f8a1a 100644
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -1,3 +1,5 @@
+@import url('../../brand/blue.css');
+
 /**
  * Foundational Colors and Semantic Colors
  */
@@ -25,7 +27,7 @@
    * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
   --wa-color-text-normal: var(--wa-color-gray-10);
   --wa-color-text-quiet: var(--wa-color-gray-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
   /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
   --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
@@ -42,7 +44,7 @@
 
   /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
    * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
-  --wa-color-focus: var(--wa-color-blue-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
   --wa-color-mix-hover: black 10%;
@@ -57,14 +59,14 @@
    *  *  On for content displayed on a fill with the corresponding attention
    * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -125,7 +127,7 @@
 
   --wa-color-text-normal: var(--wa-color-gray-95);
   --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-blue-70);
+  --wa-color-text-link: var(--wa-color-brand-70);
 
   --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
   --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
@@ -137,7 +139,7 @@
     transparent
   );
 
-  --wa-color-focus: var(--wa-color-blue-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   --wa-color-mix-hover: black 8%;
   --wa-color-mix-active: black 16%;
@@ -145,14 +147,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-border-normal: var(--wa-color-blue-30);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
-  --wa-color-brand-on-normal: var(--wa-color-blue-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-10);
diff --git a/src/styles/themes/glossy/color.css b/src/styles/themes/glossy/color.css
index fae876a43..0e37f50bf 100644
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/elegant.css');
 @import url('../default/color.css');
+@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -9,21 +10,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-indigo-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);
@@ -41,21 +42,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-indigo-70);
+  --wa-color-text-link: var(--wa-color-brand-70);
 
-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   /**
     * Semantic Colors
     */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);
diff --git a/src/styles/themes/matter/color.css b/src/styles/themes/matter/color.css
index 4048ce9f9..62648dcbf 100644
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/mild.css');
 @import url('../default/color.css');
+@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -13,14 +14,14 @@
    * Foundational Colors
    */
 
-  --wa-color-surface-raised: var(--wa-color-indigo-95);
+  --wa-color-surface-raised: var(--wa-color-brand-95);
   --wa-color-surface-lowered: var(--wa-color-gray-90);
 
-  --wa-color-text-link: var(--wa-color-indigo-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.3);
 
-  --wa-color-focus: var(--wa-color-indigo-40);
+  --wa-color-focus: var(--wa-color-brand-40);
 
   --wa-color-mix-hover: white 5%;
   --wa-color-mix-active: white 10%;
@@ -28,14 +29,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-50);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -85,21 +86,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-indigo-70);
-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-70);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-70);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-on-loud: var(--wa-color-indigo-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
+  --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
   --wa-color-success-fill-normal: var(--wa-color-green-30);
diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css
index 5234b9779..a4d4468d5 100644
--- a/src/styles/themes/mellow/color.css
+++ b/src/styles/themes/mellow/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/natural.css');
 @import url('../default/color.css');
+@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -17,23 +18,23 @@
   --wa-color-surface-lowered: var(--wa-color-gray-90);
   --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);
 
-  --wa-color-text-normal: var(--wa-color-blue-20);
-  --wa-color-text-quiet: var(--wa-color-blue-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
+  --wa-color-text-normal: var(--wa-color-brand-20);
+  --wa-color-text-quiet: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
-  --wa-color-focus: var(--wa-color-blue-50);
+  --wa-color-focus: var(--wa-color-brand-50);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-80);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-40);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-border-normal: var(--wa-color-blue-70);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -85,8 +86,8 @@
    */
   --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
 
-  --wa-color-text-normal: var(--wa-color-blue-90);
-  --wa-color-text-quiet: var(--wa-color-blue-70);
+  --wa-color-text-normal: var(--wa-color-brand-90);
+  --wa-color-text-quiet: var(--wa-color-brand-70);
 
   /**
    * Semantic Colors
diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css
index 8271c0f42..11c82161b 100644
--- a/src/styles/themes/playful/color.css
+++ b/src/styles/themes/playful/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
+@import url('../../brand/violet.css');
 
 :where(:root),
 :host,
@@ -13,19 +14,19 @@
 
   --wa-color-text-link: var(--wa-color-yellow-40);
 
-  --wa-color-focus: var(--wa-color-violet-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-80);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-violet-70);
-  --wa-color-brand-border-loud: var(--wa-color-violet-50);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-30);
-  --wa-color-brand-on-normal: var(--wa-color-violet-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -84,21 +85,21 @@
   --wa-color-text-quiet: var(--wa-color-gray-60);
   --wa-color-text-link: var(--wa-color-yellow-80);
 
-  --wa-color-focus: var(--wa-color-violet-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   --wa-color-mix-hover: white 10%;
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-20);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-40);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-30);
-  --wa-color-brand-border-normal: var(--wa-color-violet-40);
-  --wa-color-brand-border-loud: var(--wa-color-violet-50);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-70);
-  --wa-color-brand-on-normal: var(--wa-color-violet-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
diff --git a/src/styles/themes/premium/color.css b/src/styles/themes/premium/color.css
index 66fd39457..ee0767887 100644
--- a/src/styles/themes/premium/color.css
+++ b/src/styles/themes/premium/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/anodized.css');
 @import url('../default/color.css');
+@import url('../../brand/teal.css');
 
 :where(:root),
 :host,
@@ -11,9 +12,9 @@
    */
   --wa-color-surface-border: var(--wa-color-gray-80);
 
-  --wa-color-text-link: var(--wa-color-teal-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
-  --wa-color-focus: var(--wa-color-teal-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   --wa-color-mix-hover: white 10%;
   --wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -21,15 +22,15 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-80);
-  --wa-color-brand-border-normal: var(--wa-color-teal-70);
-  --wa-color-brand-border-loud: var(--wa-color-teal-50);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
-  --wa-color-brand-on-normal: var(--wa-color-teal-30);
-  --wa-color-brand-on-loud: var(--wa-color-teal-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-on-loud: var(--wa-color-brand-20);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
   --wa-color-success-fill-normal: var(--wa-color-green-90);
@@ -85,9 +86,9 @@
 
   --wa-color-text-normal: var(--wa-color-gray-95);
   --wa-color-text-quiet: var(--wa-color-gray-80);
-  --wa-color-text-link: var(--wa-color-teal-80);
+  --wa-color-text-link: var(--wa-color-brand-80);
 
-  --wa-color-focus: var(--wa-color-teal-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   --wa-color-mix-hover: white 20%;
   --wa-color-mix-active: var(--wa-color-surface-default) 10%;
@@ -95,15 +96,15 @@
   /**
     * Semantic Colors
     */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-30);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-40);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-30);
-  --wa-color-brand-border-normal: var(--wa-color-teal-40);
-  --wa-color-brand-border-loud: var(--wa-color-teal-70);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-70);
-  --wa-color-brand-on-normal: var(--wa-color-teal-90);
-  --wa-color-brand-on-loud: var(--wa-color-teal-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
+  --wa-color-brand-on-loud: var(--wa-color-brand-20);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-30);
   --wa-color-success-fill-normal: var(--wa-color-green-40);
diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css
index 2803eca64..5af80c5ed 100644
--- a/src/styles/themes/tailspin/color.css
+++ b/src/styles/themes/tailspin/color.css
@@ -1,5 +1,6 @@
 @import url('../../color/vogue.css');
 @import url('../default/color.css');
+@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -9,11 +10,11 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-indigo-40);
+  --wa-color-text-link: var(--wa-color-brand-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.05);
 
-  --wa-color-focus: var(--wa-color-indigo-50);
+  --wa-color-focus: var(--wa-color-brand-50);
 
   --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
   --wa-color-mix-active: var(--wa-color-gray-80) 10%;
@@ -21,14 +22,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
@@ -88,11 +89,11 @@
 
   --wa-color-text-normal: white;
   --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-indigo-70);
+  --wa-color-text-link: var(--wa-color-brand-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);
 
   --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
   --wa-color-mix-active: var(--wa-color-gray-70) 10%;
@@ -100,14 +101,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-50);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);