diff --git a/src/data/colors/blue-cool.json b/src/data/colors/blue-cool.json
index faa0517f56..8f961df202 100644
--- a/src/data/colors/blue-cool.json
+++ b/src/data/colors/blue-cool.json
@@ -8,9 +8,9 @@
       "value": [
         { "name": "5", "value": "#e7f2f5" },
         { "name": "10", "value": "#dae9ee" },
-        { "name": "20", "value": "#b8cdd5" },
-        { "name": "30", "value": "#92b1bf" },
-        { "name": "40", "value": "#6b96a8" },
+        { "name": "20", "value": "#adcfdc" },
+        { "name": "30", "value": "#82b4c9" },
+        { "name": "40", "value": "#6499af" },
         { "name": "50", "value": "#3a7d95" },
         { "name": "60", "value": "#2e6276" },
         { "name": "70", "value": "#224a58" },
@@ -19,15 +19,15 @@
         {
           "name": "vivid",
           "value": [
-            { "name": "5", "value": false },
+            { "name": "5", "value": "#e1f3f8" },
             { "name": "10", "value": false },
-            { "name": "20", "value": "#a9d0df" },
-            { "name": "30", "value": "#83b5c9" },
-            { "name": "40", "value": "#529ab7" },
+            { "name": "20", "value": "#97d4ea" },
+            { "name": "30", "value": "#59b9de" },
+            { "name": "40", "value": "#28a0cb" },
             { "name": "50", "value": "#0d7ea2" },
             { "name": "60", "value": "#07648d" },
             { "name": "70", "value": "#074b69" },
-            { "name": "80", "value": false },
+            { "name": "80", "value": "#002d3f" },
             { "name": "90", "value": false }
           ]
         }
diff --git a/src/data/colors/blue-warm.json b/src/data/colors/blue-warm.json
index e0c24db42d..ee5d54c59b 100644
--- a/src/data/colors/blue-warm.json
+++ b/src/data/colors/blue-warm.json
@@ -7,11 +7,11 @@
       "name": "blue-warm",
       "value": [
         { "name": "5", "value": "#ecf1f7" },
-        { "name": "10", "value": "#dfe7f5" },
-        { "name": "20", "value": "#bccae6" },
-        { "name": "30", "value": "#93afda" },
-        { "name": "40", "value": "#6f92ca" },
-        { "name": "50", "value": "#3e76c2" },
+        { "name": "10", "value": "#e1e7f1" },
+        { "name": "20", "value": "#bbcae4" },
+        { "name": "30", "value": "#98afd2" },
+        { "name": "40", "value": "#7292c7" },
+        { "name": "50", "value": "#4a77b4" },
         { "name": "60", "value": "#345d96" },
         { "name": "70", "value": "#2f4668" },
         { "name": "80", "value": "#252f3e" },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/blue.json b/src/data/colors/blue.json
index dfa6894048..f61b09c322 100644
--- a/src/data/colors/blue.json
+++ b/src/data/colors/blue.json
@@ -11,7 +11,7 @@
         { "name": "20", "value": "#aacdec" },
         { "name": "30", "value": "#73b3e7" },
         { "name": "40", "value": "#4f97d1" },
-        { "name": "50", "value": "#357ab2" },
+        { "name": "50", "value": "#2378c3" },
         { "name": "60", "value": "#2c608a" },
         { "name": "70", "value": "#274863" },
         { "name": "80", "value": "#1f303e" },
@@ -23,7 +23,7 @@
             { "name": "10", "value": false },
             { "name": "20", "value": false },
             { "name": "30", "value": "#58b4ff" },
-            { "name": "40", "value": "#0096f4" },
+            { "name": "40", "value": "#2491ff" },
             { "name": "50", "value": "#0076d6" },
             { "name": "60", "value": "#005ea2" },
             { "name": "70", "value": "#0b4778" },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/gold.json b/src/data/colors/gold.json
index a05f5ecb49..49776070e7 100644
--- a/src/data/colors/gold.json
+++ b/src/data/colors/gold.json
@@ -20,7 +20,7 @@
           "name": "vivid",
           "value": [
             { "name": "5", "value": "#fef0c8" },
-            { "name": "10", "value": "#ffe3a3" },
+            { "name": "10", "value": "#ffe396" },
             { "name": "20", "value": "#ffbe2e" },
             { "name": "30", "value": "#e5a000" },
             { "name": "40", "value": "#c2850c" },
diff --git a/src/data/colors/gray-cool.json b/src/data/colors/gray-cool.json
index 706ca73738..48ad15d3bd 100644
--- a/src/data/colors/gray-cool.json
+++ b/src/data/colors/gray-cool.json
@@ -11,13 +11,13 @@
         { "name": "3", "value": "#f5f6f7" },
         { "name": "4", "value": "#f1f3f6" },
         { "name": "5", "value": "#edeff0" },
-        { "name": "10", "value": "#dbdee1" },
+        { "name": "10", "value": "#dcdee0" },
         { "name": "20", "value": "#c6cace" },
         { "name": "30", "value": "#a9aeb1" },
         { "name": "40", "value": "#8d9297" },
         { "name": "50", "value": "#71767a" },
-        { "name": "60", "value": "#585c62" },
-        { "name": "70", "value": "#424549" },
+        { "name": "60", "value": "#565c65" },
+        { "name": "70", "value": "#3d4551" },
         { "name": "80", "value": "#2d2e2f" },
         { "name": "90", "value": "#1c1d1f" }
       ]
diff --git a/src/data/colors/green-cool.json b/src/data/colors/green-cool.json
index 8ccca1dc8a..8d1228633f 100644
--- a/src/data/colors/green-cool.json
+++ b/src/data/colors/green-cool.json
@@ -6,25 +6,25 @@
     {
       "name": "green-cool",
       "value": [
-        { "name": "5", "value": "#e3f5e1" },
-        { "name": "10", "value": "#caf0c7" },
-        { "name": "20", "value": "#9cd899" },
-        { "name": "30", "value": "#77bd75" },
-        { "name": "40", "value": "#52a251" },
-        { "name": "50", "value": "#3e8520" },
-        { "name": "60", "value": "#466432" },
-        { "name": "70", "value": "#364b29" },
-        { "name": "80", "value": "#293024" },
-        { "name": "90", "value": "#141814" },
+        { "name": "5", "value": "#ecf3ec" },
+        { "name": "10", "value": "#dbebde" },
+        { "name": "20", "value": "#b4d0b9" },
+        { "name": "30", "value": "#86b98e" },
+        { "name": "40", "value": "#5e9f69" },
+        { "name": "50", "value": "#4d8055" },
+        { "name": "60", "value": "#446443" },
+        { "name": "70", "value": "#37493b" },
+        { "name": "80", "value": "#28312a" },
+        { "name": "90", "value": "#1a1f1a" },
         {
           "name": "vivid",
           "value": [
-            { "name": "5", "value": "#dcf8da" },
-            { "name": "10", "value": "#a4ef9f" },
-            { "name": "20", "value": "#6dd765" },
-            { "name": "30", "value": "#2cc821" },
-            { "name": "40", "value": "#0ca900" },
-            { "name": "50", "value": "#178800" },
+            { "name": "5", "value": "#e3f5e1" },
+            { "name": "10", "value": "#b7f5bd" },
+            { "name": "20", "value": "#70e17b" },
+            { "name": "30", "value": "#21c834" },
+            { "name": "40", "value": "#00a91c" },
+            { "name": "50", "value": "#008817" },
             { "name": "60", "value": false },
             { "name": "70", "value": false },
             { "name": "80", "value": false },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/mint.json b/src/data/colors/mint.json
index c95f67e67c..037f2f5fcf 100644
--- a/src/data/colors/mint.json
+++ b/src/data/colors/mint.json
@@ -6,10 +6,10 @@
     {
       "name": "mint",
       "value": [
-        { "name": "5", "value": "#c9fbeb" },
-        { "name": "10", "value": "#97f9d8" },
-        { "name": "20", "value": "#48e1af" },
-        { "name": "30", "value": "#48c198" },
+        { "name": "5", "value": "#dbf6ed" },
+        { "name": "10", "value": "#c7efe2" },
+        { "name": "20", "value": "#92d9bb" },
+        { "name": "30", "value": "#5abf95" },
         { "name": "40", "value": "#34a37e" },
         { "name": "50", "value": "#1f8462" },
         { "name": "60", "value": "#286846" },
@@ -19,7 +19,7 @@
         {
           "name": "vivid",
           "value": [
-            { "name": "5", "value": "#befde9" },
+            { "name": "5", "value": "#c9fbeb" },
             { "name": "10", "value": "#5dfdc8" },
             { "name": "20", "value": "#0ceda6" },
             { "name": "30", "value": "#04c585" },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/orange.json b/src/data/colors/orange.json
index fe387717d9..1ef9a339e6 100644
--- a/src/data/colors/orange.json
+++ b/src/data/colors/orange.json
@@ -6,21 +6,21 @@
     {
       "name": "orange",
       "value": [
-        { "name": "5", "value": "#fceee2" },
-        { "name": "10", "value": "#fce2c5" },
-        { "name": "20", "value": "#fabd87" },
-        { "name": "30", "value": "#eb9b59" },
-        { "name": "40", "value": "#db7725" },
-        { "name": "50", "value": "#a36830" },
-        { "name": "60", "value": "#73563e" },
+        { "name": "5", "value": "#f6efe9" },
+        { "name": "10", "value": "#f2e4d4" },
+        { "name": "20", "value": "#f3bf90" },
+        { "name": "30", "value": "#f09860" },
+        { "name": "40", "value": "#dd7533" },
+        { "name": "50", "value": "#a86437" },
+        { "name": "60", "value": "#775540" },
         { "name": "70", "value": "#524236" },
         { "name": "80", "value": "#332d27" },
         { "name": "90", "value": "#1b1614" },
         {
           "name": "vivid",
           "value": [
-            { "name": "5", "value": "#ffedda" },
-            { "name": "10", "value": false },
+            { "name": "5", "value": "#fef2e4" },
+            { "name": "10", "value": "#fce2c5" },
             { "name": "20", "value": "#ffbc78" },
             { "name": "30", "value": "#fa9441" },
             { "name": "40", "value": "#e66f0e" },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/red-cool.json b/src/data/colors/red-cool.json
index 085fb7f10f..7f14e51d61 100644
--- a/src/data/colors/red-cool.json
+++ b/src/data/colors/red-cool.json
@@ -20,7 +20,7 @@
           "name": "vivid",
           "value": [
             { "name": "5", "value": false },
-            { "name": "10", "value": false },
+            { "name": "10", "value": "#f8dfe2" },
             { "name": "20", "value": "#f8b9c5" },
             { "name": "30", "value": "#fd8ba0" },
             { "name": "40", "value": "#f45d79" },
diff --git a/src/data/colors/red.json b/src/data/colors/red.json
index 612a19837d..4c3e75ebb7 100644
--- a/src/data/colors/red.json
+++ b/src/data/colors/red.json
@@ -25,8 +25,8 @@
             { "name": "30", "value": "#ff8d7b" },
             { "name": "40", "value": "#fb5a47" },
             { "name": "50", "value": "#e52207" },
-            { "name": "60", "value": "#b51d09" },
-            { "name": "70", "value": "#8b1303" },
+            { "name": "60", "value": "#b50909" },
+            { "name": "70", "value": "#8b0a03" },
             { "name": "80", "value": "#5c1111" },
             { "name": "90", "value": false }
           ]
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/colors/yellow.json b/src/data/colors/yellow.json
index 2cdfccbccd..17680936fe 100644
--- a/src/data/colors/yellow.json
+++ b/src/data/colors/yellow.json
@@ -21,7 +21,7 @@
           "value": [
             { "name": "5", "value": false },
             { "name": "10", "value": "#fee685" },
-            { "name": "20", "value": "#ffcb00" },
+            { "name": "20", "value": "#face00" },
             { "name": "30", "value": false },
             { "name": "40", "value": false },
             { "name": "50", "value": false },
@@ -37,4 +37,4 @@
   "options": {
     "file": "system-color"
   }
-}
\ No newline at end of file
+}
diff --git a/src/stylesheets/core/system-tokens/_blue-cool.scss b/src/stylesheets/core/system-tokens/_blue-cool.scss
index b2f8218047..c1c696970f 100644
--- a/src/stylesheets/core/system-tokens/_blue-cool.scss
+++ b/src/stylesheets/core/system-tokens/_blue-cool.scss
@@ -2,24 +2,24 @@ $system-color-blue-cool: (
   'blue-cool': (
     5: #e7f2f5,
     10: #dae9ee,
-    20: #b8cdd5,
-    30: #92b1bf,
-    40: #6b96a8,
+    20: #adcfdc,
+    30: #82b4c9,
+    40: #6499af,
     50: #3a7d95,
     60: #2e6276,
     70: #224a58,
     80: #14333d,
     90: #0f191c,
     'vivid': (
-      5: false,
+      5: #e1f3f8,
       10: false,
-      20: #a9d0df,
-      30: #83b5c9,
-      40: #529ab7,
+      20: #97d4ea,
+      30: #59b9de,
+      40: #28a0cb,
       50: #0d7ea2,
       60: #07648d,
       70: #074b69,
-      80: false,
+      80: #002d3f,
       90: false,
     ),
   ),
diff --git a/src/stylesheets/core/system-tokens/_blue-warm.scss b/src/stylesheets/core/system-tokens/_blue-warm.scss
index 5d33ecb772..c25188f3b9 100644
--- a/src/stylesheets/core/system-tokens/_blue-warm.scss
+++ b/src/stylesheets/core/system-tokens/_blue-warm.scss
@@ -1,11 +1,11 @@
 $system-color-blue-warm: (
   'blue-warm': (
     5: #ecf1f7,
-    10: #dfe7f5,
-    20: #bccae6,
-    30: #93afda,
-    40: #6f92ca,
-    50: #3e76c2,
+    10: #e1e7f1,
+    20: #bbcae4,
+    30: #98afd2,
+    40: #7292c7,
+    50: #4a77b4,
     60: #345d96,
     70: #2f4668,
     80: #252f3e,
diff --git a/src/stylesheets/core/system-tokens/_blue.scss b/src/stylesheets/core/system-tokens/_blue.scss
index eecb5f22a2..55762cd5b2 100644
--- a/src/stylesheets/core/system-tokens/_blue.scss
+++ b/src/stylesheets/core/system-tokens/_blue.scss
@@ -5,7 +5,7 @@ $system-color-blue: (
     20: #aacdec,
     30: #73b3e7,
     40: #4f97d1,
-    50: #357ab2,
+    50: #2378c3,
     60: #2c608a,
     70: #274863,
     80: #1f303e,
@@ -15,7 +15,7 @@ $system-color-blue: (
       10: false,
       20: false,
       30: #58b4ff,
-      40: #0096f4,
+      40: #2491ff,
       50: #0076d6,
       60: #005ea2,
       70: #0b4778,
diff --git a/src/stylesheets/core/system-tokens/_gold.scss b/src/stylesheets/core/system-tokens/_gold.scss
index 38aa7537fe..12f16219fd 100644
--- a/src/stylesheets/core/system-tokens/_gold.scss
+++ b/src/stylesheets/core/system-tokens/_gold.scss
@@ -12,7 +12,7 @@ $system-color-gold: (
     90: #191714,
     'vivid': (
       5: #fef0c8,
-      10: #ffe3a3,
+      10: #ffe396,
       20: #ffbe2e,
       30: #e5a000,
       40: #c2850c,
diff --git a/src/stylesheets/core/system-tokens/_gray-cool.scss b/src/stylesheets/core/system-tokens/_gray-cool.scss
index a03eb45c3d..f3f829bf86 100644
--- a/src/stylesheets/core/system-tokens/_gray-cool.scss
+++ b/src/stylesheets/core/system-tokens/_gray-cool.scss
@@ -5,13 +5,13 @@ $system-color-gray-cool: (
     3: #f5f6f7,
     4: #f1f3f6,
     5: #edeff0,
-    10: #dbdee1,
+    10: #dcdee0,
     20: #c6cace,
     30: #a9aeb1,
     40: #8d9297,
     50: #71767a,
-    60: #585c62,
-    70: #424549,
+    60: #565c65,
+    70: #3d4551,
     80: #2d2e2f,
     90: #1c1d1f,
   ),
diff --git a/src/stylesheets/core/system-tokens/_green-cool.scss b/src/stylesheets/core/system-tokens/_green-cool.scss
index 648cef7d58..347e21a563 100644
--- a/src/stylesheets/core/system-tokens/_green-cool.scss
+++ b/src/stylesheets/core/system-tokens/_green-cool.scss
@@ -1,22 +1,22 @@
 $system-color-green-cool: (
   'green-cool': (
-    5: #e3f5e1,
-    10: #caf0c7,
-    20: #9cd899,
-    30: #77bd75,
-    40: #52a251,
-    50: #3e8520,
-    60: #466432,
-    70: #364b29,
-    80: #293024,
-    90: #141814,
+    5: #ecf3ec,
+    10: #dbebde,
+    20: #b4d0b9,
+    30: #86b98e,
+    40: #5e9f69,
+    50: #4d8055,
+    60: #446443,
+    70: #37493b,
+    80: #28312a,
+    90: #1a1f1a,
     'vivid': (
-      5: #dcf8da,
-      10: #a4ef9f,
-      20: #6dd765,
-      30: #2cc821,
-      40: #0ca900,
-      50: #178800,
+      5: #e3f5e1,
+      10: #b7f5bd,
+      20: #70e17b,
+      30: #21c834,
+      40: #00a91c,
+      50: #008817,
       60: false,
       70: false,
       80: false,
diff --git a/src/stylesheets/core/system-tokens/_mint.scss b/src/stylesheets/core/system-tokens/_mint.scss
index 9f4aa32a20..c2edf01ef1 100644
--- a/src/stylesheets/core/system-tokens/_mint.scss
+++ b/src/stylesheets/core/system-tokens/_mint.scss
@@ -1,9 +1,9 @@
 $system-color-mint: (
   'mint': (
-    5: #c9fbeb,
-    10: #97f9d8,
-    20: #48e1af,
-    30: #48c198,
+    5: #dbf6ed,
+    10: #c7efe2,
+    20: #92d9bb,
+    30: #5abf95,
     40: #34a37e,
     50: #1f8462,
     60: #286846,
@@ -11,7 +11,7 @@ $system-color-mint: (
     80: #193324,
     90: #0d1a12,
     'vivid': (
-      5: #befde9,
+      5: #c9fbeb,
       10: #5dfdc8,
       20: #0ceda6,
       30: #04c585,
diff --git a/src/stylesheets/core/system-tokens/_orange.scss b/src/stylesheets/core/system-tokens/_orange.scss
index ee9a3d61a6..024523ad50 100644
--- a/src/stylesheets/core/system-tokens/_orange.scss
+++ b/src/stylesheets/core/system-tokens/_orange.scss
@@ -1,18 +1,18 @@
 $system-color-orange: (
   'orange': (
-    5: #fceee2,
-    10: #fce2c5,
-    20: #fabd87,
-    30: #eb9b59,
-    40: #db7725,
-    50: #a36830,
-    60: #73563e,
+    5: #f6efe9,
+    10: #f2e4d4,
+    20: #f3bf90,
+    30: #f09860,
+    40: #dd7533,
+    50: #a86437,
+    60: #775540,
     70: #524236,
     80: #332d27,
     90: #1b1614,
     'vivid': (
-      5: #ffedda,
-      10: false,
+      5: #fef2e4,
+      10: #fce2c5,
       20: #ffbc78,
       30: #fa9441,
       40: #e66f0e,
diff --git a/src/stylesheets/core/system-tokens/_red-cool.scss b/src/stylesheets/core/system-tokens/_red-cool.scss
index 10b4798873..494399099d 100644
--- a/src/stylesheets/core/system-tokens/_red-cool.scss
+++ b/src/stylesheets/core/system-tokens/_red-cool.scss
@@ -12,7 +12,7 @@ $system-color-red-cool: (
     90: #1e1517,
     'vivid': (
       5: false,
-      10: false,
+      10: #f8dfe2,
       20: #f8b9c5,
       30: #fd8ba0,
       40: #f45d79,
diff --git a/src/stylesheets/core/system-tokens/_red.scss b/src/stylesheets/core/system-tokens/_red.scss
index dbcf803b3d..1aae5413e6 100644
--- a/src/stylesheets/core/system-tokens/_red.scss
+++ b/src/stylesheets/core/system-tokens/_red.scss
@@ -17,8 +17,8 @@ $system-color-red: (
       30: #ff8d7b,
       40: #fb5a47,
       50: #e52207,
-      60: #b51d09,
-      70: #8b1303,
+      60: #b50909,
+      70: #8b0a03,
       80: #5c1111,
       90: false,
     ),
diff --git a/src/stylesheets/core/system-tokens/_yellow.scss b/src/stylesheets/core/system-tokens/_yellow.scss
index 3993cf0c97..dde74abf7c 100644
--- a/src/stylesheets/core/system-tokens/_yellow.scss
+++ b/src/stylesheets/core/system-tokens/_yellow.scss
@@ -13,7 +13,7 @@ $system-color-yellow: (
     'vivid': (
       5: false,
       10: #fee685,
-      20: #ffcb00,
+      20: #face00,
       30: false,
       40: false,
       50: false,
diff --git a/src/stylesheets/settings/_settings-color.scss b/src/stylesheets/settings/_settings-color.scss
index 2da642b46f..778af6e98c 100644
--- a/src/stylesheets/settings/_settings-color.scss
+++ b/src/stylesheets/settings/_settings-color.scss
@@ -24,22 +24,22 @@ Theme palette colors
 */
 
 // Base colors
-$theme-color-base-family:           'gray' !default;
-$theme-color-base-lightest:         '#{$theme-color-base-family}-5' !default;
+$theme-color-base-family:           'gray-cool' !default;
+$theme-color-base-lightest:         'gray-5' !default;
 $theme-color-base-lighter:          'gray-cool-10' !default;
-$theme-color-base-light:            '#{$theme-color-base-family}-30' !default;
-$theme-color-base:                  '#{$theme-color-base-family}-50' !default;
+$theme-color-base-light:            'gray-cool-30' !default;
+$theme-color-base:                  'gray-cool-50' !default;
 $theme-color-base-dark:             'gray-cool-60' !default;
-$theme-color-base-darker:           'gray-cool-80' !default;
-$theme-color-base-darkest:          '#{$theme-color-base-family}-90' !default;
-$theme-color-base-ink:              '#{$theme-color-base-family}-90' !default;
+$theme-color-base-darker:           'gray-cool-70' !default;
+$theme-color-base-darkest:          'gray-90' !default;
+$theme-color-base-ink:              'gray-90' !default;
 
 // Primary colors
 $theme-color-primary-family:        'blue' !default;
 $theme-color-primary-lightest:      false !default;
-$theme-color-primary-lighter:       '#{$theme-color-primary-family}-10' !default;
-$theme-color-primary-light:         '#{$theme-color-primary-family}-30' !default;
-$theme-color-primary:               '#{$theme-color-primary-family}-60v' !default;
+$theme-color-primary-lighter:       'blue-10' !default;
+$theme-color-primary-light:         'blue-30' !default;
+$theme-color-primary:               'blue-60v' !default;
 $theme-color-primary-vivid:         'blue-warm-60v' !default;
 $theme-color-primary-dark:          'blue-warm-70v' !default;
 $theme-color-primary-darker:        'blue-warm-80v' !default;
@@ -48,31 +48,31 @@ $theme-color-primary-darkest:       false !default;
 // Secondary colors
 $theme-color-secondary-family:      'red' !default;
 $theme-color-secondary-lightest:    false !default;
-$theme-color-secondary-lighter:     '#{$theme-color-secondary-family}-10' !default;
-$theme-color-secondary-light:       '#{$theme-color-secondary-family}-30' !default;
-$theme-color-secondary:             '#{$theme-color-secondary-family}-50' !default;
-$theme-color-secondary-vivid:       '#{$theme-color-secondary-family}-50v' !default;
-$theme-color-secondary-dark:        '#{$theme-color-secondary-family}-60v' !default;
-$theme-color-secondary-darker:      '#{$theme-color-secondary-family}-70v' !default;
-$theme-color-secondary-darkest:     false;
+$theme-color-secondary-lighter:     'red-cool-10' !default;
+$theme-color-secondary-light:       'red-30' !default;
+$theme-color-secondary:             'red-50' !default;
+$theme-color-secondary-vivid:       'red-cool-50v' !default;
+$theme-color-secondary-dark:        'red-60v' !default;
+$theme-color-secondary-darker:      'red-70v' !default;
+$theme-color-secondary-darkest:     false !default;
 
 // Accent warm colors
 $theme-color-accent-warm-family:    'orange' !default;
 $theme-color-accent-warm-lightest:  false !default;
-$theme-color-accent-warm-lighter:   '#{$theme-color-accent-warm-family}-10' !default;
-$theme-color-accent-warm-light:     '#{$theme-color-accent-warm-family}-20v' !default;
-$theme-color-accent-warm:           '#{$theme-color-accent-warm-family}-30v' !default;
-$theme-color-accent-warm-dark:      '#{$theme-color-accent-warm-family}-50v' !default;
-$theme-color-accent-warm-darker:    '#{$theme-color-accent-warm-family}-60' !default;
+$theme-color-accent-warm-lighter:   'orange-10' !default;
+$theme-color-accent-warm-light:     'orange-20v' !default;
+$theme-color-accent-warm:           'orange-30v' !default;
+$theme-color-accent-warm-dark:      'orange-50v' !default;
+$theme-color-accent-warm-darker:    'orange-60' !default;
 $theme-color-accent-warm-darkest:   false !default;
 
 // Accent cool colors
-$theme-color-accent-cool-family:    'cyan' !default;
+$theme-color-accent-cool-family:    'blue-cool' !default;
 $theme-color-accent-cool-lightest:  false !default;
-$theme-color-accent-cool-lighter:   '#{$theme-color-accent-cool-family}-5' !default;
-$theme-color-accent-cool-light:     '#{$theme-color-accent-cool-family}-20' !default;
-$theme-color-accent-cool:           '#{$theme-color-accent-cool-family}-30v' !default;
-$theme-color-accent-cool-dark:      '#{$theme-color-accent-cool-family}-40v' !default;
+$theme-color-accent-cool-lighter:   'blue-cool-5v' !default;
+$theme-color-accent-cool-light:     'blue-cool-20v' !default;
+$theme-color-accent-cool:           'cyan-30v' !default;
+$theme-color-accent-cool-dark:      'blue-cool-40v' !default;
 $theme-color-accent-cool-darker:    'blue-cool-60v' !default;
 $theme-color-accent-cool-darkest:   false !default;
 
@@ -83,42 +83,42 @@ State palette colors
 */
 
 // Error colors
-$theme-color-error-family:     'red' !default;
-$theme-color-error-lighter:    '#{$theme-color-error-family}-10' !default;
-$theme-color-error-light:      '#{$theme-color-error-family}-40v' !default;
-$theme-color-error:            '#{$theme-color-error-family}-50' !default;
-$theme-color-error-dark:       '#{$theme-color-error-family}-60v' !default;
-$theme-color-error-darker:     '#{$theme-color-error-family}-70v' !default;
+$theme-color-error-family:     'red-warm' !default;
+$theme-color-error-lighter:    'red-warm-10' !default;
+$theme-color-error-light:      'red-warm-30v' !default;
+$theme-color-error:            'red-warm-50v' !default;
+$theme-color-error-dark:       'red-60v' !default;
+$theme-color-error-darker:     'red-70' !default;
 
 // Warning colors
 $theme-color-warning-family:   'gold' !default;
-$theme-color-warning-lighter:  '#{$theme-color-warning-family}-5v' !default;
-$theme-color-warning-light:    '#{$theme-color-warning-family}-10v' !default;
-$theme-color-warning:          '#{$theme-color-warning-family}-20v' !default;
-$theme-color-warning-dark:     '#{$theme-color-warning-family}-30v' !default;
-$theme-color-warning-darker:   '#{$theme-color-warning-family}-40v' !default;
+$theme-color-warning-lighter:  'yellow-5' !default;
+$theme-color-warning-light:    'yellow-10v' !default;
+$theme-color-warning:          'gold-20v' !default;
+$theme-color-warning-dark:     'gold-30v' !default;
+$theme-color-warning-darker:   'gold-50v' !default;
 
 // Success colors
 $theme-color-success-family:   'green-cool' !default;
-$theme-color-success-lighter:  '#{$theme-color-success-family}-5' !default;
-$theme-color-success-light:    '#{$theme-color-success-family}-30v' !default;
-$theme-color-success:          '#{$theme-color-success-family}-40v' !default;
-$theme-color-success-dark:     '#{$theme-color-success-family}-50' !default;
-$theme-color-success-darker:   '#{$theme-color-success-family}-70' !default;
+$theme-color-success-lighter:  'green-cool-5' !default;
+$theme-color-success-light:    'green-cool-20v' !default;
+$theme-color-success:          'green-cool-40v' !default;
+$theme-color-success-dark:     'green-cool-50' !default;
+$theme-color-success-darker:   'green-cool-60' !default;
 
 // Info colors
 $theme-color-info-family:      'cyan' !default;
-$theme-color-info-lighter:     '#{$theme-color-info-family}-5' !default;
-$theme-color-info-light:       '#{$theme-color-info-family}-20' !default;
-$theme-color-info:             '#{$theme-color-info-family}-30v' !default;
-$theme-color-info-dark:        '#{$theme-color-info-family}-40v' !default;
-$theme-color-info-darker:      'blue-60' !default;
+$theme-color-info-lighter:     'cyan-5' !default;
+$theme-color-info-light:       'cyan-20' !default;
+$theme-color-info:             'cyan-30v' !default;
+$theme-color-info-dark:        'cyan-40v' !default;
+$theme-color-info-darker:      'blue-cool-60' !default;
 
 // Disabled colors
 $theme-color-disabled-family:  'gray' !default;
-$theme-color-disabled-light:   '#{$theme-color-disabled-family}-10' !default;
-$theme-color-disabled:         '#{$theme-color-disabled-family}-20' !default;
-$theme-color-disabled-dark:    '#{$theme-color-disabled-family}-30' !default;
+$theme-color-disabled-light:   'gray-10' !default;
+$theme-color-disabled:         'gray-20' !default;
+$theme-color-disabled-dark:    'gray-30' !default;
 
 /*
 ----------------------------------------
diff --git a/src/stylesheets/theme/_uswds-theme-color.scss b/src/stylesheets/theme/_uswds-theme-color.scss
index f180ee4fff..379664993d 100644
--- a/src/stylesheets/theme/_uswds-theme-color.scss
+++ b/src/stylesheets/theme/_uswds-theme-color.scss
@@ -24,22 +24,22 @@ Theme palette colors
 */
 
 // Base colors
-$theme-color-base-family:           'gray';
-$theme-color-base-lightest:         '#{$theme-color-base-family}-5';
+$theme-color-base-family:           'gray-cool';
+$theme-color-base-lightest:         'gray-5';
 $theme-color-base-lighter:          'gray-cool-10';
-$theme-color-base-light:            '#{$theme-color-base-family}-30';
-$theme-color-base:                  '#{$theme-color-base-family}-50';
+$theme-color-base-light:            'gray-cool-30';
+$theme-color-base:                  'gray-cool-50';
 $theme-color-base-dark:             'gray-cool-60';
-$theme-color-base-darker:           'gray-cool-80';
-$theme-color-base-darkest:          '#{$theme-color-base-family}-90';
-$theme-color-base-ink:              '#{$theme-color-base-family}-90';
+$theme-color-base-darker:           'gray-cool-70';
+$theme-color-base-darkest:          'gray-90';
+$theme-color-base-ink:              'gray-90';
 
 // Primary colors
 $theme-color-primary-family:        'blue';
 $theme-color-primary-lightest:      false;
-$theme-color-primary-lighter:       '#{$theme-color-primary-family}-10';
-$theme-color-primary-light:         '#{$theme-color-primary-family}-30';
-$theme-color-primary:               '#{$theme-color-primary-family}-60v';
+$theme-color-primary-lighter:       'blue-10';
+$theme-color-primary-light:         'blue-30';
+$theme-color-primary:               'blue-60v';
 $theme-color-primary-vivid:         'blue-warm-60v';
 $theme-color-primary-dark:          'blue-warm-70v';
 $theme-color-primary-darker:        'blue-warm-80v';
@@ -48,31 +48,31 @@ $theme-color-primary-darkest:       false;
 // Secondary colors
 $theme-color-secondary-family:      'red';
 $theme-color-secondary-lightest:    false;
-$theme-color-secondary-lighter:     '#{$theme-color-secondary-family}-10';
-$theme-color-secondary-light:       '#{$theme-color-secondary-family}-30';
-$theme-color-secondary:             '#{$theme-color-secondary-family}-50';
-$theme-color-secondary-vivid:       '#{$theme-color-secondary-family}-50v';
-$theme-color-secondary-dark:        '#{$theme-color-secondary-family}-60v';
-$theme-color-secondary-darker:      '#{$theme-color-secondary-family}-70v';
+$theme-color-secondary-lighter:     'red-cool-10';
+$theme-color-secondary-light:       'red-30';
+$theme-color-secondary:             'red-50';
+$theme-color-secondary-vivid:       'red-cool-50v';
+$theme-color-secondary-dark:        'red-60v';
+$theme-color-secondary-darker:      'red-70v';
 $theme-color-secondary-darkest:     false;
 
 // Accent warm colors
 $theme-color-accent-warm-family:    'orange';
 $theme-color-accent-warm-lightest:  false;
-$theme-color-accent-warm-lighter:   '#{$theme-color-accent-warm-family}-10';
-$theme-color-accent-warm-light:     '#{$theme-color-accent-warm-family}-20v';
-$theme-color-accent-warm:           '#{$theme-color-accent-warm-family}-30v';
-$theme-color-accent-warm-dark:      '#{$theme-color-accent-warm-family}-50v';
-$theme-color-accent-warm-darker:    '#{$theme-color-accent-warm-family}-60';
+$theme-color-accent-warm-lighter:   'orange-10';
+$theme-color-accent-warm-light:     'orange-20v';
+$theme-color-accent-warm:           'orange-30v';
+$theme-color-accent-warm-dark:      'orange-50v';
+$theme-color-accent-warm-darker:    'orange-60';
 $theme-color-accent-warm-darkest:   false;
 
 // Accent cool colors
-$theme-color-accent-cool-family:    'cyan';
+$theme-color-accent-cool-family:    'blue-cool';
 $theme-color-accent-cool-lightest:  false;
-$theme-color-accent-cool-lighter:   '#{$theme-color-accent-cool-family}-5';
-$theme-color-accent-cool-light:     '#{$theme-color-accent-cool-family}-20';
-$theme-color-accent-cool:           '#{$theme-color-accent-cool-family}-30v';
-$theme-color-accent-cool-dark:      '#{$theme-color-accent-cool-family}-40v';
+$theme-color-accent-cool-lighter:   'blue-cool-5v';
+$theme-color-accent-cool-light:     'blue-cool-20v';
+$theme-color-accent-cool:           'cyan-30v';
+$theme-color-accent-cool-dark:      'blue-cool-40v';
 $theme-color-accent-cool-darker:    'blue-cool-60v';
 $theme-color-accent-cool-darkest:   false;
 
@@ -83,42 +83,42 @@ State palette colors
 */
 
 // Error colors
-$theme-color-error-family:     'red';
-$theme-color-error-lighter:    '#{$theme-color-error-family}-10';
-$theme-color-error-light:      '#{$theme-color-error-family}-40v';
-$theme-color-error:            '#{$theme-color-error-family}-50';
-$theme-color-error-dark:       '#{$theme-color-error-family}-60v';
-$theme-color-error-darker:     '#{$theme-color-error-family}-70v';
+$theme-color-error-family:     'red-warm';
+$theme-color-error-lighter:    'red-warm-10';
+$theme-color-error-light:      'red-warm-30v';
+$theme-color-error:            'red-warm-50v';
+$theme-color-error-dark:       'red-60v';
+$theme-color-error-darker:     'red-70';
 
 // Warning colors
 $theme-color-warning-family:   'gold';
-$theme-color-warning-lighter:  '#{$theme-color-warning-family}-5v';
-$theme-color-warning-light:    '#{$theme-color-warning-family}-10v';
-$theme-color-warning:          '#{$theme-color-warning-family}-20v';
-$theme-color-warning-dark:     '#{$theme-color-warning-family}-30v';
-$theme-color-warning-darker:   '#{$theme-color-warning-family}-40v';
+$theme-color-warning-lighter:  'yellow-5';
+$theme-color-warning-light:    'yellow-10v';
+$theme-color-warning:          'gold-20v';
+$theme-color-warning-dark:     'gold-30v';
+$theme-color-warning-darker:   'gold-50v';
 
 // Success colors
 $theme-color-success-family:   'green-cool';
-$theme-color-success-lighter:  '#{$theme-color-success-family}-5';
-$theme-color-success-light:    '#{$theme-color-success-family}-30v';
-$theme-color-success:          '#{$theme-color-success-family}-40v';
-$theme-color-success-dark:     '#{$theme-color-success-family}-50';
-$theme-color-success-darker:   '#{$theme-color-success-family}-70';
+$theme-color-success-lighter:  'green-cool-5';
+$theme-color-success-light:    'green-cool-20v';
+$theme-color-success:          'green-cool-40v';
+$theme-color-success-dark:     'green-cool-50';
+$theme-color-success-darker:   'green-cool-60';
 
 // Info colors
 $theme-color-info-family:      'cyan';
-$theme-color-info-lighter:     '#{$theme-color-info-family}-5';
-$theme-color-info-light:       '#{$theme-color-info-family}-20';
-$theme-color-info:             '#{$theme-color-info-family}-30v';
-$theme-color-info-dark:        '#{$theme-color-info-family}-40v';
-$theme-color-info-darker:      'blue-60';
+$theme-color-info-lighter:     'cyan-5';
+$theme-color-info-light:       'cyan-20';
+$theme-color-info:             'cyan-30v';
+$theme-color-info-dark:        'cyan-40v';
+$theme-color-info-darker:      'blue-cool-60';
 
 // Disabled colors
 $theme-color-disabled-family:  'gray';
-$theme-color-disabled-light:   '#{$theme-color-disabled-family}-10';
-$theme-color-disabled:         '#{$theme-color-disabled-family}-20';
-$theme-color-disabled-dark:    '#{$theme-color-disabled-family}-30';
+$theme-color-disabled-light:   'gray-10';
+$theme-color-disabled:         'gray-20';
+$theme-color-disabled-dark:    'gray-30';
 
 /*
 ----------------------------------------