diff --git a/src/styles/utilities/variants.css b/src/styles/utilities/variants.css
new file mode 100644
index 000000000..219c2a5a1
--- /dev/null
+++ b/src/styles/utilities/variants.css
@@ -0,0 +1,69 @@
+.wa-neutral {
+  --color-fill-loud: var(--wa-color-neutral-fill-loud);
+  --color-fill-normal: var(--wa-color-neutral-fill-normal);
+  --color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+
+  --color-border-loud: var(--wa-color-neutral-border-loud);
+  --color-border-normal: var(--wa-color-neutral-border-normal);
+  --color-border-quiet: var(--wa-color-neutral-border-quiet);
+
+  --color-on-loud: var(--wa-color-neutral-on-loud);
+  --color-on-normal: var(--wa-color-neutral-on-normal);
+  --color-on-quiet: var(--wa-color-neutral-on-quiet);
+}
+
+.wa-brand {
+  --color-fill-loud: var(--wa-color-brand-fill-loud);
+  --color-fill-normal: var(--wa-color-brand-fill-normal);
+  --color-fill-quiet: var(--wa-color-brand-fill-quiet);
+
+  --color-border-loud: var(--wa-color-brand-border-loud);
+  --color-border-normal: var(--wa-color-brand-border-normal);
+  --color-border-quiet: var(--wa-color-brand-border-quiet);
+
+  --color-on-loud: var(--wa-color-brand-on-loud);
+  --color-on-normal: var(--wa-color-brand-on-normal);
+  --color-on-quiet: var(--wa-color-brand-on-quiet);
+}
+
+.wa-success {
+  --color-fill-loud: var(--wa-color-success-fill-loud);
+  --color-fill-normal: var(--wa-color-success-fill-normal);
+  --color-fill-quiet: var(--wa-color-success-fill-quiet);
+
+  --color-border-loud: var(--wa-color-success-border-loud);
+  --color-border-normal: var(--wa-color-success-border-normal);
+  --color-border-quiet: var(--wa-color-success-border-quiet);
+
+  --color-on-loud: var(--wa-color-success-on-loud);
+  --color-on-normal: var(--wa-color-success-on-normal);
+  --color-on-quiet: var(--wa-color-success-on-quiet);
+}
+
+.wa-warning {
+  --color-fill-loud: var(--wa-color-warning-fill-loud);
+  --color-fill-normal: var(--wa-color-warning-fill-normal);
+  --color-fill-quiet: var(--wa-color-warning-fill-quiet);
+
+  --color-border-loud: var(--wa-color-warning-border-loud);
+  --color-border-normal: var(--wa-color-warning-border-normal);
+  --color-border-quiet: var(--wa-color-warning-border-quiet);
+
+  --color-on-loud: var(--wa-color-warning-on-loud);
+  --color-on-normal: var(--wa-color-warning-on-normal);
+  --color-on-quiet: var(--wa-color-warning-on-quiet);
+}
+
+.wa-danger {
+  --color-fill-loud: var(--wa-color-danger-fill-loud);
+  --color-fill-normal: var(--wa-color-danger-fill-normal);
+  --color-fill-quiet: var(--wa-color-danger-fill-quiet);
+
+  --color-border-loud: var(--wa-color-danger-border-loud);
+  --color-border-normal: var(--wa-color-danger-border-normal);
+  --color-border-quiet: var(--wa-color-danger-border-quiet);
+
+  --color-on-loud: var(--wa-color-danger-on-loud);
+  --color-on-normal: var(--wa-color-danger-on-normal);
+  --color-on-quiet: var(--wa-color-danger-on-quiet);
+}