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);
diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less
index 0ea8da1c7a..ab4530e728 100644
--- a/packages/stacks-classic/lib/exports/color-sets.less
+++ b/packages/stacks-classic/lib/exports/color-sets.less
@@ -591,6 +591,27 @@
     default: var(--black);
 }
 
+// brand colors
+.set-brand() {
+    default: #FF5E00;
+    black: #201C1D;
+    off-white: #F0EFEE;
+    blue-light: #C6D1E1;
+    blue: #5074EF;
+    blue-dark: #00165E;
+    brown-light: #998B7A;
+    green: #86AF25;
+    green-dark: #263603;
+    orange-medium: #6E1527;
+    orange-dark: #31070F;
+    pink: #F39FFF;
+    pink-dark: #4D1955;
+    purple: #9D9CFF;
+    purple-dark: #390A91;
+    yellow: #FFCC00;
+    yellow-dark: #423101;
+}
+
 // Color sets
 .sets-mode() {
     light: .sets-light();
@@ -612,6 +633,7 @@
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
+    brand: .set-brand();
 }
 
 .sets-dark() {
@@ -682,6 +704,7 @@
     focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
+    brand: .set-brand();
 }
 
 .sets-utility-dark() {
@@ -692,6 +715,7 @@
     focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
+    brand: .set-brand();
 }
 
 .sets-utility-hc() {
@@ -702,6 +726,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
+    brand: .set-brand();
 }
 
 .sets-utility-dark-hc() {
@@ -712,6 +737,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 21ec3b8943..a8f0423d33 100644
--- a/packages/stacks-docs/_data/colors.json
+++ b/packages/stacks-docs/_data/colors.json
@@ -73,6 +73,43 @@
         "type": "monochrome"
       }
     ],
+    "brand": [
+      {
+        "name": "brand",
+        "stops": [
+          "",
+          "black",
+          "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 73ea18dd26..8d0ec58dc4 100644
--- a/packages/stacks-docs/product/foundation/colors.html
+++ b/packages/stacks-docs/product/foundation/colors.html
@@ -58,6 +58,42 @@ <h3 class="mb8 fs-body2">{{ set.name | capitalize }}</h3>
 </section>
 
 <section class="docs-section">
+    {% header "h2", "Brand" %}
+
+    <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="ba bc-black-400 overflow-hidden">
+                    {% 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" %}
 
     <p class="docs-copy">