From 6aad2060710971ec514ad6c6c4f46b8dcf216637 Mon Sep 17 00:00:00 2001
From: Dan Cormier <dancormierall@gmail.com>
Date: Fri, 5 Dec 2025 13:24:45 -0500
Subject: [PATCH 1/6] chore(colors): add initial brand color set

---
 .../lib/exports/color-sets.less               | 26 +++++++++++++
 packages/stacks-docs/_data/colors.json        | 38 +++++++++++++++++++
 .../product/foundation/colors.html            | 35 +++++++++++++++++
 3 files changed, 99 insertions(+)

diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less
index 7bc99ccb0e..2f39b7bb01 100644
--- a/packages/stacks-classic/lib/exports/color-sets.less
+++ b/packages/stacks-classic/lib/exports/color-sets.less
@@ -590,6 +590,28 @@
     default: var(--black);
 }
 
+// brand colors
+.set-brand() {
+    default: #FF5E00; // renamed from Stack Orange. Can this be `--brand`?
+    black: #201C1D; // Do we need this extra value? It's almost exactly `--black-600`
+    white: #FFFFFF; // Do we need this extra value? It's exactly `--white`
+    off-white: #F0EFEE;
+    blue-light: #C6D1E1;
+    blue: #5074EF; // Do we need this extra value? It's close to `--blue-500`
+    blue-dark: #00165E;
+    brown-light: #998B7A;
+    green: #86AF25;
+    green-dark: #263603;
+    orange-medium: #6E1527; // Should this be `red`?
+    orange-dark: #31070F; // Should this be `red-dark`?
+    pink: #F39FFF; // Should this be `pink-light`?
+    pink-dark: #4D1955;
+    purple: #9D9CFF; // Should this be purple-light?
+    purple-dark: #390A91; // Should this be purple?
+    yellow: #FFCC00;
+    yellow-dark: #423101;
+}
+
 // Color sets
 .sets-mode() {
     light: .sets-light();
@@ -681,6 +703,7 @@
     focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
+    brand: .set-brand();
 }
 
 .sets-utility-dark() {
@@ -691,6 +714,7 @@
     focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
+    brand: .set-brand();
 }
 
 .sets-utility-hc() {
@@ -701,6 +725,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
+    brand: .set-brand();
 }
 
 .sets-utility-dark-hc() {
@@ -711,6 +736,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();
+    brand: .set-brand();
 }
 
 // Theme values
diff --git a/packages/stacks-docs/_data/colors.json b/packages/stacks-docs/_data/colors.json
index ec8237ea2a..3cc1fd8e15 100644
--- a/packages/stacks-docs/_data/colors.json
+++ b/packages/stacks-docs/_data/colors.json
@@ -73,6 +73,44 @@
         "type": "monochrome"
       }
     ],
+    "brand": [
+      {
+        "name": "brand",
+        "stops": [
+          "",
+          "black",
+          "white",
+          "off-white",
+          "blue-light",
+          "blue",
+          "blue-dark",
+          "brown-light",
+          "green",
+          "green-dark",
+          "orange-medium",
+          "orange-dark",
+          "pink",
+          "pink-dark",
+          "purple",
+          "purple-dark",
+          "yellow",
+          "yellow-dark"
+        ],
+        "invert": [
+          "black",
+          "blue",
+          "blue-dark",
+          "green-dark",
+          "orange-medium",
+          "orange-dark",
+          "pink-dark",
+          "purple-dark",
+          "yellow-dark"
+        ],
+        "invertAlt": "gray-600",
+        "type": "color"
+      }
+    ],
     "roles": [
       {
         "name": "neutral",
diff --git a/packages/stacks-docs/product/foundation/colors.html b/packages/stacks-docs/product/foundation/colors.html
index 9c9290707d..90f1e7a879 100644
--- a/packages/stacks-docs/product/foundation/colors.html
+++ b/packages/stacks-docs/product/foundation/colors.html
@@ -38,6 +38,41 @@ <h3>{{ set.name | capitalize }}</h3>
     </div>
 </section>
 
+<section class="stacks-section">
+    {% header "h2", "Brand" %}
+
+    <p>TODO SHINE add guidance for brand colors.</p>
+    <div class="d-grid g24 mt16 mb32" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
+        {% for set in colors[0].brand %}
+            {% assign setClasses = "" %}
+            <div>
+                <div class="bar-md overflow-hidden bs-md ba baw2 bc-white">
+                    {% for stop in set.stops %}
+                        {% assign name = set.name | replace: " ", "-" %}
+
+                        {% if stop != "" %}
+                            {% assign name = set.name | append: "-" | append: stop | replace: " ", "-" %}
+                        {% endif %}
+
+                        {% assign stopFc = "fc-black" %}
+                        {% if set.invert contains stop %}
+                            {% assign stopFc = "fc-white" %}
+                        {% endif %}
+
+                        {% assign style = "background-color: var(--brand-" | append: stop | append: ")" %}
+                        {% if stop == "" %}
+                            {% assign style = "background-color: var(--brand)" %}
+                        {% endif %}
+                        <div class="p12 {{ stopFc }}" style="{{ style }}">
+                            {{ name }}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</section>
+
 <section class="stacks-section">
     {% header "h2", "Classes" %}
 

From fbf83d48f995d320f959c061f9a94e680001b6a5 Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Mon, 2 Mar 2026 13:27:51 +0000
Subject: [PATCH 2/6] styles and copy

---
 packages/stacks-docs/product/foundation/colors.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/stacks-docs/product/foundation/colors.html b/packages/stacks-docs/product/foundation/colors.html
index 0941ca3dee..8d0ec58dc4 100644
--- a/packages/stacks-docs/product/foundation/colors.html
+++ b/packages/stacks-docs/product/foundation/colors.html
@@ -60,12 +60,13 @@ <h3 class="mb8 fs-body2">{{ set.name | capitalize }}</h3>
 <section class="docs-section">
     {% header "h2", "Brand" %}
 
-    <p>TODO SHINE add guidance for brand colors.</p>
+    <p class="docs-copy">Please see <a href="https://alpha.stackoverflow.design/brand/color">the brand guidlines for color use</a>, these should not be used without prior direction from the brand team.</p>
+
     <div class="d-grid g24 mt16 mb32" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
         {% for set in colors[0].brand %}
             {% assign setClasses = "" %}
             <div>
-                <div class="bar-md overflow-hidden bs-md ba baw2 bc-white">
+                <div class="ba bc-black-400 overflow-hidden">
                     {% for stop in set.stops %}
                         {% assign name = set.name | replace: " ", "-" %}
 

From 2a1d9b20bb073a07a1e9148fb71b5e9c22a853f4 Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Mon, 2 Mar 2026 13:28:04 +0000
Subject: [PATCH 3/6] remove white from brand set

---
 packages/stacks-docs/_data/colors.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/stacks-docs/_data/colors.json b/packages/stacks-docs/_data/colors.json
index abb6cc9405..a8f0423d33 100644
--- a/packages/stacks-docs/_data/colors.json
+++ b/packages/stacks-docs/_data/colors.json
@@ -79,7 +79,6 @@
         "stops": [
           "",
           "black",
-          "white",
           "off-white",
           "blue-light",
           "blue",

From d39aeb710f8713e14301107fc766675341094e78 Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Mon, 2 Mar 2026 13:28:14 +0000
Subject: [PATCH 4/6] tidy comments

---
 .../stacks-classic/lib/exports/color-sets.less  | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less
index b9e106dbf3..24be17606b 100644
--- a/packages/stacks-classic/lib/exports/color-sets.less
+++ b/packages/stacks-classic/lib/exports/color-sets.less
@@ -593,22 +593,21 @@
 
 // brand colors
 .set-brand() {
-    default: #FF5E00; // renamed from Stack Orange. Can this be `--brand`?
-    black: #201C1D; // Do we need this extra value? It's almost exactly `--black-600`
-    white: #FFFFFF; // Do we need this extra value? It's exactly `--white`
+    default: #FF5E00;
+    black: #201C1D;
     off-white: #F0EFEE;
     blue-light: #C6D1E1;
-    blue: #5074EF; // Do we need this extra value? It's close to `--blue-500`
+    blue: #5074EF;
     blue-dark: #00165E;
     brown-light: #998B7A;
     green: #86AF25;
     green-dark: #263603;
-    orange-medium: #6E1527; // Should this be `red`?
-    orange-dark: #31070F; // Should this be `red-dark`?
-    pink: #F39FFF; // Should this be `pink-light`?
+    orange-medium: #6E1527;
+    orange-dark: #31070F;
+    pink: #F39FFF;
     pink-dark: #4D1955;
-    purple: #9D9CFF; // Should this be purple-light?
-    purple-dark: #390A91; // Should this be purple?
+    purple: #9D9CFF;
+    purple-dark: #390A91;
     yellow: #FFCC00;
     yellow-dark: #423101;
 }

From eedfeff9518f5d1e90ead9c99efcd0bc1879d54c Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Mon, 2 Mar 2026 13:28:21 +0000
Subject: [PATCH 5/6] add brand to light set

---
 packages/stacks-classic/lib/exports/color-sets.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less
index 24be17606b..ab4530e728 100644
--- a/packages/stacks-classic/lib/exports/color-sets.less
+++ b/packages/stacks-classic/lib/exports/color-sets.less
@@ -633,6 +633,7 @@
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
+    brand: .set-brand();
 }
 
 .sets-dark() {

From 29d49c84fd6b484683d903fa5da5107b429f854f Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Mon, 2 Mar 2026 13:45:53 +0000
Subject: [PATCH 6/6] update tests

---
 .../__snapshots__/color.less.test.ts.snap     | 697 ++++++++++++++++++
 .../color-mixins.less.test.ts.snap            |  17 +
 .../__snapshots__/color.less.test.ts.snap     | 102 +++
 3 files changed, 816 insertions(+)

diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap
index ddaa15a42f..2f6a73f656 100644
--- a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap
+++ b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap
@@ -1408,6 +1408,363 @@ exports[`atomic: color > should output all atomic color classes and custom prope
     color: var(--bronze-400) !important;
 }
 
+.bg-brand,
+.h\\:bg-brand:hover,
+.f\\:bg-brand:focus,
+.f\\:bg-brand:focus-within {
+    background-color: var(--brand) !important;
+}
+
+.bc-brand,
+.h\\:bc-brand:hover,
+.f\\:bc-brand:focus,
+.f\\:bc-brand:focus-within {
+    border-color: var(--brand) !important;
+}
+
+.fc-brand,
+.h\\:fc-brand:hover,
+.f\\:fc-brand:focus,
+.f\\:fc-brand:focus-within {
+    color: var(--brand) !important;
+}
+
+.bg-brand-black,
+.h\\:bg-brand-black:hover,
+.f\\:bg-brand-black:focus,
+.f\\:bg-brand-black:focus-within {
+    background-color: var(--brand-black) !important;
+}
+
+.bc-brand-black,
+.h\\:bc-brand-black:hover,
+.f\\:bc-brand-black:focus,
+.f\\:bc-brand-black:focus-within {
+    border-color: var(--brand-black) !important;
+}
+
+.fc-brand-black,
+.h\\:fc-brand-black:hover,
+.f\\:fc-brand-black:focus,
+.f\\:fc-brand-black:focus-within {
+    color: var(--brand-black) !important;
+}
+
+.bg-brand-off-white,
+.h\\:bg-brand-off-white:hover,
+.f\\:bg-brand-off-white:focus,
+.f\\:bg-brand-off-white:focus-within {
+    background-color: var(--brand-off-white) !important;
+}
+
+.bc-brand-off-white,
+.h\\:bc-brand-off-white:hover,
+.f\\:bc-brand-off-white:focus,
+.f\\:bc-brand-off-white:focus-within {
+    border-color: var(--brand-off-white) !important;
+}
+
+.fc-brand-off-white,
+.h\\:fc-brand-off-white:hover,
+.f\\:fc-brand-off-white:focus,
+.f\\:fc-brand-off-white:focus-within {
+    color: var(--brand-off-white) !important;
+}
+
+.bg-brand-blue-light,
+.h\\:bg-brand-blue-light:hover,
+.f\\:bg-brand-blue-light:focus,
+.f\\:bg-brand-blue-light:focus-within {
+    background-color: var(--brand-blue-light) !important;
+}
+
+.bc-brand-blue-light,
+.h\\:bc-brand-blue-light:hover,
+.f\\:bc-brand-blue-light:focus,
+.f\\:bc-brand-blue-light:focus-within {
+    border-color: var(--brand-blue-light) !important;
+}
+
+.fc-brand-blue-light,
+.h\\:fc-brand-blue-light:hover,
+.f\\:fc-brand-blue-light:focus,
+.f\\:fc-brand-blue-light:focus-within {
+    color: var(--brand-blue-light) !important;
+}
+
+.bg-brand-blue,
+.h\\:bg-brand-blue:hover,
+.f\\:bg-brand-blue:focus,
+.f\\:bg-brand-blue:focus-within {
+    background-color: var(--brand-blue) !important;
+}
+
+.bc-brand-blue,
+.h\\:bc-brand-blue:hover,
+.f\\:bc-brand-blue:focus,
+.f\\:bc-brand-blue:focus-within {
+    border-color: var(--brand-blue) !important;
+}
+
+.fc-brand-blue,
+.h\\:fc-brand-blue:hover,
+.f\\:fc-brand-blue:focus,
+.f\\:fc-brand-blue:focus-within {
+    color: var(--brand-blue) !important;
+}
+
+.bg-brand-blue-dark,
+.h\\:bg-brand-blue-dark:hover,
+.f\\:bg-brand-blue-dark:focus,
+.f\\:bg-brand-blue-dark:focus-within {
+    background-color: var(--brand-blue-dark) !important;
+}
+
+.bc-brand-blue-dark,
+.h\\:bc-brand-blue-dark:hover,
+.f\\:bc-brand-blue-dark:focus,
+.f\\:bc-brand-blue-dark:focus-within {
+    border-color: var(--brand-blue-dark) !important;
+}
+
+.fc-brand-blue-dark,
+.h\\:fc-brand-blue-dark:hover,
+.f\\:fc-brand-blue-dark:focus,
+.f\\:fc-brand-blue-dark:focus-within {
+    color: var(--brand-blue-dark) !important;
+}
+
+.bg-brand-brown-light,
+.h\\:bg-brand-brown-light:hover,
+.f\\:bg-brand-brown-light:focus,
+.f\\:bg-brand-brown-light:focus-within {
+    background-color: var(--brand-brown-light) !important;
+}
+
+.bc-brand-brown-light,
+.h\\:bc-brand-brown-light:hover,
+.f\\:bc-brand-brown-light:focus,
+.f\\:bc-brand-brown-light:focus-within {
+    border-color: var(--brand-brown-light) !important;
+}
+
+.fc-brand-brown-light,
+.h\\:fc-brand-brown-light:hover,
+.f\\:fc-brand-brown-light:focus,
+.f\\:fc-brand-brown-light:focus-within {
+    color: var(--brand-brown-light) !important;
+}
+
+.bg-brand-green,
+.h\\:bg-brand-green:hover,
+.f\\:bg-brand-green:focus,
+.f\\:bg-brand-green:focus-within {
+    background-color: var(--brand-green) !important;
+}
+
+.bc-brand-green,
+.h\\:bc-brand-green:hover,
+.f\\:bc-brand-green:focus,
+.f\\:bc-brand-green:focus-within {
+    border-color: var(--brand-green) !important;
+}
+
+.fc-brand-green,
+.h\\:fc-brand-green:hover,
+.f\\:fc-brand-green:focus,
+.f\\:fc-brand-green:focus-within {
+    color: var(--brand-green) !important;
+}
+
+.bg-brand-green-dark,
+.h\\:bg-brand-green-dark:hover,
+.f\\:bg-brand-green-dark:focus,
+.f\\:bg-brand-green-dark:focus-within {
+    background-color: var(--brand-green-dark) !important;
+}
+
+.bc-brand-green-dark,
+.h\\:bc-brand-green-dark:hover,
+.f\\:bc-brand-green-dark:focus,
+.f\\:bc-brand-green-dark:focus-within {
+    border-color: var(--brand-green-dark) !important;
+}
+
+.fc-brand-green-dark,
+.h\\:fc-brand-green-dark:hover,
+.f\\:fc-brand-green-dark:focus,
+.f\\:fc-brand-green-dark:focus-within {
+    color: var(--brand-green-dark) !important;
+}
+
+.bg-brand-orange-medium,
+.h\\:bg-brand-orange-medium:hover,
+.f\\:bg-brand-orange-medium:focus,
+.f\\:bg-brand-orange-medium:focus-within {
+    background-color: var(--brand-orange-medium) !important;
+}
+
+.bc-brand-orange-medium,
+.h\\:bc-brand-orange-medium:hover,
+.f\\:bc-brand-orange-medium:focus,
+.f\\:bc-brand-orange-medium:focus-within {
+    border-color: var(--brand-orange-medium) !important;
+}
+
+.fc-brand-orange-medium,
+.h\\:fc-brand-orange-medium:hover,
+.f\\:fc-brand-orange-medium:focus,
+.f\\:fc-brand-orange-medium:focus-within {
+    color: var(--brand-orange-medium) !important;
+}
+
+.bg-brand-orange-dark,
+.h\\:bg-brand-orange-dark:hover,
+.f\\:bg-brand-orange-dark:focus,
+.f\\:bg-brand-orange-dark:focus-within {
+    background-color: var(--brand-orange-dark) !important;
+}
+
+.bc-brand-orange-dark,
+.h\\:bc-brand-orange-dark:hover,
+.f\\:bc-brand-orange-dark:focus,
+.f\\:bc-brand-orange-dark:focus-within {
+    border-color: var(--brand-orange-dark) !important;
+}
+
+.fc-brand-orange-dark,
+.h\\:fc-brand-orange-dark:hover,
+.f\\:fc-brand-orange-dark:focus,
+.f\\:fc-brand-orange-dark:focus-within {
+    color: var(--brand-orange-dark) !important;
+}
+
+.bg-brand-pink,
+.h\\:bg-brand-pink:hover,
+.f\\:bg-brand-pink:focus,
+.f\\:bg-brand-pink:focus-within {
+    background-color: var(--brand-pink) !important;
+}
+
+.bc-brand-pink,
+.h\\:bc-brand-pink:hover,
+.f\\:bc-brand-pink:focus,
+.f\\:bc-brand-pink:focus-within {
+    border-color: var(--brand-pink) !important;
+}
+
+.fc-brand-pink,
+.h\\:fc-brand-pink:hover,
+.f\\:fc-brand-pink:focus,
+.f\\:fc-brand-pink:focus-within {
+    color: var(--brand-pink) !important;
+}
+
+.bg-brand-pink-dark,
+.h\\:bg-brand-pink-dark:hover,
+.f\\:bg-brand-pink-dark:focus,
+.f\\:bg-brand-pink-dark:focus-within {
+    background-color: var(--brand-pink-dark) !important;
+}
+
+.bc-brand-pink-dark,
+.h\\:bc-brand-pink-dark:hover,
+.f\\:bc-brand-pink-dark:focus,
+.f\\:bc-brand-pink-dark:focus-within {
+    border-color: var(--brand-pink-dark) !important;
+}
+
+.fc-brand-pink-dark,
+.h\\:fc-brand-pink-dark:hover,
+.f\\:fc-brand-pink-dark:focus,
+.f\\:fc-brand-pink-dark:focus-within {
+    color: var(--brand-pink-dark) !important;
+}
+
+.bg-brand-purple,
+.h\\:bg-brand-purple:hover,
+.f\\:bg-brand-purple:focus,
+.f\\:bg-brand-purple:focus-within {
+    background-color: var(--brand-purple) !important;
+}
+
+.bc-brand-purple,
+.h\\:bc-brand-purple:hover,
+.f\\:bc-brand-purple:focus,
+.f\\:bc-brand-purple:focus-within {
+    border-color: var(--brand-purple) !important;
+}
+
+.fc-brand-purple,
+.h\\:fc-brand-purple:hover,
+.f\\:fc-brand-purple:focus,
+.f\\:fc-brand-purple:focus-within {
+    color: var(--brand-purple) !important;
+}
+
+.bg-brand-purple-dark,
+.h\\:bg-brand-purple-dark:hover,
+.f\\:bg-brand-purple-dark:focus,
+.f\\:bg-brand-purple-dark:focus-within {
+    background-color: var(--brand-purple-dark) !important;
+}
+
+.bc-brand-purple-dark,
+.h\\:bc-brand-purple-dark:hover,
+.f\\:bc-brand-purple-dark:focus,
+.f\\:bc-brand-purple-dark:focus-within {
+    border-color: var(--brand-purple-dark) !important;
+}
+
+.fc-brand-purple-dark,
+.h\\:fc-brand-purple-dark:hover,
+.f\\:fc-brand-purple-dark:focus,
+.f\\:fc-brand-purple-dark:focus-within {
+    color: var(--brand-purple-dark) !important;
+}
+
+.bg-brand-yellow,
+.h\\:bg-brand-yellow:hover,
+.f\\:bg-brand-yellow:focus,
+.f\\:bg-brand-yellow:focus-within {
+    background-color: var(--brand-yellow) !important;
+}
+
+.bc-brand-yellow,
+.h\\:bc-brand-yellow:hover,
+.f\\:bc-brand-yellow:focus,
+.f\\:bc-brand-yellow:focus-within {
+    border-color: var(--brand-yellow) !important;
+}
+
+.fc-brand-yellow,
+.h\\:fc-brand-yellow:hover,
+.f\\:fc-brand-yellow:focus,
+.f\\:fc-brand-yellow:focus-within {
+    color: var(--brand-yellow) !important;
+}
+
+.bg-brand-yellow-dark,
+.h\\:bg-brand-yellow-dark:hover,
+.f\\:bg-brand-yellow-dark:focus,
+.f\\:bg-brand-yellow-dark:focus-within {
+    background-color: var(--brand-yellow-dark) !important;
+}
+
+.bc-brand-yellow-dark,
+.h\\:bc-brand-yellow-dark:hover,
+.f\\:bc-brand-yellow-dark:focus,
+.f\\:bc-brand-yellow-dark:focus-within {
+    border-color: var(--brand-yellow-dark) !important;
+}
+
+.fc-brand-yellow-dark,
+.h\\:fc-brand-yellow-dark:hover,
+.f\\:fc-brand-yellow-dark:focus,
+.f\\:fc-brand-yellow-dark:focus-within {
+    color: var(--brand-yellow-dark) !important;
+}
+
 .fc-light,
 .h\\:fc-light:hover,
 .f\\:fc-light:focus,
@@ -2372,6 +2729,142 @@ exports[`atomic: color > should output all atomic color classes and custom prope
         color: var(--bronze-400) !important;
     }
 
+    body.theme-system  .d\\:bg-brand {
+        background-color: var(--brand) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand {
+        color: var(--brand) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-black {
+        background-color: var(--brand-black) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-black {
+        color: var(--brand-black) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-off-white {
+        background-color: var(--brand-off-white) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-off-white {
+        color: var(--brand-off-white) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-blue-light {
+        background-color: var(--brand-blue-light) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-blue-light {
+        color: var(--brand-blue-light) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-blue {
+        background-color: var(--brand-blue) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-blue {
+        color: var(--brand-blue) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-blue-dark {
+        background-color: var(--brand-blue-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-blue-dark {
+        color: var(--brand-blue-dark) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-brown-light {
+        background-color: var(--brand-brown-light) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-brown-light {
+        color: var(--brand-brown-light) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-green {
+        background-color: var(--brand-green) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-green {
+        color: var(--brand-green) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-green-dark {
+        background-color: var(--brand-green-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-green-dark {
+        color: var(--brand-green-dark) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-orange-medium {
+        background-color: var(--brand-orange-medium) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-orange-medium {
+        color: var(--brand-orange-medium) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-orange-dark {
+        background-color: var(--brand-orange-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-orange-dark {
+        color: var(--brand-orange-dark) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-pink {
+        background-color: var(--brand-pink) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-pink {
+        color: var(--brand-pink) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-pink-dark {
+        background-color: var(--brand-pink-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-pink-dark {
+        color: var(--brand-pink-dark) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-purple {
+        background-color: var(--brand-purple) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-purple {
+        color: var(--brand-purple) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-purple-dark {
+        background-color: var(--brand-purple-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-purple-dark {
+        color: var(--brand-purple-dark) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-yellow {
+        background-color: var(--brand-yellow) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-yellow {
+        color: var(--brand-yellow) !important;
+    }
+
+    body.theme-system  .d\\:bg-brand-yellow-dark {
+        background-color: var(--brand-yellow-dark) !important;
+    }
+
+    body.theme-system  .d\\:fc-brand-yellow-dark {
+        color: var(--brand-yellow-dark) !important;
+    }
+
     body.theme-system  .d\\:fc-light {
         color: var(--fc-light) !important;
     }
@@ -3249,6 +3742,210 @@ body.theme-system .theme-dark__forced  .d\\:fc-bronze-400 {
     color: var(--bronze-400) !important;
 }
 
+body.theme-dark  .d\\:bg-brand,
+.theme-dark__forced  .d\\:bg-brand,
+body.theme-system .theme-dark__forced  .d\\:bg-brand {
+    background-color: var(--brand) !important;
+}
+
+body.theme-dark  .d\\:fc-brand,
+.theme-dark__forced  .d\\:fc-brand,
+body.theme-system .theme-dark__forced  .d\\:fc-brand {
+    color: var(--brand) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-black,
+.theme-dark__forced  .d\\:bg-brand-black,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-black {
+    background-color: var(--brand-black) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-black,
+.theme-dark__forced  .d\\:fc-brand-black,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-black {
+    color: var(--brand-black) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-off-white,
+.theme-dark__forced  .d\\:bg-brand-off-white,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-off-white {
+    background-color: var(--brand-off-white) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-off-white,
+.theme-dark__forced  .d\\:fc-brand-off-white,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-off-white {
+    color: var(--brand-off-white) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-blue-light,
+.theme-dark__forced  .d\\:bg-brand-blue-light,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-blue-light {
+    background-color: var(--brand-blue-light) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-blue-light,
+.theme-dark__forced  .d\\:fc-brand-blue-light,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-blue-light {
+    color: var(--brand-blue-light) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-blue,
+.theme-dark__forced  .d\\:bg-brand-blue,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-blue {
+    background-color: var(--brand-blue) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-blue,
+.theme-dark__forced  .d\\:fc-brand-blue,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-blue {
+    color: var(--brand-blue) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-blue-dark,
+.theme-dark__forced  .d\\:bg-brand-blue-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-blue-dark {
+    background-color: var(--brand-blue-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-blue-dark,
+.theme-dark__forced  .d\\:fc-brand-blue-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-blue-dark {
+    color: var(--brand-blue-dark) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-brown-light,
+.theme-dark__forced  .d\\:bg-brand-brown-light,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-brown-light {
+    background-color: var(--brand-brown-light) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-brown-light,
+.theme-dark__forced  .d\\:fc-brand-brown-light,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-brown-light {
+    color: var(--brand-brown-light) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-green,
+.theme-dark__forced  .d\\:bg-brand-green,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-green {
+    background-color: var(--brand-green) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-green,
+.theme-dark__forced  .d\\:fc-brand-green,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-green {
+    color: var(--brand-green) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-green-dark,
+.theme-dark__forced  .d\\:bg-brand-green-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-green-dark {
+    background-color: var(--brand-green-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-green-dark,
+.theme-dark__forced  .d\\:fc-brand-green-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-green-dark {
+    color: var(--brand-green-dark) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-orange-medium,
+.theme-dark__forced  .d\\:bg-brand-orange-medium,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-orange-medium {
+    background-color: var(--brand-orange-medium) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-orange-medium,
+.theme-dark__forced  .d\\:fc-brand-orange-medium,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-orange-medium {
+    color: var(--brand-orange-medium) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-orange-dark,
+.theme-dark__forced  .d\\:bg-brand-orange-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-orange-dark {
+    background-color: var(--brand-orange-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-orange-dark,
+.theme-dark__forced  .d\\:fc-brand-orange-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-orange-dark {
+    color: var(--brand-orange-dark) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-pink,
+.theme-dark__forced  .d\\:bg-brand-pink,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-pink {
+    background-color: var(--brand-pink) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-pink,
+.theme-dark__forced  .d\\:fc-brand-pink,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-pink {
+    color: var(--brand-pink) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-pink-dark,
+.theme-dark__forced  .d\\:bg-brand-pink-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-pink-dark {
+    background-color: var(--brand-pink-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-pink-dark,
+.theme-dark__forced  .d\\:fc-brand-pink-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-pink-dark {
+    color: var(--brand-pink-dark) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-purple,
+.theme-dark__forced  .d\\:bg-brand-purple,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-purple {
+    background-color: var(--brand-purple) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-purple,
+.theme-dark__forced  .d\\:fc-brand-purple,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-purple {
+    color: var(--brand-purple) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-purple-dark,
+.theme-dark__forced  .d\\:bg-brand-purple-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-purple-dark {
+    background-color: var(--brand-purple-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-purple-dark,
+.theme-dark__forced  .d\\:fc-brand-purple-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-purple-dark {
+    color: var(--brand-purple-dark) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-yellow,
+.theme-dark__forced  .d\\:bg-brand-yellow,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-yellow {
+    background-color: var(--brand-yellow) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-yellow,
+.theme-dark__forced  .d\\:fc-brand-yellow,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-yellow {
+    color: var(--brand-yellow) !important;
+}
+
+body.theme-dark  .d\\:bg-brand-yellow-dark,
+.theme-dark__forced  .d\\:bg-brand-yellow-dark,
+body.theme-system .theme-dark__forced  .d\\:bg-brand-yellow-dark {
+    background-color: var(--brand-yellow-dark) !important;
+}
+
+body.theme-dark  .d\\:fc-brand-yellow-dark,
+.theme-dark__forced  .d\\:fc-brand-yellow-dark,
+body.theme-system .theme-dark__forced  .d\\:fc-brand-yellow-dark {
+    color: var(--brand-yellow-dark) !important;
+}
+
 body.theme-dark  .d\\:fc-light,
 .theme-dark__forced  .d\\:fc-light,
 body.theme-system .theme-dark__forced  .d\\:fc-light {
diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap
index cae66ce29a..6ba553a4d5 100644
--- a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap
+++ b/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap
@@ -385,6 +385,23 @@ body .themed {
     --highlight-symbol: hsl(306, 43%, 35%);
     --highlight-variable: hsl(80, 80.5%, 26.5%);
     --scrollbar: hsla(0, 0%, 0%, 0.2);
+    --brand: #FF5E00;
+    --brand-black: #201C1D;
+    --brand-off-white: #F0EFEE;
+    --brand-blue-light: #C6D1E1;
+    --brand-blue: #5074EF;
+    --brand-blue-dark: #00165E;
+    --brand-brown-light: #998B7A;
+    --brand-green: #86AF25;
+    --brand-green-dark: #263603;
+    --brand-orange-medium: #6E1527;
+    --brand-orange-dark: #31070F;
+    --brand-pink: #F39FFF;
+    --brand-pink-dark: #4D1955;
+    --brand-purple: #9D9CFF;
+    --brand-purple-dark: #390A91;
+    --brand-yellow: #FFCC00;
+    --brand-yellow-dark: #423101;
     --theme-primary: var(--theme-primary-custom, var(--orange-400));
     --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
     --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap
index 229a822212..bcbbe99ac3 100644
--- a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap
+++ b/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap
@@ -173,6 +173,23 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --highlight-symbol: hsl(306, 43%, 35%);
     --highlight-variable: hsl(80, 80.5%, 26.5%);
     --scrollbar: hsla(0, 0%, 0%, 0.2);
+    --brand: #FF5E00;
+    --brand-black: #201C1D;
+    --brand-off-white: #F0EFEE;
+    --brand-blue-light: #C6D1E1;
+    --brand-blue: #5074EF;
+    --brand-blue-dark: #00165E;
+    --brand-brown-light: #998B7A;
+    --brand-green: #86AF25;
+    --brand-green-dark: #263603;
+    --brand-orange-medium: #6E1527;
+    --brand-orange-dark: #31070F;
+    --brand-pink: #F39FFF;
+    --brand-pink-dark: #4D1955;
+    --brand-purple: #9D9CFF;
+    --brand-purple-dark: #390A91;
+    --brand-yellow: #FFCC00;
+    --brand-yellow-dark: #423101;
     --theme-primary: var(--theme-primary-custom, var(--orange-400));
     --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
     --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
@@ -314,6 +331,23 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --highlight-symbol: hsl(306, 50%, 75%);
     --highlight-variable: hsl(65.5, 39%, 57.5%);
     --scrollbar: hsla(0, 0%, 100%, 0.2);
+    --brand: #FF5E00;
+    --brand-black: #201C1D;
+    --brand-off-white: #F0EFEE;
+    --brand-blue-light: #C6D1E1;
+    --brand-blue: #5074EF;
+    --brand-blue-dark: #00165E;
+    --brand-brown-light: #998B7A;
+    --brand-green: #86AF25;
+    --brand-green-dark: #263603;
+    --brand-orange-medium: #6E1527;
+    --brand-orange-dark: #31070F;
+    --brand-pink: #F39FFF;
+    --brand-pink-dark: #4D1955;
+    --brand-purple: #9D9CFF;
+    --brand-purple-dark: #390A91;
+    --brand-yellow: #FFCC00;
+    --brand-yellow-dark: #423101;
     --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
     --theme-primary-100: var(--theme-dark-primary-custom-100, var(--orange-100));
     --theme-primary-200: var(--theme-dark-primary-custom-200, var(--orange-200));
@@ -453,6 +487,23 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --highlight-symbol: hsl(306, 50%, 75%);
         --highlight-variable: hsl(65.5, 39%, 57.5%);
         --scrollbar: hsla(0, 0%, 100%, 0.2);
+        --brand: #FF5E00;
+        --brand-black: #201C1D;
+        --brand-off-white: #F0EFEE;
+        --brand-blue-light: #C6D1E1;
+        --brand-blue: #5074EF;
+        --brand-blue-dark: #00165E;
+        --brand-brown-light: #998B7A;
+        --brand-green: #86AF25;
+        --brand-green-dark: #263603;
+        --brand-orange-medium: #6E1527;
+        --brand-orange-dark: #31070F;
+        --brand-pink: #F39FFF;
+        --brand-pink-dark: #4D1955;
+        --brand-purple: #9D9CFF;
+        --brand-purple-dark: #390A91;
+        --brand-yellow: #FFCC00;
+        --brand-yellow-dark: #423101;
         --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
         --theme-primary-100: var(--theme-dark-primary-custom-100, var(--orange-100));
         --theme-primary-200: var(--theme-dark-primary-custom-200, var(--orange-200));
@@ -592,6 +643,23 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --highlight-symbol: hsl(309, 45%, 31%);
     --highlight-variable: hsl(88, 100%, 18%);
     --scrollbar: var(--black);
+    --brand: #FF5E00;
+    --brand-black: #201C1D;
+    --brand-off-white: #F0EFEE;
+    --brand-blue-light: #C6D1E1;
+    --brand-blue: #5074EF;
+    --brand-blue-dark: #00165E;
+    --brand-brown-light: #998B7A;
+    --brand-green: #86AF25;
+    --brand-green-dark: #263603;
+    --brand-orange-medium: #6E1527;
+    --brand-orange-dark: #31070F;
+    --brand-pink: #F39FFF;
+    --brand-pink-dark: #4D1955;
+    --brand-purple: #9D9CFF;
+    --brand-purple-dark: #390A91;
+    --brand-yellow: #FFCC00;
+    --brand-yellow-dark: #423101;
     --theme-primary: var(--orange-400);
     --theme-primary-100: var(--orange-100);
     --theme-primary-200: var(--orange-200);
@@ -713,6 +781,23 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --highlight-symbol: hsl(304, 39%, 85%);
     --highlight-variable: hsl(62, 71%, 81%);
     --scrollbar: var(--black);
+    --brand: #FF5E00;
+    --brand-black: #201C1D;
+    --brand-off-white: #F0EFEE;
+    --brand-blue-light: #C6D1E1;
+    --brand-blue: #5074EF;
+    --brand-blue-dark: #00165E;
+    --brand-brown-light: #998B7A;
+    --brand-green: #86AF25;
+    --brand-green-dark: #263603;
+    --brand-orange-medium: #6E1527;
+    --brand-orange-dark: #31070F;
+    --brand-pink: #F39FFF;
+    --brand-pink-dark: #4D1955;
+    --brand-purple: #9D9CFF;
+    --brand-purple-dark: #390A91;
+    --brand-yellow: #FFCC00;
+    --brand-yellow-dark: #423101;
     --theme-primary: var(--orange-400);
     --theme-primary-100: var(--orange-100);
     --theme-primary-200: var(--orange-200);
@@ -834,6 +919,23 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --highlight-symbol: hsl(304, 39%, 85%);
         --highlight-variable: hsl(62, 71%, 81%);
         --scrollbar: var(--black);
+        --brand: #FF5E00;
+        --brand-black: #201C1D;
+        --brand-off-white: #F0EFEE;
+        --brand-blue-light: #C6D1E1;
+        --brand-blue: #5074EF;
+        --brand-blue-dark: #00165E;
+        --brand-brown-light: #998B7A;
+        --brand-green: #86AF25;
+        --brand-green-dark: #263603;
+        --brand-orange-medium: #6E1527;
+        --brand-orange-dark: #31070F;
+        --brand-pink: #F39FFF;
+        --brand-pink-dark: #4D1955;
+        --brand-purple: #9D9CFF;
+        --brand-purple-dark: #390A91;
+        --brand-yellow: #FFCC00;
+        --brand-yellow-dark: #423101;
         --theme-primary: var(--orange-400);
         --theme-primary-100: var(--orange-100);
         --theme-primary-200: var(--orange-200);