diff --git a/src/components/test/state-color/state-color.config.yml b/src/components/test/state-color/state-color.config.yml
new file mode 100644
index 0000000000..d190ff67d5
--- /dev/null
+++ b/src/components/test/state-color/state-color.config.yml
@@ -0,0 +1,30 @@
+label: State color utils
+
+context:
+  # $tokens-color-state in _variables.scss
+  state_colors:
+    - error-lighter
+    - error-light
+    - error
+    - error-dark
+    - error-darker
+    - warning-lighter
+    - warning-light
+    - warning
+    - warning-dark
+    - warning-darker
+    - success-lighter
+    - success-light
+    - success
+    - success-dark
+    - success-darker
+    - info-lighter
+    - info-light
+    - info
+    - info-dark
+    - info-darker
+    - disabled-light
+    - disabled
+    - disabled-dark
+    - emergency
+    - emergency-dark
diff --git a/src/components/test/state-color/state-color.njk b/src/components/test/state-color/state-color.njk
new file mode 100644
index 0000000000..346a05d9c1
--- /dev/null
+++ b/src/components/test/state-color/state-color.njk
@@ -0,0 +1,14 @@
+<div class="padding-2 maxw-desktop">
+  {% for color in state_colors %}
+    <div class="grid-row flex-align-center">
+      <div class="tablet:grid-col-2">
+        <div>
+          {{ color }}
+        </div>
+      </div>
+      <div class="tablet:grid-col-10">
+        <div class="bg-{{ color }} util-test padding-205"></div>
+      </div>
+    </div>
+  {% endfor %}
+</div>
diff --git a/src/stylesheets/utilities/palettes/_default-palettes.scss b/src/stylesheets/utilities/palettes/_default-palettes.scss
index 21a37d6821..cd4cd7d10f 100644
--- a/src/stylesheets/utilities/palettes/_default-palettes.scss
+++ b/src/stylesheets/utilities/palettes/_default-palettes.scss
@@ -23,7 +23,8 @@ $palettes-default: (
     map-collect(
       $tokens-color-basic,
       $tokens-color-grayscale,
-      $tokens-color-theme
+      $tokens-color-theme,
+      $tokens-color-state
     ),
   "palette-cursor-default": get-standard-values(cursor),
   "palette-display-default": get-standard-values(display),