diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css
index 8b4319cc8..4a6cca50b 100644
--- a/docs/assets/styles/code-examples.css
+++ b/docs/assets/styles/code-examples.css
@@ -1,5 +1,5 @@
 .code-example {
-  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   border-radius: var(--wa-corners-m);
   color: var(--wa-color-text-normal);
   margin-block-end: var(--wa-flow-spacing);
@@ -7,7 +7,7 @@
 
 .code-example-preview {
   padding: 2rem;
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 
   > :first-child {
     margin-block-start: 0;
@@ -19,7 +19,7 @@
 }
 
 .code-example-source {
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
 .code-example:not(.open) .code-example-source {
@@ -55,7 +55,7 @@
     flex: 1 0 auto;
     font-size: 0.875rem;
     color: var(--wa-color-text-quiet);
-    border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+    border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
     text-align: center;
     padding: 0.5rem;
     cursor: pointer;
diff --git a/docs/assets/styles/copy-code.css b/docs/assets/styles/copy-code.css
index 4ce4ab4e5..564305b7f 100644
--- a/docs/assets/styles/copy-code.css
+++ b/docs/assets/styles/copy-code.css
@@ -3,13 +3,13 @@
   top: 0.25rem;
   right: 0.25rem;
   font-family: var(--wa-font-family-body);
-  color: var(--wa-color-neutral-text-on-fill);
-  background-color: var(--wa-color-neutral-fill-subtle);
+  color: var(--wa-color-neutral-on-normal);
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-radius: var(--wa-corners-s);
   padding: 0.25rem;
 
   &:hover {
-    background-color: var(--wa-color-neutral-fill-highlight);
+    background-color: var(--wa-color-neutral-fill-normal);
   }
 
   &:focus-visible {
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index fc93d5243..7ae11e50d 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -11,7 +11,7 @@ wa-page[view='desktop'] [data-toggle-nav] {
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
 wa-page > header {
@@ -30,7 +30,7 @@ wa-page > header {
 
 /* Navigation sidebar */
 wa-page[view='desktop']::part(navigation) {
-  border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
 wa-page[view='desktop'] > #sidebar {
@@ -107,27 +107,27 @@ wa-page > main {
 }
 
 .callout-info {
-  background-color: var(--wa-color-brand-fill-subtle);
-  border-color: var(--wa-color-brand-border-subtle);
+  background-color: var(--wa-color-brand-fill-quiet);
+  border-color: var(--wa-color-brand-border-quiet);
 
   .callout-icon {
-    color: var(--wa-color-brand-text-on-fill);
+    color: var(--wa-color-brand-on-normal);
   }
 
   code {
-    background-color: var(--wa-color-brand-fill-highlight);
+    background-color: var(--wa-color-brand-fill-normal);
   }
 }
 
 .callout-warning {
-  background-color: var(--wa-color-warning-fill-subtle);
-  border-color: var(--wa-color-warning-border-subtle);
+  background-color: var(--wa-color-warning-fill-quiet);
+  border-color: var(--wa-color-warning-border-quiet);
 
   .callout-icon {
-    color: var(--wa-color-warning-text-on-fill);
+    color: var(--wa-color-warning-on-normal);
   }
 
   code {
-    background-color: var(--wa-color-warning-fill-highlight);
+    background-color: var(--wa-color-warning-fill-normal);
   }
 }
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index 166d1040f..8a1c3d6f8 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -99,7 +99,7 @@ header {
 #site-search.has-results,
 #site-search.no-results {
   #site-search-body {
-    border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+    border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   }
 }
 
@@ -126,15 +126,15 @@ header {
   @media (hover: hover) {
     li a:hover,
     li a:hover small {
-      background-color: var(--wa-color-neutral-fill-highlight);
+      background-color: var(--wa-color-neutral-fill-normal);
     }
   }
 
   li[data-selected='true'] a,
   li[data-selected='true'] a * {
     outline: none;
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
   }
 
   h3 {
@@ -165,7 +165,7 @@ header {
 
     wa-icon {
       font-size: 1.75rem;
-      color: var(--wa-color-neutral-spot);
+      color: var(--wa-color-neutral-fill-loud);
     }
   }
 
@@ -185,7 +185,7 @@ header {
   .site-search-result-title {
     font-size: 1.25rem;
     font-weight: var(--wa-font-weight-medium);
-    color: var(--wa-color-brand-text-on-fill);
+    color: var(--wa-color-brand-on-normal);
   }
 
   .site-search-result-description {
@@ -227,7 +227,7 @@ header {
   justify-content: center;
   gap: 2rem;
   color: var(--wa-color-text-quiet);
-  border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
+  border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   border-bottom-left-radius: var(--wa-corners-m);
   border-bottom-right-radius: var(--wa-corners-m);
   padding: 1rem;
diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md
index 31208969b..55edee0cc 100644
--- a/docs/docs/components/animation.md
+++ b/docs/docs/components/animation.md
@@ -19,7 +19,7 @@ To animate an element, wrap it in `<wa-animation>` and set an animation `name`.
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
     margin: 1.5rem;
   }
 </style>
@@ -34,7 +34,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
     margin: 1.5rem;
   }
 `;
@@ -122,7 +122,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
   }
 
   .animation-sandbox .controls {
@@ -174,7 +174,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
   }
 </style>
 ```
@@ -193,7 +193,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
   }
 `;
 
@@ -266,7 +266,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
   }
 </style>
 ```
@@ -279,7 +279,7 @@ const css = `
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-brand-fill-loud);
   }
 `;
 
diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md
index eb7c0c69a..5e3e4c69d 100644
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -62,21 +62,21 @@ Popup is a low-level utility built specifically for positioning elements. Do not
 
 <style>
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-spot);
+    --arrow-color: var(--wa-color-brand-fill-loud);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -112,21 +112,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-spot);
+    --arrow-color: var(--wa-color-brand-fill-loud);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -251,14 +251,14 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 </style>
@@ -283,14 +283,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 `;
@@ -335,14 +335,14 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 </style>
@@ -357,14 +357,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 `;
@@ -419,14 +419,14 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -456,14 +456,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -525,14 +525,14 @@ Use the `distance` attribute to change the distance between the popup and its an
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -561,14 +561,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -624,14 +624,14 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -660,14 +660,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -747,21 +747,21 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 
   <style>
     .popup-arrow wa-popup {
-      --arrow-color: var(--wa-color-brand-spot);
+      --arrow-color: var(--wa-color-brand-fill-loud);
     }
 
     .popup-arrow span[slot='anchor'] {
       display: inline-block;
       width: 150px;
       height: 150px;
-      border: dashed 2px var(--wa-color-neutral-spot);
+      border: dashed 2px var(--wa-color-neutral-fill-loud);
       margin: 50px;
     }
 
     .popup-arrow .box {
       width: 100px;
       height: 50px;
-      background: var(--wa-color-brand-spot);
+      background: var(--wa-color-brand-fill-loud);
       border-radius: var(--wa-corners-s);
     }
 
@@ -805,21 +805,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-arrow wa-popup {
-    --arrow-color: var(--wa-color-brand-spot);
+    --arrow-color: var(--wa-color-brand-fill-loud);
   }
 
   .popup-arrow span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-arrow .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -925,7 +925,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
@@ -934,7 +934,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -965,7 +965,7 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
@@ -974,7 +974,7 @@ const css = `
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -1043,14 +1043,14 @@ Toggle the switch and scroll the container to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -1086,14 +1086,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -1158,14 +1158,14 @@ Scroll the container to see how the popup flips to prevent clipping.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 </style>
@@ -1197,14 +1197,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 `;
@@ -1267,14 +1267,14 @@ Scroll the container to see how the popup changes it's fallback placement to pre
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 </style>
@@ -1296,14 +1296,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 `;
@@ -1356,14 +1356,14 @@ Toggle the switch to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 </style>
@@ -1394,14 +1394,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 `;
@@ -1464,12 +1464,12 @@ Scroll the container to see the popup resize as its available space changes.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
@@ -1510,12 +1510,12 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
@@ -1575,14 +1575,14 @@ When a gap exists between the anchor and the popup element, this option will add
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-hover-bridge .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -1619,14 +1619,14 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-spot);
+    border: dashed 2px var(--wa-color-neutral-fill-loud);
     margin: 50px;
   }
 
   .popup-hover-bridge .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-spot);
+    background: var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-s);
   }
 
@@ -1760,7 +1760,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-spot);
+    border: solid 4px var(--wa-color-neutral-fill-loud);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;
@@ -1789,7 +1789,7 @@ const css = `
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-spot);
+    border: solid 4px var(--wa-color-neutral-fill-loud);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;
diff --git a/docs/docs/components/range.md b/docs/docs/components/range.md
index 5490df8c3..e14d7ee2f 100644
--- a/docs/docs/components/range.md
+++ b/docs/docs/components/range.md
@@ -125,8 +125,8 @@ You can customize the active and inactive portions of the track using the `--tra
 ```html {.example}
 <wa-range
   style="
-  --track-color-active: var(--wa-color-brand-spot);
-  --track-color-inactive: var(--wa-color-brand-fill-highlight);
+  --track-color-active: var(--wa-color-brand-fill-loud);
+  --track-color-inactive: var(--wa-color-brand-fill-normal);
 "
 ></wa-range>
 ```
@@ -138,8 +138,8 @@ import WaRange from '@shoelace-style/shoelace/dist/react/range';
 const App = () => (
   <WaRange
     style={{
-      '--track-color-active': 'var(--wa-color-brand-spot)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)'
+      '--track-color-active': 'var(--wa-color-brand-fill-loud)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-normal)'
     }}
   />
 );
@@ -155,8 +155,8 @@ You can customize the initial offset of the active track using the `--track-acti
   min="-100"
   max="100"
   style="
-  --track-color-active: var(--wa-color-brand-spot);
-  --track-color-inactive: var(--wa-color-brand-fill-highlight);
+  --track-color-active: var(--wa-color-brand-fill-loud);
+  --track-color-inactive: var(--wa-color-brand-fill-normal);
   --track-active-offset: 50%;
 "
 ></wa-range>
@@ -171,8 +171,8 @@ const App = () => (
     min={-100}
     max={100}
     style={{
-      '--track-color-active': 'var(--wa-color-brand-spot)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)',
+      '--track-color-active': 'var(--wa-color-brand-fill-loud)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-normal)',
       '--track-active-offset': '50%'
     }}
   />
diff --git a/docs/docs/components/rating.md b/docs/docs/components/rating.md
index c13a09068..f3627ab79 100644
--- a/docs/docs/components/rating.md
+++ b/docs/docs/components/rating.md
@@ -147,8 +147,8 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
     top: -4px;
     left: 8px;
     border-radius: var(--wa-corners-s);
-    background: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
+    background: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-loud);
     text-align: center;
     padding: 4px 6px;
   }
@@ -171,8 +171,8 @@ const css = `
     top: -4px;
     left: 8px;
     border-radius: var(--wa-corners-s);
-    background: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
+    background: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-loud);
     text-align: center;
     padding: 4px 6px;
   }
diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md
index c94f1dd28..3204fd750 100644
--- a/docs/docs/components/split-panel.md
+++ b/docs/docs/components/split-panel.md
@@ -242,7 +242,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-spot);
+    background: var(--wa-color-neutral-fill-loud);
     transform: translateX(-3px);
   }
 
@@ -273,7 +273,7 @@ const css = `
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-spot);
+    background: var(--wa-color-neutral-fill-loud);
     transform: translateX(-3px);
   }
 
diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index d3f11de18..0c3394c3c 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -7,7 +7,7 @@ layout: page.njk
 ## Card
 
 ```html {.example}
-<wa-card with-image class="card-overview">
+<wa-card with-image with-footer class="card-overview">
   <img
     slot="image"
     src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index af81bd294..92f92c97f 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -35,7 +35,7 @@ hasOutline: false
 
   :root,
   #knobs {
-    scrollbar-color: var(--wa-color-neutral-border-highlight) var(--wa-color-surface-raised);
+    scrollbar-color: var(--wa-color-neutral-border-normal) var(--wa-color-surface-raised);
   }
 
   /* #region Lock theme styles */  
@@ -48,25 +48,23 @@ hasOutline: false
 
     --wa-color-shadow: rgb(0 0 0 / 0.1);
 
-    --wa-color-neutral-spot: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 75%);
-    --wa-color-neutral-spot-darker: color-mix(in oklab, var(--wa-color-neutral-spot), black 5%);
-    --wa-color-neutral-fill-subtle: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 10%);
-    --wa-color-neutral-fill-highlight: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 20%);
-    --wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 90%);
-    --wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 70%);
-    --wa-color-neutral-text-on-spot: color-mix(in oklab, var(--wa-color-surface-default) 90%, var(--wa-color-text-normal));
-    --wa-color-neutral-text-on-fill: color-mix(in oklab, var(--wa-color-surface-raised) 10%, var(--wa-color-text-normal));
-    --wa-color-neutral-text-on-surface: var(--wa-color-neutral-spot);
+    --wa-color-neutral-fill-loud: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 75%);
+    --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 10%);
+    --wa-color-neutral-fill-normal: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 20%);
+    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 90%);
+    --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 70%);
+    --wa-color-neutral-on-loud: color-mix(in oklab, var(--wa-color-surface-default) 90%, var(--wa-color-text-normal));
+    --wa-color-neutral-on-normal: color-mix(in oklab, var(--wa-color-surface-raised) 10%, var(--wa-color-text-normal));
+    --wa-color-neutral-on-quiet: var(--wa-color-neutral-fill-loud);
 
-    --wa-color-brand-spot: var(--wa-color-neutral-spot);
-    --wa-color-brand-spot-darker: var(--wa-color-neutral-spot-darker);
-    --wa-color-brand-fill-subtle: var(--wa-color-neutral-fill-subtle);
-    --wa-color-brand-fill-highlight: var(--wa-color-neutral-fill-highlight);
-    --wa-color-brand-border-subtle: var(--wa-color-neutral-border-subtle);
-    --wa-color-brand-border-highlight: var(--wa-color-neutral-border-highlight);
-    --wa-color-brand-text-on-spot: var(--wa-color-neutral-text-on-spot);
-    --wa-color-brand-text-on-fill: var(--wa-color-neutral-text-on-fill);
-    --wa-color-brand-text-on-surface: var(--wa-color-neutral-text-on-surface);
+    --wa-color-brand-fill-loud: var(--wa-color-neutral-fill-loud);
+    --wa-color-brand-fill-quiet: var(--wa-color-neutral-fill-quiet);
+    --wa-color-brand-fill-normal: var(--wa-color-neutral-fill-normal);
+    --wa-color-brand-border-quiet: var(--wa-color-neutral-border-quiet);
+    --wa-color-brand-border-normal: var(--wa-color-neutral-border-normal);
+    --wa-color-brand-on-loud: var(--wa-color-neutral-on-loud);
+    --wa-color-brand-on-normal: var(--wa-color-neutral-on-normal);
+    --wa-color-brand-on-quiet: var(--wa-color-neutral-on-quiet);
 
     --wa-font-family-heading: Inconsolata, monospace;
     --wa-font-family-body: Inconsolata, monospace;
@@ -159,8 +157,8 @@ hasOutline: false
 
     --wa-form-controls-corners: var(--wa-corners-s);
 
-    --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-    --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+    --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+    --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
     --wa-form-controls-label-color: var(--wa-color-text-normal);
     --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -290,7 +288,7 @@ hasOutline: false
 
 
   #knobs wa-radio-group[name="color"] wa-radio {
-    border: 0.0625em solid var(--wa-color-neutral-border-subtle);
+    border: 0.0625em solid var(--wa-color-neutral-border-quiet);
     border-radius: var(--wa-corners-m);
     box-shadow: inset 0 0 0 0 transparent;
     padding: 1em;
@@ -379,7 +377,7 @@ hasOutline: false
   }
 
   .file-uploader:is(:hover) {
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
   }
 
   /**
@@ -432,8 +430,8 @@ hasOutline: false
 
   #icon-chooser-trigger {
     --button-group-separator-border: none;
-    --label-color: var(--wa-color-neutral-text-on-surface);
-    --label-color-hover: color-mix(in oklab, var(--wa-color-neutral-text-on-surface), var(--wa-color-mix-hover));
+    --label-color: var(--wa-color-neutral-on-quiet);
+    --label-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
     --label-color-active: var(--label-color-hover);
   }
 
@@ -723,7 +721,7 @@ hasOutline: false
           border-radius: var(--wa-corners-circle);
         }
         &::part(button--checked) {
-          background: var(--wa-color-brand-spot);
+          background: var(--wa-color-brand-fill-loud);
         }
       }
     }
@@ -1681,7 +1679,7 @@ hasOutline: false
     padding: 0;
     max-inline-size: 1400px;
     margin-inline: auto;
-    border: var(--wa-border-width-s) var(--wa-color-neutral-border-subtle) var(--wa-border-style);
+    border: var(--wa-border-width-s) var(--wa-color-neutral-border-quiet) var(--wa-border-style);
     overflow: clip;
   }
 
@@ -1850,7 +1848,7 @@ hasOutline: false
 
   .message-composer .grouped-buttons:not(:last-of-type) {
     padding-inline-end: var(--wa-space-m);
-    border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-subtle);
+    border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
   }
 
   .message-composer wa-card::part(header) {
@@ -2266,6 +2264,16 @@ hasOutline: false
           <wa-icon slot="icon" name="clock" variant="regular"></wa-icon>
           This item will soon be discontinued
         </wa-alert>
+        <wa-button-group label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>
+        <wa-button-group label="Alignment">
+  <wa-button variant="warning">Left</wa-button>
+  <wa-button variant="warning">Center</wa-button>
+  <wa-button variant="warning">Right</wa-button>
+</wa-button-group>
         <div>
           <div style="margin: var(--wa-space-3xl) 0">
             <wa-radio-group label="Choose a finish" name="finish" value="Matte" class="product-finish">
diff --git a/docs/docs/resources/contributing.md b/docs/docs/resources/contributing.md
index 72d825b7b..5b2b22e7d 100644
--- a/docs/docs/resources/contributing.md
+++ b/docs/docs/resources/contributing.md
@@ -332,8 +332,8 @@ To expose custom properties as part of a component's API, scope them to the `:ho
 
 ```css
 :host {
-  --color: var(--wa-color-brand-text-on-spot);
-  --background-color: var(--wa-color-brand-spot);
+  --color: var(--wa-color-brand-on-loud);
+  --background-color: var(--wa-color-brand-fill-loud);
 }
 ```
 
diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md
index 76fc7af88..4f54059ce 100644
--- a/docs/docs/theming/color.md
+++ b/docs/docs/theming/color.md
@@ -20,11 +20,13 @@ layout: page.njk
   }
   .color-preview {
     flex: 1 1 auto;
-    font-size: var(--wa-font-size-xs);
   }
   .color-swatch {
     border-radius: var(--wa-corners-s);
-    height: 3em;
+    line-height: 2;
+    height: 2em;
+    padding-inline: var(--wa-space-xs);
+    text-align: center;
   }
   .text-swatch {
     font-size: var(--wa-font-size-xl);
@@ -43,99 +45,51 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 - A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA).
 - A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio, suitable for all text (AAA).
 
-<div class="color-name">Rose</div>
-<div class="color-group">
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-95)"></div>
-    95
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-90)"></div>
-    90
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-80)"></div>
-    80
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-70)"></div>
-    70
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-60)"></div>
-    60
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-50)"></div>
-    50
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-40)"></div>
-    40
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-30)"></div>
-    30
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-20)"></div>
-    20
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-10)"></div>
-    10
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-rose-05)"></div>
-    05
-  </div>
-</div>
-
 <div class="color-name">Red</div>
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-red-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -143,95 +97,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-yellow-05)"></div>
-    05
-  </div>
-</div>
-
-<div class="color-name">Lime</div>
-<div class="color-group">
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-95)"></div>
-    95
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-90)"></div>
-    90
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-80)"></div>
-    80
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-70)"></div>
-    70
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-60)"></div>
-    60
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-50)"></div>
-    50
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-40)"></div>
-    40
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-30)"></div>
-    30
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-20)"></div>
-    20
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-10)"></div>
-    10
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-lime-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -239,95 +145,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-green-05)"></div>
-    05
-  </div>
-</div>
-
-<div class="color-name">Teal</div>
-<div class="color-group">
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-95)"></div>
-    95
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-90)"></div>
-    90
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-80)"></div>
-    80
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-70)"></div>
-    70
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-60)"></div>
-    60
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-50)"></div>
-    50
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-40)"></div>
-    40
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-30)"></div>
-    30
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-20)"></div>
-    20
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-10)"></div>
-    10
-  </div>
-  <div class="color-preview">
-    <div class="color-swatch" style="background-color: var(--wa-color-teal-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -335,47 +193,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-blue-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -383,47 +241,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-indigo-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -431,47 +289,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-violet-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -479,47 +337,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-gray-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -536,47 +394,47 @@ The primary and base color groups reference another literal color group. By defa
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-primary-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -584,47 +442,47 @@ The primary and base color groups reference another literal color group. By defa
 <div class="color-group">
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-95)"></div>
-    95
+    <small>95</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-90)"></div>
-    90
+    <small>90</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-80)"></div>
-    80
+    <small>80</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-70)"></div>
-    70
+    <small>70</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-60)"></div>
-    60
+    <small>60</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-50)"></div>
-    50
+    <small>50</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-40)"></div>
-    40
+    <small>40</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-30)"></div>
-    30
+    <small>30</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-20)"></div>
-    20
+    <small>20</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-10)"></div>
-    10
+    <small>10</small>
   </div>
   <div class="color-preview">
     <div class="color-swatch" style="background-color: var(--wa-color-base-05)"></div>
-    05
+    <small>05</small>
   </div>
 </div>
 
@@ -695,8 +553,8 @@ Mix colors are used in `color-mix()` functions to achieve consistent interaction
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-mix-hover`   | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover))"></div></div></div> |
-| `--wa-color-mix-active`   | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-active))"></div></div></div> |
+| `--wa-color-mix-hover`   | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))"></div></div></div> |
+| `--wa-color-mix-active`   | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active))"></div></div></div> |
 
 
 ## Semantic Colors
@@ -711,11 +569,12 @@ Semantic colors help reinforce a specific message, intended usage, or expected r
 
 | Custom Property               |  <code>brand</code>             |  <code>success</code>           |  <code>neutral</code>           |  <code>warning</code>           | <code>danger</code>             |
 | ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- |
-| `--wa-color-*-spot`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-spot)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-spot)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-spot)"></div></div> |
-| `--wa-color-*-fill-subtle`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-subtle)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-subtle)"></div></div> |
-| `--wa-color-*-fill-highlight`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-highlight)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-highlight)"></div></div> |
-| `--wa-color-*-border-subtle`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-subtle)"></div></div> |
-| `--wa-color-*-border-highlight`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-highlight)"></div></div> |
-| `--wa-color-*-text-on-spot`  | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-spot)">AaBb</div></div> |
-| `--wa-color-*-text-on-fill`  | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-fill)">AaBb</div></div> |
-| `--wa-color-*-text-on-surface`  | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-surface)">AaBb</div></div> |
\ No newline at end of file
+| `--wa-color-*-fill-quiet`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div></div> |
+| `--wa-color-*-fill-normal`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div></div> |
+| `--wa-color-*-fill-loud`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div></div> |
+| `--wa-color-*-border-quiet`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div></div> |
+| `--wa-color-*-border-normal`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div></div> |
+| `--wa-color-*-border-loud`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div></div> |
+| `--wa-color-*-on-quiet`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div></div> |
+| `--wa-color-*-on-normal`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div></div> |
+| `--wa-color-*-on-loud`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div></div> |
\ No newline at end of file
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 5972c5fff..2bf93a268 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -16,33 +16,33 @@ export default css`
   }
 
   :host([variant='brand']) {
-    --background: var(--wa-color-brand-fill-subtle);
-    --border-color: var(--wa-color-brand-border-subtle);
-    --content-color: var(--wa-color-brand-text-on-fill);
+    --background: var(--wa-color-brand-fill-quiet);
+    --border-color: var(--wa-color-brand-border-quiet);
+    --content-color: var(--wa-color-brand-on-normal);
   }
 
   :host([variant='success']) {
-    --background: var(--wa-color-success-fill-subtle);
-    --border-color: var(--wa-color-success-border-subtle);
-    --content-color: var(--wa-color-success-text-on-fill);
+    --background: var(--wa-color-success-fill-quiet);
+    --border-color: var(--wa-color-success-border-quiet);
+    --content-color: var(--wa-color-success-on-normal);
   }
 
   :host([variant='neutral']) {
-    --background: var(--wa-color-neutral-fill-subtle);
-    --border-color: var(--wa-color-neutral-border-subtle);
-    --content-color: var(--wa-color-neutral-text-on-fill);
+    --background: var(--wa-color-neutral-fill-quiet);
+    --border-color: var(--wa-color-neutral-border-quiet);
+    --content-color: var(--wa-color-neutral-on-normal);
   }
 
   :host([variant='warning']) {
-    --background: var(--wa-color-warning-fill-subtle);
-    --border-color: var(--wa-color-warning-border-subtle);
-    --content-color: var(--wa-color-warning-text-on-fill);
+    --background: var(--wa-color-warning-fill-quiet);
+    --border-color: var(--wa-color-warning-border-quiet);
+    --content-color: var(--wa-color-warning-on-normal);
   }
 
   :host([variant='danger']) {
-    --background: var(--wa-color-danger-fill-subtle);
-    --border-color: var(--wa-color-danger-border-subtle);
-    --content-color: var(--wa-color-danger-text-on-fill);
+    --background: var(--wa-color-danger-fill-quiet);
+    --border-color: var(--wa-color-danger-border-quiet);
+    --content-color: var(--wa-color-danger-on-normal);
   }
 
   .alert {
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 9a04da70a..cd60b265e 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -2,8 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --background: var(--wa-color-neutral-fill-highlight);
-    --content-color: var(--wa-color-neutral-text-on-fill);
+    --background: var(--wa-color-neutral-fill-normal);
+    --content-color: var(--wa-color-neutral-on-normal);
     --size: 3rem;
 
     display: inline-block;
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index 8feb6093f..a6724ad92 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -11,28 +11,28 @@ export default css`
   }
 
   :host([variant='brand']) {
-    --background: var(--wa-color-brand-spot);
-    --content-color: var(--wa-color-brand-text-on-spot);
+    --background: var(--wa-color-brand-fill-loud);
+    --content-color: var(--wa-color-brand-on-loud);
   }
 
   :host([variant='success']) {
-    --background: var(--wa-color-success-spot);
-    --content-color: var(--wa-color-success-text-on-spot);
+    --background: var(--wa-color-success-fill-loud);
+    --content-color: var(--wa-color-success-on-loud);
   }
 
   :host([variant='warning']) {
-    --background: var(--wa-color-warning-spot);
-    --content-color: var(--wa-color-warning-text-on-spot);
+    --background: var(--wa-color-warning-fill-loud);
+    --content-color: var(--wa-color-warning-on-loud);
   }
 
   :host([variant='neutral']) {
-    --background: var(--wa-color-neutral-spot);
-    --content-color: var(--wa-color-neutral-text-on-spot);
+    --background: var(--wa-color-neutral-fill-loud);
+    --content-color: var(--wa-color-neutral-on-loud);
   }
 
   :host([variant='danger']) {
-    --background: var(--wa-color-danger-spot);
-    --content-color: var(--wa-color-danger-text-on-spot);
+    --background: var(--wa-color-danger-fill-loud);
+    --content-color: var(--wa-color-danger-on-loud);
   }
 
   .badge {
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 476e7d809..56422089f 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -10,7 +10,7 @@ export default css`
     align-items: center;
     font: inherit;
     font-weight: var(--wa-font-weight-action);
-    color: var(--wa-color-neutral-text-on-surface);
+    color: var(--wa-color-neutral-on-quiet);
     line-height: var(--wa-font-line-height-regular);
     white-space: nowrap;
   }
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index fefd51498..50c94fdfc 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -18,28 +18,28 @@ export default css`
    */
 
   :host([variant='brand']) {
-    --background: var(--wa-color-brand-spot);
-    --label-color: var(--wa-color-brand-text-on-spot);
+    --background: var(--wa-color-brand-fill-loud);
+    --label-color: var(--wa-color-brand-on-loud);
   }
 
   :host([variant='success']) {
-    --background: var(--wa-color-success-spot);
-    --label-color: var(--wa-color-success-text-on-spot);
+    --background: var(--wa-color-success-fill-loud);
+    --label-color: var(--wa-color-success-on-loud);
   }
 
   :host([variant='warning']) {
-    --background: var(--wa-color-warning-spot);
-    --label-color: var(--wa-color-warning-text-on-spot);
+    --background: var(--wa-color-warning-fill-loud);
+    --label-color: var(--wa-color-warning-on-loud);
   }
 
   :host([variant='neutral']) {
-    --background: var(--wa-color-neutral-spot);
-    --label-color: var(--wa-color-neutral-text-on-spot);
+    --background: var(--wa-color-neutral-fill-loud);
+    --label-color: var(--wa-color-neutral-on-loud);
   }
 
   :host([variant='danger']) {
-    --background: var(--wa-color-danger-spot);
-    --label-color: var(--wa-color-danger-text-on-spot);
+    --background: var(--wa-color-danger-fill-loud);
+    --label-color: var(--wa-color-danger-on-loud);
   }
 
   :host(:not([variant='text'])) {
@@ -57,34 +57,34 @@ export default css`
    */
 
   :host([variant='brand'][outline]) {
-    --background-hover: var(--wa-color-brand-fill-subtle);
-    --label-color: var(--wa-color-brand-text-on-surface);
-    --label-color-hover: var(--wa-color-brand-text-on-fill);
+    --background-hover: var(--wa-color-brand-fill-quiet);
+    --label-color: var(--wa-color-brand-on-quiet);
+    --label-color-hover: var(--wa-color-brand-on-normal);
   }
 
   :host([variant='success'][outline]) {
-    --background-hover: var(--wa-color-success-fill-subtle);
-    --label-color: var(--wa-color-success-text-on-surface);
-    --label-color-hover: var(--wa-color-success-text-on-fill);
+    --background-hover: var(--wa-color-success-fill-quiet);
+    --label-color: var(--wa-color-success-on-quiet);
+    --label-color-hover: var(--wa-color-success-on-normal);
   }
 
   :host([variant='neutral'][outline]),
   :host(.wa-button-group__button--radio:not([checked])) {
-    --background-hover: var(--wa-color-neutral-fill-subtle);
-    --label-color: var(--wa-color-neutral-text-on-surface);
-    --label-color-hover: var(--wa-color-neutral-text-on-fill);
+    --background-hover: var(--wa-color-neutral-fill-quiet);
+    --label-color: var(--wa-color-neutral-on-quiet);
+    --label-color-hover: var(--wa-color-neutral-on-normal);
   }
 
   :host([variant='warning'][outline]) {
-    --background-hover: var(--wa-color-warning-fill-subtle);
-    --label-color: var(--wa-color-warning-text-on-surface);
-    --label-color-hover: var(--wa-color-warning-text-on-fill);
+    --background-hover: var(--wa-color-warning-fill-quiet);
+    --label-color: var(--wa-color-warning-on-quiet);
+    --label-color-hover: var(--wa-color-warning-on-normal);
   }
 
   :host([variant='danger'][outline]) {
-    --background-hover: var(--wa-color-danger-fill-subtle);
-    --label-color: var(--wa-color-danger-text-on-surface);
-    --label-color-hover: var(--wa-color-danger-text-on-fill);
+    --background-hover: var(--wa-color-danger-fill-quiet);
+    --label-color: var(--wa-color-danger-on-quiet);
+    --label-color-hover: var(--wa-color-danger-on-normal);
   }
 
   :host([outline]),
@@ -118,13 +118,13 @@ export default css`
    */
 
   :host([checked]) {
-    --background: var(--wa-color-brand-fill-subtle);
+    --background: var(--wa-color-brand-fill-quiet);
     --background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
     --background-hover: var(--background);
     --border-color: var(--wa-form-controls-activated-color);
     --border-color-active: var(--border-color);
     --border-color-hover: var(--border-color);
-    --label-color: var(--wa-color-brand-text-on-fill);
+    --label-color: var(--wa-color-brand-on-normal);
     --label-color-active: var(--label-color);
     --label-color-hover: var(--label-color);
     --indicator-color: var(--border-color);
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 17510e735..5338e4f78 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -87,7 +87,7 @@ export default css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    color: var(--wa-color-brand-text-on-spot);
+    color: var(--wa-color-brand-on-loud);
     border-color: var(--border-color-checked);
     background: var(--background-checked);
   }
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 5523113ed..60eebdaa2 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -172,7 +172,7 @@ export default css`
 
   @keyframes pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--wa-color-brand-spot);
+      box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
     }
     70% {
       box-shadow: 0 0 0 0.5rem transparent;
@@ -236,10 +236,10 @@ export default css`
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
-      linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
+      linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position:
       0 0,
diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts
index d50e3a268..40eadb062 100644
--- a/src/components/copy-button/copy-button.styles.ts
+++ b/src/components/copy-button/copy-button.styles.ts
@@ -2,8 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --error-color: var(--wa-color-danger-spot);
-    --success-color: var(--wa-color-success-spot);
+    --error-color: var(--wa-color-danger-fill-loud);
+    --success-color: var(--wa-color-success-fill-loud);
 
     display: inline-block;
   }
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index cff01f74d..9702e9ef2 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -23,11 +23,11 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--wa-color-brand-spot);
+    color: var(--wa-color-brand-fill-loud);
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active));
+    color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active));
   }
 
   .icon-button:focus {
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
index 2b7a60cef..22c985b45 100644
--- a/src/components/image-comparer/image-comparer.styles.ts
+++ b/src/components/image-comparer/image-comparer.styles.ts
@@ -46,7 +46,7 @@ export default css`
     top: 0;
     width: var(--divider-width);
     height: 100%;
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
     translate: calc(var(--divider-width) / -2);
     cursor: ew-resize;
   }
@@ -59,10 +59,10 @@ export default css`
     top: calc(50% - (var(--handle-size) / 2));
     width: var(--handle-size);
     height: var(--handle-size);
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
     border-radius: var(--wa-corners-circle);
     font-size: calc(var(--handle-size) * 0.5);
-    color: var(--wa-color-neutral-text-on-fill);
+    color: var(--wa-color-neutral-on-normal);
     cursor: inherit;
     z-index: 10;
   }
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 0473c59c8..058282c7e 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -13,7 +13,7 @@ export default css`
   }
 
   :host([filled]) {
-    --background: var(--wa-color-neutral-fill-subtle);
+    --background: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--background);
   }
 
@@ -92,7 +92,7 @@ export default css`
   .input__control:-webkit-autofill:focus,
   .input__control:-webkit-autofill:active {
     box-shadow: none;
-    -webkit-text-fill-color: var(--wa-color-brand-text-on-fill);
+    -webkit-text-fill-color: var(--wa-color-brand-on-normal);
     caret-color: var(--wa-form-controls-value-color);
   }
 
@@ -123,7 +123,7 @@ export default css`
 
   .input__prefix ::slotted(wa-icon),
   .input__suffix ::slotted(wa-icon) {
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
   }
 
   /*
@@ -225,7 +225,7 @@ export default css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
     border: none;
     background: none;
     padding: 0;
@@ -235,7 +235,7 @@ export default css`
 
   .input__clear:active,
   .input__password-toggle:active {
-    color: color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active));
+    color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
   }
 
   .input__clear:focus,
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 93a6a4a75..868d285f6 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -99,14 +99,14 @@ export default css`
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
   .menu-item--submenu-expanded {
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
     color: var(--wa-color-text-normal);
   }
 
   :host(:focus-visible) .menu-item {
     outline: none;
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
     opacity: 1;
   }
 
diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts
index 099c3665f..b7d59300d 100644
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -10,7 +10,7 @@ export default css`
     display: inline-block;
     font: inherit;
     font-weight: var(--wa-font-weight-medium);
-    color: var(--wa-color-neutral-text-on-surface);
+    color: var(--wa-color-neutral-on-quiet);
     padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl));
     user-select: none;
     -webkit-user-select: none;
diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts
index fc0714af2..c805b643e 100644
--- a/src/components/option/option.styles.ts
+++ b/src/components/option/option.styles.ts
@@ -16,21 +16,21 @@ export default css`
     display: flex;
     align-items: center;
     font: inherit;
-    color: var(--wa-color-neutral-text-on-surface);
+    color: var(--wa-color-neutral-on-quiet);
     padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
     transition: var(--wa-transition-fast) fill;
     cursor: pointer;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--wa-color-neutral-fill-highlight);
-    color: var(--wa-color-neutral-text-on-fill);
+    background-color: var(--wa-color-neutral-fill-normal);
+    color: var(--wa-color-neutral-on-normal);
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
     opacity: 1;
   }
 
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index 72f693d47..4fc7ca2d2 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -3,9 +3,9 @@ import { css } from 'lit';
 export default css`
   :host {
     --height: 1.25rem;
-    --track-color: var(--wa-color-neutral-fill-highlight);
-    --indicator-color: var(--wa-color-brand-spot);
-    --label-color: var(--wa-color-brand-text-on-spot);
+    --track-color: var(--wa-color-neutral-fill-normal);
+    --indicator-color: var(--wa-color-brand-fill-loud);
+    --label-color: var(--wa-color-brand-on-loud);
     --box-shadow: none;
 
     display: block;
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index 05253e89b..84fa6925a 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -4,9 +4,9 @@ export default css`
   :host {
     --size: 8rem;
     --track-width: 0.25rem;
-    --track-color: var(--wa-color-neutral-fill-highlight);
+    --track-color: var(--wa-color-neutral-fill-normal);
     --indicator-width: var(--track-width);
-    --indicator-color: var(--wa-color-brand-spot);
+    --indicator-color: var(--wa-color-brand-fill-loud);
     --indicator-transition-duration: 0.35s;
 
     display: inline-flex;
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 7ae60f62f..bdb1f16e6 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -7,8 +7,8 @@ export default css`
     --thumb-shadow: initial;
     --thumb-size: calc(1rem * var(--wa-form-controls-value-line-height));
     --tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
-    --track-color-active: var(--wa-color-neutral-fill-highlight);
-    --track-color-inactive: var(--wa-color-neutral-fill-highlight);
+    --track-color-active: var(--wa-color-neutral-fill-normal);
+    --track-color-inactive: var(--wa-color-neutral-fill-normal);
     --track-active-offset: 0%;
     --track-height: calc(var(--thumb-size) * 0.25);
 
@@ -150,10 +150,10 @@ export default css`
     z-index: var(--wa-z-index-tooltip);
     left: 0;
     border-radius: var(--wa-corners-s);
-    background-color: var(--wa-color-neutral-spot);
+    background-color: var(--wa-color-neutral-fill-loud);
     font: inherit;
     line-height: var(--wa-line-height-regular);
-    color: var(--wa-color-neutral-text-on-spot);
+    color: var(--wa-color-neutral-on-loud);
     opacity: 0;
     padding: var(--wa-space-2xs) var(--wa-space-xs);
     transition: var(--wa-transition-fast) opacity;
@@ -179,7 +179,7 @@ export default css`
   }
 
   .range--tooltip-top .range__tooltip:after {
-    border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-spot);
+    border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
     border-left: var(--wa-tooltip-arrow-size) solid transparent;
     border-right: var(--wa-tooltip-arrow-size) solid transparent;
     top: 100%;
@@ -191,7 +191,7 @@ export default css`
   }
 
   .range--tooltip-bottom .range__tooltip:after {
-    border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-spot);
+    border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
     border-left: var(--wa-tooltip-arrow-size) solid transparent;
     border-right: var(--wa-tooltip-arrow-size) solid transparent;
     bottom: 100%;
diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
index e302836e2..bcad96420 100644
--- a/src/components/rating/rating.styles.ts
+++ b/src/components/rating/rating.styles.ts
@@ -2,7 +2,7 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --symbol-color: var(--wa-color-neutral-fill-highlight);
+    --symbol-color: var(--wa-color-neutral-fill-normal);
     --symbol-color-active: var(--wa-color-yellow-70);
     --symbol-size: var(--wa-font-size-l);
     --symbol-spacing: var(--wa-space-3xs);
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index e418fc5f3..114054d00 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -13,7 +13,7 @@ export default css`
   }
 
   :host([filled]) {
-    --background: var(--wa-color-neutral-fill-subtle);
+    --background: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--background);
   }
 
@@ -239,7 +239,7 @@ export default css`
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
   }
 
   /* Clear button */
@@ -248,7 +248,7 @@ export default css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
     border: none;
     background: none;
     padding: 0;
@@ -261,7 +261,7 @@ export default css`
   }
 
   .select__clear:active {
-    color: color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active));
+    color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
   }
 
   /* Expand icon */
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
index 6298b7508..24b1e576f 100644
--- a/src/components/skeleton/skeleton.styles.ts
+++ b/src/components/skeleton/skeleton.styles.ts
@@ -3,8 +3,8 @@ import { css } from 'lit';
 export default css`
   :host {
     --border-radius: var(--wa-corners-pill);
-    --color: var(--wa-color-neutral-fill-highlight);
-    --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), var(--wa-color-surface-raised) 30%);
+    --color: var(--wa-color-neutral-fill-normal);
+    --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), var(--wa-color-surface-raised) 30%);
 
     display: block;
     position: relative;
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index a8e7a736a..014c36278 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -8,8 +8,8 @@ import { css } from 'lit';
 export default css`
   :host {
     --track-width: 2px;
-    --track-color: var(--wa-color-neutral-fill-highlight);
-    --indicator-color: var(--wa-color-brand-spot);
+    --track-color: var(--wa-color-neutral-fill-normal);
+    --indicator-color: var(--wa-color-brand-fill-loud);
     --speed: 2s;
 
     flex: none;
diff --git a/src/components/split-panel/split-panel.styles.ts b/src/components/split-panel/split-panel.styles.ts
index 40c45a772..6967c744b 100644
--- a/src/components/split-panel/split-panel.styles.ts
+++ b/src/components/split-panel/split-panel.styles.ts
@@ -21,8 +21,8 @@ export default css`
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--wa-color-neutral-border-highlight);
-    color: var(--wa-color-neutral-text-on-fill);
+    background-color: var(--wa-color-neutral-border-normal);
+    color: var(--wa-color-neutral-on-normal);
     z-index: 1;
   }
 
@@ -31,8 +31,8 @@ export default css`
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
   }
 
   :host([disabled]) .divider {
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 8a89b7c32..a9f9f00d2 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -8,11 +8,11 @@ export default css`
     --border-color-checked: var(--background-checked);
     --border-style: var(--wa-form-controls-border-style);
     --border-width: var(--wa-form-controls-border-width);
-    --box-shadow: none;
+    --box-shadow: initial;
     --height: calc(1em * var(--wa-form-controls-value-line-height));
     --thumb-color: var(--wa-form-controls-resting-color);
     --thumb-color-checked: var(--wa-form-controls-background);
-    --thumb-shadow: none;
+    --thumb-shadow: initial;
     --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
     --width: calc(var(--height) * 1.75);
 
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index 5c40c353b..8b9139712 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -2,8 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --indicator-color: var(--wa-color-brand-spot);
-    --track-color: var(--wa-color-neutral-fill-highlight);
+    --indicator-color: var(--wa-color-brand-fill-loud);
+    --track-color: var(--wa-color-neutral-fill-normal);
     --track-width: 2px;
 
     display: block;
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 0f5cab433..1f2dd8df8 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -10,7 +10,7 @@ export default css`
     align-items: center;
     font: inherit;
     font-weight: var(--wa-font-weight-action);
-    color: var(--wa-color-neutral-text-on-surface);
+    color: var(--wa-color-neutral-on-quiet);
     padding: var(--wa-space-m) var(--wa-space-l);
     white-space: nowrap;
     user-select: none;
@@ -22,7 +22,7 @@ export default css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--wa-color-neutral-text-on-surface);
+    color: var(--wa-color-neutral-on-quiet);
   }
 
   .tab:focus {
@@ -35,7 +35,7 @@ export default css`
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--wa-color-brand-text-on-surface);
+    color: var(--wa-color-brand-on-quiet);
   }
 
   .tab.tab--closable {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 309891d96..884152855 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -10,33 +10,33 @@ export default css`
   }
 
   :host([variant='brand']) {
-    --background: var(--wa-color-brand-fill-subtle);
-    --border-color: var(--wa-color-brand-border-highlight);
-    --content-color: var(--wa-color-brand-text-on-fill);
+    --background: var(--wa-color-brand-fill-quiet);
+    --border-color: var(--wa-color-brand-border-normal);
+    --content-color: var(--wa-color-brand-on-normal);
   }
 
   :host([variant='success']) {
-    --background: var(--wa-color-success-fill-subtle);
-    --border-color: var(--wa-color-success-border-highlight);
-    --content-color: var(--wa-color-success-text-on-fill);
+    --background: var(--wa-color-success-fill-quiet);
+    --border-color: var(--wa-color-success-border-normal);
+    --content-color: var(--wa-color-success-on-normal);
   }
 
   :host([variant='warning']) {
-    --background: var(--wa-color-warning-fill-subtle);
-    --border-color: var(--wa-color-warning-border-highlight);
-    --content-color: var(--wa-color-warning-text-on-fill);
+    --background: var(--wa-color-warning-fill-quiet);
+    --border-color: var(--wa-color-warning-border-normal);
+    --content-color: var(--wa-color-warning-on-normal);
   }
 
   :host([variant='neutral']) {
-    --background: var(--wa-color-neutral-fill-subtle);
-    --border-color: var(--wa-color-neutral-border-highlight);
-    --content-color: var(--wa-color-neutral-text-on-fill);
+    --background: var(--wa-color-neutral-fill-quiet);
+    --border-color: var(--wa-color-neutral-border-normal);
+    --content-color: var(--wa-color-neutral-on-normal);
   }
 
   :host([variant='danger']) {
-    --background: var(--wa-color-danger-fill-subtle);
-    --border-color: var(--wa-color-danger-border-highlight);
-    --content-color: var(--wa-color-danger-text-on-fill);
+    --background: var(--wa-color-danger-fill-quiet);
+    --border-color: var(--wa-color-danger-border-normal);
+    --content-color: var(--wa-color-danger-on-normal);
   }
 
   .tag {
diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
index 062de1535..e88421bfb 100644
--- a/src/components/textarea/textarea.styles.ts
+++ b/src/components/textarea/textarea.styles.ts
@@ -13,7 +13,7 @@ export default css`
   }
 
   :host([filled]) {
-    --background: var(--wa-color-neutral-fill-subtle);
+    --background: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--background);
   }
 
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index 1db8b3f78..c809efed6 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -11,7 +11,7 @@ export default css`
 
   .tooltip {
     --arrow-size: var(--wa-tooltip-arrow-size);
-    --arrow-color: var(--wa-color-neutral-spot);
+    --arrow-color: var(--wa-color-neutral-fill-loud);
   }
 
   .tooltip::part(popup) {
@@ -39,12 +39,12 @@ export default css`
     width: max-content;
     max-width: var(--max-width);
     border-radius: var(--wa-corners-s);
-    background-color: var(--wa-color-neutral-spot);
+    background-color: var(--wa-color-neutral-fill-loud);
     font: inherit;
     line-height: var(--wa-line-height-regular);
     text-align: start;
     white-space: normal;
-    color: var(--wa-color-neutral-text-on-spot);
+    color: var(--wa-color-neutral-on-loud);
     padding: var(--wa-space-2xs) var(--wa-space-xs);
     user-select: none;
     -webkit-user-select: none;
diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 0bd5919cd..66467f212 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -53,7 +53,7 @@ export default css`
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
     padding: var(--wa-space-xs);
     width: 1rem;
     height: 1rem;
@@ -105,12 +105,12 @@ export default css`
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: var(--wa-color-neutral-fill-subtle);
-    border-inline-start-color: var(--wa-color-brand-spot);
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-inline-start-color: var(--wa-color-brand-fill-loud);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-fill-loud);
   }
 
   .tree-item__label {
diff --git a/src/themes/active.css b/src/themes/active.css
index fc029d9a9..8f716a2a3 100644
--- a/src/themes/active.css
+++ b/src/themes/active.css
@@ -113,7 +113,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-05);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -153,55 +153,50 @@
    * Subtle colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
   */
-  --wa-color-brand-spot: var(--wa-color-primary-80);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-70);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+  --wa-color-brand-on-loud: black;
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-70);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
-  --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: black;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: black;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-80);
-  --wa-color-danger-spot-darker: var(--wa-color-red-70);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
-  --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-80);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: black;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-80);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: black;
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -307,7 +302,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -333,8 +328,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -384,7 +379,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -401,55 +396,50 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-80);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-70);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-20);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-90);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-80);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-loud: black;
+  --wa-color-brand-on-normal: var(--wa-color-primary-90);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-80);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-70);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-90);
-  --wa-color-success-text-on-surface: var(--wa-color-green-80);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: black;
+  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-on-quiet: var(--wa-color-green-80);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: black;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
 
-  --wa-color-danger-spot: var(--wa-color-red-70);
-  --wa-color-danger-spot-darker: var(--wa-color-red-60);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: black;
+  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-80);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-loud: black;
+  --wa-color-neutral-on-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
 
   .hero-background::after {
     backdrop-filter: brightness(0.8);
@@ -496,12 +486,12 @@
   }
 
   .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-subtle);
-    --label-color: var(--wa-color-neutral-text-on-fill);
+    --background: var(--wa-color-neutral-fill-quiet);
+    --label-color: var(--wa-color-neutral-on-normal);
   }
 
   wa-rating {
-    --symbol-color-active: var(--wa-color-brand-text-on-surface);
+    --symbol-color-active: var(--wa-color-brand-on-quiet);
   }
 }
 
diff --git a/src/themes/applied.css b/src/themes/applied.css
index 939d5da21..999b5c384 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -137,22 +137,22 @@ mark {
 }
 
 ins {
-  background-color: var(--wa-color-success-fill-subtle);
-  color: var(--wa-color-success-text-on-fill);
+  background-color: var(--wa-color-success-fill-quiet);
+  color: var(--wa-color-success-on-normal);
   border-radius: var(--wa-corners-s);
   text-decoration: none;
 }
 
 del {
-  background-color: var(--wa-color-danger-fill-subtle);
-  color: var(--wa-color-danger-text-on-fill);
+  background-color: var(--wa-color-danger-fill-quiet);
+  color: var(--wa-color-danger-on-normal);
   border-radius: var(--wa-corners-s);
   text-decoration: none;
   padding: 0.125em 0.25em;
 }
 
 mark {
-  background-color: var(--wa-color-warning-fill-subtle);
+  background-color: var(--wa-color-warning-fill-quiet);
   color: inherit;
   border-radius: var(--wa-corners-s);
   padding: 0.125em 0.25em;
@@ -221,13 +221,13 @@ pre:has(code) {
 }
 
 kbd {
-  border: solid 1px var(--wa-color-neutral-border-subtle);
+  border: solid 1px var(--wa-color-neutral-border-quiet);
   box-shadow:
     inset 0 1px 0 1px rgb(255 255 255 / 0.2),
     0 1px 0 0 rgb(0 0 0 / 0.2);
   font-family: var(--wa-font-family-code);
   border-radius: var(--wa-corners-s);
-  color: var(--wa-color-neutral-text-on-fill);
+  color: var(--wa-color-neutral-on-normal);
   padding: 0.125em 0.4em;
 }
 
@@ -241,7 +241,7 @@ blockquote {
   font-family: var(--wa-font-family-longform);
   font-size: var(--wa-font-size-l);
   font-style: italic;
-  background-color: var(--wa-color-neutral-fill-subtle);
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-radius: var(--wa-corners-s);
   padding: var(--wa-space-xl);
   margin: 0 0 var(--wa-space-xl) 0;
@@ -277,7 +277,7 @@ li > ol {
 
 /* Details */
 details {
-  background-color: var(--wa-color-neutral-fill-subtle);
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-radius: var(--wa-panel-corners);
   padding: 0;
   margin: 0;
@@ -345,12 +345,12 @@ tbody tr {
 }
 
 tbody tr:hover {
-  background-color: color-mix(in oklab, var(--wa-color-brand-fill-highlight), transparent 50%);
-  border-top-color: var(--wa-color-brand-border-subtle);
+  background-color: color-mix(in oklab, var(--wa-color-brand-fill-normal), transparent 50%);
+  border-top-color: var(--wa-color-brand-border-quiet);
 }
 
 tbody tr:hover + tr {
-  border-top-color: var(--wa-color-brand-border-subtle);
+  border-top-color: var(--wa-color-brand-border-quiet);
 }
 
 th {
@@ -452,7 +452,7 @@ textarea {
 }
 
 table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), transparent 80%);
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
 }
 
 /* Print styles */
diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index 93383a286..d57ad137c 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -114,7 +114,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-10);
   --wa-color-text-quiet: var(--wa-color-base-50);
-  --wa-color-text-link: var(--wa-color-neutral-text-on-surface);
+  --wa-color-text-link: var(--wa-color-neutral-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -154,55 +154,50 @@
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
 
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-20);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-80);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-60);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-80);
+  --wa-color-brand-border-normal: var(--wa-color-primary-60);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-80);
-  --wa-color-success-border-highlight: var(--wa-color-green-60);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-80);
+  --wa-color-success-border-normal: var(--wa-color-green-60);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-80);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-60);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-80);
-  --wa-color-danger-border-highlight: var(--wa-color-red-60);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-80);
+  --wa-color-danger-border-normal: var(--wa-color-red-60);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-20);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-10);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-70);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-80);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-10);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-80);
+  --wa-color-neutral-border-normal: var(--wa-color-base-20);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-10);
 
   /**
    * Typography
@@ -308,7 +303,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-neutral-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-neutral-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -334,8 +329,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-neutral-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-neutral-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
@@ -385,7 +380,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-70);
-  --wa-color-text-link: var(--wa-color-neutral-text-on-surface);
+  --wa-color-text-link: var(--wa-color-neutral-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-base-40);
   --wa-color-selection-text: white;
@@ -402,67 +397,62 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-70);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-80);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-40);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-10);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-95);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-80);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-30);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-40);
+  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-loud: var(--wa-color-primary-10);
+  --wa-color-brand-on-normal: var(--wa-color-primary-95);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-80);
 
-  --wa-color-success-spot: var(--wa-color-green-70);
-  --wa-color-success-spot-darker: var(--wa-color-green-80);
-  --wa-color-success-fill-subtle: var(--wa-color-green-20);
-  --wa-color-success-fill-highlight: var(--wa-color-green-30);
-  --wa-color-success-border-subtle: var(--wa-color-green-40);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: var(--wa-color-green-10);
-  --wa-color-success-text-on-fill: var(--wa-color-green-95);
-  --wa-color-success-text-on-surface: var(--wa-color-green-80);
+  --wa-color-success-fill-loud: var(--wa-color-green-70);
+  --wa-color-success-fill-quiet: var(--wa-color-green-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-30);
+  --wa-color-success-border-quiet: var(--wa-color-green-40);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-on-normal: var(--wa-color-green-95);
+  --wa-color-success-on-quiet: var(--wa-color-green-80);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-70);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-40);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
 
-  --wa-color-danger-spot: var(--wa-color-red-70);
-  --wa-color-danger-spot-darker: var(--wa-color-red-80);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-20);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-30);
-  --wa-color-danger-border-subtle: var(--wa-color-red-40);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-10);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-95);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-80);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+  --wa-color-danger-fill-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-quiet: var(--wa-color-red-40);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-on-normal: var(--wa-color-red-95);
+  --wa-color-danger-on-quiet: var(--wa-color-red-80);
 
-  --wa-color-neutral-spot: var(--wa-color-base-95);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-30);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-40);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-50);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-10);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-95);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-80);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-95);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-30);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-50);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: var(--wa-color-base-10);
+  --wa-color-neutral-on-normal: var(--wa-color-base-95);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-80);
 }
 
 /* #region Custom Styles */
 @container preview (min-width: 0) {
   .preview-container pre {
-    border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-subtle);
+    border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
   }
 
   .preview-container pre,
   .preview-container code {
     font-size: var(--wa-font-size-m);
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
   }
 
   /* syntax highlighting */
@@ -530,7 +520,7 @@
   wa-rating {
     --symbol-size: var(--wa-font-size-l);
     --symbol-color: color-mix(in oklab, var(--wa-color-base-20), transparent 50%);
-    --symbol-color-active: var(--wa-color-neutral-spot);
+    --symbol-color-active: var(--wa-color-neutral-fill-loud);
   }
 
   wa-alert {
@@ -543,25 +533,25 @@
     }
 
     &[variant='brand'] {
-      --icon-color: var(--wa-color-brand-text-on-fill);
+      --icon-color: var(--wa-color-brand-on-normal);
     }
     &[variant='success'] {
-      --icon-color: var(--wa-color-success-text-on-fill);
+      --icon-color: var(--wa-color-success-on-normal);
     }
     &[variant='warning'] {
-      --icon-color: var(--wa-color-warning-text-on-fill);
+      --icon-color: var(--wa-color-warning-on-normal);
     }
     &[variant='danger'] {
-      --icon-color: var(--wa-color-danger-text-on-fill);
+      --icon-color: var(--wa-color-danger-on-normal);
     }
     &[variant='neutral'] {
-      --icon-color: var(--wa-color-neutral-text-on-fill);
+      --icon-color: var(--wa-color-neutral-on-normal);
     }
   }
 
   wa-carousel {
     --pagination-color-activated: var(--wa-color-primary-70);
-    --pagination-color-resting: var(--wa-color-neutral-fill-highlight);
+    --pagination-color-resting: var(--wa-color-neutral-fill-normal);
   }
 
   wa-carousel::part(scroll-container) {
@@ -608,19 +598,19 @@
     --border-width: 0 0 0 var(--wa-panel-border-width);
 
     &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-subtle);
+      --border-color: var(--wa-color-brand-border-quiet);
     }
     &[variant='success'] {
-      --border-color: var(--wa-color-success-border-subtle);
+      --border-color: var(--wa-color-success-border-quiet);
     }
     &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-subtle);
+      --border-color: var(--wa-color-warning-border-quiet);
     }
     &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-subtle);
+      --border-color: var(--wa-color-danger-border-quiet);
     }
     &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-subtle);
+      --border-color: var(--wa-color-neutral-border-quiet);
     }
   }
 
@@ -686,7 +676,7 @@
   }
 
   .hero wa-button {
-    --background: var(--wa-color-neutral-spot);
+    --background: var(--wa-color-neutral-fill-loud);
     margin-block-start: var(--wa-space-xl);
     font-size: var(--wa-font-size-l);
   }
@@ -744,7 +734,7 @@
   }
 
   .blog wa-avatar::part(image) {
-    border: var(--wa-border-width-s) solid var(--wa-color-brand-spot);
+    border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
     border-radius: var(--wa-corners-circle);
   }
 
@@ -760,15 +750,15 @@
   }
 
   .message-composer wa-card::part(header) {
-    background-color: var(--wa-color-neutral-spot);
+    background-color: var(--wa-color-neutral-fill-loud);
   }
 
   .message-composer .grouped-buttons {
-    --wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-30), white 40%);
+    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-30), white 40%);
   }
 
   .message-composer [slot='header'] wa-icon-button::part(base) {
-    color: var(--wa-color-neutral-text-on-spot);
+    color: var(--wa-color-neutral-on-loud);
   }
 
   .message-composer .grouped-buttons wa-icon-button::part(base) {
@@ -778,17 +768,17 @@
   }
 
   .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-highlight);
+    background-color: var(--wa-color-neutral-fill-normal);
     color: var(--wa-color-text-normal);
   }
 
   .message-composer wa-tooltip::part(body) {
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
   }
 
   .message-composer wa-tooltip::part(base__arrow) {
-    --arrow-color: var(--wa-color-brand-spot);
+    --arrow-color: var(--wa-color-brand-fill-loud);
   }
 
   .message-composer wa-card::part(footer) {
@@ -797,14 +787,14 @@
   }
 
   .support-table th {
-    background-color: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
+    background-color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-loud);
   }
 
   .support-table th wa-checkbox {
     --background: transparent;
-    --border-color: var(--wa-color-neutral-text-on-spot);
-    --border-color-checked: var(--wa-color-neutral-text-on-spot);
+    --border-color: var(--wa-color-neutral-on-loud);
+    --border-color-checked: var(--wa-color-neutral-on-loud);
   }
 
   .checkout-form {
@@ -828,19 +818,19 @@
 
     & wa-alert {
       &[variant='brand'] {
-        --icon-color: var(--wa-color-brand-text-on-surface);
+        --icon-color: var(--wa-color-brand-on-quiet);
       }
       &[variant='success'] {
-        --icon-color: var(--wa-color-success-text-on-surface);
+        --icon-color: var(--wa-color-success-on-quiet);
       }
       &[variant='warning'] {
-        --icon-color: var(--wa-color-warning-text-on-surface);
+        --icon-color: var(--wa-color-warning-on-quiet);
       }
       &[variant='danger'] {
-        --icon-color: var(--wa-color-danger-text-on-surface);
+        --icon-color: var(--wa-color-danger-on-quiet);
       }
       &[variant='neutral'] {
-        --icon-color: var(--wa-color-neutral-text-on-surface);
+        --icon-color: var(--wa-color-neutral-on-quiet);
       }
     }
 
diff --git a/src/themes/classic.css b/src/themes/classic.css
index 8d561155a..a743ff533 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -115,7 +115,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-10);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -155,55 +155,50 @@
    * Subtle colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
   */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-40);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-30);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -337,8 +332,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -382,7 +377,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -399,62 +394,57 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-20);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-60);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-70);
-  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-70);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-60);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 }
 
 /* #region Custom Styles */
 @container preview (min-width: 0) {
   .hero-background {
     height: 70rem;
-    background: linear-gradient(174deg, var(--wa-color-brand-fill-highlight) 0 70%, transparent 70% 100%);
+    background: linear-gradient(174deg, var(--wa-color-brand-fill-normal) 0 70%, transparent 70% 100%);
     position: absolute;
     top: 0;
     left: 0;
@@ -479,7 +469,7 @@
 
   .hero .title {
     text-align: right;
-    color: var(--wa-color-brand-text-on-fill);
+    color: var(--wa-color-brand-on-normal);
   }
 }
 
diff --git a/src/themes/classic_components.css b/src/themes/classic_components.css
index dcf9a4e7b..2b14b4105 100644
--- a/src/themes/classic_components.css
+++ b/src/themes/classic_components.css
@@ -8,33 +8,33 @@ wa-alert {
   font-size: var(--wa-font-size-s);
 
   &[variant='brand'] {
-    --border-color: var(--wa-color-brand-spot) var(--wa-color-neutral-border-subtle)
-      var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
-    --icon-color: var(--wa-color-brand-spot);
+    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-neutral-border-quiet)
+      var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
+    --icon-color: var(--wa-color-brand-fill-loud);
   }
 
   &[variant='success'] {
-    --border-color: var(--wa-color-success-spot) var(--wa-color-neutral-border-subtle)
-      var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
-    --icon-color: var(--wa-color-success-spot);
+    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-neutral-border-quiet)
+      var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
+    --icon-color: var(--wa-color-success-fill-loud);
   }
 
   &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-spot) var(--wa-color-neutral-border-subtle)
-      var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
-    --icon-color: var(--wa-color-neutral-spot);
+    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-neutral-border-quiet)
+      var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
+    --icon-color: var(--wa-color-neutral-fill-loud);
   }
 
   &[variant='warning'] {
-    --border-color: var(--wa-color-warning-spot) var(--wa-color-neutral-border-subtle)
-      var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
-    --icon-color: var(--wa-color-warning-spot);
+    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-neutral-border-quiet)
+      var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
+    --icon-color: var(--wa-color-warning-fill-loud);
   }
 
   &[variant='danger'] {
-    --border-color: var(--wa-color-danger-spot) var(--wa-color-neutral-border-subtle)
-      var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
-    --icon-color: var(--wa-color-danger-spot);
+    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-neutral-border-quiet)
+      var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
+    --icon-color: var(--wa-color-danger-fill-loud);
   }
 }
 /* #endregion */
diff --git a/src/themes/color_standard.css b/src/themes/color_standard.css
index 69a0de611..7a8a6d4bf 100644
--- a/src/themes/color_standard.css
+++ b/src/themes/color_standard.css
@@ -1,122 +1,86 @@
 :root,
 :host {
-  --wa-color-rose-95: #fdeef5;
-  --wa-color-rose-90: #fbdeeb;
-  --wa-color-rose-80: #f7b8d3;
-  --wa-color-rose-70: #f391b9;
-  --wa-color-rose-60: #ee669b;
-  --wa-color-rose-50: #de1d6a;
-  --wa-color-rose-40: #ab174e;
-  --wa-color-rose-30: #88123b;
-  --wa-color-rose-20: #630d29;
-  --wa-color-rose-10: #3e0817;
-  --wa-color-rose-05: #26050c;
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddc;
+  --wa-color-red-80: #ffb7b6;
+  --wa-color-red-70: #fc9090;
+  --wa-color-red-60: #f2676c;
+  --wa-color-red-50: #de2d44;
+  --wa-color-red-40: #b11036;
+  --wa-color-red-30: #861a2f;
+  --wa-color-red-20: #641122;
+  --wa-color-red-10: #400712;
+  --wa-color-red-05: #2a030a;
 
-  --wa-color-red-95: #fdeef3;
-  --wa-color-red-90: #fcdee7;
-  --wa-color-red-80: #f8b8c8;
-  --wa-color-red-70: #f492a8;
-  --wa-color-red-60: #ef6982;
-  --wa-color-red-50: #df2e45;
-  --wa-color-red-40: #a82431;
-  --wa-color-red-30: #851d23;
-  --wa-color-red-20: #621617;
-  --wa-color-red-10: #3c0c09;
-  --wa-color-red-05: #290601;
-
-  --wa-color-yellow-95: #fbf3c9;
-  --wa-color-yellow-90: #ffe492;
+  --wa-color-yellow-95: #fdf3ba;
+  --wa-color-yellow-90: #fee590;
   --wa-color-yellow-80: #fcc041;
-  --wa-color-yellow-70: #e5a23d;
-  --wa-color-yellow-60: #cc853a;
-  --wa-color-yellow-50: #a86633;
-  --wa-color-yellow-40: #824a2a;
-  --wa-color-yellow-30: #6a3825;
-  --wa-color-yellow-20: #4f281d;
-  --wa-color-yellow-10: #2e1813;
-  --wa-color-yellow-05: #1a0e0a;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e07b00;
+  --wa-color-yellow-50: #bb5a00;
+  --wa-color-yellow-40: #924200;
+  --wa-color-yellow-30: #743200;
+  --wa-color-yellow-20: #572300;
+  --wa-color-yellow-10: #361300;
+  --wa-color-yellow-05: #240b00;
 
-  --wa-color-lime-95: #eff4e3;
-  --wa-color-lime-90: #dfeac7;
-  --wa-color-lime-80: #bcd288;
-  --wa-color-lime-70: #98bb4a;
-  --wa-color-lime-60: #74a30b;
-  --wa-color-lime-50: #588000;
-  --wa-color-lime-40: #436100;
-  --wa-color-lime-30: #354d00;
-  --wa-color-lime-20: #263700;
-  --wa-color-lime-10: #172100;
-  --wa-color-lime-05: #0d1300;
-
-  --wa-color-green-95: #e2f8df;
+  --wa-color-green-95: #e2f9e2;
   --wa-color-green-90: #c2f2c1;
-  --wa-color-green-80: #68e27a;
-  --wa-color-green-70: #00cb50;
-  --wa-color-green-60: #00ae4b;
-  --wa-color-green-50: #008840;
-  --wa-color-green-40: #006834;
-  --wa-color-green-30: #00522c;
-  --wa-color-green-20: #003b22;
-  --wa-color-green-10: #002418;
-  --wa-color-green-05: #001611;
+  --wa-color-green-80: #92da97;
+  --wa-color-green-70: #5dc36f;
+  --wa-color-green-60: #00ac49;
+  --wa-color-green-50: #008825;
+  --wa-color-green-40: #006800;
+  --wa-color-green-30: #005300;
+  --wa-color-green-20: #003c00;
+  --wa-color-green-10: #002400;
+  --wa-color-green-05: #001700;
 
-  --wa-color-teal-95: #e5f5f5;
-  --wa-color-teal-90: #cbecec;
-  --wa-color-teal-80: #8ed6d5;
-  --wa-color-teal-70: #50bfbe;
-  --wa-color-teal-60: #1ea5a4;
-  --wa-color-teal-50: #188180;
-  --wa-color-teal-40: #126261;
-  --wa-color-teal-30: #0e4d4d;
-  --wa-color-teal-20: #0a3737;
-  --wa-color-teal-10: #062121;
-  --wa-color-teal-05: #041313;
+  --wa-color-blue-95: #e8f3ff;
+  --wa-color-blue-90: #d1e8ff;
+  --wa-color-blue-80: #9fceff;
+  --wa-color-blue-70: #6eb3ff;
+  --wa-color-blue-60: #3e96ff;
+  --wa-color-blue-50: #0071ec;
+  --wa-color-blue-40: #0053c0;
+  --wa-color-blue-30: #003f9c;
+  --wa-color-blue-20: #002d77;
+  --wa-color-blue-10: #001a4e;
+  --wa-color-blue-05: #000f35;
 
-  --wa-color-blue-95: #e9f3fe;
-  --wa-color-blue-90: #d4e8fc;
-  --wa-color-blue-80: #a2cef9;
-  --wa-color-blue-70: #6eb4f6;
-  --wa-color-blue-60: #259af4;
-  --wa-color-blue-50: #0076f2;
-  --wa-color-blue-40: #005ab7;
-  --wa-color-blue-30: #004790;
-  --wa-color-blue-20: #00346a;
-  --wa-color-blue-10: #001f3f;
-  --wa-color-blue-05: #001427;
+  --wa-color-indigo-95: #f0f2fe;
+  --wa-color-indigo-90: #e2e4fc;
+  --wa-color-indigo-80: #c2c6f8;
+  --wa-color-indigo-70: #a5a9f2;
+  --wa-color-indigo-60: #8a8beb;
+  --wa-color-indigo-50: #6b65e2;
+  --wa-color-indigo-40: #5246c1;
+  --wa-color-indigo-30: #412eaa;
+  --wa-color-indigo-20: #321393;
+  --wa-color-indigo-10: #1c006a;
+  --wa-color-indigo-05: #130049;
 
-  --wa-color-indigo-95: #f2f1fd;
-  --wa-color-indigo-90: #e5e4fa;
-  --wa-color-indigo-80: #c7c5f5;
-  --wa-color-indigo-70: #aba7f0;
-  --wa-color-indigo-60: #8f8aea;
-  --wa-color-indigo-50: #6a63e1;
-  --wa-color-indigo-40: #514cab;
-  --wa-color-indigo-30: #403c86;
-  --wa-color-indigo-20: #2e2b60;
-  --wa-color-indigo-10: #1b1a3a;
-  --wa-color-indigo-05: #100f21;
+  --wa-color-violet-95: #f9effd;
+  --wa-color-violet-90: #f4defb;
+  --wa-color-violet-80: #e7baf7;
+  --wa-color-violet-70: #d996ef;
+  --wa-color-violet-60: #c674e1;
+  --wa-color-violet-50: #a94dc6;
+  --wa-color-violet-40: #8732a1;
+  --wa-color-violet-30: #6d2283;
+  --wa-color-violet-20: #521564;
+  --wa-color-violet-10: #330940;
+  --wa-color-violet-05: #22042b;
 
-  --wa-color-violet-95: #f8effa;
-  --wa-color-violet-90: #f0e0f6;
-  --wa-color-violet-80: #e0beeb;
-  --wa-color-violet-70: #d09de1;
-  --wa-color-violet-60: #c07ad6;
-  --wa-color-violet-50: #a84cc5;
-  --wa-color-violet-40: #803a97;
-  --wa-color-violet-30: #652e76;
-  --wa-color-violet-20: #482155;
-  --wa-color-violet-10: #2c1433;
-  --wa-color-violet-05: #190b1e;
-
-  --wa-color-gray-95: #f2f2f4;
-  --wa-color-gray-90: #e5e5e9;
-  --wa-color-gray-80: #c8c9d1;
-  --wa-color-gray-70: #acaebb;
-  --wa-color-gray-60: #9194a4;
-  --wa-color-gray-50: #70758a;
+  --wa-color-gray-95: #f1f2f3;
+  --wa-color-gray-90: #e4e5e9;
+  --wa-color-gray-80: #c7c9d0;
+  --wa-color-gray-70: #abaeb9;
+  --wa-color-gray-60: #9194a2;
+  --wa-color-gray-50: #717584;
   --wa-color-gray-40: #545868;
-  --wa-color-gray-30: #424551;
-  --wa-color-gray-20: #30323b;
-  --wa-color-gray-10: #1c1d23;
-  --wa-color-gray-05: #111215;
+  --wa-color-gray-30: #424554;
+  --wa-color-gray-20: #2f323f;
+  --wa-color-gray-10: #1b1d26;
+  --wa-color-gray-05: #101219;
 }
diff --git a/src/themes/default.css b/src/themes/default.css
index 0acd32952..0aace7cde 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -6,72 +6,96 @@
   color-scheme: light;
 
   /**
-   * Primitive colors
+   * Literal colors
    * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
+   * Lightness on this scale strongly correlates to relative luminance, so each lightness value has nearly uniform WCAG 2.1 contrast across hues.
    * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
    * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
    * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
    */
-  --wa-color-red-95: #fdeef3;
-  --wa-color-red-90: #fcdee7;
-  --wa-color-red-80: #f8b8c8;
-  --wa-color-red-70: #f492a8;
-  --wa-color-red-60: #ef6982;
-  --wa-color-red-50: #df2e45;
-  --wa-color-red-40: #a82431;
-  --wa-color-red-30: #851d23;
-  --wa-color-red-20: #621617;
-  --wa-color-red-10: #3c0c09;
-  --wa-color-red-05: #290601;
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddc;
+  --wa-color-red-80: #ffb7b6;
+  --wa-color-red-70: #fc9090;
+  --wa-color-red-60: #f2676c;
+  --wa-color-red-50: #de2d44;
+  --wa-color-red-40: #b11036;
+  --wa-color-red-30: #861a2f;
+  --wa-color-red-20: #641122;
+  --wa-color-red-10: #400712;
+  --wa-color-red-05: #2a030a;
 
-  --wa-color-yellow-95: #fbf3c9;
-  --wa-color-yellow-90: #ffe492;
+  --wa-color-yellow-95: #fdf3ba;
+  --wa-color-yellow-90: #fee590;
   --wa-color-yellow-80: #fcc041;
-  --wa-color-yellow-70: #e5a23d;
-  --wa-color-yellow-60: #cc853a;
-  --wa-color-yellow-50: #a86633;
-  --wa-color-yellow-40: #824a2a;
-  --wa-color-yellow-30: #6a3825;
-  --wa-color-yellow-20: #4f281d;
-  --wa-color-yellow-10: #2e1813;
-  --wa-color-yellow-05: #1a0e0a;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e07b00;
+  --wa-color-yellow-50: #bb5a00;
+  --wa-color-yellow-40: #924200;
+  --wa-color-yellow-30: #743200;
+  --wa-color-yellow-20: #572300;
+  --wa-color-yellow-10: #361300;
+  --wa-color-yellow-05: #240b00;
 
-  --wa-color-green-95: #e2f8df;
+  --wa-color-green-95: #e2f9e2;
   --wa-color-green-90: #c2f2c1;
-  --wa-color-green-80: #68e27a;
-  --wa-color-green-70: #00cb50;
-  --wa-color-green-60: #00ae4b;
-  --wa-color-green-50: #008840;
-  --wa-color-green-40: #006834;
-  --wa-color-green-30: #00522c;
-  --wa-color-green-20: #003b22;
-  --wa-color-green-10: #002418;
-  --wa-color-green-05: #001611;
+  --wa-color-green-80: #92da97;
+  --wa-color-green-70: #5dc36f;
+  --wa-color-green-60: #00ac49;
+  --wa-color-green-50: #008825;
+  --wa-color-green-40: #006800;
+  --wa-color-green-30: #005300;
+  --wa-color-green-20: #003c00;
+  --wa-color-green-10: #002400;
+  --wa-color-green-05: #001700;
 
-  --wa-color-blue-95: #e9f3fe;
-  --wa-color-blue-90: #d4e8fc;
-  --wa-color-blue-80: #a2cef9;
-  --wa-color-blue-70: #6eb4f6;
-  --wa-color-blue-60: #259af4;
-  --wa-color-blue-50: #0076f2;
-  --wa-color-blue-40: #005ab7;
-  --wa-color-blue-30: #004790;
-  --wa-color-blue-20: #00346a;
-  --wa-color-blue-10: #001f3f;
-  --wa-color-blue-05: #001427;
+  --wa-color-blue-95: #e8f3ff;
+  --wa-color-blue-90: #d1e8ff;
+  --wa-color-blue-80: #9fceff;
+  --wa-color-blue-70: #6eb3ff;
+  --wa-color-blue-60: #3e96ff;
+  --wa-color-blue-50: #0071ec;
+  --wa-color-blue-40: #0053c0;
+  --wa-color-blue-30: #003f9c;
+  --wa-color-blue-20: #002d77;
+  --wa-color-blue-10: #001a4e;
+  --wa-color-blue-05: #000f35;
 
-  --wa-color-gray-95: #f2f2f4;
-  --wa-color-gray-90: #e5e5e9;
-  --wa-color-gray-80: #c8c9d1;
-  --wa-color-gray-70: #acaebb;
-  --wa-color-gray-60: #9194a4;
-  --wa-color-gray-50: #70758a;
+  --wa-color-indigo-95: #f0f2fe;
+  --wa-color-indigo-90: #e2e4fc;
+  --wa-color-indigo-80: #c2c6f8;
+  --wa-color-indigo-70: #a5a9f2;
+  --wa-color-indigo-60: #8a8beb;
+  --wa-color-indigo-50: #6b65e2;
+  --wa-color-indigo-40: #5246c1;
+  --wa-color-indigo-30: #412eaa;
+  --wa-color-indigo-20: #321393;
+  --wa-color-indigo-10: #1c006a;
+  --wa-color-indigo-05: #130049;
+
+  --wa-color-violet-95: #f9effd;
+  --wa-color-violet-90: #f4defb;
+  --wa-color-violet-80: #e7baf7;
+  --wa-color-violet-70: #d996ef;
+  --wa-color-violet-60: #c674e1;
+  --wa-color-violet-50: #a94dc6;
+  --wa-color-violet-40: #8732a1;
+  --wa-color-violet-30: #6d2283;
+  --wa-color-violet-20: #521564;
+  --wa-color-violet-10: #330940;
+  --wa-color-violet-05: #22042b;
+
+  --wa-color-gray-95: #f1f2f3;
+  --wa-color-gray-90: #e4e5e9;
+  --wa-color-gray-80: #c7c9d0;
+  --wa-color-gray-70: #abaeb9;
+  --wa-color-gray-60: #9194a2;
+  --wa-color-gray-50: #717584;
   --wa-color-gray-40: #545868;
-  --wa-color-gray-30: #424551;
-  --wa-color-gray-20: #30323b;
-  --wa-color-gray-10: #1c1d23;
-  --wa-color-gray-05: #111215;
+  --wa-color-gray-30: #424554;
+  --wa-color-gray-20: #2f323f;
+  --wa-color-gray-10: #1b1d26;
+  --wa-color-gray-05: #101219;
 
   --wa-color-primary-95: var(--wa-color-blue-95);
   --wa-color-primary-90: var(--wa-color-blue-90);
@@ -109,11 +133,10 @@
   --wa-color-surface-border: var(--wa-color-base-90);
 
   /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
+   * Text should have a minimum 4.5:1 contrast ratio against surfaces. */
   --wa-color-text-normal: var(--wa-color-base-10);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-primary-50);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -152,57 +175,58 @@
    * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
    * Muted colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
+   * Colors are differentiated by how much they contribute to visual noise. It's hard to focus on a conversation in a loud restaurant. In the same way, it's hard for a user to focus their attention when there are many colors competing for it.
   */
 
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+  --wa-color-brand-border-loud: var(--wa-color-primary-60);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-loud: white;
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-60);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-loud: white;
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-spot: var(--wa-color-base-20);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-border-loud: var(--wa-color-base-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-loud: white;
 
   /**
    * Typography
@@ -308,7 +332,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -334,7 +358,7 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
   --wa-form-controls-resting-color: var(--wa-color-base-60);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
@@ -385,7 +409,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -402,62 +426,57 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-20);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-60);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-70);
-  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-70);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-60);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 }
 
 /* #region Custom Styles */
 @container preview (min-width: 0) {
   .hero-background {
     height: 47rem;
-    background-color: var(--wa-color-brand-spot-darker);
+    background-color: var(--wa-color-brand-fill-loud);
     position: absolute;
     top: 0;
     left: 0;
@@ -477,12 +496,12 @@
   }
 
   .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-subtle);
-    --label-color: var(--wa-color-neutral-text-on-fill);
+    --background: var(--wa-color-neutral-fill-quiet);
+    --label-color: var(--wa-color-neutral-on-normal);
   }
 
   .project-header {
-    color: var(--wa-color-brand-text-on-spot);
+    color: var(--wa-color-brand-on-loud);
   }
 
   .strata.hero {
@@ -491,7 +510,7 @@
 
   .hero .title {
     margin-inline-end: 40%;
-    color: var(--wa-color-brand-text-on-spot);
+    color: var(--wa-color-brand-on-loud);
   }
 }
 
diff --git a/src/themes/depth_2_chunky.css b/src/themes/depth_2_chunky.css
index 5c837522d..1b729e090 100644
--- a/src/themes/depth_2_chunky.css
+++ b/src/themes/depth_2_chunky.css
@@ -60,23 +60,23 @@ wa-button {
     }
   }
   &[variant='brand'] {
-    --box-shadow-color: var(--wa-color-brand-spot-darker);
+    --box-shadow-color: var(--wa-color-brand-border-loud);
   }
 
   &[variant='success'] {
-    --box-shadow-color: var(--wa-color-success-spot-darker);
+    --box-shadow-color: var(--wa-color-success-border-loud);
   }
 
   &[variant='neutral'] {
-    --box-shadow-color: var(--wa-color-neutral-spot-darker);
+    --box-shadow-color: var(--wa-color-neutral-border-loud);
   }
 
   &[variant='warning'] {
-    --box-shadow-color: var(--wa-color-warning-spot-darker);
+    --box-shadow-color: var(--wa-color-warning-border-loud);
   }
 
   &[variant='danger'] {
-    --box-shadow-color: var(--wa-color-danger-spot-darker);
+    --box-shadow-color: var(--wa-color-danger-border-loud);
   }
 }
 /* #endregion */
diff --git a/src/themes/depth_3_punchy.css b/src/themes/depth_3_punchy.css
index b46dac344..abcd490b8 100644
--- a/src/themes/depth_3_punchy.css
+++ b/src/themes/depth_3_punchy.css
@@ -73,7 +73,7 @@ wa-checkbox {
   --background-checked: linear-gradient(
     to bottom,
     var(--wa-form-controls-activated-color),
-    var(--wa-color-brand-spot-darker)
+    var(--wa-color-brand-border-loud)
   );
 
   &:not([checked]):not([indeterminate]) {
diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css
index ad5100522..41782ab72 100644
--- a/src/themes/depth_4_glossy.css
+++ b/src/themes/depth_4_glossy.css
@@ -59,7 +59,7 @@
     &[variant='brand'] {
       --background: color-mix(
         in oklab,
-        var(--wa-color-brand-fill-subtle),
+        var(--wa-color-brand-fill-quiet),
         transparent var(--wa-background-transparency-percent)
       );
     }
@@ -67,7 +67,7 @@
     &[variant='success'] {
       --background: color-mix(
         in oklab,
-        var(--wa-color-success-fill-subtle),
+        var(--wa-color-success-fill-quiet),
         transparent var(--wa-background-transparency-percent)
       );
     }
@@ -75,7 +75,7 @@
     &[variant='neutral'] {
       --background: color-mix(
         in oklab,
-        var(--wa-color-neutral-fill-subtle),
+        var(--wa-color-neutral-fill-quiet),
         transparent var(--wa-background-transparency-percent)
       );
     }
@@ -83,7 +83,7 @@
     &[variant='warning'] {
       --background: color-mix(
         in oklab,
-        var(--wa-color-warning-fill-subtle),
+        var(--wa-color-warning-fill-quiet),
         transparent var(--wa-background-transparency-percent)
       );
     }
@@ -91,7 +91,7 @@
     &[variant='danger'] {
       --background: color-mix(
         in oklab,
-        var(--wa-color-danger-fill-subtle),
+        var(--wa-color-danger-fill-quiet),
         transparent var(--wa-background-transparency-percent)
       );
     }
@@ -132,83 +132,88 @@ wa-button:not([variant='text']) {
 
 wa-button:not([outline]) {
   &[variant='brand'] {
-    --background: linear-gradient(var(--wa-color-brand-spot) 25%, var(--wa-color-brand-spot));
+    --background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
     --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover))
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%,
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))
     );
     --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active)),
-      var(--wa-color-brand-spot)
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)),
+      var(--wa-color-brand-fill-loud)
     );
-    --border-color: var(--wa-color-brand-spot)
-      color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-brand-spot)) var(--wa-color-brand-spot);
+    --border-color: var(--wa-color-brand-fill-loud)
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-loud))
+      var(--wa-color-brand-fill-loud);
     --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-brand-spot);
+    --border-color-active: var(--wa-color-brand-fill-loud);
   }
 
   &[variant='success'] {
-    --background: linear-gradient(var(--wa-color-success-spot) 25%, var(--wa-color-success-spot));
+    --background: linear-gradient(var(--wa-color-success-fill-loud) 25%, var(--wa-color-success-fill-loud));
     --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover))
+      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover)) 25%,
+      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))
     );
     --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-active)),
-      var(--wa-color-success-spot)
+      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active)),
+      var(--wa-color-success-fill-loud)
     );
-    --border-color: var(--wa-color-success-spot)
-      color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-success-spot)) var(--wa-color-success-spot);
+    --border-color: var(--wa-color-success-fill-loud)
+      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-loud))
+      var(--wa-color-success-fill-loud);
     --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-success-spot);
+    --border-color-active: var(--wa-color-success-fill-loud);
   }
 
   &[variant='neutral'] {
-    --background: linear-gradient(var(--wa-color-neutral-spot) 25%, var(--wa-color-neutral-spot));
+    --background: linear-gradient(var(--wa-color-neutral-fill-loud) 25%, var(--wa-color-neutral-fill-loud));
     --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-hover))
+      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover)) 25%,
+      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover))
     );
     --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active)),
-      var(--wa-color-neutral-spot)
+      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active)),
+      var(--wa-color-neutral-fill-loud)
     );
-    --border-color: var(--wa-color-neutral-spot)
-      color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-neutral-spot)) var(--wa-color-neutral-spot);
+    --border-color: var(--wa-color-neutral-fill-loud)
+      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-neutral-fill-loud))
+      var(--wa-color-neutral-fill-loud);
     --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-neutral-spot);
+    --border-color-active: var(--wa-color-neutral-fill-loud);
   }
 
   &[variant='warning'] {
-    --background: linear-gradient(var(--wa-color-warning-spot) 25%, var(--wa-color-warning-spot));
+    --background: linear-gradient(var(--wa-color-warning-fill-loud) 25%, var(--wa-color-warning-fill-loud));
     --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover))
+      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover)) 25%,
+      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))
     );
     --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-active)),
-      var(--wa-color-warning-spot)
+      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active)),
+      var(--wa-color-warning-fill-loud)
     );
-    --border-color: var(--wa-color-warning-spot)
-      color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-warning-spot)) var(--wa-color-warning-spot);
+    --border-color: var(--wa-color-warning-fill-loud)
+      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-loud))
+      var(--wa-color-warning-fill-loud);
     --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-warning-spot);
+    --border-color-active: var(--wa-color-warning-fill-loud);
   }
 
   &[variant='danger'] {
-    --background: linear-gradient(var(--wa-color-danger-spot) 25%, var(--wa-color-danger-spot));
+    --background: linear-gradient(var(--wa-color-danger-fill-loud) 25%, var(--wa-color-danger-fill-loud));
     --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover))
+      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover)) 25%,
+      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))
     );
     --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-active)),
-      var(--wa-color-danger-spot)
+      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active)),
+      var(--wa-color-danger-fill-loud)
     );
-    --border-color: var(--wa-color-danger-spot)
-      color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-danger-spot)) var(--wa-color-danger-spot);
+    --border-color: var(--wa-color-danger-fill-loud)
+      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-loud))
+      var(--wa-color-danger-fill-loud);
     --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-danger-spot);
+    --border-color-active: var(--wa-color-danger-fill-loud);
   }
 }
 /* #endregion */
@@ -262,7 +267,7 @@ wa-checkbox {
   --background-checked: linear-gradient(
     to bottom,
     var(--wa-form-controls-activated-color),
-    var(--wa-color-brand-spot-darker)
+    var(--wa-color-brand-border-loud)
   );
 
   &:not([checked]):not([indeterminate]) {
diff --git a/src/themes/fa.css b/src/themes/fa.css
index 7aed0caa4..77096d992 100644
--- a/src/themes/fa.css
+++ b/src/themes/fa.css
@@ -114,7 +114,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-20);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -158,55 +158,50 @@
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
 
-  --wa-color-brand-spot: var(--wa-color-primary-70);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-50);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-70);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-50);
-  --wa-color-brand-text-on-spot: var(--wa-color-text-normal);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-70);
+  --wa-color-brand-border-normal: var(--wa-color-primary-50);
+  --wa-color-brand-on-loud: var(--wa-color-text-normal);
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-50);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-70);
-  --wa-color-success-border-highlight: var(--wa-color-green-50);
-  --wa-color-success-text-on-spot: var(--wa-color-text-normal);
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-70);
+  --wa-color-success-border-normal: var(--wa-color-green-50);
+  --wa-color-success-on-loud: var(--wa-color-text-normal);
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-70);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-60);
-  --wa-color-warning-text-on-spot: var(--wa-color-text-normal);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
+  --wa-color-warning-on-loud: var(--wa-color-text-normal);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-70);
-  --wa-color-danger-spot-darker: var(--wa-color-red-50);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-70);
-  --wa-color-danger-border-highlight: var(--wa-color-red-50);
-  --wa-color-danger-text-on-spot: var(--wa-color-text-normal);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-70);
+  --wa-color-danger-border-normal: var(--wa-color-red-50);
+  --wa-color-danger-on-loud: var(--wa-color-text-normal);
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-80);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-50);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-60);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-spot: var(--wa-color-text-normal);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-text-normal);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-60);
+  --wa-color-neutral-border-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-loud: var(--wa-color-text-normal);
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-text-normal);
 
   /**
    * Typography
@@ -338,8 +333,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-neutral-border-highlight);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-neutral-border-normal);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-heavy);
@@ -389,7 +384,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -410,55 +405,50 @@
   /**
     * Semantic theme colors
     */
-  --wa-color-brand-spot: var(--wa-color-primary-80);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-50);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-20);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-60);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-10);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-80);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-70);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-60);
+  --wa-color-brand-border-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-loud: var(--wa-color-primary-10);
+  --wa-color-brand-on-normal: var(--wa-color-primary-80);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-70);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-50);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-60);
-  --wa-color-success-border-highlight: var(--wa-color-green-70);
-  --wa-color-success-text-on-spot: var(--wa-color-green-10);
-  --wa-color-success-text-on-fill: var(--wa-color-green-80);
-  --wa-color-success-text-on-surface: var(--wa-color-green-70);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-60);
+  --wa-color-success-border-normal: var(--wa-color-green-70);
+  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-60);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-60);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
 
-  --wa-color-danger-spot: var(--wa-color-red-80);
-  --wa-color-danger-spot-darker: var(--wa-color-red-50);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-60);
-  --wa-color-danger-border-highlight: var(--wa-color-red-70);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-10);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-fill-loud: var(--wa-color-red-80);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-60);
+  --wa-color-danger-border-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-80);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-50);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-60);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-10);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-60);
+  --wa-color-neutral-border-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-loud: var(--wa-color-base-10);
+  --wa-color-neutral-on-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
 }
 
 /* #region Custom Styles */
@@ -468,14 +458,14 @@
   }
 
   .hero {
-    color: var(--wa-color-brand-text-on-fill);
+    color: var(--wa-color-brand-on-normal);
     text-align: center;
   }
 
   .hero .title {
     background:
       url('/assets/images/themer/fa/hero.png') center center / cover no-repeat,
-      var(--wa-color-brand-fill-highlight);
+      var(--wa-color-brand-fill-normal);
     padding: calc(var(--wa-space-3xl) * 5) calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 4);
     margin: calc(var(--wa-space-3xl) * -1) 0;
     border-radius: var(--wa-panel-corners);
@@ -497,8 +487,8 @@
   }
 
   .message-composer wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-highlight);
-    color: var(--wa-color-neutral-text-on-fill);
+    background-color: var(--wa-color-neutral-fill-normal);
+    color: var(--wa-color-neutral-on-normal);
 
     & wa-icon-button {
       color: var(--wa-color-text-normal);
@@ -514,19 +504,19 @@
     }
 
     &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-highlight);
+      --border-color: var(--wa-color-brand-border-normal);
     }
     &[variant='success'] {
-      --border-color: var(--wa-color-success-border-highlight);
+      --border-color: var(--wa-color-success-border-normal);
     }
     &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-highlight);
+      --border-color: var(--wa-color-warning-border-normal);
     }
     &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-highlight);
+      --border-color: var(--wa-color-danger-border-normal);
     }
     &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-highlight);
+      --border-color: var(--wa-color-neutral-border-normal);
     }
   }
 
@@ -553,19 +543,19 @@
 
     .wa-theme-fa-dark & {
       &[variant='brand'] {
-        --border-color: var(--wa-color-brand-spot-darker);
+        --border-color: var(--wa-color-brand-border-loud);
       }
       &[variant='success'] {
-        --border-color: var(--wa-color-success-spot-darker);
+        --border-color: var(--wa-color-success-border-loud);
       }
       &[variant='warning'] {
-        --border-color: var(--wa-color-warning-spot-darker);
+        --border-color: var(--wa-color-warning-border-loud);
       }
       &[variant='danger'] {
-        --border-color: var(--wa-color-danger-spot-darker);
+        --border-color: var(--wa-color-danger-border-loud);
       }
       &[variant='neutral'] {
-        --border-color: var(--wa-color-neutral-spot-darker);
+        --border-color: var(--wa-color-neutral-border-loud);
       }
     }
   }
@@ -583,8 +573,8 @@
   }
 
   wa-carousel {
-    --pagination-color-activated: var(--wa-color-brand-spot);
-    --pagination-color-resting: var(--wa-color-neutral-spot);
+    --pagination-color-activated: var(--wa-color-brand-fill-loud);
+    --pagination-color-resting: var(--wa-color-neutral-fill-loud);
   }
 
   wa-checkbox,
@@ -596,7 +586,7 @@
     --wa-transition-normal: 0ms;
     --wa-transition-fast: 0ms;
     --wa-transition-faster: 0ms;
-    --background-active: var(--wa-color-neutral-text-on-surface);
+    --background-active: var(--wa-color-neutral-on-quiet);
     --border-color-active: var(--background-active);
     --box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
       var(--border-color);
@@ -604,7 +594,7 @@
 
     &:active,
     &[checked] {
-      --background: var(--wa-color-neutral-text-on-surface);
+      --background: var(--wa-color-neutral-on-quiet);
       --box-shadow: none;
       --label-color: var(--wa-color-surface-default);
       transform: translateX(var(--wa-shadow-offset-x-level-1)) translateY(var(--wa-shadow-offset-y-level-1));
@@ -615,7 +605,7 @@
     --background: transparent;
     --border-color: var(--wa-form-controls-activated-color);
     --thumb-color: var(--border-color);
-    --thumb-color-checked: var(--wa-color-neutral-fill-subtle);
+    --thumb-color-checked: var(--wa-color-neutral-fill-quiet);
     --thumb-size: 1em;
     --height: 1.5em;
     --width: calc(var(--thumb-size) * 2.5);
diff --git a/src/themes/forms.css b/src/themes/forms.css
index 682eda43f..ce8e78f63 100644
--- a/src/themes/forms.css
+++ b/src/themes/forms.css
@@ -1,23 +1,23 @@
 .wa-invalid {
-  --wa-form-controls-resting-color: var(--wa-color-danger-border-highlight);
-  --wa-form-controls-activated-color: var(--wa-color-danger-spot);
-  --wa-form-controls-value-color: var(--wa-color-danger-text-on-surface);
+  --wa-form-controls-resting-color: var(--wa-color-danger-border-normal);
+  --wa-form-controls-activated-color: var(--wa-color-danger-fill-loud);
+  --wa-form-controls-value-color: var(--wa-color-danger-on-quiet);
 
   /* Focus ring */
-  --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-spot);
+  --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-fill-loud);
 
   /* Help text */
-  --wa-color-text-quiet: var(--wa-color-danger-text-on-fill);
+  --wa-color-text-quiet: var(--wa-color-danger-on-normal);
 }
 
 .wa-valid {
-  --wa-form-controls-resting-color: var(--wa-color-success-border-highlight);
-  --wa-form-controls-activated-color: var(--wa-color-success-spot);
-  --wa-form-controls-value-color: var(--wa-color-success-text-on-surface);
+  --wa-form-controls-resting-color: var(--wa-color-success-border-normal);
+  --wa-form-controls-activated-color: var(--wa-color-success-fill-loud);
+  --wa-form-controls-value-color: var(--wa-color-success-on-quiet);
 
   /* Focus ring */
-  --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-spot);
+  --wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-fill-loud);
 
   /* Help text */
-  --wa-color-text-quiet: var(--wa-color-success-text-on-fill);
+  --wa-color-text-quiet: var(--wa-color-success-on-normal);
 }
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index b9daf83af..d77f05418 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -113,7 +113,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-10);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -153,55 +153,50 @@
    * Muted colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -306,7 +301,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -332,8 +327,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -383,7 +378,7 @@
 
   --wa-color-text-normal: var(--wa-color-base-95);
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -400,55 +395,50 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-60);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-30);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-70);
-  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-70);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-60);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 
   .hero-background::after {
     height: 50rem;
@@ -466,29 +456,29 @@
 @container preview (min-width: 0) {
   wa-button[outline] {
     &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-highlight);
+      --border-color: var(--wa-color-brand-border-normal);
     }
 
     &[variant='success'] {
-      --border-color: var(--wa-color-success-border-highlight);
+      --border-color: var(--wa-color-success-border-normal);
     }
 
     &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-highlight);
+      --border-color: var(--wa-color-neutral-border-normal);
     }
 
     &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-highlight);
+      --border-color: var(--wa-color-warning-border-normal);
     }
 
     &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-highlight);
+      --border-color: var(--wa-color-danger-border-normal);
     }
   }
 
   wa-rating {
     --symbol-size: var(--wa-font-size-m);
-    --symbol-color-active: var(--wa-color-neutral-text-on-surface);
+    --symbol-color-active: var(--wa-color-neutral-on-quiet);
   }
 
   .hero-background {
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index e2b99e411..fc78dc4fc 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -153,55 +153,50 @@
    * Muted colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
-  --wa-color-brand-spot: var(--wa-color-green-50);
-  --wa-color-brand-spot-darker: var(--wa-color-green-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-green-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-green-90);
-  --wa-color-brand-border-subtle: var(--wa-color-green-90);
-  --wa-color-brand-border-highlight: var(--wa-color-green-80);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-green-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-green-50);
+  --wa-color-brand-fill-loud: var(--wa-color-green-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
+  --wa-color-brand-fill-normal: var(--wa-color-green-90);
+  --wa-color-brand-border-quiet: var(--wa-color-green-90);
+  --wa-color-brand-border-normal: var(--wa-color-green-80);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-green-40);
+  --wa-color-brand-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -306,7 +301,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -332,8 +327,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -400,77 +395,72 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-green-50);
-  --wa-color-brand-spot-darker: var(--wa-color-green-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-green-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-green-20);
-  --wa-color-brand-border-subtle: var(--wa-color-green-20);
-  --wa-color-brand-border-highlight: var(--wa-color-green-30);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-green-70);
-  --wa-color-brand-text-on-surface: var(--wa-color-green-60);
+  --wa-color-brand-fill-loud: var(--wa-color-green-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
+  --wa-color-brand-fill-normal: var(--wa-color-green-20);
+  --wa-color-brand-border-quiet: var(--wa-color-green-20);
+  --wa-color-brand-border-normal: var(--wa-color-green-30);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-green-70);
+  --wa-color-brand-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-70);
-  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-70);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-60);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 }
 
 /* #region Custom styles */
 wa-button[outline] {
   &[variant='brand'] {
-    --border-color: var(--wa-color-brand-border-highlight);
+    --border-color: var(--wa-color-brand-border-normal);
   }
 
   &[variant='success'] {
-    --border-color: var(--wa-color-success-border-highlight);
+    --border-color: var(--wa-color-success-border-normal);
   }
 
   &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-border-highlight);
+    --border-color: var(--wa-color-neutral-border-normal);
   }
 
   &[variant='warning'] {
-    --border-color: var(--wa-color-warning-border-highlight);
+    --border-color: var(--wa-color-warning-border-normal);
   }
 
   &[variant='danger'] {
-    --border-color: var(--wa-color-danger-border-highlight);
+    --border-color: var(--wa-color-danger-border-normal);
   }
 }
 /* #endregion */
diff --git a/src/themes/migration.css b/src/themes/migration.css
index 9fb89fee9..e57b82b47 100644
--- a/src/themes/migration.css
+++ b/src/themes/migration.css
@@ -113,7 +113,7 @@
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-base-10);
   --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -154,55 +154,50 @@
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
 
-  --wa-color-brand-spot: var(--wa-color-primary-40);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-30);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-90);
-  --wa-color-brand-border-subtle: color-mix(in oklab, var(--wa-color-primary-80), transparent);
-  --wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-70), transparent);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-40);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-80), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-70), transparent);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-40);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: color-mix(in oklab, var(--wa-color-green-80), transparent);
-  --wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-70), transparent);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70), transparent);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
-  --wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: color-mix(in oklab, var(--wa-color-red-80), transparent);
-  --wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-70), transparent);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70), transparent);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-10);
-  --wa-color-neutral-spot-darker: black;
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
-  --wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
-  --wa-color-neutral-text-on-spot: white;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
+  --wa-color-neutral-on-loud: white;
+  --wa-color-neutral-on-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-40);
 
   /**
    * Typography
@@ -335,8 +330,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-quiet);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
@@ -386,7 +381,7 @@
 
   --wa-color-text-normal: white;
   --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+  --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
   --wa-color-selection-background: var(--wa-color-primary-40);
   --wa-color-selection-text: white;
@@ -403,55 +398,50 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-20);
-  --wa-color-brand-border-subtle: color-mix(in oklab, var(--wa-color-primary-20), transparent);
-  --wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-30), transparent);
-  --wa-color-brand-text-on-spot: white;
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-60);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-20), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-30), transparent);
+  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: color-mix(in oklab, var(--wa-color-green-20), transparent);
-  --wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-30), transparent);
-  --wa-color-success-text-on-spot: white;
-  --wa-color-success-text-on-fill: var(--wa-color-green-70);
-  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30), transparent);
+  --wa-color-success-on-loud: white;
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
-  --wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
-  --wa-color-warning-text-on-spot: white;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
+  --wa-color-warning-on-loud: white;
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: color-mix(in oklab, var(--wa-color-red-20), transparent);
-  --wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-30), transparent);
-  --wa-color-danger-text-on-spot: white;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-70);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30), transparent);
+  --wa-color-danger-on-loud: white;
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
 
-  --wa-color-neutral-spot: white;
-  --wa-color-neutral-spot-darker: var(--wa-color-base-60);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-20), transparent);
-  --wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-30), transparent);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-10);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-60);
+  --wa-color-neutral-fill-loud: white;
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-20), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-30), transparent);
+  --wa-color-neutral-on-loud: var(--wa-color-base-10);
+  --wa-color-neutral-on-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 }
 
 /* #region Custom Styles */
@@ -469,7 +459,7 @@
 
   .hero {
     --hero-background-color: var(--wa-color-surface-default);
-    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), transparent 30%);
+    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
     background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
       radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
       radial-gradient(
@@ -533,11 +523,11 @@
   }
 
   pre.codeblock {
-    background-color: var(--wa-color-neutral-fill-highlight);
+    background-color: var(--wa-color-neutral-fill-normal);
   }
 
   wa-avatar {
-    --wa-color-neutral-spot: var(--wa-color-base-50);
+    --wa-color-neutral-fill-loud: var(--wa-color-base-50);
   }
 
   a,
@@ -550,24 +540,24 @@
     --border-color: transparent;
 
     &[variant='brand'] {
-      --background: var(--wa-color-brand-fill-highlight);
-      --content-color: var(--wa-color-brand-text-on-fill);
+      --background: var(--wa-color-brand-fill-normal);
+      --content-color: var(--wa-color-brand-on-normal);
     }
     &[variant='success'] {
-      --background: var(--wa-color-success-fill-highlight);
-      --content-color: var(--wa-color-success-text-on-fill);
+      --background: var(--wa-color-success-fill-normal);
+      --content-color: var(--wa-color-success-on-normal);
     }
     &[variant='warning'] {
-      --background: var(--wa-color-warning-fill-highlight);
-      --content-color: var(--wa-color-warning-text-on-fill);
+      --background: var(--wa-color-warning-fill-normal);
+      --content-color: var(--wa-color-warning-on-normal);
     }
     &[variant='danger'] {
-      --background: var(--wa-color-danger-fill-highlight);
-      --content-color: var(--wa-color-danger-text-on-fill);
+      --background: var(--wa-color-danger-fill-normal);
+      --content-color: var(--wa-color-danger-on-normal);
     }
     &[variant='neutral'] {
-      --background: var(--wa-color-neutral-fill-highlight);
-      --content-color: var(--wa-color-neutral-text-on-fill);
+      --background: var(--wa-color-neutral-fill-normal);
+      --content-color: var(--wa-color-neutral-on-normal);
     }
   }
 
@@ -585,7 +575,7 @@
   }
 
   wa-radio-button:not([checked]) {
-    --border-color: var(--wa-color-neutral-border-highlight);
+    --border-color: var(--wa-color-neutral-border-normal);
     --label-color: var(--wa-color-text-normal);
   }
 
diff --git a/src/themes/playful.css b/src/themes/playful.css
index 3613fdc29..84f294d80 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -166,55 +166,50 @@
    * Muted colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-70);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-95);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-30);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-80);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-border-normal: var(--wa-color-primary-70);
+  --wa-color-brand-on-loud: var(--wa-color-primary-95);
+  --wa-color-brand-on-normal: var(--wa-color-primary-30);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-80);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-70);
-  --wa-color-success-text-on-spot: var(--wa-color-green-95);
-  --wa-color-success-text-on-fill: var(--wa-color-green-30);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-80);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-70);
+  --wa-color-success-on-loud: var(--wa-color-green-95);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-70);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-95);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-30);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-95);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-80);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-70);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-95);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-30);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-loud: var(--wa-color-red-95);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-95);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-30);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-on-loud: var(--wa-color-base-95);
+  --wa-color-neutral-on-normal: var(--wa-color-base-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -321,7 +316,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -347,8 +342,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-pill);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -423,55 +418,50 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-60);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-20);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-40);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-30);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-95);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-95);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-70);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-20);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-40);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-30);
+  --wa-color-brand-border-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-loud: var(--wa-color-primary-95);
+  --wa-color-brand-on-normal: var(--wa-color-primary-95);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-70);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-60);
-  --wa-color-success-fill-subtle: var(--wa-color-green-20);
-  --wa-color-success-fill-highlight: var(--wa-color-green-40);
-  --wa-color-success-border-subtle: var(--wa-color-green-30);
-  --wa-color-success-border-highlight: var(--wa-color-green-40);
-  --wa-color-success-text-on-spot: var(--wa-color-green-20);
-  --wa-color-success-text-on-fill: var(--wa-color-green-95);
-  --wa-color-success-text-on-surface: var(--wa-color-green-70);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-40);
+  --wa-color-success-border-quiet: var(--wa-color-green-30);
+  --wa-color-success-border-normal: var(--wa-color-green-40);
+  --wa-color-success-on-loud: var(--wa-color-green-20);
+  --wa-color-success-on-normal: var(--wa-color-green-95);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-60);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-40);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-30);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-20);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-95);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
 
-  --wa-color-danger-spot: var(--wa-color-red-60);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-20);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-40);
-  --wa-color-danger-border-subtle: var(--wa-color-red-30);
-  --wa-color-danger-border-highlight: var(--wa-color-red-40);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-20);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-95);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-fill-loud: var(--wa-color-red-60);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+  --wa-color-danger-fill-normal: var(--wa-color-red-40);
+  --wa-color-danger-border-quiet: var(--wa-color-red-30);
+  --wa-color-danger-border-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: var(--wa-color-red-20);
+  --wa-color-danger-on-normal: var(--wa-color-red-95);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-40);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-30);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-20);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-95);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-30);
+  --wa-color-neutral-border-normal: var(--wa-color-base-40);
+  --wa-color-neutral-on-loud: var(--wa-color-base-20);
+  --wa-color-neutral-on-normal: var(--wa-color-base-95);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
 }
 
 /* #region Custom Styles */
@@ -669,8 +659,8 @@
   wa-button[outline] {
     --box-shadow: none;
     --border-width: var(--wa-form-controls-border-width);
-    --label-color: var(--wa-color-neutral-text-on-fill);
-    --label-color-hover: var(--wa-color-neutral-text-on-spot);
+    --label-color: var(--wa-color-neutral-on-normal);
+    --label-color-hover: var(--wa-color-neutral-on-loud);
 
     &::part(label) {
       text-shadow: none;
@@ -701,19 +691,19 @@
     font-weight: var(--wa-font-weight-heavy);
 
     &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-subtle);
+      --border-color: var(--wa-color-brand-border-quiet);
     }
     &[variant='success'] {
-      --border-color: var(--wa-color-success-border-subtle);
+      --border-color: var(--wa-color-success-border-quiet);
     }
     &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-subtle);
+      --border-color: var(--wa-color-warning-border-quiet);
     }
     &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-subtle);
+      --border-color: var(--wa-color-danger-border-quiet);
     }
     &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-subtle);
+      --border-color: var(--wa-color-neutral-border-quiet);
     }
   }
 
@@ -744,7 +734,7 @@
   }
 
   .project-header {
-    color: var(--wa-color-success-text-on-fill);
+    color: var(--wa-color-success-on-normal);
   }
 
   .hero-background {
@@ -777,7 +767,7 @@
   }
 
   .hero .hero-title {
-    color: var(--wa-color-success-text-on-fill);
+    color: var(--wa-color-success-on-normal);
     font-size: var(--wa-font-size-4xl);
   }
 
@@ -817,13 +807,13 @@
   }
 
   .message-composer wa-card::part(header) {
-    --wa-color-neutral-border-subtle: var(--wa-color-base-70);
+    --wa-color-neutral-border-quiet: var(--wa-color-base-70);
     border-width: 0;
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
   }
 
   &:not(.wa-theme-premium-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-subtle: var(--wa-color-base-90);
+    --wa-color-neutral-fill-quiet: var(--wa-color-base-90);
   }
 
   .message-composer wa-icon-button {
@@ -942,7 +932,7 @@
 
     & wa-button[outline] {
       --box-shadow: none;
-      --border-color: var(--wa-color-neutral-border-highlight);
+      --border-color: var(--wa-color-neutral-border-normal);
     }
 
     & wa-card {
@@ -994,7 +984,7 @@
     }
 
     & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-subtle: var(--wa-color-base-40);
+      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
     }
 
     & .support-table th {
diff --git a/src/themes/premium.css b/src/themes/premium.css
index d345d0a2a..af68fbf03 100644
--- a/src/themes/premium.css
+++ b/src/themes/premium.css
@@ -155,55 +155,50 @@
    * Muted colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
   */
-  --wa-color-brand-spot: var(--wa-color-primary-50);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-40);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-90);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-80);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-80);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-50);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-95);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-20);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-50);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-90);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-80);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-80);
+  --wa-color-brand-border-normal: var(--wa-color-primary-50);
+  --wa-color-brand-on-loud: var(--wa-color-primary-95);
+  --wa-color-brand-on-normal: var(--wa-color-primary-20);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-spot: var(--wa-color-green-50);
-  --wa-color-success-spot-darker: var(--wa-color-green-40);
-  --wa-color-success-fill-subtle: var(--wa-color-green-90);
-  --wa-color-success-fill-highlight: var(--wa-color-green-80);
-  --wa-color-success-border-subtle: var(--wa-color-green-80);
-  --wa-color-success-border-highlight: var(--wa-color-green-50);
-  --wa-color-success-text-on-spot: var(--wa-color-green-95);
-  --wa-color-success-text-on-fill: var(--wa-color-green-20);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-fill-quiet: var(--wa-color-green-90);
+  --wa-color-success-fill-normal: var(--wa-color-green-80);
+  --wa-color-success-border-quiet: var(--wa-color-green-80);
+  --wa-color-success-border-normal: var(--wa-color-green-50);
+  --wa-color-success-on-loud: var(--wa-color-green-95);
+  --wa-color-success-on-normal: var(--wa-color-green-20);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-50);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-80);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-80);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-50);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-95);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-20);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-95);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-50);
-  --wa-color-danger-spot-darker: var(--wa-color-red-40);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-90);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-80);
-  --wa-color-danger-border-subtle: var(--wa-color-red-80);
-  --wa-color-danger-border-highlight: var(--wa-color-red-50);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-95);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-20);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-90);
+  --wa-color-danger-fill-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-quiet: var(--wa-color-red-80);
+  --wa-color-danger-border-normal: var(--wa-color-red-50);
+  --wa-color-danger-on-loud: var(--wa-color-red-95);
+  --wa-color-danger-on-normal: var(--wa-color-red-20);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-50);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-40);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-80);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-80);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-50);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-95);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-20);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-80);
+  --wa-color-neutral-border-normal: var(--wa-color-base-50);
+  --wa-color-neutral-on-loud: var(--wa-color-base-95);
+  --wa-color-neutral-on-normal: var(--wa-color-base-20);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -309,7 +304,7 @@
   /**
    * Links
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
   --wa-link-decoration-hover: underline;
 
   /**
@@ -335,8 +330,8 @@
 
   --wa-form-controls-corners: var(--wa-corners-s);
 
-  --wa-form-controls-activated-color: var(--wa-color-brand-spot);
-  --wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
+  --wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
 
   --wa-form-controls-label-color: var(--wa-color-text-normal);
   --wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -411,55 +406,50 @@
   /**
    * Semantic theme colors
    */
-  --wa-color-brand-spot: var(--wa-color-primary-80);
-  --wa-color-brand-spot-darker: var(--wa-color-primary-60);
-  --wa-color-brand-fill-subtle: var(--wa-color-primary-30);
-  --wa-color-brand-fill-highlight: var(--wa-color-primary-40);
-  --wa-color-brand-border-subtle: var(--wa-color-primary-30);
-  --wa-color-brand-border-highlight: var(--wa-color-primary-40);
-  --wa-color-brand-text-on-spot: var(--wa-color-primary-20);
-  --wa-color-brand-text-on-fill: var(--wa-color-primary-90);
-  --wa-color-brand-text-on-surface: var(--wa-color-primary-70);
+  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-primary-30);
+  --wa-color-brand-fill-normal: var(--wa-color-primary-40);
+  --wa-color-brand-border-quiet: var(--wa-color-primary-30);
+  --wa-color-brand-border-normal: var(--wa-color-primary-40);
+  --wa-color-brand-on-loud: var(--wa-color-primary-20);
+  --wa-color-brand-on-normal: var(--wa-color-primary-90);
+  --wa-color-brand-on-quiet: var(--wa-color-primary-70);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-60);
-  --wa-color-success-fill-subtle: var(--wa-color-green-30);
-  --wa-color-success-fill-highlight: var(--wa-color-green-40);
-  --wa-color-success-border-subtle: var(--wa-color-green-30);
-  --wa-color-success-border-highlight: var(--wa-color-green-40);
-  --wa-color-success-text-on-spot: var(--wa-color-green-20);
-  --wa-color-success-text-on-fill: var(--wa-color-green-90);
-  --wa-color-success-text-on-surface: var(--wa-color-green-70);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-green-30);
+  --wa-color-success-fill-normal: var(--wa-color-green-40);
+  --wa-color-success-border-quiet: var(--wa-color-green-30);
+  --wa-color-success-border-normal: var(--wa-color-green-40);
+  --wa-color-success-on-loud: var(--wa-color-green-20);
+  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-60);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-40);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-30);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-spot: var(--wa-color-yellow-20);
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
 
-  --wa-color-danger-spot: var(--wa-color-red-70);
-  --wa-color-danger-spot-darker: var(--wa-color-red-50);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-30);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-40);
-  --wa-color-danger-border-subtle: var(--wa-color-red-30);
-  --wa-color-danger-border-highlight: var(--wa-color-red-40);
-  --wa-color-danger-text-on-spot: var(--wa-color-red-20);
-  --wa-color-danger-text-on-fill: var(--wa-color-red-90);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-red-30);
+  --wa-color-danger-fill-normal: var(--wa-color-red-40);
+  --wa-color-danger-border-quiet: var(--wa-color-red-30);
+  --wa-color-danger-border-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: var(--wa-color-red-20);
+  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-40);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-30);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-30);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-30);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-70);
-  --wa-color-neutral-text-on-spot: var(--wa-color-base-95);
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-90);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-base-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-base-30);
+  --wa-color-neutral-border-normal: var(--wa-color-base-70);
+  --wa-color-neutral-on-loud: var(--wa-color-base-95);
+  --wa-color-neutral-on-normal: var(--wa-color-base-90);
+  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
 }
 
 /* #region Custom Styles */
@@ -500,9 +490,9 @@
 
   wa-switch {
     --background: transparent;
-    --border-color: var(--wa-color-neutral-border-highlight);
+    --border-color: var(--wa-color-neutral-border-normal);
     --thumb-color: var(--border-color);
-    --thumb-color-checked: var(--wa-color-brand-fill-subtle);
+    --thumb-color-checked: var(--wa-color-brand-fill-quiet);
     --thumb-size: 1em;
     --height: 1.5em;
     --width: calc(var(--thumb-size) * 2.5);
@@ -527,8 +517,8 @@
   }
 
   wa-carousel {
-    --pagination-color-activated: var(--wa-color-brand-spot);
-    --pagination-color-resting: var(--wa-color-neutral-fill-highlight);
+    --pagination-color-activated: var(--wa-color-brand-fill-loud);
+    --pagination-color-resting: var(--wa-color-neutral-fill-normal);
   }
 
   wa-badge,
@@ -581,12 +571,12 @@
   }
 
   .project-header {
-    background-color: var(--wa-color-warning-fill-highlight);
+    background-color: var(--wa-color-warning-fill-normal);
   }
 
   .strata.hero {
     height: 60rem;
-    background: var(--wa-color-warning-fill-highlight) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
+    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
     background-size: cover;
     padding-top: var(--wa-space-2xl);
     padding-left: var(--wa-space-s);
@@ -594,7 +584,7 @@
   }
 
   .hero .hero-title {
-    color: var(--wa-color-warning-text-on-fill);
+    color: var(--wa-color-warning-on-normal);
     font-style: italic;
   }
 
@@ -646,11 +636,11 @@
 
   .message-composer wa-card::part(header) {
     border-width: 0;
-    background-color: var(--wa-color-neutral-fill-subtle);
+    background-color: var(--wa-color-neutral-fill-quiet);
   }
 
   &:not(.wa-theme-premium-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
+    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
   }
 
   .message-composer wa-card::part(footer) {
@@ -664,7 +654,7 @@
     justify-content: center;
   }
   .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-highlight);
+    background-color: var(--wa-color-neutral-fill-normal);
     color: var(--wa-color-text-normal);
   }
 
@@ -701,7 +691,7 @@
 
   .wa-theme-premium-dark {
     & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-subtle: var(--wa-color-base-40);
+      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
     }
 
     & .preview-container pre,
@@ -737,7 +727,7 @@
 /* responsive */
 @container preview (min-width: 1040px) {
   .strata.hero {
-    background: var(--wa-color-warning-fill-highlight) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
+    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
     padding-top: 15rem;
     padding-left: 50%;
   }