From 486cf45e5bb4975d462585bdf0f4342fd08bd4c0 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Tue, 1 Oct 2024 19:09:15 -0500
Subject: [PATCH] style: update color token name 3 digits (#1955)

* fix(frame): add box shadow to bordered frame (#1958)

* style: remove border from box like elements with box shadows (#1967)

* style: add shadow to frame

* style: remove border from box-like elements

* chore: remove white space for linter

* fix: change legacy colors to mapped values ie red 500 to red 95

* fix: remove old 100 tokens

* fix: add 0 to make token 3 digits

* fix: add red color classes

* fix: add 0 to green color token names

* fix: add 0 to blue color token names

* fix: add 0 to mercury color token names

* fix: add 0 to yellow color token names

* fix: add 0 to purple color token names

* fix: update grey color token names to 3 digits

* fix: update react green colors

* fix: update react purple colors

* fix: update red in jsx and erb

* fix: update orange color token to mercury

* fix: update charcoal color token to upper greys

* fix: update grey color token to lower greys

* fix: add options for default color values

* chore: remove whitespace

* fix: self review fix grey 300 and grey 400 in css

* Revert "fix: self review fix grey 300 and grey 400 in css"

This reverts commit 2ae5967850416529d61fda4ce6287e35a151fed6.

* Revert "fix: update grey color token to lower greys"

This reverts commit 69f8706fc389e07b36e121f830859a87e3f1f9c7.

* fix: update grey color token to lower greys

* Revert "fix: update grey color token to lower greys"

This reverts commit 2f43f1d435529ff04f4daf89fc0bc7cda3ff9ab9.

* style: update purple color token to use three digits

* style: update additional 2 digit token value to 3 digit token values

* style: added zero to mercury 30

* style: update templating to wrap 050 values in single-quotes

* style(breadcrumbs): change charcoal 400 to grey 900

* fix: update gray to grey instances

---------

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
---
 docs/app/helpers/type_specs_helper.rb         |   48 +-
 .../examples/components/dot/_preview.html.erb |    1 -
 .../components/drawer/_preview.html.erb       |    2 +-
 .../components/icon_list/_preview.html.erb    |    6 +-
 .../components/panel_figure/_preview.html.erb |    2 +-
 .../layouts/frame/examples/_nesting.html.erb  |    2 +-
 .../layouts/frame/examples/_stat_box.html.erb |    4 +-
 docs/app/views/pages/_color_values.html.erb   |    2 +-
 docs/app/views/pages/grid_templates.html.erb  |    2 +-
 .../sage-frontend/stylesheets/docs/_code.scss |    6 +-
 .../stylesheets/docs/_colors.scss             |   32 +-
 .../stylesheets/docs/_example.scss            |   16 +-
 .../stylesheets/docs/_footer.scss             |    2 +-
 .../sage-frontend/stylesheets/docs/_grid.scss |    2 +-
 .../sage-frontend/stylesheets/docs/_home.scss |    2 +-
 .../sage-frontend/stylesheets/docs/_icon.scss |    4 +-
 .../stylesheets/docs/_quick_links.scss        |    2 +-
 .../stylesheets/docs/_rouge_theme.scss        |   36 +-
 .../stylesheets/docs/_sidebar.scss            |    2 +-
 .../stylesheets/docs/_specs.scss              |    6 +-
 .../stylesheets/docs/_status_key.scss         |    6 +-
 .../stylesheets/docs/_status_table.scss       |    2 +-
 .../sage-frontend/stylesheets/docs/_text.scss |    2 +-
 .../app/sage_tokens/sage_dictionary.rb        | 1214 +++++-----
 .../_sage_breadcrumbs.html.erb                |    2 +-
 .../_sage_form_select.html.erb                |    2 +-
 .../_sage_modal_content.html.erb              |    2 +-
 .../sage_components/_sage_search.html.erb     |    2 +-
 .../_sage_sortable_item.html.erb              |    2 +-
 .../lib/stylesheets/components/_alert.scss    |   60 +-
 .../stylesheets/components/_assistant.scss    |    4 +-
 .../lib/stylesheets/components/_avatar.scss   |   20 +-
 .../lib/stylesheets/components/_badge.scss    |    4 +-
 .../lib/stylesheets/components/_banner.scss   |   16 +-
 .../stylesheets/components/_breadcrumbs.scss  |   10 +-
 .../lib/stylesheets/components/_button.scss   |  128 +-
 .../lib/stylesheets/components/_card.scss     |   10 +-
 .../components/_card_highlight.scss           |    6 +-
 .../lib/stylesheets/components/_carousel.scss |    2 +-
 .../stylesheets/components/_catalog_item.scss |    4 +-
 .../stylesheets/components/_chart_legend.scss |    2 +-
 .../components/_chart_summary.scss            |    6 +-
 .../lib/stylesheets/components/_checkbox.scss |   22 +-
 .../lib/stylesheets/components/_choice.scss   |   14 +-
 .../stylesheets/components/_copy_text.scss    |    8 +-
 .../stylesheets/components/_data_card.scss    |   18 +-
 .../stylesheets/components/_description.scss  |    4 +-
 .../lib/stylesheets/components/_divider.scss  |    2 +-
 .../lib/stylesheets/components/_dot.scss      |    6 +-
 .../lib/stylesheets/components/_dropdown.scss |   30 +-
 .../components/_dynamic_select.scss           |    4 +-
 .../stylesheets/components/_empty_state.scss  |    4 +-
 .../components/_expandable_card.scss          |    2 +-
 .../components/_feature_toggle.scss           |    2 +-
 .../stylesheets/components/_form_input.scss   |    4 +-
 .../stylesheets/components/_form_section.scss |    4 +-
 .../stylesheets/components/_form_select.scss  |   20 +-
 .../components/_form_textarea.scss            |    2 +-
 .../lib/stylesheets/components/_hero.scss     |    6 +-
 .../lib/stylesheets/components/_hint.scss     |    4 +-
 .../lib/stylesheets/components/_icon.scss     |    2 +-
 .../stylesheets/components/_icon_list.scss    |    2 +-
 .../stylesheets/components/_indicator.scss    |    4 +-
 .../stylesheets/components/_input_group.scss  |    8 +-
 .../lib/stylesheets/components/_link.scss     |   26 +-
 .../lib/stylesheets/components/_list.scss     |    4 +-
 .../lib/stylesheets/components/_loader.scss   |    2 +-
 .../stylesheets/components/_media_tile.scss   |    6 +-
 .../stylesheets/components/_menu_button.scss  |    6 +-
 .../lib/stylesheets/components/_meter.scss    |    4 +-
 .../lib/stylesheets/components/_modal.scss    |   12 +-
 .../lib/stylesheets/components/_nav.scss      |   14 +-
 .../lib/stylesheets/components/_overlay.scss  |    2 +-
 .../stylesheets/components/_page_heading.scss |    6 +-
 .../stylesheets/components/_pagination.scss   |   10 +-
 .../lib/stylesheets/components/_panel.scss    |    8 +-
 .../components/_panel_controls.scss           |    2 +-
 .../stylesheets/components/_panel_figure.scss |    2 +-
 .../lib/stylesheets/components/_popover.scss  |    4 +-
 .../stylesheets/components/_progress_bar.scss |    2 +-
 .../lib/stylesheets/components/_property.scss |    2 +-
 .../lib/stylesheets/components/_radio.scss    |    6 +-
 .../lib/stylesheets/components/_search.scss   |   10 +-
 .../lib/stylesheets/components/_sortable.scss |   10 +-
 .../lib/stylesheets/components/_stat_box.scss |   10 +-
 .../stylesheets/components/_status_icon.scss  |    8 +-
 .../lib/stylesheets/components/_switch.scss   |   22 +-
 .../lib/stylesheets/components/_tab.scss      |    8 +-
 .../lib/stylesheets/components/_table.scss    |   12 +-
 .../lib/stylesheets/components/_tabs.scss     |    4 +-
 .../lib/stylesheets/components/_tag.scss      |    8 +-
 .../lib/stylesheets/components/_toast.scss    |    8 +-
 .../lib/stylesheets/components/_tooltip.scss  |    2 +-
 .../components/_transaction_card.scss         |    6 +-
 .../stylesheets/components/_typeahead.scss    |    8 +-
 .../stylesheets/components/_upload_card.scss  |   10 +-
 .../lib/stylesheets/core/_typography.scss     |    6 +-
 .../lib/stylesheets/core/_variables.scss      |   34 +-
 .../lib/stylesheets/core/mixins/_sage.scss    |   22 +-
 .../lib/stylesheets/dictionary/_tokens.scss   | 1954 +++++++----------
 .../lib/stylesheets/global/_reboot.scss       |    2 +-
 .../lib/stylesheets/tokens/_border.scss       |    6 +-
 .../tokens/_border_interactive.scss           |   10 +-
 .../stylesheets/tokens/_color_palette.scss    |   30 +-
 .../lib/stylesheets/tokens/_shadow.scss       |   22 +-
 packages/sage-react/lib/Chart/Chart.story.jsx |    8 +-
 packages/sage-react/lib/Chart/types/Bar.jsx   |    2 +-
 .../sage-react/lib/Drawer/Drawer.story.jsx    |    4 +-
 .../sage-react/lib/EmptyState/EmptyState.jsx  |    2 +-
 packages/sage-react/lib/Frame/Frame.story.jsx |    6 +-
 .../sage-react/lib/IconList/IconListItem.jsx  |    2 +-
 .../lib/MediaTile/MediaTile.story.jsx         |    2 +-
 packages/sage-react/lib/Modal/ModalHeader.jsx |    2 +-
 packages/sage-react/lib/Search/Search.jsx     |    2 +-
 packages/sage-react/lib/Select/Select.jsx     |    2 +-
 .../sage-react/lib/configs/classnames/type.js |   18 +-
 .../lib/configs/dictionary/tokens.js          | 1214 +++++-----
 .../sage-react/lib/configs/tokens/recharts.js |    2 +-
 style-dictionary/bin/templating.js            |    7 +
 .../templates/presets/jsx/tokens.hbs          |    6 +-
 style-dictionary/tokens/color/base.json       |  640 +++---
 style-dictionary/tokens/color/combos.json     |   78 +-
 style-dictionary/tokens/color/core.json       |   16 +-
 123 files changed, 2746 insertions(+), 3454 deletions(-)

diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb
index 5c2cc62ef2..a356c03bd6 100644
--- a/docs/app/helpers/type_specs_helper.rb
+++ b/docs/app/helpers/type_specs_helper.rb
@@ -126,51 +126,51 @@ def sage_type_specs_color_classes
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-charcoal-100">Grey</span>),
-        type_class: md("`t-sage--color-charcoal-100`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-grey-600">Grey</span>),
+        type_class: md("`t-sage--color-grey-600`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::CHARCOAL_100`<br/>
-          React: `SageClassnames.TYPE_COLORS.CHARCOAL_100`
+          Rails: `SageClassnames::TYPE_COLORS::GREY_600`<br/>
+          React: `SageClassnames.TYPE_COLORS.GREY_600`
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-red-300">Red</span>),
-        type_class: md("`t-sage--color-red-300`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-red-600">Red</span>),
+        type_class: md("`t-sage--color-red-600`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::RED_300`<br/>
-          React: `SageClassnames.TYPE_COLORS.RED_300`
+          Rails: `SageClassnames::TYPE_COLORS::RED_600`<br/>
+          React: `SageClassnames.TYPE_COLORS.RED_600`
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-orange-300">Orange</span>),
-        type_class: md("`t-sage--color-orange-300`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-mercury-500">Orange</span>),
+        type_class: md("`t-sage--color-mercury-500`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::ORANGE_300`<br/>
-          React: `SageClassnames.TYPE_COLORS.ORANGE_300`
+          Rails: `SageClassnames::TYPE_COLORS::MERCURY_500`<br/>
+          React: `SageClassnames.TYPE_COLORS.MERCURY_500`
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-yellow-300">Yellow</span>),
-        type_class: md("`t-sage--color-yellow-300`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-yellow-400">Yellow</span>),
+        type_class: md("`t-sage--color-yellow-400`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::YELLOW_300`<br/>
-          React: `SageClassnames.TYPE_COLORS.YELLOW_300`
+          Rails: `SageClassnames::TYPE_COLORS::YELLOW_400`<br/>
+          React: `SageClassnames.TYPE_COLORS.YELLOW_400`
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-sage-300">Sage</span>),
-        type_class: md("`t-sage--color-sage-300`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-green-600">Sage</span>),
+        type_class: md("`t-sage--color-green-600`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::SAGE_300`<br/>
-          React: `SageClassnames.TYPE_COLORS.SAGE_300`
+          Rails: `SageClassnames::TYPE_COLORS::GREEN_600`<br/>
+          React: `SageClassnames.TYPE_COLORS.GREEN_600`
         )),
       },
       {
-        color: %(<span class="t-sage-body-semi t-sage--color-purple-300">Purple</span>),
-        type_class: md("`t-sage--color-purple-300`"),
+        color: %(<span class="t-sage-body-semi t-sage--color-purple-600">Purple</span>),
+        type_class: md("`t-sage--color-purple-600`"),
         constants: md(%(
-          Rails: `SageClassnames::TYPE_COLORS::PURPLE_300`<br/>
-          React: `SageClassnames.TYPE_COLORS.PURPLE_300`
+          Rails: `SageClassnames::TYPE_COLORS::PURPLE_600`<br/>
+          React: `SageClassnames.TYPE_COLORS.PURPLE_600`
         )),
       }
     ]
diff --git a/docs/app/views/examples/components/dot/_preview.html.erb b/docs/app/views/examples/components/dot/_preview.html.erb
index d36d7041c2..2fb3886a75 100644
--- a/docs/app/views/examples/components/dot/_preview.html.erb
+++ b/docs/app/views/examples/components/dot/_preview.html.erb
@@ -7,7 +7,6 @@
 <%= sage_component SageDot, { color: "red" } %>
 <%= sage_component SageDot, { color: "yellow" } %>
 <%= sage_component SageDot, { color: "purple" } %>
-<%= sage_component SageDot, { color: "charcoal" } %>
 <%= sage_component SageDot, { color: "grey" } %>
 
 <h3>Custom color</h3>
diff --git a/docs/app/views/examples/components/drawer/_preview.html.erb b/docs/app/views/examples/components/drawer/_preview.html.erb
index b625ef0703..992e9807f8 100644
--- a/docs/app/views/examples/components/drawer/_preview.html.erb
+++ b/docs/app/views/examples/components/drawer/_preview.html.erb
@@ -1,5 +1,5 @@
 <%
-heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::CHARCOAL_500}"
+heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::GREY_950}"
 modal_primary_content = %(
   <h3 class="#{heading_specs}">
     Drawer
diff --git a/docs/app/views/examples/components/icon_list/_preview.html.erb b/docs/app/views/examples/components/icon_list/_preview.html.erb
index 48f081305e..4550d2c572 100644
--- a/docs/app/views/examples/components/icon_list/_preview.html.erb
+++ b/docs/app/views/examples/components/icon_list/_preview.html.erb
@@ -3,7 +3,7 @@
   items: [
     {
       bullet: %(
-        <pds-icon name="circle-1" class="t-sage--color-charcoal-300""></pds-icon>
+        <pds-icon name="circle-1" class="t-sage--color-grey-800""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
@@ -12,7 +12,7 @@
     },
     {
       bullet: %(
-        <pds-icon name="circle-2" class="t-sage--color-charcoal-300""></pds-icon>
+        <pds-icon name="circle-2" class="t-sage--color-grey-800""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
@@ -21,7 +21,7 @@
     },
     {
       bullet: %(
-        <pds-icon name="circle-3" class="t-sage--color-charcoal-300""></pds-icon>
+        <pds-icon name="circle-3" class="t-sage--color-grey-800""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
diff --git a/docs/app/views/examples/components/panel_figure/_preview.html.erb b/docs/app/views/examples/components/panel_figure/_preview.html.erb
index 5ea57928dd..c3b12dee72 100644
--- a/docs/app/views/examples/components/panel_figure/_preview.html.erb
+++ b/docs/app/views/examples/components/panel_figure/_preview.html.erb
@@ -73,7 +73,7 @@ but note that Wistia objects need a little additional styling that can be enable
     <%= sage_component SagePanelFigure, {
       bleed: "top",
       padded: true,
-      background_color: SageTokens::COLOR_PALETTE[:CHARCOAL_100],
+      background_color: SageTokens::COLOR_PALETTE[:GREY_600],
     } do %>
       <%= image_tag("card-placeholder-lg.png", alt: "") %>
     <% end %>
diff --git a/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb b/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb
index c149933f54..b8f2043496 100644
--- a/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb
+++ b/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb
@@ -13,7 +13,7 @@
       <h4 class="<%= SageClassnames::TYPE::HEADING_3 %>">
         Lorem ipsum dolor sit
       </h4>
-      <p class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_200}" %>">
+      <p class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::GREY_700}" %>">
         Consectetur adipiscing elit
       </p>
     <% end %>
diff --git a/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb b/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb
index 77ef9eaaf7..06eababf1c 100644
--- a/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb
+++ b/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb
@@ -8,7 +8,7 @@
 } do %>
   <%= sage_layout SageFrame, { gap: "xs" } do %>
     <%= sage_layout SageFrame, { gap: "none" } do %>
-      <h3 class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_200}" %>">
+      <h3 class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::GREY_700}" %>">
         All payments
       </h3>
       <%= sage_layout SageFrame, {
@@ -20,7 +20,7 @@
         <b class="<%= "#{SageClassnames::TYPE::HEADING_5}" %>">
           40
         </b>
-        <span class="<%= "#{SageClassnames::TYPE::BODY_XSMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_100}" %>">
+        <span class="<%= "#{SageClassnames::TYPE::BODY_XSMALL} #{SageClassnames::TYPE_COLORS::GREY_600}" %>">
           successful payments
         </span>
       <% end %>
diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb
index ffebface9d..c9460696e4 100644
--- a/docs/app/views/pages/_color_values.html.erb
+++ b/docs/app/views/pages/_color_values.html.erb
@@ -4,7 +4,7 @@
       <%= render "color_values_body", color: color, value: value %>
     <% end %>
   <% else %>
-    <% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %>
+    <% ["050", 100, 200, 300, 400, 500, 600, 700, 800, 950].each do |value| %>
       <%= render "color_values_body", color: color, value: value %>
     <% end %>
   <% end %>
diff --git a/docs/app/views/pages/grid_templates.html.erb b/docs/app/views/pages/grid_templates.html.erb
index bacaad9af5..67435be139 100644
--- a/docs/app/views/pages/grid_templates.html.erb
+++ b/docs/app/views/pages/grid_templates.html.erb
@@ -106,7 +106,7 @@ dots = [
   %(<pds-icon name="star" class="sage-icon-star t-sage--color-orange"></pds-icon>).html_safe,
   sage_component(SageBadge, { value: "Verified", color: "published" }).html_safe,
   %(<span class="t-sage-body-small-semi">$5.99</span>).html_safe,
-  %(<pds-icon name="dot-menu-horizontal" class="sage-icon-dot-menu-horizontal t-sage--color-charcoal"></pds-icon>).html_safe
+  %(<pds-icon name="dot-menu-horizontal" class="sage-icon-dot-menu-horizontal t-sage--color-grey-800"></pds-icon>).html_safe
 ]
 %>
 
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_code.scss b/docs/lib/sage-frontend/stylesheets/docs/_code.scss
index 619ded3f18..74c4807939 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_code.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_code.scss
@@ -28,7 +28,7 @@
   }
 }
 pre .nocode {
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   background-color: none;
 }
 pre .str { /* string */
@@ -49,13 +49,13 @@ pre .lit { /* literal */
   color: sage-color(sage, 100);
 }
 pre .pun { /* punctuation */
-  color: sage-color(purple, 100);
+  color: sage-color(purple, 150);
 }
 pre .pln { /* plaintext */
   color: sage-color(primary, 100);
 }
 pre .tag { /* html/xml tag */
-  color: sage-color(purple, 100);
+  color: sage-color(purple, 150);
   font-weight: bold;
 }
 pre .atn { /* attribute name */
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
index a705c5abc4..1a4dca47e5 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -47,39 +47,45 @@
   @each $value, $map in $color {
     $hex: sage-color($name, $value);
 
-    .color-#{"" + $name}-#{$value} {
+    // Determine class name for $value == 50
+    $classname: ".color-#{"" + $name}-#{$value}";
+    @if ($value == 50) {
+      $classname: ".color-#{"" + $name}-0#{$value}";
+    }
+
+    #{$classname} {
       padding: sage-spacing(sm) sage-spacing();
       font-size: sage-font-size(body);
       background: $hex;
 
-      @if ($name == grey and $value > 40) {
+      @if ($name == grey and $value > 400) {
         color: sage-color(white);
       }
       @else if ($name == white or $name == grey) {
-        color: sage-color(charcoal, 500);
+        color: sage-color(grey, 950);
       }
       @else if ($name == black or $name == charcoal) {
         color: sage-color(white);
       }
-      @else if ($name == blue and $value > 40) {
-        color: sage-color(blue, 20);
+      @else if ($name == blue and $value > 400) {
+        color: sage-color(blue, 200);
       }
       @else if ($name == blue) {
-        color: sage-color(blue, 95);
+        color: sage-color(blue, 950);
       }
-      @else if ($name == mercury and $value > 20) {
+      @else if ($name == mercury and $value > 200) {
         color: sage-color(white);
       }
       @else if ($name == mercury) {
-        color: sage-color(mercury, 50);
+        color: sage-color(mercury, 500);
       }
-      @else if ($name == green and $value > 20) {
+      @else if ($name == green and $value > 200) {
         color: sage-color(white);
       }
       @else if ($name == green) {
-        color: sage-color(green, 60);
+        color: sage-color(green, 600);
       }
-      @else if ($name == yellow and $value > 30) {
+      @else if ($name == yellow and $value > 300) {
         color: sage-color(white);
       }
       @else if (lightness($hex) < 65) {
@@ -105,8 +111,8 @@
 
 .color-white-100 {
   border-radius: sage-border(radius);
-  border: 1px solid sage-color(charcoal, 300);
-  box-shadow: inset 0 0 0.0625rem sage-color(charcoal, 300);
+  border: 1px solid sage-color(grey, 800);
+  box-shadow: inset 0 0 0.0625rem sage-color(grey, 800);
 }
 
 .color-black-100 {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss
index 9e2d876bf8..a617551311 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_example.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_example.scss
@@ -5,7 +5,7 @@
 ================================================== */
 
 $-example-link-color: inherit;
-$-example-link-color-hover: sage-color(charcoal, 100);
+$-example-link-color-hover: sage-color(grey, 600);
 
 $-example-code-preview-height: 13rem;
 $-example-code-preview-button-color: sage-color(white);
@@ -14,7 +14,7 @@ $-example-code-preview-button-blur: blur(2px);
 $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
 
 .example__title {
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   text-transform: capitalize;
 }
 
@@ -40,7 +40,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
   &:hover,
   &:focus,
   &:active {
-    color: sage-color(charcoal, 500);
+    color: sage-color(grey, 950);
     text-decoration: none;
   }
 }
@@ -50,7 +50,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
   min-width: rem(100px);
   margin: sage-spacing() 0;
   padding: sage-spacing(xs) sage-spacing();
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   text-align: center;
   background: sage-color(white);
   box-shadow: sage-shadow();
@@ -164,13 +164,13 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
     overflow: hidden;
     padding: 0;
     border: 0;
-    background: sage-color(gray, 100);
+    background: sage-color(grey, 100);
   }
   .sage-card__header {
     padding: sage-spacing();
     padding-bottom: sage-spacing(xs);
     code {
-      background: sage-color(gray, 300);
+      background: sage-color(grey, 300);
     }
   }
 }
@@ -197,11 +197,11 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
     @media (max-width: map-get($-media-tile-breakpoints, 1-col-max)) {
       grid-template-columns: repeat(1, 1fr);
     }
-    
+
     @media (min-width: map-get($-media-tile-breakpoints, 2-col-min)) and (max-width: map-get($-media-tile-breakpoints, 2-col-max)) {
       grid-template-columns: repeat(2, 1fr);
     }
-    
+
     @media (min-width: map-get($-media-tile-breakpoints, 3-col-min)) {
       grid-template-columns: repeat(3, 1fr);
     }
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_footer.scss b/docs/lib/sage-frontend/stylesheets/docs/_footer.scss
index 45830c9764..9ecd0421f1 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_footer.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_footer.scss
@@ -6,7 +6,7 @@
 
 .docs-footer {
   padding: sage-spacing(2xl) sage-spacing();
-  background: sage-color(gray, 200);
+  background: sage-color(grey, 200);
 
   .sage-stage & {
     padding: sage-spacing(2xl) 0;
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
index 1b08b21ddf..64472af66b 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
@@ -9,7 +9,7 @@
   margin-bottom: sage-spacing(md);
   padding: sage-spacing(xs) sage-spacing(md);
   text-align: center;
-  background: sage-color(grey, 300);
+  background: sage-color(grey, 200);
   border-radius: sage-border(radius);
 
   [class*="sage-col--align-"] & {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_home.scss b/docs/lib/sage-frontend/stylesheets/docs/_home.scss
index c63f1d23aa..429a2752a6 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_home.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_home.scss
@@ -4,7 +4,7 @@
   For Sage documentation use
 ================================================== */
 .docs-home {
-  background: sage-color(gray, 200);
+  background: sage-color(grey, 200);
 }
 
 .docs-hero {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss
index c6c7142c92..6891de8ec9 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss
@@ -12,7 +12,7 @@
   margin-bottom: sage-spacing();
   padding: sage-spacing(lg) sage-spacing(sm);
   text-align: center;
-  background: sage-color(grey, 200);
+  background: sage-color(grey, 150);
   border-radius: sage-border(radius);
   cursor: pointer;
 }
@@ -29,7 +29,7 @@
   margin-bottom: sage-spacing(sm);
   padding: sage-spacing(sm);
   text-align: right;
-  background: sage-color(grey, 200);
+  background: sage-color(grey, 150);
   border-radius: sage-border(radius);
   i {
     line-height: 1;
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
index cc8e946019..b6510fc6d7 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
@@ -4,7 +4,7 @@
   For Sage documentation use
 ================================================== */
 
-$-quick-links-color-text: sage-color(charcoal, 400);
+$-quick-links-color-text: sage-color(grey, 900);
 $-quick-links-color-focus: sage-color(primary, 300);
 $-quick-links-color-background: sage-color(primary, 200);
 
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
index 3fd03479c0..c247ac9c06 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
@@ -1,39 +1,39 @@
 // background
-$-color-1: sage-color(grey, 300);
+$-color-1: sage-color(grey, 200);
 // Whitespace
-$-color-24: sage-color(charcoal, 200);
+$-color-24: sage-color(grey, 700);
 // Name entity
-$-color-20: sage-color(charcoal, 400);
+$-color-20: sage-color(grey, 900);
 // Operators, numbers
-$-color-6: sage-color(charcoal, 300);
+$-color-6: sage-color(grey, 800);
 // Heading and prompt
-$-color-9: sage-color(charcoal, 400);
+$-color-9: sage-color(grey, 900);
 // Comments of various sorts
-$-color-3: sage-color(charcoal, 300);
+$-color-3: sage-color(grey, 800);
 // Subheading
-$-color-12: sage-color(red, 300);
+$-color-12: sage-color(red, 500);
 // Constant
-$-color-18: sage-color(red, 300);
+$-color-18: sage-color(red, 500);
 // Keyword type
-$-color-14: sage-color(red, 300);
+$-color-14: sage-color(red, 500);
 // Strings
-$-color-15: sage-color(red, 300);
+$-color-15: sage-color(red, 500);
 // Name exception
-$-color-21: sage-color(red, 200);
+$-color-21: sage-color(red, 300);
 // Error underlines
-$-color-4: sage-color(red, 300);
+$-color-4: sage-color(red, 500);
 // Generic deleted?
-$-color-8: sage-color(red, 200);
+$-color-8: sage-color(red, 300);
 // Escape string
 $-color-25: sage-color(orange, 200);
 // Regex/interpolation
 $-color-26: sage-color(orange, 200);
 // Preproc comment
-$-color-7: sage-color(charcoal, 300);
+$-color-7: sage-color(grey, 800);
 // Highlight?
-$-color-2: sage-color(yellow, 100);
+$-color-2: sage-color(yellow, 150);
 // Name label
-$-color-22: sage-color(yellow, 300);
+$-color-22: sage-color(yellow, 400);
 // Keywords and built ins, tag names
 $-color-5: sage-color(sage, 300);
 // Generic inserted?
@@ -47,7 +47,7 @@ $-color-13: sage-color(primary, 200);
 // Class, function, namespace
 $-color-17: sage-color(sage, 200);
 // Name decorator and word operator
-$-color-19: sage-color(purple, 200);
+$-color-19: sage-color(purple, 300);
 // Variables
 $-color-23: sage-color(primary, 300);
 
@@ -58,7 +58,7 @@ $-color-23: sage-color(primary, 300);
   .hll {
     background-color: $-color-2;
   }
-  
+
   /* Comment */
   .c {
     color: $-color-3;
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
index d8bfbfbbda..9862978c69 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
@@ -21,5 +21,5 @@
 // Side Navigation Footer Top Border
 // Visual division between the scrolling content and the footer
 .sage-sidebar__footer {
-  box-shadow: inset 0 1px 0 sage-color(gray);
+  box-shadow: inset 0 1px 0 sage-color(grey);
 }
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
index 7f3b680aee..37bf5a3dbf 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
@@ -7,15 +7,15 @@
 .sage-specs {
   th {
     padding: 4px;
-    color: sage-color(charcoal, 200);
-    border-bottom: 1px solid sage-color(grey, 400);
+    color: sage-color(grey, 700);
+    border-bottom: 1px solid sage-color(grey, 300);
   }
 
   td {
     padding: 4px;
     font-size: sage-font-size(body-xs);
     vertical-align: middle;
-    border-bottom: 1px solid sage-color(grey, 300);
+    border-bottom: 1px solid sage-color(grey, 200);
   }
 
   tfoot td {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
index 2ba3100bcc..d4ea6ba477 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
@@ -43,8 +43,8 @@
     }
 
     &--stop {
-      border-color: sage-color(red, 300);
-      background: sage-color(red, 300);
+      border-color: sage-color(red, 500);
+      background: sage-color(red, 500);
     }
   }
 
@@ -52,7 +52,7 @@
     margin-left: sage-spacing(xs);
     font-size: sage-font-size(body-sm);
     font-weight: sage-font-weight(semibold);
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 
   @media screen and (min-width: sage-breakpoint(lg-min)) {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
index f21a563ef7..5e2d78111e 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
@@ -6,7 +6,7 @@
 
 $-status-table-border: rem(2px) solid sage-color(grey);
 $-status-table-cell-padding: sage-spacing(xs) sage-spacing(sm);
-$-status-table-heading-color: sage-color(charcoal, 100);
+$-status-table-heading-color: sage-color(grey, 600);
 $-status-table-heading-font-size: sage-font-size(body-sm);
 $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);
 
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss
index 61bca29212..b0aa73ae62 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss
@@ -8,7 +8,7 @@ code {
   display: inline-block;
   padding: 0 sage-spacing(2xs);
   font-size: 0.9em;
-  background-color: sage-color(grey, 300);
+  background-color: sage-color(grey, 200);
 }
 
 pre {
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb
index f76cae65af..89be719d7e 100644
--- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb
+++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb
@@ -21,114 +21,114 @@ module SageDictionary
   #
   # Static vars for COLOR BASE
   #
-  SD_SAGE_COLOR_BASE_BLUE_5_HEX = "#fafcff"
-  SD_SAGE_COLOR_BASE_BLUE_5_CODE = "blue-5"
-  SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME = "t-sage--color-blue-5"
-  SD_SAGE_COLOR_BASE_BLUE_10_HEX = "#eff6ff"
-  SD_SAGE_COLOR_BASE_BLUE_10_CODE = "blue-10"
-  SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME = "t-sage--color-blue-10"
-  SD_SAGE_COLOR_BASE_BLUE_15_HEX = "#dbe9fe"
-  SD_SAGE_COLOR_BASE_BLUE_15_CODE = "blue-15"
-  SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME = "t-sage--color-blue-15"
-  SD_SAGE_COLOR_BASE_BLUE_20_HEX = "#bfdbfe"
-  SD_SAGE_COLOR_BASE_BLUE_20_CODE = "blue-20"
-  SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME = "t-sage--color-blue-20"
-  SD_SAGE_COLOR_BASE_BLUE_30_HEX = "#92c5fd"
-  SD_SAGE_COLOR_BASE_BLUE_30_CODE = "blue-30"
-  SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME = "t-sage--color-blue-30"
-  SD_SAGE_COLOR_BASE_BLUE_40_HEX = "#60a5fa"
-  SD_SAGE_COLOR_BASE_BLUE_40_CODE = "blue-40"
-  SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME = "t-sage--color-blue-40"
-  SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#3c82f6"
-  SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50"
-  SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50"
-  SD_SAGE_COLOR_BASE_BLUE_60_HEX = "#2463eb"
-  SD_SAGE_COLOR_BASE_BLUE_60_CODE = "blue-60"
-  SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME = "t-sage--color-blue-60"
-  SD_SAGE_COLOR_BASE_BLUE_70_HEX = "#1c4ed8"
-  SD_SAGE_COLOR_BASE_BLUE_70_CODE = "blue-70"
-  SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME = "t-sage--color-blue-70"
-  SD_SAGE_COLOR_BASE_BLUE_80_HEX = "#1d40ae"
-  SD_SAGE_COLOR_BASE_BLUE_80_CODE = "blue-80"
-  SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME = "t-sage--color-blue-80"
-  SD_SAGE_COLOR_BASE_BLUE_90_HEX = "#1f3a8a"
-  SD_SAGE_COLOR_BASE_BLUE_90_CODE = "blue-90"
-  SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME = "t-sage--color-blue-90"
-  SD_SAGE_COLOR_BASE_BLUE_95_HEX = "#172554"
-  SD_SAGE_COLOR_BASE_BLUE_95_CODE = "blue-95"
-  SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME = "t-sage--color-blue-95"
-  SD_SAGE_COLOR_BASE_GREEN_5_HEX = "#fbfefc"
-  SD_SAGE_COLOR_BASE_GREEN_5_CODE = "green-5"
-  SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME = "t-sage--color-green-5"
-  SD_SAGE_COLOR_BASE_GREEN_10_HEX = "#edfcf2"
-  SD_SAGE_COLOR_BASE_GREEN_10_CODE = "green-10"
-  SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME = "t-sage--color-green-10"
-  SD_SAGE_COLOR_BASE_GREEN_15_HEX = "#d3f8df"
-  SD_SAGE_COLOR_BASE_GREEN_15_CODE = "green-15"
-  SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME = "t-sage--color-green-15"
-  SD_SAGE_COLOR_BASE_GREEN_20_HEX = "#aaf0c4"
-  SD_SAGE_COLOR_BASE_GREEN_20_CODE = "green-20"
-  SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME = "t-sage--color-green-20"
-  SD_SAGE_COLOR_BASE_GREEN_30_HEX = "#73e2a3"
-  SD_SAGE_COLOR_BASE_GREEN_30_CODE = "green-30"
-  SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME = "t-sage--color-green-30"
-  SD_SAGE_COLOR_BASE_GREEN_40_HEX = "#3dcb7f"
-  SD_SAGE_COLOR_BASE_GREEN_40_CODE = "green-40"
-  SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME = "t-sage--color-green-40"
-  SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#17b365"
-  SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50"
-  SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50"
-  SD_SAGE_COLOR_BASE_GREEN_60_HEX = "#079250"
-  SD_SAGE_COLOR_BASE_GREEN_60_CODE = "green-60"
-  SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME = "t-sage--color-green-60"
-  SD_SAGE_COLOR_BASE_GREEN_70_HEX = "#097443"
-  SD_SAGE_COLOR_BASE_GREEN_70_CODE = "green-70"
-  SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME = "t-sage--color-green-70"
-  SD_SAGE_COLOR_BASE_GREEN_80_HEX = "#085c37"
-  SD_SAGE_COLOR_BASE_GREEN_80_CODE = "green-80"
-  SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME = "t-sage--color-green-80"
-  SD_SAGE_COLOR_BASE_GREEN_90_HEX = "#094c2f"
-  SD_SAGE_COLOR_BASE_GREEN_90_CODE = "green-90"
-  SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME = "t-sage--color-green-90"
-  SD_SAGE_COLOR_BASE_GREEN_95_HEX = "#052e1c"
-  SD_SAGE_COLOR_BASE_GREEN_95_CODE = "green-95"
-  SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME = "t-sage--color-green-95"
-  SD_SAGE_COLOR_BASE_MERCURY_5_HEX = "#fffcfa"
-  SD_SAGE_COLOR_BASE_MERCURY_5_CODE = "mercury-5"
-  SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME = "t-sage--color-mercury-5"
-  SD_SAGE_COLOR_BASE_MERCURY_10_HEX = "#fff3ed"
-  SD_SAGE_COLOR_BASE_MERCURY_10_CODE = "mercury-10"
-  SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME = "t-sage--color-mercury-10"
-  SD_SAGE_COLOR_BASE_MERCURY_15_HEX = "#ffe3d4"
-  SD_SAGE_COLOR_BASE_MERCURY_15_CODE = "mercury-15"
-  SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME = "t-sage--color-mercury-15"
-  SD_SAGE_COLOR_BASE_MERCURY_20_HEX = "#ffc3a8"
-  SD_SAGE_COLOR_BASE_MERCURY_20_CODE = "mercury-20"
-  SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME = "t-sage--color-mercury-20"
-  SD_SAGE_COLOR_BASE_MERCURY_30_HEX = "#ff9970"
-  SD_SAGE_COLOR_BASE_MERCURY_30_CODE = "mercury-30"
-  SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME = "t-sage--color-mercury-30"
-  SD_SAGE_COLOR_BASE_MERCURY_40_HEX = "#ff6337"
-  SD_SAGE_COLOR_BASE_MERCURY_40_CODE = "mercury-40"
-  SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME = "t-sage--color-mercury-40"
-  SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#ff3e15"
-  SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50"
-  SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50"
-  SD_SAGE_COLOR_BASE_MERCURY_60_HEX = "#f11f06"
-  SD_SAGE_COLOR_BASE_MERCURY_60_CODE = "mercury-60"
-  SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME = "t-sage--color-mercury-60"
-  SD_SAGE_COLOR_BASE_MERCURY_70_HEX = "#c81307"
-  SD_SAGE_COLOR_BASE_MERCURY_70_CODE = "mercury-70"
-  SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME = "t-sage--color-mercury-70"
-  SD_SAGE_COLOR_BASE_MERCURY_80_HEX = "#9e110e"
-  SD_SAGE_COLOR_BASE_MERCURY_80_CODE = "mercury-80"
-  SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME = "t-sage--color-mercury-80"
-  SD_SAGE_COLOR_BASE_MERCURY_90_HEX = "#7f120f"
-  SD_SAGE_COLOR_BASE_MERCURY_90_CODE = "mercury-90"
-  SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME = "t-sage--color-mercury-90"
-  SD_SAGE_COLOR_BASE_MERCURY_95_HEX = "#450506"
-  SD_SAGE_COLOR_BASE_MERCURY_95_CODE = "mercury-95"
-  SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME = "t-sage--color-mercury-95"
+  SD_SAGE_COLOR_BASE_BLUE_100_HEX = "#eff6ff"
+  SD_SAGE_COLOR_BASE_BLUE_100_CODE = "blue-100"
+  SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME = "t-sage--color-blue-100"
+  SD_SAGE_COLOR_BASE_BLUE_150_HEX = "#dbe9fe"
+  SD_SAGE_COLOR_BASE_BLUE_150_CODE = "blue-150"
+  SD_SAGE_COLOR_BASE_BLUE_150_CLASSNAME = "t-sage--color-blue-150"
+  SD_SAGE_COLOR_BASE_BLUE_200_HEX = "#bfdbfe"
+  SD_SAGE_COLOR_BASE_BLUE_200_CODE = "blue-200"
+  SD_SAGE_COLOR_BASE_BLUE_200_CLASSNAME = "t-sage--color-blue-200"
+  SD_SAGE_COLOR_BASE_BLUE_300_HEX = "#92c5fd"
+  SD_SAGE_COLOR_BASE_BLUE_300_CODE = "blue-300"
+  SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME = "t-sage--color-blue-300"
+  SD_SAGE_COLOR_BASE_BLUE_400_HEX = "#60a5fa"
+  SD_SAGE_COLOR_BASE_BLUE_400_CODE = "blue-400"
+  SD_SAGE_COLOR_BASE_BLUE_400_CLASSNAME = "t-sage--color-blue-400"
+  SD_SAGE_COLOR_BASE_BLUE_500_HEX = "#3c82f6"
+  SD_SAGE_COLOR_BASE_BLUE_500_CODE = "blue-500"
+  SD_SAGE_COLOR_BASE_BLUE_500_CLASSNAME = "t-sage--color-blue-500"
+  SD_SAGE_COLOR_BASE_BLUE_600_HEX = "#2463eb"
+  SD_SAGE_COLOR_BASE_BLUE_600_CODE = "blue-600"
+  SD_SAGE_COLOR_BASE_BLUE_600_CLASSNAME = "t-sage--color-blue-600"
+  SD_SAGE_COLOR_BASE_BLUE_700_HEX = "#1c4ed8"
+  SD_SAGE_COLOR_BASE_BLUE_700_CODE = "blue-700"
+  SD_SAGE_COLOR_BASE_BLUE_700_CLASSNAME = "t-sage--color-blue-700"
+  SD_SAGE_COLOR_BASE_BLUE_800_HEX = "#1d40ae"
+  SD_SAGE_COLOR_BASE_BLUE_800_CODE = "blue-800"
+  SD_SAGE_COLOR_BASE_BLUE_800_CLASSNAME = "t-sage--color-blue-800"
+  SD_SAGE_COLOR_BASE_BLUE_900_HEX = "#1f3a8a"
+  SD_SAGE_COLOR_BASE_BLUE_900_CODE = "blue-900"
+  SD_SAGE_COLOR_BASE_BLUE_900_CLASSNAME = "t-sage--color-blue-900"
+  SD_SAGE_COLOR_BASE_BLUE_950_HEX = "#172554"
+  SD_SAGE_COLOR_BASE_BLUE_950_CODE = "blue-950"
+  SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME = "t-sage--color-blue-950"
+  SD_SAGE_COLOR_BASE_BLUE_050_HEX = "#fafcff"
+  SD_SAGE_COLOR_BASE_BLUE_050_CODE = "blue-050"
+  SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME = "t-sage--color-blue-050"
+  SD_SAGE_COLOR_BASE_GREEN_100_HEX = "#edfcf2"
+  SD_SAGE_COLOR_BASE_GREEN_100_CODE = "green-100"
+  SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME = "t-sage--color-green-100"
+  SD_SAGE_COLOR_BASE_GREEN_150_HEX = "#d3f8df"
+  SD_SAGE_COLOR_BASE_GREEN_150_CODE = "green-150"
+  SD_SAGE_COLOR_BASE_GREEN_150_CLASSNAME = "t-sage--color-green-150"
+  SD_SAGE_COLOR_BASE_GREEN_200_HEX = "#aaf0c4"
+  SD_SAGE_COLOR_BASE_GREEN_200_CODE = "green-200"
+  SD_SAGE_COLOR_BASE_GREEN_200_CLASSNAME = "t-sage--color-green-200"
+  SD_SAGE_COLOR_BASE_GREEN_300_HEX = "#73e2a3"
+  SD_SAGE_COLOR_BASE_GREEN_300_CODE = "green-300"
+  SD_SAGE_COLOR_BASE_GREEN_300_CLASSNAME = "t-sage--color-green-300"
+  SD_SAGE_COLOR_BASE_GREEN_400_HEX = "#3dcb7f"
+  SD_SAGE_COLOR_BASE_GREEN_400_CODE = "green-400"
+  SD_SAGE_COLOR_BASE_GREEN_400_CLASSNAME = "t-sage--color-green-400"
+  SD_SAGE_COLOR_BASE_GREEN_500_HEX = "#17b365"
+  SD_SAGE_COLOR_BASE_GREEN_500_CODE = "green-500"
+  SD_SAGE_COLOR_BASE_GREEN_500_CLASSNAME = "t-sage--color-green-500"
+  SD_SAGE_COLOR_BASE_GREEN_600_HEX = "#079250"
+  SD_SAGE_COLOR_BASE_GREEN_600_CODE = "green-600"
+  SD_SAGE_COLOR_BASE_GREEN_600_CLASSNAME = "t-sage--color-green-600"
+  SD_SAGE_COLOR_BASE_GREEN_700_HEX = "#097443"
+  SD_SAGE_COLOR_BASE_GREEN_700_CODE = "green-700"
+  SD_SAGE_COLOR_BASE_GREEN_700_CLASSNAME = "t-sage--color-green-700"
+  SD_SAGE_COLOR_BASE_GREEN_800_HEX = "#085c37"
+  SD_SAGE_COLOR_BASE_GREEN_800_CODE = "green-800"
+  SD_SAGE_COLOR_BASE_GREEN_800_CLASSNAME = "t-sage--color-green-800"
+  SD_SAGE_COLOR_BASE_GREEN_900_HEX = "#094c2f"
+  SD_SAGE_COLOR_BASE_GREEN_900_CODE = "green-900"
+  SD_SAGE_COLOR_BASE_GREEN_900_CLASSNAME = "t-sage--color-green-900"
+  SD_SAGE_COLOR_BASE_GREEN_950_HEX = "#052e1c"
+  SD_SAGE_COLOR_BASE_GREEN_950_CODE = "green-950"
+  SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME = "t-sage--color-green-950"
+  SD_SAGE_COLOR_BASE_GREEN_050_HEX = "#fbfefc"
+  SD_SAGE_COLOR_BASE_GREEN_050_CODE = "green-050"
+  SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME = "t-sage--color-green-050"
+  SD_SAGE_COLOR_BASE_MERCURY_100_HEX = "#fff3ed"
+  SD_SAGE_COLOR_BASE_MERCURY_100_CODE = "mercury-100"
+  SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME = "t-sage--color-mercury-100"
+  SD_SAGE_COLOR_BASE_MERCURY_150_HEX = "#ffe3d4"
+  SD_SAGE_COLOR_BASE_MERCURY_150_CODE = "mercury-150"
+  SD_SAGE_COLOR_BASE_MERCURY_150_CLASSNAME = "t-sage--color-mercury-150"
+  SD_SAGE_COLOR_BASE_MERCURY_200_HEX = "#ffc3a8"
+  SD_SAGE_COLOR_BASE_MERCURY_200_CODE = "mercury-200"
+  SD_SAGE_COLOR_BASE_MERCURY_200_CLASSNAME = "t-sage--color-mercury-200"
+  SD_SAGE_COLOR_BASE_MERCURY_300_HEX = "#ff9970"
+  SD_SAGE_COLOR_BASE_MERCURY_300_CODE = "mercury-300"
+  SD_SAGE_COLOR_BASE_MERCURY_300_CLASSNAME = "t-sage--color-mercury-300"
+  SD_SAGE_COLOR_BASE_MERCURY_400_HEX = "#ff6337"
+  SD_SAGE_COLOR_BASE_MERCURY_400_CODE = "mercury-400"
+  SD_SAGE_COLOR_BASE_MERCURY_400_CLASSNAME = "t-sage--color-mercury-400"
+  SD_SAGE_COLOR_BASE_MERCURY_500_HEX = "#ff3e15"
+  SD_SAGE_COLOR_BASE_MERCURY_500_CODE = "mercury-500"
+  SD_SAGE_COLOR_BASE_MERCURY_500_CLASSNAME = "t-sage--color-mercury-500"
+  SD_SAGE_COLOR_BASE_MERCURY_600_HEX = "#f11f06"
+  SD_SAGE_COLOR_BASE_MERCURY_600_CODE = "mercury-600"
+  SD_SAGE_COLOR_BASE_MERCURY_600_CLASSNAME = "t-sage--color-mercury-600"
+  SD_SAGE_COLOR_BASE_MERCURY_700_HEX = "#c81307"
+  SD_SAGE_COLOR_BASE_MERCURY_700_CODE = "mercury-700"
+  SD_SAGE_COLOR_BASE_MERCURY_700_CLASSNAME = "t-sage--color-mercury-700"
+  SD_SAGE_COLOR_BASE_MERCURY_800_HEX = "#9e110e"
+  SD_SAGE_COLOR_BASE_MERCURY_800_CODE = "mercury-800"
+  SD_SAGE_COLOR_BASE_MERCURY_800_CLASSNAME = "t-sage--color-mercury-800"
+  SD_SAGE_COLOR_BASE_MERCURY_900_HEX = "#7f120f"
+  SD_SAGE_COLOR_BASE_MERCURY_900_CODE = "mercury-900"
+  SD_SAGE_COLOR_BASE_MERCURY_900_CLASSNAME = "t-sage--color-mercury-900"
+  SD_SAGE_COLOR_BASE_MERCURY_950_HEX = "#450506"
+  SD_SAGE_COLOR_BASE_MERCURY_950_CODE = "mercury-950"
+  SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME = "t-sage--color-mercury-950"
+  SD_SAGE_COLOR_BASE_MERCURY_050_HEX = "#fffcfa"
+  SD_SAGE_COLOR_BASE_MERCURY_050_CODE = "mercury-050"
+  SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME = "t-sage--color-mercury-050"
   SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe"
   SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100"
   SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100"
@@ -159,108 +159,78 @@ module SageDictionary
   SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c"
   SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500"
   SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500"
-  SD_SAGE_COLOR_BASE_YELLOW_5_HEX = "#fffefa"
-  SD_SAGE_COLOR_BASE_YELLOW_5_CODE = "yellow-5"
-  SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME = "t-sage--color-yellow-5"
-  SD_SAGE_COLOR_BASE_YELLOW_10_HEX = "#fffbeb"
-  SD_SAGE_COLOR_BASE_YELLOW_10_CODE = "yellow-10"
-  SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME = "t-sage--color-yellow-10"
-  SD_SAGE_COLOR_BASE_YELLOW_15_HEX = "#fff3c6"
-  SD_SAGE_COLOR_BASE_YELLOW_15_CODE = "yellow-15"
-  SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME = "t-sage--color-yellow-15"
-  SD_SAGE_COLOR_BASE_YELLOW_20_HEX = "#fee589"
-  SD_SAGE_COLOR_BASE_YELLOW_20_CODE = "yellow-20"
-  SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME = "t-sage--color-yellow-20"
-  SD_SAGE_COLOR_BASE_YELLOW_30_HEX = "#fed04b"
-  SD_SAGE_COLOR_BASE_YELLOW_30_CODE = "yellow-30"
-  SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME = "t-sage--color-yellow-30"
-  SD_SAGE_COLOR_BASE_YELLOW_40_HEX = "#fdbb21"
-  SD_SAGE_COLOR_BASE_YELLOW_40_CODE = "yellow-40"
-  SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME = "t-sage--color-yellow-40"
-  SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#f79a0b"
-  SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50"
-  SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50"
-  SD_SAGE_COLOR_BASE_YELLOW_60_HEX = "#db7303"
-  SD_SAGE_COLOR_BASE_YELLOW_60_CODE = "yellow-60"
-  SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME = "t-sage--color-yellow-60"
-  SD_SAGE_COLOR_BASE_YELLOW_70_HEX = "#b64f06"
-  SD_SAGE_COLOR_BASE_YELLOW_70_CODE = "yellow-70"
-  SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME = "t-sage--color-yellow-70"
-  SD_SAGE_COLOR_BASE_YELLOW_80_HEX = "#943d0e"
-  SD_SAGE_COLOR_BASE_YELLOW_80_CODE = "yellow-80"
-  SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME = "t-sage--color-yellow-80"
-  SD_SAGE_COLOR_BASE_YELLOW_90_HEX = "#79330e"
-  SD_SAGE_COLOR_BASE_YELLOW_90_CODE = "yellow-90"
-  SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME = "t-sage--color-yellow-90"
-  SD_SAGE_COLOR_BASE_YELLOW_95_HEX = "#451902"
-  SD_SAGE_COLOR_BASE_YELLOW_95_CODE = "yellow-95"
-  SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME = "t-sage--color-yellow-95"
-  SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fff3c6"
+  SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fffbeb"
   SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100"
   SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100"
-  SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fed04b"
+  SD_SAGE_COLOR_BASE_YELLOW_150_HEX = "#fff3c6"
+  SD_SAGE_COLOR_BASE_YELLOW_150_CODE = "yellow-150"
+  SD_SAGE_COLOR_BASE_YELLOW_150_CLASSNAME = "t-sage--color-yellow-150"
+  SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fee589"
   SD_SAGE_COLOR_BASE_YELLOW_200_CODE = "yellow-200"
   SD_SAGE_COLOR_BASE_YELLOW_200_CLASSNAME = "t-sage--color-yellow-200"
-  SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fdbb21"
+  SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fed04b"
   SD_SAGE_COLOR_BASE_YELLOW_300_CODE = "yellow-300"
   SD_SAGE_COLOR_BASE_YELLOW_300_CLASSNAME = "t-sage--color-yellow-300"
-  SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#db7303"
+  SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#fdbb21"
   SD_SAGE_COLOR_BASE_YELLOW_400_CODE = "yellow-400"
   SD_SAGE_COLOR_BASE_YELLOW_400_CLASSNAME = "t-sage--color-yellow-400"
-  SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#451902"
+  SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#f79a0b"
   SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500"
   SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500"
-  SD_SAGE_COLOR_BASE_RED_5_HEX = "#fffafa"
-  SD_SAGE_COLOR_BASE_RED_5_CODE = "red-5"
-  SD_SAGE_COLOR_BASE_RED_5_CLASSNAME = "t-sage--color-red-5"
-  SD_SAGE_COLOR_BASE_RED_10_HEX = "#fef2f2"
-  SD_SAGE_COLOR_BASE_RED_10_CODE = "red-10"
-  SD_SAGE_COLOR_BASE_RED_10_CLASSNAME = "t-sage--color-red-10"
-  SD_SAGE_COLOR_BASE_RED_15_HEX = "#fee2e1"
-  SD_SAGE_COLOR_BASE_RED_15_CODE = "red-15"
-  SD_SAGE_COLOR_BASE_RED_15_CLASSNAME = "t-sage--color-red-15"
-  SD_SAGE_COLOR_BASE_RED_20_HEX = "#fecaca"
-  SD_SAGE_COLOR_BASE_RED_20_CODE = "red-20"
-  SD_SAGE_COLOR_BASE_RED_20_CLASSNAME = "t-sage--color-red-20"
-  SD_SAGE_COLOR_BASE_RED_30_HEX = "#fda5a5"
-  SD_SAGE_COLOR_BASE_RED_30_CODE = "red-30"
-  SD_SAGE_COLOR_BASE_RED_30_CLASSNAME = "t-sage--color-red-30"
-  SD_SAGE_COLOR_BASE_RED_40_HEX = "#f87171"
-  SD_SAGE_COLOR_BASE_RED_40_CODE = "red-40"
-  SD_SAGE_COLOR_BASE_RED_40_CLASSNAME = "t-sage--color-red-40"
-  SD_SAGE_COLOR_BASE_RED_50_HEX = "#ef4444"
-  SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50"
-  SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50"
-  SD_SAGE_COLOR_BASE_RED_60_HEX = "#dc2625"
-  SD_SAGE_COLOR_BASE_RED_60_CODE = "red-60"
-  SD_SAGE_COLOR_BASE_RED_60_CLASSNAME = "t-sage--color-red-60"
-  SD_SAGE_COLOR_BASE_RED_70_HEX = "#b91c1b"
-  SD_SAGE_COLOR_BASE_RED_70_CODE = "red-70"
-  SD_SAGE_COLOR_BASE_RED_70_CLASSNAME = "t-sage--color-red-70"
-  SD_SAGE_COLOR_BASE_RED_80_HEX = "#991b1b"
-  SD_SAGE_COLOR_BASE_RED_80_CODE = "red-80"
-  SD_SAGE_COLOR_BASE_RED_80_CLASSNAME = "t-sage--color-red-80"
-  SD_SAGE_COLOR_BASE_RED_90_HEX = "#7f1c1d"
-  SD_SAGE_COLOR_BASE_RED_90_CODE = "red-90"
-  SD_SAGE_COLOR_BASE_RED_90_CLASSNAME = "t-sage--color-red-90"
-  SD_SAGE_COLOR_BASE_RED_95_HEX = "#572627"
-  SD_SAGE_COLOR_BASE_RED_95_CODE = "red-95"
-  SD_SAGE_COLOR_BASE_RED_95_CLASSNAME = "t-sage--color-red-95"
-  SD_SAGE_COLOR_BASE_RED_100_HEX = "#fee2e1"
+  SD_SAGE_COLOR_BASE_YELLOW_600_HEX = "#db7303"
+  SD_SAGE_COLOR_BASE_YELLOW_600_CODE = "yellow-60"
+  SD_SAGE_COLOR_BASE_YELLOW_600_CLASSNAME = "t-sage--color-yellow-600"
+  SD_SAGE_COLOR_BASE_YELLOW_700_HEX = "#b64f06"
+  SD_SAGE_COLOR_BASE_YELLOW_700_CODE = "yellow-700"
+  SD_SAGE_COLOR_BASE_YELLOW_700_CLASSNAME = "t-sage--color-yellow-700"
+  SD_SAGE_COLOR_BASE_YELLOW_800_HEX = "#943d0e"
+  SD_SAGE_COLOR_BASE_YELLOW_800_CODE = "yellow-800"
+  SD_SAGE_COLOR_BASE_YELLOW_800_CLASSNAME = "t-sage--color-yellow-800"
+  SD_SAGE_COLOR_BASE_YELLOW_900_HEX = "#79330e"
+  SD_SAGE_COLOR_BASE_YELLOW_900_CODE = "yellow-900"
+  SD_SAGE_COLOR_BASE_YELLOW_900_CLASSNAME = "t-sage--color-yellow-900"
+  SD_SAGE_COLOR_BASE_YELLOW_950_HEX = "#451902"
+  SD_SAGE_COLOR_BASE_YELLOW_950_CODE = "yellow-950"
+  SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME = "t-sage--color-yellow-950"
+  SD_SAGE_COLOR_BASE_YELLOW_050_HEX = "#fffefa"
+  SD_SAGE_COLOR_BASE_YELLOW_050_CODE = "yellow-050"
+  SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME = "t-sage--color-yellow-050"
+  SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2"
   SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100"
   SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100"
-  SD_SAGE_COLOR_BASE_RED_200_HEX = "#fda5a5"
+  SD_SAGE_COLOR_BASE_RED_150_HEX = "#fee2e1"
+  SD_SAGE_COLOR_BASE_RED_150_CODE = "red-150"
+  SD_SAGE_COLOR_BASE_RED_150_CLASSNAME = "t-sage--color-red-150"
+  SD_SAGE_COLOR_BASE_RED_200_HEX = "#fecaca"
   SD_SAGE_COLOR_BASE_RED_200_CODE = "red-200"
   SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200"
-  SD_SAGE_COLOR_BASE_RED_300_HEX = "#ef4444"
+  SD_SAGE_COLOR_BASE_RED_300_HEX = "#fda5a5"
   SD_SAGE_COLOR_BASE_RED_300_CODE = "red-300"
   SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300"
-  SD_SAGE_COLOR_BASE_RED_400_HEX = "#991b1b"
+  SD_SAGE_COLOR_BASE_RED_400_HEX = "#f87171"
   SD_SAGE_COLOR_BASE_RED_400_CODE = "red-400"
   SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400"
-  SD_SAGE_COLOR_BASE_RED_500_HEX = "#572627"
+  SD_SAGE_COLOR_BASE_RED_500_HEX = "#ef4444"
   SD_SAGE_COLOR_BASE_RED_500_CODE = "red-500"
   SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500"
+  SD_SAGE_COLOR_BASE_RED_600_HEX = "#dc2625"
+  SD_SAGE_COLOR_BASE_RED_600_CODE = "red-600"
+  SD_SAGE_COLOR_BASE_RED_600_CLASSNAME = "t-sage--color-red-600"
+  SD_SAGE_COLOR_BASE_RED_700_HEX = "#b91c1b"
+  SD_SAGE_COLOR_BASE_RED_700_CODE = "red-700"
+  SD_SAGE_COLOR_BASE_RED_700_CLASSNAME = "t-sage--color-red-700"
+  SD_SAGE_COLOR_BASE_RED_800_HEX = "#991b1b"
+  SD_SAGE_COLOR_BASE_RED_800_CODE = "red-800"
+  SD_SAGE_COLOR_BASE_RED_800_CLASSNAME = "t-sage--color-red-800"
+  SD_SAGE_COLOR_BASE_RED_900_HEX = "#7f1c1d"
+  SD_SAGE_COLOR_BASE_RED_900_CODE = "red-900"
+  SD_SAGE_COLOR_BASE_RED_900_CLASSNAME = "t-sage--color-red-900"
+  SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627"
+  SD_SAGE_COLOR_BASE_RED_950_CODE = "red-950"
+  SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-950"
+  SD_SAGE_COLOR_BASE_RED_050_HEX = "#fffafa"
+  SD_SAGE_COLOR_BASE_RED_050_CODE = "red-050"
+  SD_SAGE_COLOR_BASE_RED_050_CLASSNAME = "t-sage--color-red-050"
   SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4"
   SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100"
   SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100"
@@ -276,57 +246,42 @@ module SageDictionary
   SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506"
   SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500"
   SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500"
-  SD_SAGE_COLOR_BASE_PURPLE_5_HEX = "#fafbff"
-  SD_SAGE_COLOR_BASE_PURPLE_5_CODE = "purple-5"
-  SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME = "t-sage--color-purple-5"
-  SD_SAGE_COLOR_BASE_PURPLE_10_HEX = "#edf1ff"
-  SD_SAGE_COLOR_BASE_PURPLE_10_CODE = "purple-10"
-  SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME = "t-sage--color-purple-10"
-  SD_SAGE_COLOR_BASE_PURPLE_15_HEX = "#e0e4ff"
-  SD_SAGE_COLOR_BASE_PURPLE_15_CODE = "purple-15"
-  SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME = "t-sage--color-purple-15"
-  SD_SAGE_COLOR_BASE_PURPLE_20_HEX = "#c7cdfe"
-  SD_SAGE_COLOR_BASE_PURPLE_20_CODE = "purple-20"
-  SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME = "t-sage--color-purple-20"
-  SD_SAGE_COLOR_BASE_PURPLE_30_HEX = "#a3acfd"
-  SD_SAGE_COLOR_BASE_PURPLE_30_CODE = "purple-30"
-  SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME = "t-sage--color-purple-30"
-  SD_SAGE_COLOR_BASE_PURPLE_40_HEX = "#8081f9"
-  SD_SAGE_COLOR_BASE_PURPLE_40_CODE = "purple-40"
-  SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME = "t-sage--color-purple-40"
-  SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#6a62f2"
-  SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50"
-  SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50"
-  SD_SAGE_COLOR_BASE_PURPLE_60_HEX = "#533be5"
-  SD_SAGE_COLOR_BASE_PURPLE_60_CODE = "purple-60"
-  SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME = "t-sage--color-purple-60"
-  SD_SAGE_COLOR_BASE_PURPLE_70_HEX = "#4f37cb"
-  SD_SAGE_COLOR_BASE_PURPLE_70_CODE = "purple-70"
-  SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME = "t-sage--color-purple-70"
-  SD_SAGE_COLOR_BASE_PURPLE_80_HEX = "#402fa4"
-  SD_SAGE_COLOR_BASE_PURPLE_80_CODE = "purple-80"
-  SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME = "t-sage--color-purple-80"
-  SD_SAGE_COLOR_BASE_PURPLE_90_HEX = "#372d82"
-  SD_SAGE_COLOR_BASE_PURPLE_90_CODE = "purple-90"
-  SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME = "t-sage--color-purple-90"
-  SD_SAGE_COLOR_BASE_PURPLE_95_HEX = "#221b4b"
-  SD_SAGE_COLOR_BASE_PURPLE_95_CODE = "purple-95"
-  SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME = "t-sage--color-purple-95"
-  SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#e0e4ff"
+  SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#edf1ff"
   SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100"
   SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100"
-  SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#a3acfd"
+  SD_SAGE_COLOR_BASE_PURPLE_150_HEX = "#e0e4ff"
+  SD_SAGE_COLOR_BASE_PURPLE_150_CODE = "purple-150"
+  SD_SAGE_COLOR_BASE_PURPLE_150_CLASSNAME = "t-sage--color-purple-150"
+  SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#c7cdfe"
   SD_SAGE_COLOR_BASE_PURPLE_200_CODE = "purple-200"
   SD_SAGE_COLOR_BASE_PURPLE_200_CLASSNAME = "t-sage--color-purple-200"
-  SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#533be5"
+  SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#a3acfd"
   SD_SAGE_COLOR_BASE_PURPLE_300_CODE = "purple-300"
   SD_SAGE_COLOR_BASE_PURPLE_300_CLASSNAME = "t-sage--color-purple-300"
-  SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#402fa4"
+  SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#8081f9"
   SD_SAGE_COLOR_BASE_PURPLE_400_CODE = "purple-400"
   SD_SAGE_COLOR_BASE_PURPLE_400_CLASSNAME = "t-sage--color-purple-400"
-  SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#221b4b"
+  SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#6a62f2"
   SD_SAGE_COLOR_BASE_PURPLE_500_CODE = "purple-500"
   SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME = "t-sage--color-purple-500"
+  SD_SAGE_COLOR_BASE_PURPLE_600_HEX = "#533be5"
+  SD_SAGE_COLOR_BASE_PURPLE_600_CODE = "purple-600"
+  SD_SAGE_COLOR_BASE_PURPLE_600_CLASSNAME = "t-sage--color-purple-600"
+  SD_SAGE_COLOR_BASE_PURPLE_700_HEX = "#4f37cb"
+  SD_SAGE_COLOR_BASE_PURPLE_700_CODE = "purple-700"
+  SD_SAGE_COLOR_BASE_PURPLE_700_CLASSNAME = "t-sage--color-purple-700"
+  SD_SAGE_COLOR_BASE_PURPLE_800_HEX = "#402fa4"
+  SD_SAGE_COLOR_BASE_PURPLE_800_CODE = "purple-800"
+  SD_SAGE_COLOR_BASE_PURPLE_800_CLASSNAME = "t-sage--color-purple-800"
+  SD_SAGE_COLOR_BASE_PURPLE_900_HEX = "#372d82"
+  SD_SAGE_COLOR_BASE_PURPLE_900_CODE = "purple-900"
+  SD_SAGE_COLOR_BASE_PURPLE_900_CLASSNAME = "t-sage--color-purple-900"
+  SD_SAGE_COLOR_BASE_PURPLE_950_HEX = "#221b4b"
+  SD_SAGE_COLOR_BASE_PURPLE_950_CODE = "purple-950"
+  SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME = "t-sage--color-purple-950"
+  SD_SAGE_COLOR_BASE_PURPLE_050_HEX = "#fafbff"
+  SD_SAGE_COLOR_BASE_PURPLE_050_CODE = "purple-050"
+  SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME = "t-sage--color-purple-050"
   SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180"
   SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100"
   SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100"
@@ -342,57 +297,42 @@ module SageDictionary
   SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19"
   SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500"
   SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500"
-  SD_SAGE_COLOR_BASE_GREY_5_HEX = "#fcfcfc"
-  SD_SAGE_COLOR_BASE_GREY_5_CODE = "grey-5"
-  SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME = "t-sage--color-grey-5"
-  SD_SAGE_COLOR_BASE_GREY_10_HEX = "#f8f8f8"
-  SD_SAGE_COLOR_BASE_GREY_10_CODE = "grey-10"
-  SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME = "t-sage--color-grey-10"
-  SD_SAGE_COLOR_BASE_GREY_15_HEX = "#f0f0f0"
-  SD_SAGE_COLOR_BASE_GREY_15_CODE = "grey-15"
-  SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME = "t-sage--color-grey-15"
-  SD_SAGE_COLOR_BASE_GREY_20_HEX = "#e4e4e4"
-  SD_SAGE_COLOR_BASE_GREY_20_CODE = "grey-20"
-  SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME = "t-sage--color-grey-20"
-  SD_SAGE_COLOR_BASE_GREY_30_HEX = "#d2d1d1"
-  SD_SAGE_COLOR_BASE_GREY_30_CODE = "grey-30"
-  SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME = "t-sage--color-grey-30"
-  SD_SAGE_COLOR_BASE_GREY_40_HEX = "#bbbab9"
-  SD_SAGE_COLOR_BASE_GREY_40_CODE = "grey-40"
-  SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME = "t-sage--color-grey-40"
-  SD_SAGE_COLOR_BASE_GREY_50_HEX = "#9b9a98"
-  SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50"
-  SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50"
-  SD_SAGE_COLOR_BASE_GREY_60_HEX = "#828180"
-  SD_SAGE_COLOR_BASE_GREY_60_CODE = "grey-60"
-  SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME = "t-sage--color-grey-60"
-  SD_SAGE_COLOR_BASE_GREY_70_HEX = "#6c6a69"
-  SD_SAGE_COLOR_BASE_GREY_70_CODE = "grey-70"
-  SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME = "t-sage--color-grey-70"
-  SD_SAGE_COLOR_BASE_GREY_80_HEX = "#4d4d4c"
-  SD_SAGE_COLOR_BASE_GREY_80_CODE = "grey-80"
-  SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME = "t-sage--color-grey-80"
-  SD_SAGE_COLOR_BASE_GREY_90_HEX = "#343332"
-  SD_SAGE_COLOR_BASE_GREY_90_CODE = "grey-90"
-  SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME = "t-sage--color-grey-90"
-  SD_SAGE_COLOR_BASE_GREY_95_HEX = "#1a1a19"
-  SD_SAGE_COLOR_BASE_GREY_95_CODE = "grey-95"
-  SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME = "t-sage--color-grey-95"
   SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8"
   SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100"
   SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100"
-  SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f0f0f0"
+  SD_SAGE_COLOR_BASE_GREY_150_HEX = "#f0f0f0"
+  SD_SAGE_COLOR_BASE_GREY_150_CODE = "grey-15"
+  SD_SAGE_COLOR_BASE_GREY_150_CLASSNAME = "t-sage--color-grey-150"
+  SD_SAGE_COLOR_BASE_GREY_200_HEX = "#e4e4e4"
   SD_SAGE_COLOR_BASE_GREY_200_CODE = "grey-200"
   SD_SAGE_COLOR_BASE_GREY_200_CLASSNAME = "t-sage--color-grey-200"
-  SD_SAGE_COLOR_BASE_GREY_300_HEX = "#e4e4e4"
+  SD_SAGE_COLOR_BASE_GREY_300_HEX = "#d2d1d1"
   SD_SAGE_COLOR_BASE_GREY_300_CODE = "grey-300"
   SD_SAGE_COLOR_BASE_GREY_300_CLASSNAME = "t-sage--color-grey-300"
-  SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d2d1d1"
+  SD_SAGE_COLOR_BASE_GREY_400_HEX = "#bbbab9"
   SD_SAGE_COLOR_BASE_GREY_400_CODE = "grey-400"
   SD_SAGE_COLOR_BASE_GREY_400_CLASSNAME = "t-sage--color-grey-400"
   SD_SAGE_COLOR_BASE_GREY_500_HEX = "#9b9a98"
   SD_SAGE_COLOR_BASE_GREY_500_CODE = "grey-500"
   SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME = "t-sage--color-grey-500"
+  SD_SAGE_COLOR_BASE_GREY_600_HEX = "#828180"
+  SD_SAGE_COLOR_BASE_GREY_600_CODE = "grey-600"
+  SD_SAGE_COLOR_BASE_GREY_600_CLASSNAME = "t-sage--color-grey-600"
+  SD_SAGE_COLOR_BASE_GREY_700_HEX = "#6c6a69"
+  SD_SAGE_COLOR_BASE_GREY_700_CODE = "grey-700"
+  SD_SAGE_COLOR_BASE_GREY_700_CLASSNAME = "t-sage--color-grey-700"
+  SD_SAGE_COLOR_BASE_GREY_800_HEX = "#4d4d4c"
+  SD_SAGE_COLOR_BASE_GREY_800_CODE = "grey-800"
+  SD_SAGE_COLOR_BASE_GREY_800_CLASSNAME = "t-sage--color-grey-800"
+  SD_SAGE_COLOR_BASE_GREY_900_HEX = "#343332"
+  SD_SAGE_COLOR_BASE_GREY_900_CODE = "grey-900"
+  SD_SAGE_COLOR_BASE_GREY_900_CLASSNAME = "t-sage--color-grey-900"
+  SD_SAGE_COLOR_BASE_GREY_950_HEX = "#1a1a19"
+  SD_SAGE_COLOR_BASE_GREY_950_CODE = "grey-950"
+  SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME = "t-sage--color-grey-950"
+  SD_SAGE_COLOR_BASE_GREY_050_HEX = "#fcfcfc"
+  SD_SAGE_COLOR_BASE_GREY_050_CODE = "grey-050"
+  SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME = "t-sage--color-grey-050"
   SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff"
   SD_SAGE_COLOR_BASE_WHITE_100_CODE = "white-100"
   SD_SAGE_COLOR_BASE_WHITE_100_CLASSNAME = "t-sage--color-white-100"
@@ -429,189 +369,189 @@ module SageDictionary
   #
   SD_SAGE_COLOR = {
     "BLUE": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_BLUE_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_BLUE_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME,
+      "100": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_100_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_100_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME,
+      },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_150_CLASSNAME,
+      },
+      "200": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_200_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_200_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_200_CLASSNAME,
+      },
+      "300": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_300_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_300_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME,
+      },
+      "400": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_400_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_400_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_400_CLASSNAME,
+      },
+      "500": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_500_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_500_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_500_CLASSNAME,
+      },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_BLUE_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_BLUE_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME,
       },
     },
     "GREEN": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_GREEN_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREEN_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME,
+      "100": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_100_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_100_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME,
+      },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_150_CLASSNAME,
+      },
+      "200": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_200_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_200_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_200_CLASSNAME,
+      },
+      "300": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_300_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_300_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_300_CLASSNAME,
+      },
+      "400": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_400_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_400_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_400_CLASSNAME,
+      },
+      "500": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_500_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_500_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_500_CLASSNAME,
+      },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_GREEN_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREEN_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME,
       },
     },
     "MERCURY": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_MERCURY_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_MERCURY_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME,
+      "100": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_100_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_100_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME,
+      },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_150_CLASSNAME,
+      },
+      "200": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_200_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_200_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_200_CLASSNAME,
+      },
+      "300": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_300_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_300_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_300_CLASSNAME,
+      },
+      "400": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_400_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_400_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_400_CLASSNAME,
+      },
+      "500": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_500_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_500_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_500_CLASSNAME,
+      },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_MERCURY_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_MERCURY_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME,
       },
     },
     "PRIMARY": {
@@ -669,71 +609,16 @@ module SageDictionary
       },
     },
     "YELLOW": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME,
-      },
       "100": {
         "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX,
         "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME,
       },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_150_CLASSNAME,
+      },
       "200": {
         "HEX": SD_SAGE_COLOR_BASE_YELLOW_200_HEX,
         "CODE": SD_SAGE_COLOR_BASE_YELLOW_200_CODE,
@@ -754,73 +639,48 @@ module SageDictionary
         "CODE": SD_SAGE_COLOR_BASE_YELLOW_500_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME,
       },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_YELLOW_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_YELLOW_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME,
+      },
     },
     "RED": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_RED_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME,
-      },
       "100": {
         "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX,
         "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_RED_100_CLASSNAME,
       },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_150_CLASSNAME,
+      },
       "200": {
         "HEX": SD_SAGE_COLOR_BASE_RED_200_HEX,
         "CODE": SD_SAGE_COLOR_BASE_RED_200_CODE,
@@ -841,6 +701,36 @@ module SageDictionary
         "CODE": SD_SAGE_COLOR_BASE_RED_500_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_RED_500_CLASSNAME,
       },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_RED_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_RED_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_RED_050_CLASSNAME,
+      },
     },
     "ORANGE": {
       "100": {
@@ -870,71 +760,16 @@ module SageDictionary
       },
     },
     "PURPLE": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME,
-      },
       "100": {
         "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX,
         "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME,
       },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_150_CLASSNAME,
+      },
       "200": {
         "HEX": SD_SAGE_COLOR_BASE_PURPLE_200_HEX,
         "CODE": SD_SAGE_COLOR_BASE_PURPLE_200_CODE,
@@ -955,6 +790,36 @@ module SageDictionary
         "CODE": SD_SAGE_COLOR_BASE_PURPLE_500_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME,
       },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_PURPLE_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_PURPLE_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME,
+      },
     },
     "CHARCOAL": {
       "100": {
@@ -984,71 +849,16 @@ module SageDictionary
       },
     },
     "GREY": {
-      "5": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME,
-      },
-      "10": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME,
-      },
-      "15": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME,
-      },
-      "20": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME,
-      },
-      "30": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME,
-      },
-      "40": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME,
-      },
-      "50": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME,
-      },
-      "60": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME,
-      },
-      "70": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME,
-      },
-      "80": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME,
-      },
-      "90": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME,
-      },
-      "95": {
-        "HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX,
-        "CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE,
-        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME,
-      },
       "100": {
         "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX,
         "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME,
       },
+      "150": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_150_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_150_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_150_CLASSNAME,
+      },
       "200": {
         "HEX": SD_SAGE_COLOR_BASE_GREY_200_HEX,
         "CODE": SD_SAGE_COLOR_BASE_GREY_200_CODE,
@@ -1069,6 +879,36 @@ module SageDictionary
         "CODE": SD_SAGE_COLOR_BASE_GREY_500_CODE,
         "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME,
       },
+      "600": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_600_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_600_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_600_CLASSNAME,
+      },
+      "700": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_700_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_700_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_700_CLASSNAME,
+      },
+      "800": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_800_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_800_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_800_CLASSNAME,
+      },
+      "900": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_900_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_900_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_900_CLASSNAME,
+      },
+      "950": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_950_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_950_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME,
+      },
+      "050": {
+        "HEX": SD_SAGE_COLOR_BASE_GREY_050_HEX,
+        "CODE": SD_SAGE_COLOR_BASE_GREY_050_CODE,
+        "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME,
+      },
     },
     "WHITE": {
       "100": {
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb
index cced0815b2..12a78a4152 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb
@@ -32,7 +32,7 @@ is_progressbar = component.is_progressbar.present? && component.is_progressbar
           <% if is_progressbar %>
             <pds-icon
               class="sage-breadcrumbs__icon <%= SageClassnames::SPACERS::XS_LEFT %> <%= SageClassnames::SPACERS::XS_RIGHT %>"
-              color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>"
+              color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>"
               name="right-small"
               size="24px"
             ></pds-icon>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
index fd321c5ffc..af93f63862 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
@@ -57,7 +57,7 @@
   <pds-icon
     aria-hidden="true"
     class="sage-select__arrow"
-    color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_100] %>"
+    color="<%= SageTokens::COLOR_PALETTE[:GREY_600] %>"
     name="caret-down"
   ></pds-icon>
   <% if component.message.present? %>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb
index 4f23ed80a4..e410dd040d 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb
@@ -37,7 +37,7 @@
 
       <% if component.subheader %>
         <%= sage_component SageCardRow, { grid_template: "te" } do %>
-          <h2 class="<%= "#{SageClassnames::TYPE::BODY} #{SageClassnames::TYPE_COLORS::CHARCOAL_300}" %>">
+          <h2 class="<%= "#{SageClassnames::TYPE::BODY} #{SageClassnames::TYPE_COLORS::GREY_800}" %>">
             <%= component.subheader %>
           </h2>
 
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb
index 739d1dddab..5a85eed60b 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb
@@ -13,7 +13,7 @@
     <%= component.label_text %>
   </label>
   <div class="sage-search__field-wrapper">
-    <pds-icon name="search-small" class="<%= SageClassnames::SPACERS::SM_LEFT %>" color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>" style="z-index:2"></pds-icon>
+    <pds-icon name="search-small" class="<%= SageClassnames::SPACERS::SM_LEFT %>" color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>" style="z-index:2"></pds-icon>
     <input
       id="<%= component.id %>"
       class="sage-search__input"
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb
index b27462e37e..924a1b65cd 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb
@@ -8,7 +8,7 @@
   <%= "id=#{component.id}" if component.id %>
   <%= component.generated_html_attributes.html_safe %>
 >
-  <pds-icon name="handle-2-vertical" color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>"></pds-icon>
+  <pds-icon name="handle-2-vertical" color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>"></pds-icon>
   <% if component.image.present? %>
     <div class="sage-sortable__item-image">
       <%= image_tag component.image, alt: "Cover for #{component.title}" %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index 354bb2fe1d..f22894dc2d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -9,42 +9,42 @@
 // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx`
 //
 $-alert-background-colors: (
-  default: sage-color(grey, 300),
-  draft: sage-color(grey, 300),
+  default: sage-color(grey, 200),
+  draft: sage-color(grey, 200),
   info: sage-color(primary, 100),
   published: sage-color(sage, 100),
   success: sage-color(sage, 100),
-  warning: sage-color(yellow, 100),
-  approaching: sage-color(yellow, 100),
+  warning: sage-color(yellow, 150),
+  approaching: sage-color(yellow, 150),
   reached: sage-color(orange, 100),
-  exceeded: sage-color(red, 100),
-  danger: sage-color(red, 100),
+  exceeded: sage-color(red, 150),
+  danger: sage-color(red, 150),
 );
 
 $-alert-icon-colors: (
-  default: sage-color(charcoal, 200),
-  draft: sage-color(charcoal, 200),
+  default: sage-color(grey, 700),
+  draft: sage-color(grey, 700),
   info: sage-color(primary, 300),
   published: sage-color(sage, 300),
   success: sage-color(sage, 300),
-  warning: sage-color(yellow, 400),
-  approaching: sage-color(yellow, 400),
+  warning: sage-color(yellow, 600),
+  approaching: sage-color(yellow, 600),
   reached: sage-color(orange, 400),
-  exceeded: sage-color(red, 300),
-  danger: sage-color(red, 300),
+  exceeded: sage-color(red, 500),
+  danger: sage-color(red, 500),
 );
 
 $-alert-border-colors: (
-  default: sage-color(grey, 30),
-  draft: sage-color(grey, 30),
-  info: sage-color(blue, 30),
-  published: sage-color(green, 30),
-  success: sage-color(green, 30),
-  warning: sage-color(yellow, 30),
-  approaching: sage-color(yellow, 30),
-  reached: sage-color(mercury, 30),
-  exceeded: sage-color(red, 30),
-  danger: sage-color(red, 30),
+  default: sage-color(grey, 300),
+  draft: sage-color(grey, 300),
+  info: sage-color(blue, 300),
+  published: sage-color(green, 300),
+  success: sage-color(green, 300),
+  warning: sage-color(yellow, 300),
+  approaching: sage-color(yellow, 300),
+  reached: sage-color(mercury, 300),
+  exceeded: sage-color(red, 300),
+  danger: sage-color(red, 300),
 );
 
 .sage-alert {
@@ -54,7 +54,7 @@ $-alert-border-colors: (
   gap: sage-spacing(sm);
   padding: sage-spacing();
   margin-bottom: sage-spacing();
-  border: 1px solid sage-color(grey, 30);
+  border: 1px solid sage-color(grey, 300);
   border-radius: sage-border(radius-large);
 
   .sage-frame > &,
@@ -119,7 +119,7 @@ $-alert-border-colors: (
 
 .sage-alert__title {
   @extend %t-sage-heading-5;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
 }
 
 .sage-alert__title--add-on {
@@ -164,16 +164,16 @@ $-alert-border-colors: (
     @extend %t-sage-body-med;
     @include sage-focus-outline($outline-offset-inline: 4px);
 
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     text-decoration: none;
 
     &:hover {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
       text-decoration: underline;
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(sage-color(purple, 30));
+      @include sage-focus-outline--update-color(sage-color(purple, 300));
     }
   }
 
@@ -191,16 +191,16 @@ $-alert-border-colors: (
   a:not([class*="sage-"]) {
     @include sage-focus-outline($outline-offset-inline: 4px);
 
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     text-decoration: underline;
 
     &:hover {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
       text-decoration: none;
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(sage-color(purple, 30));
+      @include sage-focus-outline--update-color(sage-color(purple, 300));
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss
index 21c8badb74..a7f34a78b4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss
@@ -8,9 +8,9 @@
 $-assistant-height: $sage-assistant-height;
 $-assistant-branding-height: rem(20px);
 $-assistant-search-height: rem(40px);
-$-assistant-search-bg-color: sage-color(grey, 300);
+$-assistant-search-bg-color: sage-color(grey, 200);
 $-assistant-search-bg-opacity: 0.1;
-$-assistant-search-placeholder-color: sage-color(grey, 400);
+$-assistant-search-placeholder-color: sage-color(grey, 300);
 $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
 
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index f904c0e384..a8dc43bf7e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -9,32 +9,32 @@ $-avatar-min-size: rem(32px);
 $-avatar-max-size: rem(128px);
 $-avatar-ring-colors: (
   charcoal: (
-    main: sage-color(charcoal, 500),
-    bg: sage-color(grey, 300)
+    main: sage-color(grey, 950),
+    bg: sage-color(grey, 200)
   ),
   grey: (
-    main: sage-color(charcoal, 500),
-    bg: sage-color(grey, 300)
+    main: sage-color(grey, 950),
+    bg: sage-color(grey, 200)
   ),
   purple: (
-    main: sage-color(purple, 300),
-    bg: sage-color(purple, 100)
+    main: sage-color(purple, 600),
+    bg: sage-color(purple, 150)
   ),
   sage: (
     main: sage-color(sage, 300),
     bg: sage-color(sage, 100)
   ),
   yellow: (
-    main: sage-color(yellow, 300),
-    bg: sage-color(yellow, 100)
+    main: sage-color(yellow, 400),
+    bg: sage-color(yellow, 150)
   ),
   orange: (
     main: sage-color(orange, 300),
     bg: sage-color(orange, 100)
   ),
   red: (
-    main: sage-color(red, 300),
-    bg: sage-color(red, 100)
+    main: sage-color(red, 500),
+    bg: sage-color(red, 150)
   )
 );
 $-avatar-tile-size: rem(216px);
diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss
index 4ca5bf32bf..96bfd7e440 100644
--- a/packages/sage-assets/lib/stylesheets/components/_badge.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss
@@ -41,7 +41,7 @@ $-badge-statuses: (
   max-width: 100%;
   min-height: $-badge-min-height;
   padding: $-badge-padding;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   white-space: nowrap;
   background-color: transparent;
   border-radius: $-badge-border-radius;
@@ -102,7 +102,7 @@ $-badge-statuses: (
 
     .sage-badge__value {
       @include sage-focus-outline($outline-offset-block: -1, $outline-offset-inline: -1);
-      @include sage-focus-outline--update-color(sage-color(purple, 30));
+      @include sage-focus-outline--update-color(sage-color(purple, 300));
 
       position: static;
       padding-right: rem(24px);
diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss
index 4f8d4fd62e..bc052abb89 100644
--- a/packages/sage-assets/lib/stylesheets/components/_banner.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss
@@ -14,21 +14,21 @@ $-banner-colors: (
     icon: "flag",
   ),
   secondary: (
-    background: sage-color(grey, 300),
-    text: sage-color(charcoal, 500),
-    text-hover: sage-color(charcoal, 300),
+    background: sage-color(grey, 200),
+    text: sage-color(grey, 950),
+    text-hover: sage-color(grey, 800),
     icon: "info-circle",
   ),
   warning: (
-    background: sage-color(yellow, 200),
-    text: sage-color(charcoal, 500),
-    text-hover: sage-color(charcoal, 300),
+    background: sage-color(yellow, 300),
+    text: sage-color(grey, 950),
+    text-hover: sage-color(grey, 800),
     icon: "warning",
   ),
   danger: (
-    background: sage-color(red, 300),
+    background: sage-color(red, 500),
     text: sage-color(white),
-    text-hover: sage-color(red, 100),
+    text-hover: sage-color(red, 150),
     icon: "danger",
   ),
 );
diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
index 0c59c97996..a4d1c3f09a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -4,9 +4,9 @@
 /// @group sage
 ////
 
-$-breadcrumb-current-color: sage-color(charcoal, 400);
-$-breadcrumb-interactive-color: sage-color(charcoal, 400);
-$-breadcrumb-outline-color: sage-color(purple, 30);
+$-breadcrumb-current-color: sage-color(grey, 900);
+$-breadcrumb-interactive-color: sage-color(grey, 900);
+$-breadcrumb-outline-color: sage-color(purple, 300);
 
 .sage-breadcrumbs {
   display: flex;
@@ -33,7 +33,7 @@ $-breadcrumb-outline-color: sage-color(purple, 30);
   &:not(:last-child) {
     &::after {
       content: "/";
-      color: sage-color(charcoal, 200);
+      color: sage-color(grey, 700);
     }
 
     .sage-breadcrumbs--progressbar &::after {
@@ -56,7 +56,7 @@ $-breadcrumb-outline-color: sage-color(purple, 30);
   display: inline-flex;
   align-items: center;
   padding: sage-spacing(3xs) sage-spacing(xs);
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 800);
   font-size: sage-font-size(body-sm);
   font-weight: sage-font-weight(semibold);
   text-decoration: none;
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index dee431d146..f31cb406d7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -26,24 +26,24 @@ $-btn-base-styles: (
   accent: (
     default: (
       color: sage-color(white),
-      background-color: sage-color(purple, 50),
-      border-color: sage-color(purple, 50),
-      ring-color: sage-color(purple, 30),
+      background-color: sage-color(purple, 500),
+      border-color: sage-color(purple, 500),
+      ring-color: sage-color(purple, 300),
     ),
     hover: (
       color: sage-color(white),
-      background-color: sage-color(purple, 60),
-      border-color: sage-color(purple, 60),
+      background-color: sage-color(purple, 600),
+      border-color: sage-color(purple, 600),
     ),
     focus: (
       color: sage-color(white),
-      background-color: sage-color(purple, 50),
-      border-color: sage-color(purple, 50),
+      background-color: sage-color(purple, 500),
+      border-color: sage-color(purple, 500),
     ),
     disabled: (
-      color: sage-color(purple, 30),
-      background-color: sage-color(purple, 15),
-      border-color: sage-color(purple, 15),
+      color: sage-color(purple, 300),
+      background-color: sage-color(purple, 150),
+      border-color: sage-color(purple, 150),
     )
   ),
   primary: (
@@ -51,62 +51,62 @@ $-btn-base-styles: (
       color: sage-color(white),
       background-color: sage-color(charcoal, 400),
       border-color: sage-color(charcoal, 400),
-      ring-color: sage-color(purple, 30),
+      ring-color: sage-color(purple, 300),
     ),
     hover: (
       color: sage-color(white),
-      background-color: sage-color(charcoal, 500),
+      background-color: sage-color(grey, 950),
     ),
     focus: (
       color: sage-color(white),
-      background-color: sage-color(charcoal, 400),
-      border-color: sage-color(charcoal, 400),
+      background-color: sage-color(grey, 900),
+      border-color: sage-color(grey, 900),
     ),
     disabled: (
-      color: sage-color(charcoal, 100),
-      background-color: sage-color(grey, 300),
-      border-color: sage-color(grey, 300),
+      color: sage-color(grey, 600),
+      background-color: sage-color(grey, 200),
+      border-color: sage-color(grey, 200),
     )
   ),
   secondary: (
     default: (
-      color: sage-color(charcoal, 400),
+      color: sage-color(grey, 900),
       background-color: sage-color(white),
-      ring-color: sage-color(purple, 30),
+      ring-color: sage-color(purple, 300),
     ),
     hover: (
-      color: sage-color(charcoal, 400),
+      color: sage-color(grey, 900),
       background-color: sage-color(grey, 100),
     ),
     focus: (
-      color: sage-color(charcoal, 400),
+      color: sage-color(grey, 900),
       background-color: sage-color(white),
     ),
     disabled: (
-      color: sage-color(charcoal, 100),
+      color: sage-color(grey, 600),
       background-color: sage-color(grey, 100),
     )
   ),
   danger: (
     default: (
       color: sage-color(white),
-      background-color: sage-color(red, 300),
-      border-color: sage-color(red, 300),
-      ring-color: sage-color(red, 200),
+      background-color: sage-color(red, 500),
+      border-color: sage-color(red, 500),
+      ring-color: sage-color(red, 300),
     ),
     hover: (
       color: sage-color(white),
-      background-color: sage-color(red, 400),
+      background-color: sage-color(red, 800),
     ),
     focus: (
       color: sage-color(white),
-      background-color: sage-color(red, 300),
-      border-color: sage-color(red, 300),
+      background-color: sage-color(red, 500),
+      border-color: sage-color(red, 500),
     ),
     disabled: (
-      color: sage-color(red, 200),
-      background-color: sage-color(red, 100),
-      border-color: sage-color(red, 100),
+      color: sage-color(red, 300),
+      background-color: sage-color(red, 150),
+      border-color: sage-color(red, 150),
     )
   ),
 );
@@ -117,48 +117,48 @@ $-btn-subtle-styles: (
     hover: sage-color(primary, 300),
     hover-background: sage-color(primary, 100),
     focus: sage-color(primary, 300),
-    focus-outline: sage-color(purple, 30),
+    focus-outline: sage-color(purple, 300),
     disabled: sage-color(primary, 200),
   ),
   primary: (
-    default: sage-color(charcoal, 400),
-    hover: sage-color(charcoal, 400),
-    hover-background: sage-color(grey, 200),
+    default: sage-color(grey, 900),
+    hover: sage-color(grey, 900),
+    hover-background: sage-color(grey, 150),
     focus: sage-color(charcoal, 400),
-    focus-outline: sage-color(purple, 30),
+    focus-outline: sage-color(purple, 300),
     disabled: sage-color(charcoal, 100),
   ),
   secondary: (
-    default: sage-color(charcoal, 400),
-    hover: sage-color(charcoal, 400),
-    hover-background: sage-color(grey, 200),
+    default: sage-color(grey, 900),
+    hover: sage-color(grey, 900),
+    hover-background: sage-color(grey, 150),
     focus: sage-color(charcoal, 400),
-    focus-outline: sage-color(purple, 30),
+    focus-outline: sage-color(purple, 300),
     disabled: sage-color(charcoal, 100),
   ),
   danger: (
-    default: sage-color(red, 300),
-    hover: sage-color(red, 300),
-    hover-background: sage-color(red, 100),
-    focus: sage-color(red, 300),
-    focus-outline: sage-color(red, 200),
-    disabled: sage-color(red, 200),
+    default: sage-color(red, 500),
+    hover: sage-color(red, 500),
+    hover-background: sage-color(red, 150),
+    focus: sage-color(red, 500),
+    focus-outline: sage-color(red, 300),
+    disabled: sage-color(red, 300),
   ),
 );
 
 // NOTE: the following colors should be kept in sync
 // with the colors in `_alert.scss`
 $-alert-close-btn-background-colors: (
-  default: sage-color(grey, 400),
-  draft: sage-color(grey, 400),
+  default: sage-color(grey, 300),
+  draft: sage-color(grey, 300),
   info: sage-color(primary, 200),
   published: sage-color(sage, 200),
   success: sage-color(sage, 200),
-  warning: sage-color(yellow, 200),
-  approaching: sage-color(yellow, 200),
+  warning: sage-color(yellow, 300),
+  approaching: sage-color(yellow, 300),
   reached: sage-color(orange, 200),
-  exceeded: sage-color(red, 200),
-  danger: sage-color(red, 200),
+  exceeded: sage-color(red, 300),
+  danger: sage-color(red, 300),
 );
 
 //
@@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px);
     bottom: rem(1px);
     height: rem(38px);
     background-color: sage-color(white);
-    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 400);
+    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300);
     border-color: transparent;
 
     @include sage-focus-outline--update-color(transparent);
@@ -346,7 +346,7 @@ $-btn-loading-min-height: rem(36px);
 
   .sage-toolbar__group > .sage-input ~ &.sage-btn--primary,
   .sage-toolbar__group > .sage-search ~ &.sage-btn--primary {
-    box-shadow: 0 0 0 1px sage-color(charcoal, 400);
+    box-shadow: 0 0 0 1px sage-color(grey, 900);
     border-color: transparent;
   }
 
@@ -414,7 +414,7 @@ $-btn-loading-min-height: rem(36px);
 
   .sage-upload-card & {
     &.sage-btn--subtle:focus {
-      @include sage-focus-outline--update-color(sage-color(purple, 30));
+      @include sage-focus-outline--update-color(sage-color(purple, 300));
     }
   }
 
@@ -472,12 +472,12 @@ $-btn-loading-min-height: rem(36px);
     }
 
     &:hover {
-      background-color: sage-color(grey, 300);
+      background-color: sage-color(grey, 200);
     }
 
     &.sage-btn--selected {
       color: sage-color(white);
-      background-color: sage-color(charcoal, 400);
+      background-color: sage-color(grey, 900);
 
       &::after {
         color: sage-color(white);
@@ -588,13 +588,13 @@ a.sage-btn {
 
 // Secondary styles, no shadow variation
 .sage-btn--secondary {
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
   background-color: sage-color(white);
   border: 1px solid sage-color(grey, 500);
 
   &:hover {
     background-color: sage-color(white);
-    border-color: sage-color(charcoal, 100);
+    border-color: sage-color(grey, 600);
   }
 
   &:focus {
@@ -603,16 +603,16 @@ a.sage-btn {
 
   &:focus-visible,
   &:active {
-    color: sage-color(charcoal, 300);
+    color: sage-color(grey, 800);
     background-color: sage-color(white);
     border-color: sage-color(grey);
   }
 
   &:disabled,
   &[aria-disabled="true"] {
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
     background-color: sage-color(white);
-    border-color: sage-color(grey, 300);
+    border-color: sage-color(grey, 200);
   }
 }
 
@@ -752,7 +752,7 @@ a.sage-btn {
   .sage-assistant & {
     @include sage-focus-outline--update-color(sage-color(white));
 
-    color: sage-color(grey, 200);
+    color: sage-color(grey, 150);
     border-color: transparent;
 
     &:hover {
@@ -860,5 +860,5 @@ a.sage-btn {
 
 .sage-btn-group--border-top {
   padding-top: sage-spacing(lg);
-  border-top: 1px solid sage-color(grey, 400);
+  border-top: 1px solid sage-color(grey, 300);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index f469d911f3..60ffb9bd64 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -26,7 +26,7 @@ $-sage-card-background: transparent;
   border-color: sage-color(white);
   @include sage-dashed-border(
     $border-radius: sage-border(radius),
-    $color: sage-color(grey, 400),
+    $color: sage-color(grey, 300),
   );
 }
 
@@ -59,11 +59,11 @@ $-sage-card-background: transparent;
 
   .sage-link.sage-card__link--primary {
     // Remove when Link component is updated with new styles
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     text-decoration: none;
 
     &:hover {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
     }
   }
 
@@ -103,14 +103,14 @@ $-sage-card-background: transparent;
     top: 50%;
     width: 100%;
     height: 1px;
-    background: sage-color(grey, 300);
+    background: sage-color(grey, 200);
   }
   &::after {
     content: attr(data-divider-label);
     display: inline-block;
     position: relative;
     padding: 0 sage-spacing(sm);
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
     font-size: sage-font-size(body-xs);
     background-color: sage-color(white);
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
index bc67b9446f..ec73c612ca 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
@@ -55,13 +55,13 @@ $-card-highlight-size: rem(12px);
 @each $-color-name, $-color-sliders in $sage-colors {
   .sage-card-highlight--#{"" + $-color-name} {
     @if ($-color-name == blue) {
-      --color: #{sage-color($-color-name, 60)};
+      --color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == green) {
-      --color: #{sage-color($-color-name, 60)};
+      --color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == mercury) {
-      --color: #{sage-color($-color-name, 50)};
+      --color: #{sage-color($-color-name, 500)};
     }
     @else {
       --color: #{sage-color($-color-name, 300)};
diff --git a/packages/sage-assets/lib/stylesheets/components/_carousel.scss b/packages/sage-assets/lib/stylesheets/components/_carousel.scss
index 2164c06e12..372b5d812e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_carousel.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_carousel.scss
@@ -5,7 +5,7 @@
 ////
 
 $-sage-carousel-arrow-width: sage-spacing(lg);
-$-sage-carousel-active-color: sage-color(charcoal, 100);
+$-sage-carousel-active-color: sage-color(grey, 600);
 $-sage-carousel-inactive-color: sage-color(grey, 500);
 
 .sage-carousel {
diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
index e488c5bf22..405c7f8835 100644
--- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
@@ -44,7 +44,7 @@ $-catalogue-item-image-height-mobile: rem(120px);
   }
 
   &.sage-catalog-item--loading {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
     cursor: wait;
   }
 
@@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px);
   grid-area: img;
   overflow: hidden;
   min-height: $-catalogue-item-image-height-min;
-  background: sage-color(grey, 300);
+  background: sage-color(grey, 200);
   border-radius: sage-border(radius);
   border: sage-border();
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss
index e19f8a8999..5bfa016143 100644
--- a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss
@@ -17,7 +17,7 @@
   display: flex;
   align-items: center;
   list-style: none;
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 
   &::before {
     content: "";
diff --git a/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss b/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss
index 84f6c95aec..8f226a60cf 100644
--- a/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss
@@ -28,19 +28,19 @@
   @extend %t-sage-body-xsmall-med;
   @include line-clamp(1);
 
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 }
 
 .sage-chart-summary__label {
   @extend %t-sage-body-small-med;
   @include line-clamp(2);
 
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 .sage-chart-summary__value {
   @extend %t-sage-heading-5;
 
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   font-style: normal;
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
index 81c73ec6ae..e64daed60f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -8,13 +8,13 @@
 // Colors
 //
 $-checkbox-color-default: sage-color(grey, 500);
-$-checkbox-color-default-border: sage-color(grey, 400);
-$-checkbox-color-checked: sage-color(charcoal, 400);
-$-checkbox-color-checked-hover: sage-color(charcoal, 500);
-$-checkbox-color-disabled: sage-color(grey, 200);
-$-checkbox-color-disabled-border: sage-color(grey, 300);
-$-checkbox-color-disabled-checked: sage-color(charcoal, 100);
-$-checkbox-color-error: sage-color(red, 300);
+$-checkbox-color-default-border: sage-color(grey, 300);
+$-checkbox-color-checked: sage-color(grey, 900);
+$-checkbox-color-checked-hover: sage-color(grey, 950);
+$-checkbox-color-disabled: sage-color(grey, 150);
+$-checkbox-color-disabled-border: sage-color(grey, 200);
+$-checkbox-color-disabled-checked: sage-color(grey, 600);
+$-checkbox-color-error: sage-color(red, 500);
 
 $-checkbox-size: rem(16px);
 $-checkbox-label-spacing: rem(12px);
@@ -33,7 +33,7 @@ $-checkbox-marker-offset: $-checkbox-marker-border * 2;
 //
 $-checkbox-focus-outline-size: rem(3px);
 $-checkbox-focus-outline-width: 2;
-$-checkbox-focus-outline-color: sage-color(purple, 30);
+$-checkbox-focus-outline-color: sage-color(purple, 300);
 
 
 .sage-checkbox {
@@ -80,7 +80,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
 
     &:hover {
       z-index: sage-z-index(default, 1);
-      border-color: sage-color(charcoal, 100);
+      border-color: sage-color(grey, 600);
     }
 
     &:focus-within {
@@ -280,7 +280,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
     }
 
     &::before {
-      border-color: sage-color(red, 200);
+      border-color: sage-color(red, 300);
     }
   }
 
@@ -301,7 +301,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
 
   .sage-checkbox--error &,
   .sage-checkbox__input:invalid + & {
-    color: sage-color(red, 300);
+    color: sage-color(red, 500);
   }
 
   .sage-checkbox__input:disabled ~ & {
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index c4a777f18d..9c59d682e0 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -66,7 +66,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   }
 
   &:focus-visible {
-    border-color: sage-color(purple, 30);
+    border-color: sage-color(purple, 300);
     outline: none;
   }
 
@@ -74,7 +74,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     color: $-choice-color-active;
 
     &::after {
-      border-color: sage-color(charcoal, 400);
+      border-color: sage-color(grey, 900);
       border-width: rem(4px);
     }
 
@@ -82,12 +82,12 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
 
   &[aria-disabled="true"],
   &:disabled {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
     cursor: default;
     pointer-events: none;
 
     &::before {
-      background-color: sage-color(grey, 300);
+      background-color: sage-color(grey, 200);
     }
 
     &:hover::before {
@@ -122,7 +122,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     @include sage-icon-base(caret-right, lg, pine);
 
     margin: 0 0 0 sage-spacing(sm);
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     transition: color map-get($sage-transitions, default);
   }
 
@@ -233,14 +233,14 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
 
 .sage-choice__text {
   font-style: normal;
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
 }
 
 .sage-choice__subtext {
   @extend %t-sage-body-xsmall;
 
   margin-top: sage-spacing(2xs);
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 pds-icon {
diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
index 93eccd598e..7397ea8a29 100644
--- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
@@ -5,11 +5,11 @@
 ////
 
 
-$-copy-text-border: 1px solid sage-color(grey, 400);
-$-copy-text-border-focus-color: sage-color(purple, 30);
+$-copy-text-border: 1px solid sage-color(grey, 300);
+$-copy-text-border-focus-color: sage-color(purple, 300);
 $-copy-text-border-hover-color: sage-color(grey, 500);
-$-copy-text-color: sage-color(charcoal, 400);
-$-copy-text-color-hover: sage-color(charcoal, 500);
+$-copy-text-color: sage-color(grey, 900);
+$-copy-text-color-hover: sage-color(grey, 950);
 
 
 .sage-copy-text {
diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss
index 9c614c9288..718233514a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss
@@ -7,16 +7,16 @@
 
 $-data-card-colors: (
   default: (
-    border-color: sage-color(grey, 400),
-    text-color: sage-color(charcoal, 400),
+    border-color: sage-color(grey, 300),
+    text-color: sage-color(grey, 900),
   ),
   danger: (
-    border-color: sage-color(red, 300),
-    text-color: sage-color(red, 300),
+    border-color: sage-color(red, 500),
+    text-color: sage-color(red, 500),
   ),
   muted: (
-    border-color: sage-color(charcoal, 300),
-    text-color: sage-color(charcoal, 300),
+    border-color: sage-color(grey, 800),
+    text-color: sage-color(grey, 800),
   ),
 );
 $-data-card-transition: 0.2s linear;
@@ -118,10 +118,10 @@ $-data-card-padding: sage-spacing(xs);
     gap: sage-spacing(sm);
     padding-bottom: sage-spacing(sm);
   }
-  
+
   .sage-data-card-scroll-container &:not(:last-child) {
     padding-right: sage-spacing(md);
-    border-right: 1px solid sage-color(grey, 400);
+    border-right: 1px solid sage-color(grey, 300);
   }
 
   .sage-data-card-scroll-container &:not(:first-child) {
@@ -138,7 +138,7 @@ $-data-card-padding: sage-spacing(xs);
 
 .sage-data-card-group__title {
   @extend %t-sage-body-semi;
-  
+
   @each $-color-name, $-values in $-data-card-colors {
     @if $-color-name == default {
       color: map-get($-values, text-color);
diff --git a/packages/sage-assets/lib/stylesheets/components/_description.scss b/packages/sage-assets/lib/stylesheets/components/_description.scss
index 0f2d1de689..db1bb6644a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_description.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_description.scss
@@ -70,14 +70,14 @@ $-description-spacing: sage-spacing(sm);
   @extend %t-sage-body;
 
   grid-area: title;
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 .sage-description__data {
   @extend %t-sage-body-med;
 
   grid-area: data;
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
 }
 
 .sage-description__action {
diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss
index 0c37619a96..4b53ae54df 100644
--- a/packages/sage-assets/lib/stylesheets/components/_divider.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss
@@ -9,7 +9,7 @@
   height: rem(1px);
   width: 100%;
   margin: 0;
-  background: var(--sage-divider-background-color, sage-color(grey, 300));
+  background: var(--sage-divider-background-color, sage-color(grey, 200));
   border: 0;
 
   &--vertical {
diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss
index c065fdc97c..cca3841570 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dot.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss
@@ -43,13 +43,13 @@ $-sage-dot-size--badge: rem(6px);
 @each $-color-name, $-color-sliders in $sage-colors {
   .sage-dot--color-#{"" + $-color-name} {
     @if ($-color-name == blue) {
-      --sage-dot-color: #{sage-color($-color-name, 60)};
+      --sage-dot-color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == green) {
-      --sage-dot-color: #{sage-color($-color-name, 60)};
+      --sage-dot-color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == mercury) {
-      --sage-dot-color: #{sage-color($-color-name, 50)};
+      --sage-dot-color: #{sage-color($-color-name, 500)};
     }
     @else {
       --sage-dot-color: #{sage-color($-color-name)};
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index afa35f8c9c..1d6fdfcf92 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -127,31 +127,31 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   &:focus-within {
     outline: none;
 
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
   }
 }
 
 .sage-dropdown__item--border-before {
   padding-top: sage-spacing(xs);
   margin-top: sage-spacing(xs);
-  border-top: 1px solid sage-color(grey, 300);
+  border-top: 1px solid sage-color(grey, 200);
 }
 
 .sage-dropdown__item--border-after {
   padding-bottom: sage-spacing(xs);
   margin-bottom: sage-spacing(xs);
-  border-bottom: 1px solid sage-color(grey, 300);
+  border-bottom: 1px solid sage-color(grey, 200);
 }
 
 .sage-dropdown__item--disabled {
   &:active {
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
   }
 }
 
 .sage-dropdown__item--heading {
   padding: sage-spacing(sm) sage-spacing(sm) 0 sage-spacing(sm);
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
   text-transform: uppercase;
   cursor: default;
   pointer-events: none;
@@ -162,7 +162,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__item-control {
   @include sage-button-style-reset();
   @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 
   @extend %t-sage-body-med;
 
@@ -188,12 +188,12 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 
   &:hover {
-    background-color: sage-color(grey, 300);
+    background-color: sage-color(grey, 200);
   }
 
   &:focus-within {
     @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
 
     &::after {
       opacity: 1;
@@ -240,20 +240,20 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 }
 
 .sage-dropdown__item-control--danger {
-  color: sage-color(red, 300);
+  color: sage-color(red, 500);
 
   &:hover {
-    color: sage-color(red, 300);
-    background-color: sage-color(red, 100);
+    color: sage-color(red, 500);
+    background-color: sage-color(red, 150);
   }
 }
 
 .sage-dropdown__item-control--muted {
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 
   &:hover {
-    color: sage-color(charcoal, 400);
-    background-color: sage-color(grey, 300);
+    color: sage-color(grey, 900);
+    background-color: sage-color(grey, 200);
   }
 }
 
@@ -430,7 +430,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-btn--icon-right-caret-down::before {
   .sage-dropdown__trigger--select &,
   .sage-dropdown__trigger & {
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss
index b57c85d921..72f8966243 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss
@@ -1,7 +1,7 @@
 $-dynamic-select-default-height: rem(45px);
 $-dynamic-select-default-padding: rem(4px) sage-spacing(sm) 0;
-$-dynamic-select-border-color: sage-color(gray, 400);
-$-dynamic-select-placeholder-color: sage-color(gray, 400);
+$-dynamic-select-border-color: sage-color(grey, 400);
+$-dynamic-select-placeholder-color: sage-color(grey, 400);
 $-dynamic-select-color-success: map-get($sage-field-colors, success);
 $-dynamic-select-border-box-shadow-size: map-get($sage-field-configs, box-shadow-size);
 $-dynamic-select-selected-height: rem(54px);
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index e2c15fb632..583dd707f4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -78,7 +78,7 @@ $-empty-state-icon-compact-size: rem(56px);
 .sage-empty-state__title {
   @extend %t-sage-heading-3;
 
-  color: sage-color(grey, 90);
+  color: sage-color(grey, 900);
   word-wrap: break-word;
 
   &:not(:only-child) {
@@ -94,5 +94,5 @@ $-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state__text,
 .sage-empty-state__custom-content {
-  color: sage-color(grey, 70);
+  color: sage-color(grey, 700);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
index 8b36a80038..754f3ac421 100644
--- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
@@ -6,7 +6,7 @@
 
 
 $-expandable-card-bg-color: sage-color(white);
-$-expandable-card-border-color: sage-color(grey, 400);
+$-expandable-card-border-color: sage-color(grey, 300);
 $-expandable-card-border-radius: sage-border(radius);
 $-expandable-card-padding: sage-spacing(sm);
 $-expandable-card-padding-xs: sage-spacing(xs);
diff --git a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss
index 8d4f81ea38..527f57e7a8 100644
--- a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss
@@ -56,7 +56,7 @@ $-feature-toggle-image-height-mobile: rem(96px);
 
   p {
     @extend %t-sage-body-small;
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss
index b71c650aee..c823c22f58 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_input.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_input.scss
@@ -82,7 +82,7 @@ $-input-text-height: sage-font-size(body);
 }
 
 .sage-input__affix-value {
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 }
 
 .sage-input__affix--prefix {
@@ -160,7 +160,7 @@ $-input-text-height: sage-font-size(body);
   }
 
   .sage-form-field--error & i {
-    color: sage-color(red, 300);
+    color: sage-color(red, 500);
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_section.scss b/packages/sage-assets/lib/stylesheets/components/_form_section.scss
index 4e5aaf3b84..5e183fc481 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_section.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_section.scss
@@ -24,11 +24,11 @@
 
 .sage-form-section__subtitle {
   @extend %t-sage-body;
-  
+
   display: flex;
   flex-direction: column;
   gap: sage-spacing(sm);
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 .sage-form-section__subtitle--legacy {
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
index b05b1bb0fd..550ceb3a18 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -6,11 +6,11 @@
 
 $-select-border-box-shadow-size: map-get($sage-field-configs, box-shadow-size);
 $-select-color-border: sage-color(grey, 500);
-$-select-color-border-hover: sage-color(charcoal, 100);
+$-select-color-border-hover: sage-color(grey, 600);
 $-select-color-border-selected: sage-color(primary, 200);
-$-select-color-default: sage-color(charcoal, 200);
-$-select-color-default-hover: sage-color(charcoal, 400);
-$-select-color-error: sage-color(red, 300);
+$-select-color-default: sage-color(grey, 700);
+$-select-color-default-hover: sage-color(grey, 900);
+$-select-color-error: sage-color(red, 500);
 $-select-color-label-background: sage-color(white);
 $-select-color-success: sage-color(primary, 200);
 $-select-filled-top-padding: rem(4.4px);
@@ -68,7 +68,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   align-items: center;
   height: $-select-height;
   font-size: $-select-arrow-font-size;
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
   transition: 0.2s color ease;
 }
 
@@ -96,7 +96,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   .sage-select--value-selected & {
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
   }
 
   .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before {
@@ -132,16 +132,16 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   &:disabled {
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
     background-color: sage-color(grey, 100);
 
     ~ .sage-select__arrow::before {
-      color: sage-color(charcoal, 200);
+      color: sage-color(grey, 700);
       opacity: 0.5;
     }
 
     @include placeholder {
-      color: sage-color(charcoal, 200);
+      color: sage-color(grey, 700);
     }
   }
 }
@@ -169,6 +169,6 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   &.sage-select--value-selected .form-group:focus-within:not(:disabled) ~ .sage-select__label {
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss
index 62f37339b6..b9b76e4468 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss
@@ -19,7 +19,7 @@ $-textarea-height: 100%;
 $-textarea-min-height: rem(90px);
 
 // Colors
-$-textarea-color-default: sage-color(charcoal, 300);
+$-textarea-color-default: sage-color(grey, 800);
 
 .sage-textarea {
   @include sage-form-field-group;
diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss
index 13e9b8a2ca..6b264d97ee 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hero.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss
@@ -91,7 +91,7 @@ $-hero-play-icon-background-color: sage-color(white);
   padding-inline-end: sage-spacing(md);
   margin-block-end: $-hero-margin-y;
   font-weight: sage-font-weight(medium);
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 800);
 
   @media (min-width: sage-breakpoint(lg-max)) {
     padding-block-start: 0;
@@ -134,7 +134,7 @@ $-hero-play-icon-background-color: sage-color(white);
   @include sage-focus-ring;
 
   &:focus {
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
   }
 }
 
@@ -170,7 +170,7 @@ $-hero-play-icon-background-color: sage-color(white);
       align-items: center;
       width: $-hero-icon-size;
       font-size: $-hero-icon-size;
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
     }
 
     &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss
index 7beb28c3a6..59b8475393 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hint.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss
@@ -5,8 +5,8 @@
 ////
 
 // Colors
-$-hint-text-color: sage-color(charcoal, 400);
-$-hint-background-color: sage-color(grey, 300);
+$-hint-text-color: sage-color(grey, 900);
+$-hint-background-color: sage-color(grey, 200);
 
 .sage-hint {
   display: flex;
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss
index 1243653fb1..c4e6cffea5 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon.scss
@@ -88,7 +88,7 @@ $-icon-beside-type: (
   }
 
   .sage-input__icon .sage-icon-#{$icon-name} {
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
     line-height: sage-line-height(body-xs);
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss
index 8dfc29703a..c4086a0dd6 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss
@@ -52,7 +52,7 @@
 
 .sage-icon-list-item__label-subtext {
   @extend %t-sage-body;
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
 }
 
 .sage-icon-list-item__title {
diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss
index 49fa9d0546..b2dbc95076 100644
--- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss
@@ -20,7 +20,7 @@ $-indicator-size: rem(6px);
   border-radius: sage-border(radius-round);
 
   &:not(.sage-indicator--current) {
-    background-color: sage-color(grey, 400);
+    background-color: sage-color(grey, 300);
   }
 
   &:not(:last-child) {
@@ -35,5 +35,5 @@ $-indicator-size: rem(6px);
 }
 
 .sage-indicator--current {
-  background-color: sage-color(charcoal, 400);
+  background-color: sage-color(grey, 900);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss
index 9c4dd90713..80098d068b 100644
--- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss
@@ -26,13 +26,13 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black);
   }
 
   .sage-input-group:focus-within & {
-    background-color: sage-color(grey, 300);
+    background-color: sage-color(grey, 200);
     opacity: 1;
   }
 
   .sage-input-group--disabled & {
     color: sage-color(grey, 500);
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
   }
 }
 
@@ -80,7 +80,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black);
   }
 
   .sage-input-group--disabled & {
-    color: sage-color(charcoal, 300);
-    background-color: sage-color(grey, 200);
+    color: sage-color(grey, 800);
+    background-color: sage-color(grey, 150);
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
index 37b3142922..6193f5e1c9 100644
--- a/packages/sage-assets/lib/stylesheets/components/_link.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -6,8 +6,8 @@
 
 $-link-color: sage-color(primary, 300);
 $-link-color-hover: sage-color(primary, 400);
-$-link-subtext-color: sage-color(charcoal, 200);
-$-link-subtext-color-hover: sage-color(charcoal, 400);
+$-link-subtext-color: sage-color(grey, 700);
+$-link-subtext-color-hover: sage-color(grey, 900);
 
 $-link-base-styles: (
   primary:(
@@ -23,13 +23,13 @@ $-link-base-styles: (
   ),
   secondary:(
     default: (
-      color: sage-color(charcoal, 400),
+      color: sage-color(grey, 900),
     ),
     hover: (
       color: sage-color(black),
     ),
     focus-visible: (
-      color: sage-color(charcoal, 400),
+      color: sage-color(grey, 900),
     ),
   ),
   neutral:(
@@ -45,14 +45,14 @@ $-link-base-styles: (
   ),
   danger:(
     default: (
-      color: sage-color(red, 300),
+      color: sage-color(red, 500),
     ),
     hover: (
-      color: sage-color(red, 400),
+      color: sage-color(red, 800),
     ),
     focus-visible: (
-      color: sage-color(red, 300),
-      focus-outline: sage-color(red, 200),
+      color: sage-color(red, 500),
+      focus-outline: sage-color(red, 300),
     ),
   )
 );
@@ -77,7 +77,7 @@ $-link-base-styles: (
   &:focus-visible {
     color: sage-color(primary, 300);
 
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
   }
 
   .sage-card--interactive & {
@@ -173,7 +173,7 @@ $-link-base-styles: (
   pds-icon {
     @include sage-icon-base(question-circle, lg, pine);
 
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
   }
 
   &:hover,
@@ -183,11 +183,11 @@ $-link-base-styles: (
     outline: 0;
 
     pds-icon {
-      color: sage-color(charcoal, 300);
+      color: sage-color(grey, 800);
     }
 
     &::before {
-      color: sage-color(charcoal, 300);
+      color: sage-color(grey, 800);
     }
   }
 
@@ -214,7 +214,7 @@ $-link-base-styles: (
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 }
 
 .sage-link--remove-underline {
diff --git a/packages/sage-assets/lib/stylesheets/components/_list.scss b/packages/sage-assets/lib/stylesheets/components/_list.scss
index 335225cfc6..9cac615362 100644
--- a/packages/sage-assets/lib/stylesheets/components/_list.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_list.scss
@@ -19,7 +19,7 @@
   border-radius: sage-border(radius-medium);
 
   &:hover {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
   }
 
   .sage-list--draggable-by-row & {
@@ -44,7 +44,7 @@
 }
 
 .sage-list__item--sortable-ghost {
-  background-color: sage-color(grey, 200);
+  background-color: sage-color(grey, 150);
 }
 
 .sage-list__item-content {
diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss
index 1ae92a2902..bf2994d3a0 100644
--- a/packages/sage-assets/lib/stylesheets/components/_loader.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss
@@ -171,7 +171,7 @@ $-loader-lower-opacity: 0.4;
   position: relative;
   margin: 0 auto;
   padding: rem(15px) rem(20px);
-  background-color: sage-color(grey, 200);
+  background-color: sage-color(grey, 150);
   will-change: transform;
   border-radius: sage-border(radius-large);
   box-shadow: sage-shadow(sm);
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
index a126277cd5..519870434f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -31,7 +31,7 @@ $-media-tile-breakpoints: (
 }
 
 .sage-media-tile__body {
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 
   > p {
     @extend %t-sage-body;
@@ -39,7 +39,7 @@ $-media-tile-breakpoints: (
 }
 
 .sage-media-tile__caption {
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 
   > p {
     @extend %t-sage-body-small;
@@ -82,7 +82,7 @@ $-media-tile-breakpoints: (
 
     &::after {
       border-width: rem(2px);
-      border-color: sage-color(purple, 30);
+      border-color: sage-color(purple, 300);
     }
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss
index e75dafa0b5..95dac5ec08 100644
--- a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss
@@ -6,7 +6,7 @@
 
 
 $-menubtn-toggle-size: rem(24px);
-$-menubtn-toggle-line-color: sage-color(grey, 200);
+$-menubtn-toggle-line-color: sage-color(grey, 150);
 $-menubtn-toggle-line-height: rem(2px);
 $-menubtn-toggle-radius: rem(2px);
 $-menubtn-focus-outline-size: sage-spacing(xs);
@@ -55,7 +55,7 @@ $-menubtn-focus-outline-color: currentColor;
 
     &:focus::after {
       transform: translate3d(-50%, -50%, 0) scale(1);
-      border-color: sage-color(charcoal, 100);
+      border-color: sage-color(grey, 600);
       opacity: 1;
     }
 
@@ -64,7 +64,7 @@ $-menubtn-focus-outline-color: currentColor;
     }
 
     &:active::after {
-      border-color: sage-color(charcoal, 200);
+      border-color: sage-color(grey, 700);
     }
 
     &[aria-expanded="true"]::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss
index 25965238d8..372b4ea5c7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_meter.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss
@@ -6,8 +6,8 @@
 
 
 $-meter-bar-height: rem(4px);
-$-meter-color-bg: sage-color(grey, 300);
-$-meter-bar-low: rgba(sage-color(red, 500), 0.9);
+$-meter-color-bg: sage-color(grey, 200);
+$-meter-bar-low: rgba(sage-color(red, 950), 0.9);
 $-meter-bar-med: rgba(sage-color(orange), 0.9);
 $-meter-bar-success: rgba(sage-color(sage, 200), 0.9);
 $-meter-bar-max: rgba(sage-color(sage, 300), 0.9);
diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss
index 166a8e9304..22e83c2afc 100644
--- a/packages/sage-assets/lib/stylesheets/components/_modal.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_modal.scss
@@ -24,10 +24,10 @@ $-modal-inner-size: sage-container(md);
   overflow-y: scroll;
   z-index: sage-z-index(negative);
   padding: sage-spacing(md);
-  background-color: rgba(sage-color(charcoal, 500), 0.4);
+  background-color: rgba(sage-color(grey, 950), 0.4);
   background-image: linear-gradient(
-    rgba(sage-color(charcoal, 200), 0.35) 0%,
-    rgba(sage-color(charcoal, 500), 0.4) 100%
+    rgba(sage-color(grey, 700), 0.35) 0%,
+    rgba(sage-color(grey, 950), 0.4) 100%
   );
   transition: opacity 0.1s ease-out;
   pointer-events: none;
@@ -59,8 +59,8 @@ $-modal-inner-size: sage-container(md);
   &.sage-modal--no-blur {
     backdrop-filter: none;
     background-image: linear-gradient(
-      rgba(sage-color(charcoal, 300), 0.5) 0%,
-      rgba(sage-color(charcoal, 500), 0.5) 100%
+      rgba(sage-color(grey, 800), 0.5) 0%,
+      rgba(sage-color(grey, 950), 0.5) 100%
     );
   }
 
@@ -336,7 +336,7 @@ $-modal-inner-size: sage-container(md);
 
 @media (prefers-reduced-motion) {
   .sage-modal {
-    background-color: rgba(sage-color(charcoal, 500), 0.85);
+    background-color: rgba(sage-color(grey, 950), 0.85);
     backdrop-filter: none;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
index fca0188e11..aaaee45f44 100644
--- a/packages/sage-assets/lib/stylesheets/components/_nav.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -4,10 +4,10 @@
 /// @group sage
 ////
 
-$-nav-color-text: sage-color(charcoal, 300);
+$-nav-color-text: sage-color(grey, 800);
 $-nav-color-focus: sage-color(grey, 500);
-$-nav-color-background: sage-color(grey, 300);
-$-nav-color-background-hover: sage-color(grey, 300);
+$-nav-color-background: sage-color(grey, 200);
+$-nav-color-background-hover: sage-color(grey, 200);
 $-nav-icon-size: rem(16px);
 $-nav-icon-spacing: rem(8px);
 $-nav-subitem-border-width: rem(2px);
@@ -36,7 +36,7 @@ $-nav-subitem-border-width: rem(2px);
     $outline-offset-block: -1,
     $outline-border-radius: sage-border(radius-medium),
   );
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 
   display: flex;
   align-items: center;
@@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px);
   @extend %t-sage-body-small-med;
 
   &.sage-nav__link--active {
-    @include sage-focus-outline--update-color(sage-color(purple, 30));
+    @include sage-focus-outline--update-color(sage-color(purple, 300));
 
     background: $-nav-color-background;
   }
@@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px);
 
   &:not(.sage-nav__list--sub) {
     .sage-nav__link--active {
-      @include sage-focus-outline--update-color(sage-color(purple, 30));
+      @include sage-focus-outline--update-color(sage-color(purple, 300));
     }
 
     .sage-nav__link--active::after {
@@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px);
 .sage-nav__list--sub-with-icon {
   margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2));
   padding-left: sage-spacing(sm);
-  border-left: $-nav-subitem-border-width solid sage-color(grey, 400);
+  border-left: $-nav-subitem-border-width solid sage-color(grey, 300);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_overlay.scss b/packages/sage-assets/lib/stylesheets/components/_overlay.scss
index 444555e25f..03389a62ac 100644
--- a/packages/sage-assets/lib/stylesheets/components/_overlay.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_overlay.scss
@@ -5,7 +5,7 @@
 ////
 
 
-$-overlay-bg-color: rgba(sage-color(charcoal, 100), 0.5);
+$-overlay-bg-color: rgba(sage-color(grey, 600), 0.5);
 $-overlay-backdrop-filter: blur(rem(2px));
 $-overlay-z-index: sage-z-index(underlay);
 $-overlay-transition-default: opacity 0.5s ease-in-out;
diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
index 998e7ba6ce..2042aa956c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
@@ -76,7 +76,7 @@ $-page-heading-image-height-mobile: rem(120px);
 .sage-page-heading__intro {
   grid-area: intro;
   margin-top: rem(12px);
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 800);
 }
 
 .sage-page-heading__image {
@@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px);
   grid-area: image;
   overflow: hidden;
   min-height: $-page-heading-image-height-min;
-  background: sage-color(grey, 30);
+  background: sage-color(grey, 300);
   border-radius: sage-border(radius);
   border: sage-border();
 
@@ -146,7 +146,7 @@ $-page-heading-image-height-mobile: rem(120px);
   justify-content: flex-end;
   align-items: center;
   margin-top: sage-spacing(sm);
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
   font-style: italic;
   @media (max-width: sage-breakpoint()) {
     justify-content: flex-start;
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
index fc035f3e15..695cc76ca9 100644
--- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -8,11 +8,11 @@
 $-pagination-size: rem(40px);
 $-pagination-padding-arrows: rem(10px) rem(12px);
 $-pagination-radius: sage-border(radius-round);
-$-pagination-text-color: sage-color(charcoal, 400);
-$-pagination-text-color-disabled: sage-color(charcoal, 100);
-$-pagination-bg-color-current: sage-color(grey, 200);
-$-pagination-bg-color-hover: sage-color(grey, 300);
-$-pagination-focus-ring-color: sage-color(purple, 30);
+$-pagination-text-color: sage-color(grey, 900);
+$-pagination-text-color-disabled: sage-color(grey, 600);
+$-pagination-bg-color-current: sage-color(grey, 150);
+$-pagination-bg-color-hover: sage-color(grey, 200);
+$-pagination-focus-ring-color: sage-color(purple, 300);
 
 
 .sage-pagination {
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
index e6789cc4a0..4bfee719b2 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -45,7 +45,7 @@
     top: 50%;
     width: 100%;
     height: 1px;
-    background: sage-color(grey, 300);
+    background: sage-color(grey, 200);
   }
 
   &::after {
@@ -53,7 +53,7 @@
     display: inline-block;
     position: relative;
     padding: 0 sage-spacing(sm);
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
     font-size: sage-font-size(body-xs);
     background-color: sage-color(white);
   }
@@ -97,7 +97,7 @@
 
 .sage-panel__title {
   @extend %t-sage-heading-5;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
 
   + .sage-panel__subtext {
     margin-top: sage-spacing(xs);
@@ -106,7 +106,7 @@
 
 .sage-panel__subtext {
   grid-column: 1 / -1;
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 
   .sage-panel__header & {
     @extend %t-sage-body;
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
index 8c15b195b3..d4cf57bf16 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
@@ -19,7 +19,7 @@
     height: 0;
     margin-right: -1 * sage-spacing(panel);
     margin-left: -1 * sage-spacing(panel);
-    border-top: 1px solid sage-color(grey, 400);
+    border-top: 1px solid sage-color(grey, 300);
   }
 
   .sage-search {
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss
index 038a8d2bbd..127b667aef 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss
@@ -4,7 +4,7 @@
 /// @group sage/components/panel-figure
 ////
 $-panel-figure-padding: sage-spacing(lg);
-$-panel-figure-default-background-color: sage-color(grey, 200);
+$-panel-figure-default-background-color: sage-color(grey, 150);
 
 :root {
   --sage-figure-aspect-ratio: 1.78; // 16 / 9
diff --git a/packages/sage-assets/lib/stylesheets/components/_popover.scss b/packages/sage-assets/lib/stylesheets/components/_popover.scss
index 35d646464a..3191483be2 100644
--- a/packages/sage-assets/lib/stylesheets/components/_popover.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_popover.scss
@@ -157,7 +157,7 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent;
   @include sage-grid-stack();
 
   gap: rem(20px);
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 800);
 }
 
 .sage-popover__media {
@@ -185,5 +185,5 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent;
 .sage-popover__title {
   @extend %t-sage-heading-5;
 
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
index 57b61b83fd..4f7b972164 100644
--- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
@@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs);
   height: $-progress-bar-height;
   width: 100%;
   border-radius: sage-border(radius-small);
-  background-color: var(--sage-progress-bar-background-color, sage-color(grey, 300));
+  background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200));
 
   .sage-modal__header & {
     border-radius: 0;
diff --git a/packages/sage-assets/lib/stylesheets/components/_property.scss b/packages/sage-assets/lib/stylesheets/components/_property.scss
index 82f156f55d..4331fe5f4d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_property.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_property.scss
@@ -10,7 +10,7 @@
 
   display: inline-flex;
   align-items: center;
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 800);
 
   .sage-property-group &:not(:last-child) {
     margin-right: sage-spacing(md);
diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss
index 1122c0e480..e357763793 100644
--- a/packages/sage-assets/lib/stylesheets/components/_radio.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -15,8 +15,8 @@ $-radio-color-disabled: map-get($sage-radio-colors, disabled);
 $-radio-color-error: map-get($sage-radio-colors, error);
 $-radio-color-hover: map-get($sage-radio-colors, hover);
 $-radio-color-text-disabled: sage-color(grey, 500);
-$-radio-color-focus-outline: sage-color(purple, 30);
-$-radio-color-focus-outline-error: sage-color(red, 200);
+$-radio-color-focus-outline: sage-color(purple, 300);
+$-radio-color-focus-outline-error: sage-color(red, 300);
 
 // Additional configurations
 $-radio-button-size: $sage-radio-size;
@@ -95,7 +95,7 @@ $-radio-focus-outline-color: currentColor;
   margin-left: 0;
 
   .sage-radio--has-border & {
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     font-weight: sage-font-weight(semibold);
 
     &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss
index 49e6569b75..de5ba504d4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_search.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_search.scss
@@ -23,17 +23,17 @@ $-search-icon: "::before";
     z-index: sage-z-index(default, 2);
     margin-left: sage-spacing(sm);
     margin-right: -1 * sage-spacing(lg);
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
     transition: map-get($sage-transitions, default);
     transition-property: color;
   }
 
   .sage-search:not(.sage-search--contained) & {
-    border-bottom: 1px solid sage-color(grey, 400);
+    border-bottom: 1px solid sage-color(grey, 300);
 
     &:hover {
       background-color: sage-color(grey, 100);
-      border-bottom-color: sage-color(charcoal, 100);
+      border-bottom-color: sage-color(grey, 600);
     }
 
     &:focus-within {
@@ -150,7 +150,7 @@ $-search-icon: "::before";
   @extend %t-sage-body;
 
   @include placeholder {
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 
   &:focus {
@@ -159,7 +159,7 @@ $-search-icon: "::before";
 
   &:hover:not(:disabled) {
     background-color: sage-color(grey, 100);
-    border-bottom-color: sage-color(charcoal, 100);
+    border-bottom-color: sage-color(grey, 600);
     box-shadow: none;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
index 66d29f2b39..5455b17340 100644
--- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
@@ -25,12 +25,12 @@ $-sortable-image-height: rem(48px);
   &::before {
     @include sage-icon-base(handle-2-vertical, md, pine);
     padding: 0;
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
   }
 
   &:focus,
   &:hover {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
 
     &::before {
       color: sage-color(primary, 300);
@@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px);
   }
 
   &.sage-sortable__item--ghost {
-    background: sage-color(grey, 300);
+    background: sage-color(grey, 200);
   }
 }
 
@@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px);
   overflow: hidden;
   height: $-sortable-image-height;
   width: $-sortable-image-width;
-  background: sage-color(grey, 300);
+  background: sage-color(grey, 200);
   border-radius: sage-border(radius);
   border: sage-border();
 
@@ -115,7 +115,7 @@ $-sortable-image-height: rem(48px);
 .sage-sortable__item-subtitle {
   @extend %t-sage-body-xsmall;
   @include truncate();
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 }
 
 .sage-sortable__item-actions {
diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
index 74e49f3134..ce7ca6961f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -79,7 +79,7 @@ $-stat-box-image-max-width: rem(48px);
 
 .sage-stat-box__title,
 .sage-stat-box__data--no-data {
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 .sage-stat-box__title {
@@ -102,13 +102,13 @@ $-stat-box-image-max-width: rem(48px);
 @each $-color-name, $-color-sliders in $sage-colors {
   .sage-stat-box__title--legend-#{"" + $-color-name} {
     @if ($-color-name == blue) {
-      --legend-color: #{sage-color($-color-name, 60)};
+      --legend-color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == green) {
-      --legend-color: #{sage-color($-color-name, 60)};
+      --legend-color: #{sage-color($-color-name, 600)};
     }
     @else if ($-color-name == mercury) {
-      --legend-color: #{sage-color($-color-name, 50)};
+      --legend-color: #{sage-color($-color-name, 500)};
     }
     @else {
       --legend-color: #{sage-color($-color-name, 500)};
@@ -126,7 +126,7 @@ $-stat-box-image-max-width: rem(48px);
 .sage-stat-box__timeframe {
   @extend %t-sage-body-xsmall;
   margin-left: sage-spacing(xs);
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 }
 
 .sage-stat-box__link {
diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
index 2fda034429..ad8afc716d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
@@ -11,7 +11,7 @@
   display: inline-flex;
   align-items: baseline;
   position: relative;
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
   transition: color map-get($sage-transitions, default), background-color map-get($sage-transitions, default);
   cursor: help;
 
@@ -20,15 +20,15 @@
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 
   &:hover:not(:focus):not(:active) {
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
   }
 
   &:focus,
   &:active {
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 
   .sage-sortable__item & {
diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
index 4066e34501..0a0517a861 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -6,17 +6,17 @@
 
 
 // Colors
-$-switch-color-default: sage-color(grey, 400);
+$-switch-color-default: sage-color(grey, 300);
 $-switch-color-default-hover: sage-color(grey, 500);
-$-switch-color-default-text: sage-color(charcoal, 300);
-$-switch-color-checked: sage-color(charcoal, 400);
-$-switch-color-checked-hover: sage-color(charcoal, 500);
-$-switch-color-disabled: sage-color(grey, 300);
-$-switch-color-disabled-text: sage-color(charcoal, 300);
-$-switch-color-disabled-checked: sage-color(grey, 300);
-$-switch-color-disabled-checked-text: sage-color(charcoal, 100);
-$-switch-color-error: sage-color(red, 300);
-$-switch-focus-outline-error-color: sage-color(red, 200);
+$-switch-color-default-text: sage-color(grey, 800);
+$-switch-color-checked: sage-color(grey, 900);
+$-switch-color-checked-hover: sage-color(grey, 950);
+$-switch-color-disabled: sage-color(grey, 200);
+$-switch-color-disabled-text: sage-color(grey, 800);
+$-switch-color-disabled-checked: sage-color(grey, 200);
+$-switch-color-disabled-checked-text: sage-color(grey, 600);
+$-switch-color-error: sage-color(red, 500);
+$-switch-focus-outline-error-color: sage-color(red, 300);
 
 // Switch
 $-switch-label-left-spacing: rem(12px);
@@ -114,7 +114,7 @@ $-switch-toggle-size: rem(16px);
 
     .sage-switch--has-border & {
       margin-left: ($-switch-width + $-switch-label-left-spacing);
-      color: sage-color(charcoal, 400);
+      color: sage-color(grey, 900);
       font-weight: sage-font-weight(semibold);
     }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss
index 21a9cfc039..5bcbc3fc00 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tab.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss
@@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
 
   .sage-tabs--filter & {
     padding: rem(6px) rem(14px);
-    background-color: sage-color(grey, 300);
+    background-color: sage-color(grey, 200);
     border-radius: sage-border(radius-x-large);
     @extend %t-sage-body-small-semi;
   }
@@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
   &:hover {
     color: $-tab-color-active;
     .sage-tabs--filter & {
-      background: sage-color(grey, 400);
+      background: sage-color(grey, 300);
     }
   }
 
@@ -64,7 +64,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
     color: $-tab-color-active;
     .sage-tabs--filter & {
       color: sage-color(white);
-      background: sage-color(charcoal, 400);
+      background: sage-color(grey, 900);
       &::after {
         display: none;
       }
@@ -116,7 +116,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
     &:not(:last-child) {
       &::before {
         order: 2;
-        color: sage-color(charcoal, 100);
+        color: sage-color(grey, 600);
 
         @include sage-icon-base(right-small, xl, pine);
       }
diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss
index 40599a15da..436872272f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_table.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_table.scss
@@ -5,7 +5,7 @@
 ////
 
 // Borders and sizing
-$-table-header-border: rem(1px) solid sage-color(grey, 300);
+$-table-header-border: rem(1px) solid sage-color(grey, 200);
 $-table-cell-padding-xs: sage-spacing(xs);
 $-table-cell-padding-card: sage-spacing();
 $-table-cell-padding-panel: sage-spacing();
@@ -16,11 +16,11 @@ $-table-max-width: none;
 // Text
 $-table-caption-font-size: "%t-sage-body-small";
 $-table-caption-alignment: center;
-$-table-cell-font-color: sage-color(charcoal, 200);
-$-table-cell-font-color-strong: sage-color(charcoal, 400);
+$-table-cell-font-color: sage-color(grey, 700);
+$-table-cell-font-color-strong: sage-color(grey, 900);
 $-table-cell-type-spec: "%t-sage-body-med";
 $-table-cell-type-spec-strong: "%t-sage-body-semi";
-$-table-heading-font-color: sage-color(charcoal, 500);
+$-table-heading-font-color: sage-color(grey, 950);
 $-table-heading-type-spec: "%t-sage-body-med";
 
 // Overflow gradient
@@ -37,7 +37,7 @@ $-table-overflow-indicator-gradient: linear-gradient(
 
 // Other
 $-table-row-color-hover: sage-color(grey, 100);
-$-table-cell-focus: sage-color(charcoal, 300);
+$-table-cell-focus: sage-color(grey, 800);
 $-table-cell-truncate-width: 6.5em;
 $-table-sort-indicator-width: rem(5px);
 $-table-sort-indicator-direction: rem(7px);
@@ -167,7 +167,7 @@ $-table-avatar-width: rem(32px);
   }
 
   .sage-table__sort-link--selected {
-    color: sage-color(charcoal, 100);
+    color: sage-color(grey, 600);
     text-decoration: underline;
 
     &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss
index c519915740..2b250ce8a1 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss
@@ -38,7 +38,7 @@
   padding-top: sage-spacing(sm);
   padding-left: sage-spacing(xs);
   padding-right: sage-spacing(xs);
-  background-color: sage-color(grey, 300);
+  background-color: sage-color(grey, 200);
 }
 
 .sage-tabs--layout-stacked {
@@ -52,7 +52,7 @@
 .sage-tabs-divider,
 .sage-tabs-container > hr {
   margin: 0;
-  border-top: 1px solid sage-color(grey, 400);
+  border-top: 1px solid sage-color(grey, 300);
 }
 
 .sage-tabs-pane {
diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss
index e2ef901f1b..8d597b22ba 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tag.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss
@@ -5,7 +5,7 @@
 ////
 
 $-tag-image-size: rem(24px);
-$-tag-button-color: sage-color(charcoal, 500);
+$-tag-button-color: sage-color(grey, 950);
 $-tag-button-icon-size: rem(18px);
 $-tag-button-icon-mobile-size: rem(24px);
 
@@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px);
   display: inline-flex;
   align-items: center;
   padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs);
-  background-color: sage-color(grey, 300);
+  background-color: sage-color(grey, 200);
   border-radius: sage-border(radius-x-large);
 
   &:hover {
-    background-color: sage-color(grey, 400);
+    background-color: sage-color(grey, 300);
   }
 
   pds-icon {
@@ -84,5 +84,5 @@ $-tag-button-icon-mobile-size: rem(24px);
 }
 
 .sage-tag__value {
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss
index a10b61b0e2..0b506862af 100644
--- a/packages/sage-assets/lib/stylesheets/components/_toast.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss
@@ -73,7 +73,7 @@ $-toast-bottom-spacing: sage-spacing(xs);
   color: sage-color(white);
   border-radius: sage-border(radius-medium);
   box-shadow: sage-shadow(lg);
-  background-color: sage-color(charcoal, 400);
+  background-color: sage-color(grey, 900);
   animation: 0.5s ease;
 
   @media #{$-toast-breakpoint-default} {
@@ -94,7 +94,7 @@ $-toast-bottom-spacing: sage-spacing(xs);
   }
 
   &.sage-toast--style-danger {
-    background-color: sage-color(red, 300);
+    background-color: sage-color(red, 500);
   }
 
   &.sage-toast--dismissed {
@@ -148,7 +148,7 @@ $-toast-bottom-spacing: sage-spacing(xs);
   }
 
   &.sage-btn--subtle.sage-btn--secondary:not(:focus):hover {
-    color: sage-color(grey, 200);
+    color: sage-color(grey, 150);
     background-color: inherit;
 
     &::after {
@@ -161,7 +161,7 @@ $-toast-bottom-spacing: sage-spacing(xs);
   text-decoration: underline;
 
   @include sage-focus-outline($outline-offset-inline: 4px);
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 }
 
 @keyframes rotate {
diff --git a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss
index eb6fb06e1d..7b58b86522 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss
@@ -6,7 +6,7 @@
 
 
 // Colors
-$-tooltip-bg-color: sage-color(charcoal, 400);
+$-tooltip-bg-color: sage-color(grey, 900);
 $-tooltip-light-bg-color: $-tooltip-bg-color;
 $-tooltip-font-color: sage-color(white);
 $-tooltip-light-font-color: $-tooltip-font-color;
diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
index ad53bfb056..0dfdadc996 100644
--- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -66,7 +66,7 @@ $-transaction-card-price-max-width: rem(100px);
 }
 
 .sage-transaction-card__amount--red {
-  color: sage-color(red, 300);
+  color: sage-color(red, 500);
 }
 
 .sage-transaction-card__label {
@@ -87,11 +87,11 @@ $-transaction-card-price-max-width: rem(100px);
   @extend %t-sage-body-small;
 
   max-width: $-transaction-card-state-max-width;
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
 }
 
 .sage-transaction-card__state--red {
-  color: sage-color(red, 300);
+  color: sage-color(red, 500);
 }
 
 .sage-transaction-card__state--sage {
diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss
index e1e3769e4f..a276d8197a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss
@@ -30,7 +30,7 @@ $-typeahead-item-height: rem(68px);
 .sage-typeahead__null-state {
   @extend %t-sage-body-small;
   padding: sage-spacing(sm);
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
   text-align: center;
 }
 
@@ -47,7 +47,7 @@ $-typeahead-item-height: rem(68px);
 
   &:hover,
   &:focus-within {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
   }
 }
 
@@ -58,7 +58,7 @@ $-typeahead-item-height: rem(68px);
     $outline-offset-inline: -4px,
     $outline-animation-speed: 0.05s
   );
-  @include sage-focus-outline--update-color(sage-color(purple, 30));
+  @include sage-focus-outline--update-color(sage-color(purple, 300));
 
   display: grid;
   position: unset; // Undo position defined in sage-focus-outline()
@@ -91,7 +91,7 @@ $-typeahead-item-height: rem(68px);
     @include truncate;
 
     :hover & {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
     }
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss
index 7272556b91..efdb55caba 100644
--- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss
@@ -7,7 +7,7 @@
 
 $-upload-card-border-radius: sage-border(radius-large);
 $-upload-card-border-width: 2;
-$-upload-card-error-color: sage-color(red, 300);
+$-upload-card-error-color: sage-color(red, 500);
 $-upload-card-body-width: rem(200px);
 $-upload-card-body-width-stack: rem(340px);
 $-upload-card-preview-border-radius: sage-border(radius-medium);
@@ -29,10 +29,10 @@ $-upload-card-mobile-breakpoint: 609px;
   justify-content: flex-start;
   flex: 1 1;
   gap: sage-spacing();
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 
   .sage-upload-card--selected & {
-    color: sage-color(charcoal, 300);
+    color: sage-color(grey, 800);
   }
 
   .sage-upload-card--error & {
@@ -100,7 +100,7 @@ $-upload-card-mobile-breakpoint: 609px;
 
 .sage-upload-card__icon {
   display: inline-flex;
-  color: sage-color(charcoal, 100);
+  color: sage-color(grey, 600);
 
   .sage-upload-card:not(.sage-uploaded-card--selected) & {
     margin-bottom: sage-spacing(2xs);
@@ -142,5 +142,5 @@ $-upload-card-mobile-breakpoint: 609px;
   flex-direction: column;
   align-items: flex-start;
   gap: sage-spacing(sm);
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss
index 3524214b35..11519ff075 100644
--- a/packages/sage-assets/lib/stylesheets/core/_typography.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss
@@ -212,13 +212,13 @@ body:not(.sage-excluded),
   $color-value: "";
 
   @if ($color-name == blue) {
-    $color-value: sage-color($color-name, 60);
+    $color-value: sage-color($color-name, 600);
   }
   @else if ($color-name == green) {
-    $color-value: sage-color($color-name, 60);
+    $color-value: sage-color($color-name, 600);
   }
   @else if ($color-name == mercury) {
-    $color-value: sage-color($color-name, 50);
+    $color-value: sage-color($color-name, 500);
   }
   @else if ($color-name == grey) {
     $color-value: sage-color($color-name, 500);
diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss
index 898977de9d..3a8e3e5c3b 100644
--- a/packages/sage-assets/lib/stylesheets/core/_variables.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss
@@ -15,7 +15,7 @@ $sage-greet-font-path: "#{$sage-font-cdn-root}/greet";
 ///
 $sage-active-underline-configs: (
   height: rem(3px),
-  color: sage-color(mercury, 50),
+  color: sage-color(mercury, 500),
 );
 
 ///
@@ -51,11 +51,11 @@ $sage-field-configs: (
 /// Field coloring
 ///
 $sage-field-colors: (
-  border: sage-color(grey, 400),
-  default: sage-color(charcoal, 300),
+  border: sage-color(grey, 300),
+  default: sage-color(grey, 800),
   disabled: sage-color(grey, 500),
-  disabled-background: sage-color(grey, 200),
-  error: sage-color(red, 300),
+  disabled-background: sage-color(grey, 150),
+  error: sage-color(red, 500),
   label-background: sage-color(white),
   success: sage-color(primary, 300),
 );
@@ -66,13 +66,13 @@ $sage-field-colors: (
 /// Radio button colors
 ///
 $sage-radio-colors: (
-  checked: sage-color(charcoal, 400),
-  checked-disabled: sage-color(grey, 300),
-  checked-hover: sage-color(charcoal, 500),
+  checked: sage-color(grey, 900),
+  checked-disabled: sage-color(grey, 200),
+  checked-hover: sage-color(grey, 950),
   checked-inner: sage-color(white),
-  default: sage-color(grey, 400),
-  disabled: sage-color(grey, 200),
-  error: sage-color(red, 300),
+  default: sage-color(grey, 300),
+  disabled: sage-color(grey, 150),
+  error: sage-color(red, 500),
   hover: sage-color(grey, 500),
 );
 
@@ -85,17 +85,17 @@ $sage-radio-size: rem(16px);
 /// Tab colors shared by components such as tabs and choices
 ///
 $sage-tab-colors: (
-  default: sage-color(charcoal, 300),
-  active: sage-color(charcoal, 400),
-  disabled: sage-color(charcoal, 100),
+  default: sage-color(grey, 800),
+  active: sage-color(grey, 900),
+  disabled: sage-color(grey, 600),
 );
 
 ///
 /// Standard text colors
 ///
 $sage-text-colors: (
-  body: sage-color(charcoal, 400),
-  heading: sage-color(charcoal, 500),
+  body: sage-color(grey, 900),
+  heading: sage-color(grey, 950),
 );
 
 ///
@@ -103,7 +103,7 @@ $sage-text-colors: (
 ///
 $sage-toolbar-button-borders: (
   default: 0 0 0 1px sage-color(grey, 500),
-  focus: 0 0 0 2px sage-color(purple, 30),
+  focus: 0 0 0 2px sage-color(purple, 300),
   hover: 0 0 0 1px sage-color(charcoal, 100),
   hover-large: 0 0 0 2px sage-color(charcoal, 100),
   active-hover: 0 0 0 4px sage-color(primary, 200),
diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
index 79cd6ccafe..5447a35b1d 100644
--- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
+++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -58,7 +58,7 @@
   @include truncate();
 
   padding: rem(6px) sage-spacing(sm);
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
   background-color: transparent;
   border: $-copy-text-border;
   border-radius: sage-border(radius-medium);
@@ -178,7 +178,7 @@
 /// @param {time} $focus-animation-speed [0.2s] How quickly the focus ring animates on activation
 ///
 @mixin sage-focus-ring(
-  $focus-shadow: sage-color(purple, 30),
+  $focus-shadow: sage-color(purple, 300),
   $focus-width-inner: 1px,
   $focus-width-outter: 3px
 ) {
@@ -410,7 +410,7 @@
 
   width: 100%;
   padding: sage-spacing(sm);
-  color: sage-color(charcoal, 400);
+  color: sage-color(grey, 900);
   appearance: none;
   box-shadow: sage-border-interactive(default);
   border: 0;
@@ -420,11 +420,11 @@
   transition-property: border, box-shadow, color;
 
   @include placeholder {
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 
   &:hover:not(:disabled) {
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     box-shadow: sage-border-interactive(hover);
 
     .sage-form-field--error & {
@@ -453,7 +453,7 @@
     resize: none;
 
     @include placeholder {
-      color: sage-color(charcoal, 200);
+      color: sage-color(grey, 700);
     }
 
     .sage-form-field--showplaceholder & ~ label {
@@ -473,12 +473,12 @@
   .sage-form-field--error &:focus:not(:disabled),
   .sage-form-field--error &:not(:placeholder-shown),
   .sage-form-field--error &:required:not(:placeholder-shown):not(:valid) {
-    @include sage-focus-ring(sage-color(red, 200));
+    @include sage-focus-ring(sage-color(red, 300));
 
     box-shadow: sage-border-interactive(error);
 
     ~ label {
-      color: sage-color(charcoal, 400);
+      color: sage-color(grey, 900);
     }
 
     &:hover:not(:disabled) {
@@ -549,10 +549,10 @@
   @extend %t-sage-body-small-med;
 
   margin-top: sage-spacing(xs);
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 
   .sage-form-field--error & {
-    color: sage-color(red, 300);
+    color: sage-color(red, 500);
 
     &::before {
       @include sage-icon-base(danger, md, pine);
@@ -613,7 +613,7 @@
   position: relative;
   z-index: sage-z-index(default);
   width: 100%;
-  color: sage-color(charcoal, 200);
+  color: sage-color(grey, 700);
 }
 
 ///
diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
index 8f5b4b5b52..f7a726fbb0 100644
--- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
+++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
@@ -22,437 +22,437 @@
 // Static vars for color base
 //
 ///
-/// color color-base-blue-5-hex
+/// color color-base-blue-100-hex
 ///
-$sd-sage-color-base-blue-5-hex: #fafcff;
+$sd-sage-color-base-blue-100-hex: #eff6ff;
 ///
-/// color color-base-blue-5-code
+/// color color-base-blue-100-code
 ///
-$sd-sage-color-base-blue-5-code: "blue-5";
+$sd-sage-color-base-blue-100-code: "blue-100";
 ///
-/// color color-base-blue-5-classname
+/// color color-base-blue-100-classname
 ///
-$sd-sage-color-base-blue-5-classname: "t-sage--color-blue-5";
+$sd-sage-color-base-blue-100-classname: "t-sage--color-blue-100";
 ///
-/// color color-base-blue-10-hex
+/// color color-base-blue-150-hex
 ///
-$sd-sage-color-base-blue-10-hex: #eff6ff;
+$sd-sage-color-base-blue-150-hex: #dbe9fe;
 ///
-/// color color-base-blue-10-code
+/// color color-base-blue-150-code
 ///
-$sd-sage-color-base-blue-10-code: "blue-10";
+$sd-sage-color-base-blue-150-code: "blue-150";
 ///
-/// color color-base-blue-10-classname
+/// color color-base-blue-150-classname
 ///
-$sd-sage-color-base-blue-10-classname: "t-sage--color-blue-10";
+$sd-sage-color-base-blue-150-classname: "t-sage--color-blue-150";
 ///
-/// color color-base-blue-15-hex
+/// color color-base-blue-200-hex
 ///
-$sd-sage-color-base-blue-15-hex: #dbe9fe;
+$sd-sage-color-base-blue-200-hex: #bfdbfe;
 ///
-/// color color-base-blue-15-code
+/// color color-base-blue-200-code
 ///
-$sd-sage-color-base-blue-15-code: "blue-15";
+$sd-sage-color-base-blue-200-code: "blue-200";
 ///
-/// color color-base-blue-15-classname
+/// color color-base-blue-200-classname
 ///
-$sd-sage-color-base-blue-15-classname: "t-sage--color-blue-15";
+$sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
 ///
-/// color color-base-blue-20-hex
+/// color color-base-blue-300-hex
 ///
-$sd-sage-color-base-blue-20-hex: #bfdbfe;
+$sd-sage-color-base-blue-300-hex: #92c5fd;
 ///
-/// color color-base-blue-20-code
+/// color color-base-blue-300-code
 ///
-$sd-sage-color-base-blue-20-code: "blue-20";
+$sd-sage-color-base-blue-300-code: "blue-300";
 ///
-/// color color-base-blue-20-classname
+/// color color-base-blue-300-classname
 ///
-$sd-sage-color-base-blue-20-classname: "t-sage--color-blue-20";
+$sd-sage-color-base-blue-300-classname: "t-sage--color-blue-300";
 ///
-/// color color-base-blue-30-hex
+/// color color-base-blue-400-hex
 ///
-$sd-sage-color-base-blue-30-hex: #92c5fd;
+$sd-sage-color-base-blue-400-hex: #60a5fa;
 ///
-/// color color-base-blue-30-code
+/// color color-base-blue-400-code
 ///
-$sd-sage-color-base-blue-30-code: "blue-30";
+$sd-sage-color-base-blue-400-code: "blue-400";
 ///
-/// color color-base-blue-30-classname
+/// color color-base-blue-400-classname
 ///
-$sd-sage-color-base-blue-30-classname: "t-sage--color-blue-30";
+$sd-sage-color-base-blue-400-classname: "t-sage--color-blue-400";
 ///
-/// color color-base-blue-40-hex
+/// color color-base-blue-500-hex
 ///
-$sd-sage-color-base-blue-40-hex: #60a5fa;
+$sd-sage-color-base-blue-500-hex: #3c82f6;
 ///
-/// color color-base-blue-40-code
+/// color color-base-blue-500-code
 ///
-$sd-sage-color-base-blue-40-code: "blue-40";
+$sd-sage-color-base-blue-500-code: "blue-500";
 ///
-/// color color-base-blue-40-classname
+/// color color-base-blue-500-classname
 ///
-$sd-sage-color-base-blue-40-classname: "t-sage--color-blue-40";
+$sd-sage-color-base-blue-500-classname: "t-sage--color-blue-500";
 ///
-/// color color-base-blue-50-hex
+/// color color-base-blue-600-hex
 ///
-$sd-sage-color-base-blue-50-hex: #3c82f6;
+$sd-sage-color-base-blue-600-hex: #2463eb;
 ///
-/// color color-base-blue-50-code
+/// color color-base-blue-600-code
 ///
-$sd-sage-color-base-blue-50-code: "blue-50";
+$sd-sage-color-base-blue-600-code: "blue-600";
 ///
-/// color color-base-blue-50-classname
+/// color color-base-blue-600-classname
 ///
-$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50";
+$sd-sage-color-base-blue-600-classname: "t-sage--color-blue-600";
 ///
-/// color color-base-blue-60-hex
+/// color color-base-blue-700-hex
 ///
-$sd-sage-color-base-blue-60-hex: #2463eb;
+$sd-sage-color-base-blue-700-hex: #1c4ed8;
 ///
-/// color color-base-blue-60-code
+/// color color-base-blue-700-code
 ///
-$sd-sage-color-base-blue-60-code: "blue-60";
+$sd-sage-color-base-blue-700-code: "blue-700";
 ///
-/// color color-base-blue-60-classname
+/// color color-base-blue-700-classname
 ///
-$sd-sage-color-base-blue-60-classname: "t-sage--color-blue-60";
+$sd-sage-color-base-blue-700-classname: "t-sage--color-blue-700";
 ///
-/// color color-base-blue-70-hex
+/// color color-base-blue-800-hex
 ///
-$sd-sage-color-base-blue-70-hex: #1c4ed8;
+$sd-sage-color-base-blue-800-hex: #1d40ae;
 ///
-/// color color-base-blue-70-code
+/// color color-base-blue-800-code
 ///
-$sd-sage-color-base-blue-70-code: "blue-70";
+$sd-sage-color-base-blue-800-code: "blue-800";
 ///
-/// color color-base-blue-70-classname
+/// color color-base-blue-800-classname
 ///
-$sd-sage-color-base-blue-70-classname: "t-sage--color-blue-70";
+$sd-sage-color-base-blue-800-classname: "t-sage--color-blue-800";
 ///
-/// color color-base-blue-80-hex
+/// color color-base-blue-900-hex
 ///
-$sd-sage-color-base-blue-80-hex: #1d40ae;
+$sd-sage-color-base-blue-900-hex: #1f3a8a;
 ///
-/// color color-base-blue-80-code
+/// color color-base-blue-900-code
 ///
-$sd-sage-color-base-blue-80-code: "blue-80";
+$sd-sage-color-base-blue-900-code: "blue-900";
 ///
-/// color color-base-blue-80-classname
+/// color color-base-blue-900-classname
 ///
-$sd-sage-color-base-blue-80-classname: "t-sage--color-blue-80";
+$sd-sage-color-base-blue-900-classname: "t-sage--color-blue-900";
 ///
-/// color color-base-blue-90-hex
+/// color color-base-blue-950-hex
 ///
-$sd-sage-color-base-blue-90-hex: #1f3a8a;
+$sd-sage-color-base-blue-950-hex: #172554;
 ///
-/// color color-base-blue-90-code
+/// color color-base-blue-950-code
 ///
-$sd-sage-color-base-blue-90-code: "blue-90";
+$sd-sage-color-base-blue-950-code: "blue-950";
 ///
-/// color color-base-blue-90-classname
+/// color color-base-blue-950-classname
 ///
-$sd-sage-color-base-blue-90-classname: "t-sage--color-blue-90";
+$sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950";
 ///
-/// color color-base-blue-95-hex
+/// color color-base-blue-050-hex
 ///
-$sd-sage-color-base-blue-95-hex: #172554;
+$sd-sage-color-base-blue-050-hex: #fafcff;
 ///
-/// color color-base-blue-95-code
+/// color color-base-blue-050-code
 ///
-$sd-sage-color-base-blue-95-code: "blue-95";
+$sd-sage-color-base-blue-050-code: "blue-050";
 ///
-/// color color-base-blue-95-classname
+/// color color-base-blue-050-classname
 ///
-$sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95";
+$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050";
 ///
-/// color color-base-green-5-hex
+/// color color-base-green-100-hex
 ///
-$sd-sage-color-base-green-5-hex: #fbfefc;
+$sd-sage-color-base-green-100-hex: #edfcf2;
 ///
-/// color color-base-green-5-code
+/// color color-base-green-100-code
 ///
-$sd-sage-color-base-green-5-code: "green-5";
+$sd-sage-color-base-green-100-code: "green-100";
 ///
-/// color color-base-green-5-classname
+/// color color-base-green-100-classname
 ///
-$sd-sage-color-base-green-5-classname: "t-sage--color-green-5";
+$sd-sage-color-base-green-100-classname: "t-sage--color-green-100";
 ///
-/// color color-base-green-10-hex
+/// color color-base-green-150-hex
 ///
-$sd-sage-color-base-green-10-hex: #edfcf2;
+$sd-sage-color-base-green-150-hex: #d3f8df;
 ///
-/// color color-base-green-10-code
+/// color color-base-green-150-code
 ///
-$sd-sage-color-base-green-10-code: "green-10";
+$sd-sage-color-base-green-150-code: "green-150";
 ///
-/// color color-base-green-10-classname
+/// color color-base-green-150-classname
 ///
-$sd-sage-color-base-green-10-classname: "t-sage--color-green-10";
+$sd-sage-color-base-green-150-classname: "t-sage--color-green-150";
 ///
-/// color color-base-green-15-hex
+/// color color-base-green-200-hex
 ///
-$sd-sage-color-base-green-15-hex: #d3f8df;
+$sd-sage-color-base-green-200-hex: #aaf0c4;
 ///
-/// color color-base-green-15-code
+/// color color-base-green-200-code
 ///
-$sd-sage-color-base-green-15-code: "green-15";
+$sd-sage-color-base-green-200-code: "green-200";
 ///
-/// color color-base-green-15-classname
+/// color color-base-green-200-classname
 ///
-$sd-sage-color-base-green-15-classname: "t-sage--color-green-15";
+$sd-sage-color-base-green-200-classname: "t-sage--color-green-200";
 ///
-/// color color-base-green-20-hex
+/// color color-base-green-300-hex
 ///
-$sd-sage-color-base-green-20-hex: #aaf0c4;
+$sd-sage-color-base-green-300-hex: #73e2a3;
 ///
-/// color color-base-green-20-code
+/// color color-base-green-300-code
 ///
-$sd-sage-color-base-green-20-code: "green-20";
+$sd-sage-color-base-green-300-code: "green-300";
 ///
-/// color color-base-green-20-classname
+/// color color-base-green-300-classname
 ///
-$sd-sage-color-base-green-20-classname: "t-sage--color-green-20";
+$sd-sage-color-base-green-300-classname: "t-sage--color-green-300";
 ///
-/// color color-base-green-30-hex
+/// color color-base-green-400-hex
 ///
-$sd-sage-color-base-green-30-hex: #73e2a3;
+$sd-sage-color-base-green-400-hex: #3dcb7f;
 ///
-/// color color-base-green-30-code
+/// color color-base-green-400-code
 ///
-$sd-sage-color-base-green-30-code: "green-30";
+$sd-sage-color-base-green-400-code: "green-400";
 ///
-/// color color-base-green-30-classname
+/// color color-base-green-400-classname
 ///
-$sd-sage-color-base-green-30-classname: "t-sage--color-green-30";
+$sd-sage-color-base-green-400-classname: "t-sage--color-green-400";
 ///
-/// color color-base-green-40-hex
+/// color color-base-green-500-hex
 ///
-$sd-sage-color-base-green-40-hex: #3dcb7f;
+$sd-sage-color-base-green-500-hex: #17b365;
 ///
-/// color color-base-green-40-code
+/// color color-base-green-500-code
 ///
-$sd-sage-color-base-green-40-code: "green-40";
+$sd-sage-color-base-green-500-code: "green-500";
 ///
-/// color color-base-green-40-classname
+/// color color-base-green-500-classname
 ///
-$sd-sage-color-base-green-40-classname: "t-sage--color-green-40";
+$sd-sage-color-base-green-500-classname: "t-sage--color-green-500";
 ///
-/// color color-base-green-50-hex
+/// color color-base-green-600-hex
 ///
-$sd-sage-color-base-green-50-hex: #17b365;
+$sd-sage-color-base-green-600-hex: #079250;
 ///
-/// color color-base-green-50-code
+/// color color-base-green-600-code
 ///
-$sd-sage-color-base-green-50-code: "green-50";
+$sd-sage-color-base-green-600-code: "green-600";
 ///
-/// color color-base-green-50-classname
+/// color color-base-green-600-classname
 ///
-$sd-sage-color-base-green-50-classname: "t-sage--color-green-50";
+$sd-sage-color-base-green-600-classname: "t-sage--color-green-600";
 ///
-/// color color-base-green-60-hex
+/// color color-base-green-700-hex
 ///
-$sd-sage-color-base-green-60-hex: #079250;
+$sd-sage-color-base-green-700-hex: #097443;
 ///
-/// color color-base-green-60-code
+/// color color-base-green-700-code
 ///
-$sd-sage-color-base-green-60-code: "green-60";
+$sd-sage-color-base-green-700-code: "green-700";
 ///
-/// color color-base-green-60-classname
+/// color color-base-green-700-classname
 ///
-$sd-sage-color-base-green-60-classname: "t-sage--color-green-60";
+$sd-sage-color-base-green-700-classname: "t-sage--color-green-700";
 ///
-/// color color-base-green-70-hex
+/// color color-base-green-800-hex
 ///
-$sd-sage-color-base-green-70-hex: #097443;
+$sd-sage-color-base-green-800-hex: #085c37;
 ///
-/// color color-base-green-70-code
+/// color color-base-green-800-code
 ///
-$sd-sage-color-base-green-70-code: "green-70";
+$sd-sage-color-base-green-800-code: "green-800";
 ///
-/// color color-base-green-70-classname
+/// color color-base-green-800-classname
 ///
-$sd-sage-color-base-green-70-classname: "t-sage--color-green-70";
+$sd-sage-color-base-green-800-classname: "t-sage--color-green-800";
 ///
-/// color color-base-green-80-hex
+/// color color-base-green-900-hex
 ///
-$sd-sage-color-base-green-80-hex: #085c37;
+$sd-sage-color-base-green-900-hex: #094c2f;
 ///
-/// color color-base-green-80-code
+/// color color-base-green-900-code
 ///
-$sd-sage-color-base-green-80-code: "green-80";
+$sd-sage-color-base-green-900-code: "green-900";
 ///
-/// color color-base-green-80-classname
+/// color color-base-green-900-classname
 ///
-$sd-sage-color-base-green-80-classname: "t-sage--color-green-80";
+$sd-sage-color-base-green-900-classname: "t-sage--color-green-900";
 ///
-/// color color-base-green-90-hex
+/// color color-base-green-950-hex
 ///
-$sd-sage-color-base-green-90-hex: #094c2f;
+$sd-sage-color-base-green-950-hex: #052e1c;
 ///
-/// color color-base-green-90-code
+/// color color-base-green-950-code
 ///
-$sd-sage-color-base-green-90-code: "green-90";
+$sd-sage-color-base-green-950-code: "green-950";
 ///
-/// color color-base-green-90-classname
+/// color color-base-green-950-classname
 ///
-$sd-sage-color-base-green-90-classname: "t-sage--color-green-90";
+$sd-sage-color-base-green-950-classname: "t-sage--color-green-950";
 ///
-/// color color-base-green-95-hex
+/// color color-base-green-050-hex
 ///
-$sd-sage-color-base-green-95-hex: #052e1c;
+$sd-sage-color-base-green-050-hex: #fbfefc;
 ///
-/// color color-base-green-95-code
+/// color color-base-green-050-code
 ///
-$sd-sage-color-base-green-95-code: "green-95";
+$sd-sage-color-base-green-050-code: "green-050";
 ///
-/// color color-base-green-95-classname
+/// color color-base-green-050-classname
 ///
-$sd-sage-color-base-green-95-classname: "t-sage--color-green-95";
+$sd-sage-color-base-green-050-classname: "t-sage--color-green-050";
 ///
-/// color color-base-mercury-5-hex
+/// color color-base-mercury-100-hex
 ///
-$sd-sage-color-base-mercury-5-hex: #fffcfa;
+$sd-sage-color-base-mercury-100-hex: #fff3ed;
 ///
-/// color color-base-mercury-5-code
+/// color color-base-mercury-100-code
 ///
-$sd-sage-color-base-mercury-5-code: "mercury-5";
+$sd-sage-color-base-mercury-100-code: "mercury-100";
 ///
-/// color color-base-mercury-5-classname
+/// color color-base-mercury-100-classname
 ///
-$sd-sage-color-base-mercury-5-classname: "t-sage--color-mercury-5";
+$sd-sage-color-base-mercury-100-classname: "t-sage--color-mercury-100";
 ///
-/// color color-base-mercury-10-hex
+/// color color-base-mercury-150-hex
 ///
-$sd-sage-color-base-mercury-10-hex: #fff3ed;
+$sd-sage-color-base-mercury-150-hex: #ffe3d4;
 ///
-/// color color-base-mercury-10-code
+/// color color-base-mercury-150-code
 ///
-$sd-sage-color-base-mercury-10-code: "mercury-10";
+$sd-sage-color-base-mercury-150-code: "mercury-150";
 ///
-/// color color-base-mercury-10-classname
+/// color color-base-mercury-150-classname
 ///
-$sd-sage-color-base-mercury-10-classname: "t-sage--color-mercury-10";
+$sd-sage-color-base-mercury-150-classname: "t-sage--color-mercury-150";
 ///
-/// color color-base-mercury-15-hex
+/// color color-base-mercury-200-hex
 ///
-$sd-sage-color-base-mercury-15-hex: #ffe3d4;
+$sd-sage-color-base-mercury-200-hex: #ffc3a8;
 ///
-/// color color-base-mercury-15-code
+/// color color-base-mercury-200-code
 ///
-$sd-sage-color-base-mercury-15-code: "mercury-15";
+$sd-sage-color-base-mercury-200-code: "mercury-200";
 ///
-/// color color-base-mercury-15-classname
+/// color color-base-mercury-200-classname
 ///
-$sd-sage-color-base-mercury-15-classname: "t-sage--color-mercury-15";
+$sd-sage-color-base-mercury-200-classname: "t-sage--color-mercury-200";
 ///
-/// color color-base-mercury-20-hex
+/// color color-base-mercury-300-hex
 ///
-$sd-sage-color-base-mercury-20-hex: #ffc3a8;
+$sd-sage-color-base-mercury-300-hex: #ff9970;
 ///
-/// color color-base-mercury-20-code
+/// color color-base-mercury-300-code
 ///
-$sd-sage-color-base-mercury-20-code: "mercury-20";
+$sd-sage-color-base-mercury-300-code: "mercury-300";
 ///
-/// color color-base-mercury-20-classname
+/// color color-base-mercury-300-classname
 ///
-$sd-sage-color-base-mercury-20-classname: "t-sage--color-mercury-20";
+$sd-sage-color-base-mercury-300-classname: "t-sage--color-mercury-300";
 ///
-/// color color-base-mercury-30-hex
+/// color color-base-mercury-400-hex
 ///
-$sd-sage-color-base-mercury-30-hex: #ff9970;
+$sd-sage-color-base-mercury-400-hex: #ff6337;
 ///
-/// color color-base-mercury-30-code
+/// color color-base-mercury-400-code
 ///
-$sd-sage-color-base-mercury-30-code: "mercury-30";
+$sd-sage-color-base-mercury-400-code: "mercury-400";
 ///
-/// color color-base-mercury-30-classname
+/// color color-base-mercury-400-classname
 ///
-$sd-sage-color-base-mercury-30-classname: "t-sage--color-mercury-30";
+$sd-sage-color-base-mercury-400-classname: "t-sage--color-mercury-400";
 ///
-/// color color-base-mercury-40-hex
+/// color color-base-mercury-500-hex
 ///
-$sd-sage-color-base-mercury-40-hex: #ff6337;
+$sd-sage-color-base-mercury-500-hex: #ff3e15;
 ///
-/// color color-base-mercury-40-code
+/// color color-base-mercury-500-code
 ///
-$sd-sage-color-base-mercury-40-code: "mercury-40";
+$sd-sage-color-base-mercury-500-code: "mercury-500";
 ///
-/// color color-base-mercury-40-classname
+/// color color-base-mercury-500-classname
 ///
-$sd-sage-color-base-mercury-40-classname: "t-sage--color-mercury-40";
+$sd-sage-color-base-mercury-500-classname: "t-sage--color-mercury-500";
 ///
-/// color color-base-mercury-50-hex
+/// color color-base-mercury-600-hex
 ///
-$sd-sage-color-base-mercury-50-hex: #ff3e15;
+$sd-sage-color-base-mercury-600-hex: #f11f06;
 ///
-/// color color-base-mercury-50-code
+/// color color-base-mercury-600-code
 ///
-$sd-sage-color-base-mercury-50-code: "mercury-50";
+$sd-sage-color-base-mercury-600-code: "mercury-600";
 ///
-/// color color-base-mercury-50-classname
+/// color color-base-mercury-600-classname
 ///
-$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50";
+$sd-sage-color-base-mercury-600-classname: "t-sage--color-mercury-600";
 ///
-/// color color-base-mercury-60-hex
+/// color color-base-mercury-700-hex
 ///
-$sd-sage-color-base-mercury-60-hex: #f11f06;
+$sd-sage-color-base-mercury-700-hex: #c81307;
 ///
-/// color color-base-mercury-60-code
+/// color color-base-mercury-700-code
 ///
-$sd-sage-color-base-mercury-60-code: "mercury-60";
+$sd-sage-color-base-mercury-700-code: "mercury-700";
 ///
-/// color color-base-mercury-60-classname
+/// color color-base-mercury-700-classname
 ///
-$sd-sage-color-base-mercury-60-classname: "t-sage--color-mercury-60";
+$sd-sage-color-base-mercury-700-classname: "t-sage--color-mercury-700";
 ///
-/// color color-base-mercury-70-hex
+/// color color-base-mercury-800-hex
 ///
-$sd-sage-color-base-mercury-70-hex: #c81307;
+$sd-sage-color-base-mercury-800-hex: #9e110e;
 ///
-/// color color-base-mercury-70-code
+/// color color-base-mercury-800-code
 ///
-$sd-sage-color-base-mercury-70-code: "mercury-70";
+$sd-sage-color-base-mercury-800-code: "mercury-800";
 ///
-/// color color-base-mercury-70-classname
+/// color color-base-mercury-800-classname
 ///
-$sd-sage-color-base-mercury-70-classname: "t-sage--color-mercury-70";
+$sd-sage-color-base-mercury-800-classname: "t-sage--color-mercury-800";
 ///
-/// color color-base-mercury-80-hex
+/// color color-base-mercury-900-hex
 ///
-$sd-sage-color-base-mercury-80-hex: #9e110e;
+$sd-sage-color-base-mercury-900-hex: #7f120f;
 ///
-/// color color-base-mercury-80-code
+/// color color-base-mercury-900-code
 ///
-$sd-sage-color-base-mercury-80-code: "mercury-80";
+$sd-sage-color-base-mercury-900-code: "mercury-900";
 ///
-/// color color-base-mercury-80-classname
+/// color color-base-mercury-900-classname
 ///
-$sd-sage-color-base-mercury-80-classname: "t-sage--color-mercury-80";
+$sd-sage-color-base-mercury-900-classname: "t-sage--color-mercury-900";
 ///
-/// color color-base-mercury-90-hex
+/// color color-base-mercury-950-hex
 ///
-$sd-sage-color-base-mercury-90-hex: #7f120f;
+$sd-sage-color-base-mercury-950-hex: #450506;
 ///
-/// color color-base-mercury-90-code
+/// color color-base-mercury-950-code
 ///
-$sd-sage-color-base-mercury-90-code: "mercury-90";
+$sd-sage-color-base-mercury-950-code: "mercury-950";
 ///
-/// color color-base-mercury-90-classname
+/// color color-base-mercury-950-classname
 ///
-$sd-sage-color-base-mercury-90-classname: "t-sage--color-mercury-90";
+$sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950";
 ///
-/// color color-base-mercury-95-hex
+/// color color-base-mercury-050-hex
 ///
-$sd-sage-color-base-mercury-95-hex: #450506;
+$sd-sage-color-base-mercury-050-hex: #fffcfa;
 ///
-/// color color-base-mercury-95-code
+/// color color-base-mercury-050-code
 ///
-$sd-sage-color-base-mercury-95-code: "mercury-95";
+$sd-sage-color-base-mercury-050-code: "mercury-050";
 ///
-/// color color-base-mercury-95-classname
+/// color color-base-mercury-050-classname
 ///
-$sd-sage-color-base-mercury-95-classname: "t-sage--color-mercury-95";
+$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050";
 ///
 /// color color-base-primary-100-hex
 ///
@@ -574,165 +574,33 @@ $sd-sage-color-base-sage-500-code: "sage-500";
 ///
 $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500";
 ///
-/// color color-base-yellow-5-hex
-///
-$sd-sage-color-base-yellow-5-hex: #fffefa;
-///
-/// color color-base-yellow-5-code
-///
-$sd-sage-color-base-yellow-5-code: "yellow-5";
-///
-/// color color-base-yellow-5-classname
-///
-$sd-sage-color-base-yellow-5-classname: "t-sage--color-yellow-5";
-///
-/// color color-base-yellow-10-hex
-///
-$sd-sage-color-base-yellow-10-hex: #fffbeb;
-///
-/// color color-base-yellow-10-code
-///
-$sd-sage-color-base-yellow-10-code: "yellow-10";
-///
-/// color color-base-yellow-10-classname
-///
-$sd-sage-color-base-yellow-10-classname: "t-sage--color-yellow-10";
-///
-/// color color-base-yellow-15-hex
-///
-$sd-sage-color-base-yellow-15-hex: #fff3c6;
-///
-/// color color-base-yellow-15-code
-///
-$sd-sage-color-base-yellow-15-code: "yellow-15";
-///
-/// color color-base-yellow-15-classname
-///
-$sd-sage-color-base-yellow-15-classname: "t-sage--color-yellow-15";
-///
-/// color color-base-yellow-20-hex
-///
-$sd-sage-color-base-yellow-20-hex: #fee589;
-///
-/// color color-base-yellow-20-code
-///
-$sd-sage-color-base-yellow-20-code: "yellow-20";
-///
-/// color color-base-yellow-20-classname
-///
-$sd-sage-color-base-yellow-20-classname: "t-sage--color-yellow-20";
-///
-/// color color-base-yellow-30-hex
-///
-$sd-sage-color-base-yellow-30-hex: #fed04b;
-///
-/// color color-base-yellow-30-code
-///
-$sd-sage-color-base-yellow-30-code: "yellow-30";
-///
-/// color color-base-yellow-30-classname
-///
-$sd-sage-color-base-yellow-30-classname: "t-sage--color-yellow-30";
-///
-/// color color-base-yellow-40-hex
-///
-$sd-sage-color-base-yellow-40-hex: #fdbb21;
-///
-/// color color-base-yellow-40-code
-///
-$sd-sage-color-base-yellow-40-code: "yellow-40";
-///
-/// color color-base-yellow-40-classname
-///
-$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40";
-///
-/// color color-base-yellow-50-hex
-///
-$sd-sage-color-base-yellow-50-hex: #f79a0b;
-///
-/// color color-base-yellow-50-code
-///
-$sd-sage-color-base-yellow-50-code: "yellow-50";
-///
-/// color color-base-yellow-50-classname
-///
-$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50";
-///
-/// color color-base-yellow-60-hex
-///
-$sd-sage-color-base-yellow-60-hex: #db7303;
-///
-/// color color-base-yellow-60-code
-///
-$sd-sage-color-base-yellow-60-code: "yellow-60";
-///
-/// color color-base-yellow-60-classname
-///
-$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60";
-///
-/// color color-base-yellow-70-hex
-///
-$sd-sage-color-base-yellow-70-hex: #b64f06;
-///
-/// color color-base-yellow-70-code
-///
-$sd-sage-color-base-yellow-70-code: "yellow-70";
-///
-/// color color-base-yellow-70-classname
-///
-$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70";
-///
-/// color color-base-yellow-80-hex
-///
-$sd-sage-color-base-yellow-80-hex: #943d0e;
-///
-/// color color-base-yellow-80-code
-///
-$sd-sage-color-base-yellow-80-code: "yellow-80";
-///
-/// color color-base-yellow-80-classname
-///
-$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80";
-///
-/// color color-base-yellow-90-hex
-///
-$sd-sage-color-base-yellow-90-hex: #79330e;
-///
-/// color color-base-yellow-90-code
-///
-$sd-sage-color-base-yellow-90-code: "yellow-90";
-///
-/// color color-base-yellow-90-classname
-///
-$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90";
-///
-/// color color-base-yellow-95-hex
+/// color color-base-yellow-100-hex
 ///
-$sd-sage-color-base-yellow-95-hex: #451902;
+$sd-sage-color-base-yellow-100-hex: #fffbeb;
 ///
-/// color color-base-yellow-95-code
+/// color color-base-yellow-100-code
 ///
-$sd-sage-color-base-yellow-95-code: "yellow-95";
+$sd-sage-color-base-yellow-100-code: "yellow-100";
 ///
-/// color color-base-yellow-95-classname
+/// color color-base-yellow-100-classname
 ///
-$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95";
+$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";
 ///
-/// color color-base-yellow-100-hex
+/// color color-base-yellow-150-hex
 ///
-$sd-sage-color-base-yellow-100-hex: #fff3c6;
+$sd-sage-color-base-yellow-150-hex: #fff3c6;
 ///
-/// color color-base-yellow-100-code
+/// color color-base-yellow-150-code
 ///
-$sd-sage-color-base-yellow-100-code: "yellow-100";
+$sd-sage-color-base-yellow-150-code: "yellow-150";
 ///
-/// color color-base-yellow-100-classname
+/// color color-base-yellow-150-classname
 ///
-$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";
+$sd-sage-color-base-yellow-150-classname: "t-sage--color-yellow-150";
 ///
 /// color color-base-yellow-200-hex
 ///
-$sd-sage-color-base-yellow-200-hex: #fed04b;
+$sd-sage-color-base-yellow-200-hex: #fee589;
 ///
 /// color color-base-yellow-200-code
 ///
@@ -744,7 +612,7 @@ $sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200";
 ///
 /// color color-base-yellow-300-hex
 ///
-$sd-sage-color-base-yellow-300-hex: #fdbb21;
+$sd-sage-color-base-yellow-300-hex: #fed04b;
 ///
 /// color color-base-yellow-300-code
 ///
@@ -756,7 +624,7 @@ $sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300";
 ///
 /// color color-base-yellow-400-hex
 ///
-$sd-sage-color-base-yellow-400-hex: #db7303;
+$sd-sage-color-base-yellow-400-hex: #fdbb21;
 ///
 /// color color-base-yellow-400-code
 ///
@@ -768,7 +636,7 @@ $sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400";
 ///
 /// color color-base-yellow-500-hex
 ///
-$sd-sage-color-base-yellow-500-hex: #451902;
+$sd-sage-color-base-yellow-500-hex: #f79a0b;
 ///
 /// color color-base-yellow-500-code
 ///
@@ -778,209 +646,221 @@ $sd-sage-color-base-yellow-500-code: "yellow-500";
 ///
 $sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500";
 ///
-/// color color-base-red-5-hex
+/// color color-base-yellow-600-hex
 ///
-$sd-sage-color-base-red-5-hex: #fffafa;
+$sd-sage-color-base-yellow-600-hex: #db7303;
 ///
-/// color color-base-red-5-code
+/// color color-base-yellow-600-code
 ///
-$sd-sage-color-base-red-5-code: "red-5";
+$sd-sage-color-base-yellow-600-code: "yellow-60";
 ///
-/// color color-base-red-5-classname
+/// color color-base-yellow-600-classname
 ///
-$sd-sage-color-base-red-5-classname: "t-sage--color-red-5";
+$sd-sage-color-base-yellow-600-classname: "t-sage--color-yellow-600";
 ///
-/// color color-base-red-10-hex
+/// color color-base-yellow-700-hex
 ///
-$sd-sage-color-base-red-10-hex: #fef2f2;
+$sd-sage-color-base-yellow-700-hex: #b64f06;
 ///
-/// color color-base-red-10-code
+/// color color-base-yellow-700-code
 ///
-$sd-sage-color-base-red-10-code: "red-10";
+$sd-sage-color-base-yellow-700-code: "yellow-700";
 ///
-/// color color-base-red-10-classname
+/// color color-base-yellow-700-classname
 ///
-$sd-sage-color-base-red-10-classname: "t-sage--color-red-10";
+$sd-sage-color-base-yellow-700-classname: "t-sage--color-yellow-700";
 ///
-/// color color-base-red-15-hex
+/// color color-base-yellow-800-hex
 ///
-$sd-sage-color-base-red-15-hex: #fee2e1;
+$sd-sage-color-base-yellow-800-hex: #943d0e;
 ///
-/// color color-base-red-15-code
+/// color color-base-yellow-800-code
 ///
-$sd-sage-color-base-red-15-code: "red-15";
+$sd-sage-color-base-yellow-800-code: "yellow-800";
 ///
-/// color color-base-red-15-classname
+/// color color-base-yellow-800-classname
 ///
-$sd-sage-color-base-red-15-classname: "t-sage--color-red-15";
+$sd-sage-color-base-yellow-800-classname: "t-sage--color-yellow-800";
 ///
-/// color color-base-red-20-hex
+/// color color-base-yellow-900-hex
 ///
-$sd-sage-color-base-red-20-hex: #fecaca;
+$sd-sage-color-base-yellow-900-hex: #79330e;
 ///
-/// color color-base-red-20-code
+/// color color-base-yellow-900-code
 ///
-$sd-sage-color-base-red-20-code: "red-20";
+$sd-sage-color-base-yellow-900-code: "yellow-900";
 ///
-/// color color-base-red-20-classname
+/// color color-base-yellow-900-classname
 ///
-$sd-sage-color-base-red-20-classname: "t-sage--color-red-20";
+$sd-sage-color-base-yellow-900-classname: "t-sage--color-yellow-900";
 ///
-/// color color-base-red-30-hex
+/// color color-base-yellow-950-hex
 ///
-$sd-sage-color-base-red-30-hex: #fda5a5;
+$sd-sage-color-base-yellow-950-hex: #451902;
 ///
-/// color color-base-red-30-code
+/// color color-base-yellow-950-code
 ///
-$sd-sage-color-base-red-30-code: "red-30";
+$sd-sage-color-base-yellow-950-code: "yellow-950";
 ///
-/// color color-base-red-30-classname
+/// color color-base-yellow-950-classname
 ///
-$sd-sage-color-base-red-30-classname: "t-sage--color-red-30";
+$sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950";
 ///
-/// color color-base-red-40-hex
+/// color color-base-yellow-050-hex
 ///
-$sd-sage-color-base-red-40-hex: #f87171;
+$sd-sage-color-base-yellow-050-hex: #fffefa;
 ///
-/// color color-base-red-40-code
+/// color color-base-yellow-050-code
 ///
-$sd-sage-color-base-red-40-code: "red-40";
+$sd-sage-color-base-yellow-050-code: "yellow-050";
 ///
-/// color color-base-red-40-classname
+/// color color-base-yellow-050-classname
 ///
-$sd-sage-color-base-red-40-classname: "t-sage--color-red-40";
+$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050";
 ///
-/// color color-base-red-50-hex
+/// color color-base-red-100-hex
 ///
-$sd-sage-color-base-red-50-hex: #ef4444;
+$sd-sage-color-base-red-100-hex: #fef2f2;
 ///
-/// color color-base-red-50-code
+/// color color-base-red-100-code
 ///
-$sd-sage-color-base-red-50-code: "red-50";
+$sd-sage-color-base-red-100-code: "red-100";
 ///
-/// color color-base-red-50-classname
+/// color color-base-red-100-classname
 ///
-$sd-sage-color-base-red-50-classname: "t-sage--color-red-50";
+$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";
 ///
-/// color color-base-red-60-hex
+/// color color-base-red-150-hex
 ///
-$sd-sage-color-base-red-60-hex: #dc2625;
+$sd-sage-color-base-red-150-hex: #fee2e1;
 ///
-/// color color-base-red-60-code
+/// color color-base-red-150-code
 ///
-$sd-sage-color-base-red-60-code: "red-60";
+$sd-sage-color-base-red-150-code: "red-150";
 ///
-/// color color-base-red-60-classname
+/// color color-base-red-150-classname
 ///
-$sd-sage-color-base-red-60-classname: "t-sage--color-red-60";
+$sd-sage-color-base-red-150-classname: "t-sage--color-red-150";
 ///
-/// color color-base-red-70-hex
+/// color color-base-red-200-hex
+///
+$sd-sage-color-base-red-200-hex: #fecaca;
+///
+/// color color-base-red-200-code
+///
+$sd-sage-color-base-red-200-code: "red-200";
+///
+/// color color-base-red-200-classname
+///
+$sd-sage-color-base-red-200-classname: "t-sage--color-red-200";
+///
+/// color color-base-red-300-hex
 ///
-$sd-sage-color-base-red-70-hex: #b91c1b;
+$sd-sage-color-base-red-300-hex: #fda5a5;
 ///
-/// color color-base-red-70-code
+/// color color-base-red-300-code
 ///
-$sd-sage-color-base-red-70-code: "red-70";
+$sd-sage-color-base-red-300-code: "red-300";
 ///
-/// color color-base-red-70-classname
+/// color color-base-red-300-classname
 ///
-$sd-sage-color-base-red-70-classname: "t-sage--color-red-70";
+$sd-sage-color-base-red-300-classname: "t-sage--color-red-300";
 ///
-/// color color-base-red-80-hex
+/// color color-base-red-400-hex
 ///
-$sd-sage-color-base-red-80-hex: #991b1b;
+$sd-sage-color-base-red-400-hex: #f87171;
 ///
-/// color color-base-red-80-code
+/// color color-base-red-400-code
 ///
-$sd-sage-color-base-red-80-code: "red-80";
+$sd-sage-color-base-red-400-code: "red-400";
 ///
-/// color color-base-red-80-classname
+/// color color-base-red-400-classname
 ///
-$sd-sage-color-base-red-80-classname: "t-sage--color-red-80";
+$sd-sage-color-base-red-400-classname: "t-sage--color-red-400";
 ///
-/// color color-base-red-90-hex
+/// color color-base-red-500-hex
 ///
-$sd-sage-color-base-red-90-hex: #7f1c1d;
+$sd-sage-color-base-red-500-hex: #ef4444;
 ///
-/// color color-base-red-90-code
+/// color color-base-red-500-code
 ///
-$sd-sage-color-base-red-90-code: "red-90";
+$sd-sage-color-base-red-500-code: "red-500";
 ///
-/// color color-base-red-90-classname
+/// color color-base-red-500-classname
 ///
-$sd-sage-color-base-red-90-classname: "t-sage--color-red-90";
+$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";
 ///
-/// color color-base-red-95-hex
+/// color color-base-red-600-hex
 ///
-$sd-sage-color-base-red-95-hex: #572627;
+$sd-sage-color-base-red-600-hex: #dc2625;
 ///
-/// color color-base-red-95-code
+/// color color-base-red-600-code
 ///
-$sd-sage-color-base-red-95-code: "red-95";
+$sd-sage-color-base-red-600-code: "red-600";
 ///
-/// color color-base-red-95-classname
+/// color color-base-red-600-classname
 ///
-$sd-sage-color-base-red-95-classname: "t-sage--color-red-95";
+$sd-sage-color-base-red-600-classname: "t-sage--color-red-600";
 ///
-/// color color-base-red-100-hex
+/// color color-base-red-700-hex
 ///
-$sd-sage-color-base-red-100-hex: #fee2e1;
+$sd-sage-color-base-red-700-hex: #b91c1b;
 ///
-/// color color-base-red-100-code
+/// color color-base-red-700-code
 ///
-$sd-sage-color-base-red-100-code: "red-100";
+$sd-sage-color-base-red-700-code: "red-700";
 ///
-/// color color-base-red-100-classname
+/// color color-base-red-700-classname
 ///
-$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";
+$sd-sage-color-base-red-700-classname: "t-sage--color-red-700";
 ///
-/// color color-base-red-200-hex
+/// color color-base-red-800-hex
 ///
-$sd-sage-color-base-red-200-hex: #fda5a5;
+$sd-sage-color-base-red-800-hex: #991b1b;
 ///
-/// color color-base-red-200-code
+/// color color-base-red-800-code
 ///
-$sd-sage-color-base-red-200-code: "red-200";
+$sd-sage-color-base-red-800-code: "red-800";
 ///
-/// color color-base-red-200-classname
+/// color color-base-red-800-classname
 ///
-$sd-sage-color-base-red-200-classname: "t-sage--color-red-200";
+$sd-sage-color-base-red-800-classname: "t-sage--color-red-800";
 ///
-/// color color-base-red-300-hex
+/// color color-base-red-900-hex
 ///
-$sd-sage-color-base-red-300-hex: #ef4444;
+$sd-sage-color-base-red-900-hex: #7f1c1d;
 ///
-/// color color-base-red-300-code
+/// color color-base-red-900-code
 ///
-$sd-sage-color-base-red-300-code: "red-300";
+$sd-sage-color-base-red-900-code: "red-900";
 ///
-/// color color-base-red-300-classname
+/// color color-base-red-900-classname
 ///
-$sd-sage-color-base-red-300-classname: "t-sage--color-red-300";
+$sd-sage-color-base-red-900-classname: "t-sage--color-red-900";
 ///
-/// color color-base-red-400-hex
+/// color color-base-red-950-hex
 ///
-$sd-sage-color-base-red-400-hex: #991b1b;
+$sd-sage-color-base-red-950-hex: #572627;
 ///
-/// color color-base-red-400-code
+/// color color-base-red-950-code
 ///
-$sd-sage-color-base-red-400-code: "red-400";
+$sd-sage-color-base-red-950-code: "red-950";
 ///
-/// color color-base-red-400-classname
+/// color color-base-red-950-classname
 ///
-$sd-sage-color-base-red-400-classname: "t-sage--color-red-400";
+$sd-sage-color-base-red-950-classname: "t-sage--color-red-950";
 ///
-/// color color-base-red-500-hex
+/// color color-base-red-050-hex
 ///
-$sd-sage-color-base-red-500-hex: #572627;
+$sd-sage-color-base-red-050-hex: #fffafa;
 ///
-/// color color-base-red-500-code
+/// color color-base-red-050-code
 ///
-$sd-sage-color-base-red-500-code: "red-500";
+$sd-sage-color-base-red-050-code: "red-050";
 ///
-/// color color-base-red-500-classname
+/// color color-base-red-050-classname
 ///
-$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";
+$sd-sage-color-base-red-050-classname: "t-sage--color-red-050";
 ///
 /// color color-base-orange-100-hex
 ///
@@ -1042,209 +922,149 @@ $sd-sage-color-base-orange-500-code: "orange-500";
 ///
 $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500";
 ///
-/// color color-base-purple-5-hex
-///
-$sd-sage-color-base-purple-5-hex: #fafbff;
-///
-/// color color-base-purple-5-code
-///
-$sd-sage-color-base-purple-5-code: "purple-5";
-///
-/// color color-base-purple-5-classname
-///
-$sd-sage-color-base-purple-5-classname: "t-sage--color-purple-5";
-///
-/// color color-base-purple-10-hex
-///
-$sd-sage-color-base-purple-10-hex: #edf1ff;
-///
-/// color color-base-purple-10-code
-///
-$sd-sage-color-base-purple-10-code: "purple-10";
-///
-/// color color-base-purple-10-classname
-///
-$sd-sage-color-base-purple-10-classname: "t-sage--color-purple-10";
-///
-/// color color-base-purple-15-hex
-///
-$sd-sage-color-base-purple-15-hex: #e0e4ff;
-///
-/// color color-base-purple-15-code
-///
-$sd-sage-color-base-purple-15-code: "purple-15";
-///
-/// color color-base-purple-15-classname
-///
-$sd-sage-color-base-purple-15-classname: "t-sage--color-purple-15";
-///
-/// color color-base-purple-20-hex
-///
-$sd-sage-color-base-purple-20-hex: #c7cdfe;
-///
-/// color color-base-purple-20-code
-///
-$sd-sage-color-base-purple-20-code: "purple-20";
-///
-/// color color-base-purple-20-classname
-///
-$sd-sage-color-base-purple-20-classname: "t-sage--color-purple-20";
-///
-/// color color-base-purple-30-hex
-///
-$sd-sage-color-base-purple-30-hex: #a3acfd;
-///
-/// color color-base-purple-30-code
-///
-$sd-sage-color-base-purple-30-code: "purple-30";
-///
-/// color color-base-purple-30-classname
-///
-$sd-sage-color-base-purple-30-classname: "t-sage--color-purple-30";
-///
-/// color color-base-purple-40-hex
+/// color color-base-purple-100-hex
 ///
-$sd-sage-color-base-purple-40-hex: #8081f9;
+$sd-sage-color-base-purple-100-hex: #edf1ff;
 ///
-/// color color-base-purple-40-code
+/// color color-base-purple-100-code
 ///
-$sd-sage-color-base-purple-40-code: "purple-40";
+$sd-sage-color-base-purple-100-code: "purple-100";
 ///
-/// color color-base-purple-40-classname
+/// color color-base-purple-100-classname
 ///
-$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40";
+$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";
 ///
-/// color color-base-purple-50-hex
+/// color color-base-purple-150-hex
 ///
-$sd-sage-color-base-purple-50-hex: #6a62f2;
+$sd-sage-color-base-purple-150-hex: #e0e4ff;
 ///
-/// color color-base-purple-50-code
+/// color color-base-purple-150-code
 ///
-$sd-sage-color-base-purple-50-code: "purple-50";
+$sd-sage-color-base-purple-150-code: "purple-150";
 ///
-/// color color-base-purple-50-classname
+/// color color-base-purple-150-classname
 ///
-$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50";
+$sd-sage-color-base-purple-150-classname: "t-sage--color-purple-150";
 ///
-/// color color-base-purple-60-hex
+/// color color-base-purple-200-hex
 ///
-$sd-sage-color-base-purple-60-hex: #533be5;
+$sd-sage-color-base-purple-200-hex: #c7cdfe;
 ///
-/// color color-base-purple-60-code
+/// color color-base-purple-200-code
 ///
-$sd-sage-color-base-purple-60-code: "purple-60";
+$sd-sage-color-base-purple-200-code: "purple-200";
 ///
-/// color color-base-purple-60-classname
+/// color color-base-purple-200-classname
 ///
-$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60";
+$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";
 ///
-/// color color-base-purple-70-hex
+/// color color-base-purple-300-hex
 ///
-$sd-sage-color-base-purple-70-hex: #4f37cb;
+$sd-sage-color-base-purple-300-hex: #a3acfd;
 ///
-/// color color-base-purple-70-code
+/// color color-base-purple-300-code
 ///
-$sd-sage-color-base-purple-70-code: "purple-70";
+$sd-sage-color-base-purple-300-code: "purple-300";
 ///
-/// color color-base-purple-70-classname
+/// color color-base-purple-300-classname
 ///
-$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70";
+$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";
 ///
-/// color color-base-purple-80-hex
+/// color color-base-purple-400-hex
 ///
-$sd-sage-color-base-purple-80-hex: #402fa4;
+$sd-sage-color-base-purple-400-hex: #8081f9;
 ///
-/// color color-base-purple-80-code
+/// color color-base-purple-400-code
 ///
-$sd-sage-color-base-purple-80-code: "purple-80";
+$sd-sage-color-base-purple-400-code: "purple-400";
 ///
-/// color color-base-purple-80-classname
+/// color color-base-purple-400-classname
 ///
-$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80";
+$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";
 ///
-/// color color-base-purple-90-hex
+/// color color-base-purple-500-hex
 ///
-$sd-sage-color-base-purple-90-hex: #372d82;
+$sd-sage-color-base-purple-500-hex: #6a62f2;
 ///
-/// color color-base-purple-90-code
+/// color color-base-purple-500-code
 ///
-$sd-sage-color-base-purple-90-code: "purple-90";
+$sd-sage-color-base-purple-500-code: "purple-500";
 ///
-/// color color-base-purple-90-classname
+/// color color-base-purple-500-classname
 ///
-$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90";
+$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";
 ///
-/// color color-base-purple-95-hex
+/// color color-base-purple-600-hex
 ///
-$sd-sage-color-base-purple-95-hex: #221b4b;
+$sd-sage-color-base-purple-600-hex: #533be5;
 ///
-/// color color-base-purple-95-code
+/// color color-base-purple-600-code
 ///
-$sd-sage-color-base-purple-95-code: "purple-95";
+$sd-sage-color-base-purple-600-code: "purple-600";
 ///
-/// color color-base-purple-95-classname
+/// color color-base-purple-600-classname
 ///
-$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95";
+$sd-sage-color-base-purple-600-classname: "t-sage--color-purple-600";
 ///
-/// color color-base-purple-100-hex
+/// color color-base-purple-700-hex
 ///
-$sd-sage-color-base-purple-100-hex: #e0e4ff;
+$sd-sage-color-base-purple-700-hex: #4f37cb;
 ///
-/// color color-base-purple-100-code
+/// color color-base-purple-700-code
 ///
-$sd-sage-color-base-purple-100-code: "purple-100";
+$sd-sage-color-base-purple-700-code: "purple-700";
 ///
-/// color color-base-purple-100-classname
+/// color color-base-purple-700-classname
 ///
-$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";
+$sd-sage-color-base-purple-700-classname: "t-sage--color-purple-700";
 ///
-/// color color-base-purple-200-hex
+/// color color-base-purple-800-hex
 ///
-$sd-sage-color-base-purple-200-hex: #a3acfd;
+$sd-sage-color-base-purple-800-hex: #402fa4;
 ///
-/// color color-base-purple-200-code
+/// color color-base-purple-800-code
 ///
-$sd-sage-color-base-purple-200-code: "purple-200";
+$sd-sage-color-base-purple-800-code: "purple-800";
 ///
-/// color color-base-purple-200-classname
+/// color color-base-purple-800-classname
 ///
-$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";
+$sd-sage-color-base-purple-800-classname: "t-sage--color-purple-800";
 ///
-/// color color-base-purple-300-hex
+/// color color-base-purple-900-hex
 ///
-$sd-sage-color-base-purple-300-hex: #533be5;
+$sd-sage-color-base-purple-900-hex: #372d82;
 ///
-/// color color-base-purple-300-code
+/// color color-base-purple-900-code
 ///
-$sd-sage-color-base-purple-300-code: "purple-300";
+$sd-sage-color-base-purple-900-code: "purple-900";
 ///
-/// color color-base-purple-300-classname
+/// color color-base-purple-900-classname
 ///
-$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";
+$sd-sage-color-base-purple-900-classname: "t-sage--color-purple-900";
 ///
-/// color color-base-purple-400-hex
+/// color color-base-purple-950-hex
 ///
-$sd-sage-color-base-purple-400-hex: #402fa4;
+$sd-sage-color-base-purple-950-hex: #221b4b;
 ///
-/// color color-base-purple-400-code
+/// color color-base-purple-950-code
 ///
-$sd-sage-color-base-purple-400-code: "purple-400";
+$sd-sage-color-base-purple-950-code: "purple-950";
 ///
-/// color color-base-purple-400-classname
+/// color color-base-purple-950-classname
 ///
-$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";
+$sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950";
 ///
-/// color color-base-purple-500-hex
+/// color color-base-purple-050-hex
 ///
-$sd-sage-color-base-purple-500-hex: #221b4b;
+$sd-sage-color-base-purple-050-hex: #fafbff;
 ///
-/// color color-base-purple-500-code
+/// color color-base-purple-050-code
 ///
-$sd-sage-color-base-purple-500-code: "purple-500";
+$sd-sage-color-base-purple-050-code: "purple-050";
 ///
-/// color color-base-purple-500-classname
+/// color color-base-purple-050-classname
 ///
-$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";
+$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050";
 ///
 /// color color-base-charcoal-100-hex
 ///
@@ -1306,209 +1126,149 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500";
 ///
 $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500";
 ///
-/// color color-base-grey-5-hex
-///
-$sd-sage-color-base-grey-5-hex: #fcfcfc;
-///
-/// color color-base-grey-5-code
-///
-$sd-sage-color-base-grey-5-code: "grey-5";
-///
-/// color color-base-grey-5-classname
-///
-$sd-sage-color-base-grey-5-classname: "t-sage--color-grey-5";
-///
-/// color color-base-grey-10-hex
-///
-$sd-sage-color-base-grey-10-hex: #f8f8f8;
-///
-/// color color-base-grey-10-code
-///
-$sd-sage-color-base-grey-10-code: "grey-10";
-///
-/// color color-base-grey-10-classname
-///
-$sd-sage-color-base-grey-10-classname: "t-sage--color-grey-10";
-///
-/// color color-base-grey-15-hex
-///
-$sd-sage-color-base-grey-15-hex: #f0f0f0;
-///
-/// color color-base-grey-15-code
-///
-$sd-sage-color-base-grey-15-code: "grey-15";
-///
-/// color color-base-grey-15-classname
-///
-$sd-sage-color-base-grey-15-classname: "t-sage--color-grey-15";
-///
-/// color color-base-grey-20-hex
-///
-$sd-sage-color-base-grey-20-hex: #e4e4e4;
-///
-/// color color-base-grey-20-code
-///
-$sd-sage-color-base-grey-20-code: "grey-20";
+/// color color-base-grey-100-hex
 ///
-/// color color-base-grey-20-classname
+$sd-sage-color-base-grey-100-hex: #f8f8f8;
 ///
-$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20";
+/// color color-base-grey-100-code
 ///
-/// color color-base-grey-30-hex
+$sd-sage-color-base-grey-100-code: "grey-100";
 ///
-$sd-sage-color-base-grey-30-hex: #d2d1d1;
+/// color color-base-grey-100-classname
 ///
-/// color color-base-grey-30-code
+$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";
 ///
-$sd-sage-color-base-grey-30-code: "grey-30";
+/// color color-base-grey-150-hex
 ///
-/// color color-base-grey-30-classname
+$sd-sage-color-base-grey-150-hex: #f0f0f0;
 ///
-$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30";
+/// color color-base-grey-150-code
 ///
-/// color color-base-grey-40-hex
+$sd-sage-color-base-grey-150-code: "grey-15";
 ///
-$sd-sage-color-base-grey-40-hex: #bbbab9;
+/// color color-base-grey-150-classname
 ///
-/// color color-base-grey-40-code
+$sd-sage-color-base-grey-150-classname: "t-sage--color-grey-150";
 ///
-$sd-sage-color-base-grey-40-code: "grey-40";
+/// color color-base-grey-200-hex
 ///
-/// color color-base-grey-40-classname
+$sd-sage-color-base-grey-200-hex: #e4e4e4;
 ///
-$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40";
+/// color color-base-grey-200-code
 ///
-/// color color-base-grey-50-hex
+$sd-sage-color-base-grey-200-code: "grey-200";
 ///
-$sd-sage-color-base-grey-50-hex: #9b9a98;
+/// color color-base-grey-200-classname
 ///
-/// color color-base-grey-50-code
+$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";
 ///
-$sd-sage-color-base-grey-50-code: "grey-50";
+/// color color-base-grey-300-hex
 ///
-/// color color-base-grey-50-classname
+$sd-sage-color-base-grey-300-hex: #d2d1d1;
 ///
-$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50";
+/// color color-base-grey-300-code
 ///
-/// color color-base-grey-60-hex
+$sd-sage-color-base-grey-300-code: "grey-300";
 ///
-$sd-sage-color-base-grey-60-hex: #828180;
+/// color color-base-grey-300-classname
 ///
-/// color color-base-grey-60-code
+$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";
 ///
-$sd-sage-color-base-grey-60-code: "grey-60";
+/// color color-base-grey-400-hex
 ///
-/// color color-base-grey-60-classname
+$sd-sage-color-base-grey-400-hex: #bbbab9;
 ///
-$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60";
+/// color color-base-grey-400-code
 ///
-/// color color-base-grey-70-hex
+$sd-sage-color-base-grey-400-code: "grey-400";
 ///
-$sd-sage-color-base-grey-70-hex: #6c6a69;
+/// color color-base-grey-400-classname
 ///
-/// color color-base-grey-70-code
+$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400";
 ///
-$sd-sage-color-base-grey-70-code: "grey-70";
+/// color color-base-grey-500-hex
 ///
-/// color color-base-grey-70-classname
+$sd-sage-color-base-grey-500-hex: #9b9a98;
 ///
-$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70";
+/// color color-base-grey-500-code
 ///
-/// color color-base-grey-80-hex
+$sd-sage-color-base-grey-500-code: "grey-500";
 ///
-$sd-sage-color-base-grey-80-hex: #4d4d4c;
+/// color color-base-grey-500-classname
 ///
-/// color color-base-grey-80-code
+$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";
 ///
-$sd-sage-color-base-grey-80-code: "grey-80";
+/// color color-base-grey-600-hex
 ///
-/// color color-base-grey-80-classname
+$sd-sage-color-base-grey-600-hex: #828180;
 ///
-$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80";
+/// color color-base-grey-600-code
 ///
-/// color color-base-grey-90-hex
+$sd-sage-color-base-grey-600-code: "grey-600";
 ///
-$sd-sage-color-base-grey-90-hex: #343332;
+/// color color-base-grey-600-classname
 ///
-/// color color-base-grey-90-code
+$sd-sage-color-base-grey-600-classname: "t-sage--color-grey-600";
 ///
-$sd-sage-color-base-grey-90-code: "grey-90";
+/// color color-base-grey-700-hex
 ///
-/// color color-base-grey-90-classname
+$sd-sage-color-base-grey-700-hex: #6c6a69;
 ///
-$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90";
+/// color color-base-grey-700-code
 ///
-/// color color-base-grey-95-hex
+$sd-sage-color-base-grey-700-code: "grey-700";
 ///
-$sd-sage-color-base-grey-95-hex: #1a1a19;
+/// color color-base-grey-700-classname
 ///
-/// color color-base-grey-95-code
+$sd-sage-color-base-grey-700-classname: "t-sage--color-grey-700";
 ///
-$sd-sage-color-base-grey-95-code: "grey-95";
+/// color color-base-grey-800-hex
 ///
-/// color color-base-grey-95-classname
+$sd-sage-color-base-grey-800-hex: #4d4d4c;
 ///
-$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95";
+/// color color-base-grey-800-code
 ///
-/// color color-base-grey-100-hex
+$sd-sage-color-base-grey-800-code: "grey-800";
 ///
-$sd-sage-color-base-grey-100-hex: #f8f8f8;
+/// color color-base-grey-800-classname
 ///
-/// color color-base-grey-100-code
+$sd-sage-color-base-grey-800-classname: "t-sage--color-grey-800";
 ///
-$sd-sage-color-base-grey-100-code: "grey-100";
+/// color color-base-grey-900-hex
 ///
-/// color color-base-grey-100-classname
+$sd-sage-color-base-grey-900-hex: #343332;
 ///
-$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";
+/// color color-base-grey-900-code
 ///
-/// color color-base-grey-200-hex
+$sd-sage-color-base-grey-900-code: "grey-900";
 ///
-$sd-sage-color-base-grey-200-hex: #f0f0f0;
+/// color color-base-grey-900-classname
 ///
-/// color color-base-grey-200-code
+$sd-sage-color-base-grey-900-classname: "t-sage--color-grey-900";
 ///
-$sd-sage-color-base-grey-200-code: "grey-200";
+/// color color-base-grey-950-hex
 ///
-/// color color-base-grey-200-classname
+$sd-sage-color-base-grey-950-hex: #1a1a19;
 ///
-$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";
+/// color color-base-grey-950-code
 ///
-/// color color-base-grey-300-hex
+$sd-sage-color-base-grey-950-code: "grey-950";
 ///
-$sd-sage-color-base-grey-300-hex: #e4e4e4;
+/// color color-base-grey-950-classname
 ///
-/// color color-base-grey-300-code
+$sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950";
 ///
-$sd-sage-color-base-grey-300-code: "grey-300";
+/// color color-base-grey-050-hex
 ///
-/// color color-base-grey-300-classname
+$sd-sage-color-base-grey-050-hex: #fcfcfc;
 ///
-$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";
+/// color color-base-grey-050-code
 ///
-/// color color-base-grey-400-hex
+$sd-sage-color-base-grey-050-code: "grey-050";
 ///
-$sd-sage-color-base-grey-400-hex: #d2d1d1;
+/// color color-base-grey-050-classname
 ///
-/// color color-base-grey-400-code
-///
-$sd-sage-color-base-grey-400-code: "grey-400";
-///
-/// color color-base-grey-400-classname
-///
-$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400";
-///
-/// color color-base-grey-500-hex
-///
-$sd-sage-color-base-grey-500-hex: #9b9a98;
-///
-/// color color-base-grey-500-code
-///
-$sd-sage-color-base-grey-500-code: "grey-500";
-///
-/// color color-base-grey-500-classname
-///
-$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";
+$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050";
 ///
 /// color color-base-white-100-hex
 ///
@@ -1635,189 +1395,189 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500";
 ///
 $sd-sage-color: (
   blue: (
-    5: (
-      hex: $sd-sage-color-base-blue-5-hex,
-      code: $sd-sage-color-base-blue-5-code,
-      classname: $sd-sage-color-base-blue-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-blue-10-hex,
-      code: $sd-sage-color-base-blue-10-code,
-      classname: $sd-sage-color-base-blue-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-blue-15-hex,
-      code: $sd-sage-color-base-blue-15-code,
-      classname: $sd-sage-color-base-blue-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-blue-20-hex,
-      code: $sd-sage-color-base-blue-20-code,
-      classname: $sd-sage-color-base-blue-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-blue-30-hex,
-      code: $sd-sage-color-base-blue-30-code,
-      classname: $sd-sage-color-base-blue-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-blue-40-hex,
-      code: $sd-sage-color-base-blue-40-code,
-      classname: $sd-sage-color-base-blue-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-blue-50-hex,
-      code: $sd-sage-color-base-blue-50-code,
-      classname: $sd-sage-color-base-blue-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-blue-60-hex,
-      code: $sd-sage-color-base-blue-60-code,
-      classname: $sd-sage-color-base-blue-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-blue-70-hex,
-      code: $sd-sage-color-base-blue-70-code,
-      classname: $sd-sage-color-base-blue-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-blue-80-hex,
-      code: $sd-sage-color-base-blue-80-code,
-      classname: $sd-sage-color-base-blue-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-blue-90-hex,
-      code: $sd-sage-color-base-blue-90-code,
-      classname: $sd-sage-color-base-blue-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-blue-95-hex,
-      code: $sd-sage-color-base-blue-95-code,
-      classname: $sd-sage-color-base-blue-95-classname,
+    100: (
+      hex: $sd-sage-color-base-blue-100-hex,
+      code: $sd-sage-color-base-blue-100-code,
+      classname: $sd-sage-color-base-blue-100-classname,
+    ),
+    150: (
+      hex: $sd-sage-color-base-blue-150-hex,
+      code: $sd-sage-color-base-blue-150-code,
+      classname: $sd-sage-color-base-blue-150-classname,
+    ),
+    200: (
+      hex: $sd-sage-color-base-blue-200-hex,
+      code: $sd-sage-color-base-blue-200-code,
+      classname: $sd-sage-color-base-blue-200-classname,
+    ),
+    300: (
+      hex: $sd-sage-color-base-blue-300-hex,
+      code: $sd-sage-color-base-blue-300-code,
+      classname: $sd-sage-color-base-blue-300-classname,
+    ),
+    400: (
+      hex: $sd-sage-color-base-blue-400-hex,
+      code: $sd-sage-color-base-blue-400-code,
+      classname: $sd-sage-color-base-blue-400-classname,
+    ),
+    500: (
+      hex: $sd-sage-color-base-blue-500-hex,
+      code: $sd-sage-color-base-blue-500-code,
+      classname: $sd-sage-color-base-blue-500-classname,
+    ),
+    600: (
+      hex: $sd-sage-color-base-blue-600-hex,
+      code: $sd-sage-color-base-blue-600-code,
+      classname: $sd-sage-color-base-blue-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-blue-700-hex,
+      code: $sd-sage-color-base-blue-700-code,
+      classname: $sd-sage-color-base-blue-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-blue-800-hex,
+      code: $sd-sage-color-base-blue-800-code,
+      classname: $sd-sage-color-base-blue-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-blue-900-hex,
+      code: $sd-sage-color-base-blue-900-code,
+      classname: $sd-sage-color-base-blue-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-blue-950-hex,
+      code: $sd-sage-color-base-blue-950-code,
+      classname: $sd-sage-color-base-blue-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-blue-050-hex,
+      code: $sd-sage-color-base-blue-050-code,
+      classname: $sd-sage-color-base-blue-050-classname,
     ),
   ),
   green: (
-    5: (
-      hex: $sd-sage-color-base-green-5-hex,
-      code: $sd-sage-color-base-green-5-code,
-      classname: $sd-sage-color-base-green-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-green-10-hex,
-      code: $sd-sage-color-base-green-10-code,
-      classname: $sd-sage-color-base-green-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-green-15-hex,
-      code: $sd-sage-color-base-green-15-code,
-      classname: $sd-sage-color-base-green-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-green-20-hex,
-      code: $sd-sage-color-base-green-20-code,
-      classname: $sd-sage-color-base-green-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-green-30-hex,
-      code: $sd-sage-color-base-green-30-code,
-      classname: $sd-sage-color-base-green-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-green-40-hex,
-      code: $sd-sage-color-base-green-40-code,
-      classname: $sd-sage-color-base-green-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-green-50-hex,
-      code: $sd-sage-color-base-green-50-code,
-      classname: $sd-sage-color-base-green-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-green-60-hex,
-      code: $sd-sage-color-base-green-60-code,
-      classname: $sd-sage-color-base-green-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-green-70-hex,
-      code: $sd-sage-color-base-green-70-code,
-      classname: $sd-sage-color-base-green-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-green-80-hex,
-      code: $sd-sage-color-base-green-80-code,
-      classname: $sd-sage-color-base-green-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-green-90-hex,
-      code: $sd-sage-color-base-green-90-code,
-      classname: $sd-sage-color-base-green-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-green-95-hex,
-      code: $sd-sage-color-base-green-95-code,
-      classname: $sd-sage-color-base-green-95-classname,
+    100: (
+      hex: $sd-sage-color-base-green-100-hex,
+      code: $sd-sage-color-base-green-100-code,
+      classname: $sd-sage-color-base-green-100-classname,
+    ),
+    150: (
+      hex: $sd-sage-color-base-green-150-hex,
+      code: $sd-sage-color-base-green-150-code,
+      classname: $sd-sage-color-base-green-150-classname,
+    ),
+    200: (
+      hex: $sd-sage-color-base-green-200-hex,
+      code: $sd-sage-color-base-green-200-code,
+      classname: $sd-sage-color-base-green-200-classname,
+    ),
+    300: (
+      hex: $sd-sage-color-base-green-300-hex,
+      code: $sd-sage-color-base-green-300-code,
+      classname: $sd-sage-color-base-green-300-classname,
+    ),
+    400: (
+      hex: $sd-sage-color-base-green-400-hex,
+      code: $sd-sage-color-base-green-400-code,
+      classname: $sd-sage-color-base-green-400-classname,
+    ),
+    500: (
+      hex: $sd-sage-color-base-green-500-hex,
+      code: $sd-sage-color-base-green-500-code,
+      classname: $sd-sage-color-base-green-500-classname,
+    ),
+    600: (
+      hex: $sd-sage-color-base-green-600-hex,
+      code: $sd-sage-color-base-green-600-code,
+      classname: $sd-sage-color-base-green-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-green-700-hex,
+      code: $sd-sage-color-base-green-700-code,
+      classname: $sd-sage-color-base-green-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-green-800-hex,
+      code: $sd-sage-color-base-green-800-code,
+      classname: $sd-sage-color-base-green-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-green-900-hex,
+      code: $sd-sage-color-base-green-900-code,
+      classname: $sd-sage-color-base-green-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-green-950-hex,
+      code: $sd-sage-color-base-green-950-code,
+      classname: $sd-sage-color-base-green-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-green-050-hex,
+      code: $sd-sage-color-base-green-050-code,
+      classname: $sd-sage-color-base-green-050-classname,
     ),
   ),
   mercury: (
-    5: (
-      hex: $sd-sage-color-base-mercury-5-hex,
-      code: $sd-sage-color-base-mercury-5-code,
-      classname: $sd-sage-color-base-mercury-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-mercury-10-hex,
-      code: $sd-sage-color-base-mercury-10-code,
-      classname: $sd-sage-color-base-mercury-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-mercury-15-hex,
-      code: $sd-sage-color-base-mercury-15-code,
-      classname: $sd-sage-color-base-mercury-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-mercury-20-hex,
-      code: $sd-sage-color-base-mercury-20-code,
-      classname: $sd-sage-color-base-mercury-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-mercury-30-hex,
-      code: $sd-sage-color-base-mercury-30-code,
-      classname: $sd-sage-color-base-mercury-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-mercury-40-hex,
-      code: $sd-sage-color-base-mercury-40-code,
-      classname: $sd-sage-color-base-mercury-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-mercury-50-hex,
-      code: $sd-sage-color-base-mercury-50-code,
-      classname: $sd-sage-color-base-mercury-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-mercury-60-hex,
-      code: $sd-sage-color-base-mercury-60-code,
-      classname: $sd-sage-color-base-mercury-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-mercury-70-hex,
-      code: $sd-sage-color-base-mercury-70-code,
-      classname: $sd-sage-color-base-mercury-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-mercury-80-hex,
-      code: $sd-sage-color-base-mercury-80-code,
-      classname: $sd-sage-color-base-mercury-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-mercury-90-hex,
-      code: $sd-sage-color-base-mercury-90-code,
-      classname: $sd-sage-color-base-mercury-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-mercury-95-hex,
-      code: $sd-sage-color-base-mercury-95-code,
-      classname: $sd-sage-color-base-mercury-95-classname,
+    100: (
+      hex: $sd-sage-color-base-mercury-100-hex,
+      code: $sd-sage-color-base-mercury-100-code,
+      classname: $sd-sage-color-base-mercury-100-classname,
+    ),
+    150: (
+      hex: $sd-sage-color-base-mercury-150-hex,
+      code: $sd-sage-color-base-mercury-150-code,
+      classname: $sd-sage-color-base-mercury-150-classname,
+    ),
+    200: (
+      hex: $sd-sage-color-base-mercury-200-hex,
+      code: $sd-sage-color-base-mercury-200-code,
+      classname: $sd-sage-color-base-mercury-200-classname,
+    ),
+    300: (
+      hex: $sd-sage-color-base-mercury-300-hex,
+      code: $sd-sage-color-base-mercury-300-code,
+      classname: $sd-sage-color-base-mercury-300-classname,
+    ),
+    400: (
+      hex: $sd-sage-color-base-mercury-400-hex,
+      code: $sd-sage-color-base-mercury-400-code,
+      classname: $sd-sage-color-base-mercury-400-classname,
+    ),
+    500: (
+      hex: $sd-sage-color-base-mercury-500-hex,
+      code: $sd-sage-color-base-mercury-500-code,
+      classname: $sd-sage-color-base-mercury-500-classname,
+    ),
+    600: (
+      hex: $sd-sage-color-base-mercury-600-hex,
+      code: $sd-sage-color-base-mercury-600-code,
+      classname: $sd-sage-color-base-mercury-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-mercury-700-hex,
+      code: $sd-sage-color-base-mercury-700-code,
+      classname: $sd-sage-color-base-mercury-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-mercury-800-hex,
+      code: $sd-sage-color-base-mercury-800-code,
+      classname: $sd-sage-color-base-mercury-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-mercury-900-hex,
+      code: $sd-sage-color-base-mercury-900-code,
+      classname: $sd-sage-color-base-mercury-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-mercury-950-hex,
+      code: $sd-sage-color-base-mercury-950-code,
+      classname: $sd-sage-color-base-mercury-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-mercury-050-hex,
+      code: $sd-sage-color-base-mercury-050-code,
+      classname: $sd-sage-color-base-mercury-050-classname,
     ),
   ),
   primary: (
@@ -1875,71 +1635,16 @@ $sd-sage-color: (
     ),
   ),
   yellow: (
-    5: (
-      hex: $sd-sage-color-base-yellow-5-hex,
-      code: $sd-sage-color-base-yellow-5-code,
-      classname: $sd-sage-color-base-yellow-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-yellow-10-hex,
-      code: $sd-sage-color-base-yellow-10-code,
-      classname: $sd-sage-color-base-yellow-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-yellow-15-hex,
-      code: $sd-sage-color-base-yellow-15-code,
-      classname: $sd-sage-color-base-yellow-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-yellow-20-hex,
-      code: $sd-sage-color-base-yellow-20-code,
-      classname: $sd-sage-color-base-yellow-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-yellow-30-hex,
-      code: $sd-sage-color-base-yellow-30-code,
-      classname: $sd-sage-color-base-yellow-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-yellow-40-hex,
-      code: $sd-sage-color-base-yellow-40-code,
-      classname: $sd-sage-color-base-yellow-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-yellow-50-hex,
-      code: $sd-sage-color-base-yellow-50-code,
-      classname: $sd-sage-color-base-yellow-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-yellow-60-hex,
-      code: $sd-sage-color-base-yellow-60-code,
-      classname: $sd-sage-color-base-yellow-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-yellow-70-hex,
-      code: $sd-sage-color-base-yellow-70-code,
-      classname: $sd-sage-color-base-yellow-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-yellow-80-hex,
-      code: $sd-sage-color-base-yellow-80-code,
-      classname: $sd-sage-color-base-yellow-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-yellow-90-hex,
-      code: $sd-sage-color-base-yellow-90-code,
-      classname: $sd-sage-color-base-yellow-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-yellow-95-hex,
-      code: $sd-sage-color-base-yellow-95-code,
-      classname: $sd-sage-color-base-yellow-95-classname,
-    ),
     100: (
       hex: $sd-sage-color-base-yellow-100-hex,
       code: $sd-sage-color-base-yellow-100-code,
       classname: $sd-sage-color-base-yellow-100-classname,
     ),
+    150: (
+      hex: $sd-sage-color-base-yellow-150-hex,
+      code: $sd-sage-color-base-yellow-150-code,
+      classname: $sd-sage-color-base-yellow-150-classname,
+    ),
     200: (
       hex: $sd-sage-color-base-yellow-200-hex,
       code: $sd-sage-color-base-yellow-200-code,
@@ -1960,73 +1665,48 @@ $sd-sage-color: (
       code: $sd-sage-color-base-yellow-500-code,
       classname: $sd-sage-color-base-yellow-500-classname,
     ),
+    600: (
+      hex: $sd-sage-color-base-yellow-600-hex,
+      code: $sd-sage-color-base-yellow-600-code,
+      classname: $sd-sage-color-base-yellow-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-yellow-700-hex,
+      code: $sd-sage-color-base-yellow-700-code,
+      classname: $sd-sage-color-base-yellow-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-yellow-800-hex,
+      code: $sd-sage-color-base-yellow-800-code,
+      classname: $sd-sage-color-base-yellow-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-yellow-900-hex,
+      code: $sd-sage-color-base-yellow-900-code,
+      classname: $sd-sage-color-base-yellow-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-yellow-950-hex,
+      code: $sd-sage-color-base-yellow-950-code,
+      classname: $sd-sage-color-base-yellow-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-yellow-050-hex,
+      code: $sd-sage-color-base-yellow-050-code,
+      classname: $sd-sage-color-base-yellow-050-classname,
+    ),
   ),
   red: (
-    5: (
-      hex: $sd-sage-color-base-red-5-hex,
-      code: $sd-sage-color-base-red-5-code,
-      classname: $sd-sage-color-base-red-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-red-10-hex,
-      code: $sd-sage-color-base-red-10-code,
-      classname: $sd-sage-color-base-red-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-red-15-hex,
-      code: $sd-sage-color-base-red-15-code,
-      classname: $sd-sage-color-base-red-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-red-20-hex,
-      code: $sd-sage-color-base-red-20-code,
-      classname: $sd-sage-color-base-red-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-red-30-hex,
-      code: $sd-sage-color-base-red-30-code,
-      classname: $sd-sage-color-base-red-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-red-40-hex,
-      code: $sd-sage-color-base-red-40-code,
-      classname: $sd-sage-color-base-red-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-red-50-hex,
-      code: $sd-sage-color-base-red-50-code,
-      classname: $sd-sage-color-base-red-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-red-60-hex,
-      code: $sd-sage-color-base-red-60-code,
-      classname: $sd-sage-color-base-red-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-red-70-hex,
-      code: $sd-sage-color-base-red-70-code,
-      classname: $sd-sage-color-base-red-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-red-80-hex,
-      code: $sd-sage-color-base-red-80-code,
-      classname: $sd-sage-color-base-red-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-red-90-hex,
-      code: $sd-sage-color-base-red-90-code,
-      classname: $sd-sage-color-base-red-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-red-95-hex,
-      code: $sd-sage-color-base-red-95-code,
-      classname: $sd-sage-color-base-red-95-classname,
-    ),
     100: (
       hex: $sd-sage-color-base-red-100-hex,
       code: $sd-sage-color-base-red-100-code,
       classname: $sd-sage-color-base-red-100-classname,
     ),
+    150: (
+      hex: $sd-sage-color-base-red-150-hex,
+      code: $sd-sage-color-base-red-150-code,
+      classname: $sd-sage-color-base-red-150-classname,
+    ),
     200: (
       hex: $sd-sage-color-base-red-200-hex,
       code: $sd-sage-color-base-red-200-code,
@@ -2047,6 +1727,36 @@ $sd-sage-color: (
       code: $sd-sage-color-base-red-500-code,
       classname: $sd-sage-color-base-red-500-classname,
     ),
+    600: (
+      hex: $sd-sage-color-base-red-600-hex,
+      code: $sd-sage-color-base-red-600-code,
+      classname: $sd-sage-color-base-red-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-red-700-hex,
+      code: $sd-sage-color-base-red-700-code,
+      classname: $sd-sage-color-base-red-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-red-800-hex,
+      code: $sd-sage-color-base-red-800-code,
+      classname: $sd-sage-color-base-red-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-red-900-hex,
+      code: $sd-sage-color-base-red-900-code,
+      classname: $sd-sage-color-base-red-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-red-950-hex,
+      code: $sd-sage-color-base-red-950-code,
+      classname: $sd-sage-color-base-red-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-red-050-hex,
+      code: $sd-sage-color-base-red-050-code,
+      classname: $sd-sage-color-base-red-050-classname,
+    ),
   ),
   orange: (
     100: (
@@ -2076,71 +1786,16 @@ $sd-sage-color: (
     ),
   ),
   purple: (
-    5: (
-      hex: $sd-sage-color-base-purple-5-hex,
-      code: $sd-sage-color-base-purple-5-code,
-      classname: $sd-sage-color-base-purple-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-purple-10-hex,
-      code: $sd-sage-color-base-purple-10-code,
-      classname: $sd-sage-color-base-purple-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-purple-15-hex,
-      code: $sd-sage-color-base-purple-15-code,
-      classname: $sd-sage-color-base-purple-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-purple-20-hex,
-      code: $sd-sage-color-base-purple-20-code,
-      classname: $sd-sage-color-base-purple-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-purple-30-hex,
-      code: $sd-sage-color-base-purple-30-code,
-      classname: $sd-sage-color-base-purple-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-purple-40-hex,
-      code: $sd-sage-color-base-purple-40-code,
-      classname: $sd-sage-color-base-purple-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-purple-50-hex,
-      code: $sd-sage-color-base-purple-50-code,
-      classname: $sd-sage-color-base-purple-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-purple-60-hex,
-      code: $sd-sage-color-base-purple-60-code,
-      classname: $sd-sage-color-base-purple-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-purple-70-hex,
-      code: $sd-sage-color-base-purple-70-code,
-      classname: $sd-sage-color-base-purple-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-purple-80-hex,
-      code: $sd-sage-color-base-purple-80-code,
-      classname: $sd-sage-color-base-purple-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-purple-90-hex,
-      code: $sd-sage-color-base-purple-90-code,
-      classname: $sd-sage-color-base-purple-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-purple-95-hex,
-      code: $sd-sage-color-base-purple-95-code,
-      classname: $sd-sage-color-base-purple-95-classname,
-    ),
     100: (
       hex: $sd-sage-color-base-purple-100-hex,
       code: $sd-sage-color-base-purple-100-code,
       classname: $sd-sage-color-base-purple-100-classname,
     ),
+    150: (
+      hex: $sd-sage-color-base-purple-150-hex,
+      code: $sd-sage-color-base-purple-150-code,
+      classname: $sd-sage-color-base-purple-150-classname,
+    ),
     200: (
       hex: $sd-sage-color-base-purple-200-hex,
       code: $sd-sage-color-base-purple-200-code,
@@ -2161,6 +1816,36 @@ $sd-sage-color: (
       code: $sd-sage-color-base-purple-500-code,
       classname: $sd-sage-color-base-purple-500-classname,
     ),
+    600: (
+      hex: $sd-sage-color-base-purple-600-hex,
+      code: $sd-sage-color-base-purple-600-code,
+      classname: $sd-sage-color-base-purple-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-purple-700-hex,
+      code: $sd-sage-color-base-purple-700-code,
+      classname: $sd-sage-color-base-purple-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-purple-800-hex,
+      code: $sd-sage-color-base-purple-800-code,
+      classname: $sd-sage-color-base-purple-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-purple-900-hex,
+      code: $sd-sage-color-base-purple-900-code,
+      classname: $sd-sage-color-base-purple-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-purple-950-hex,
+      code: $sd-sage-color-base-purple-950-code,
+      classname: $sd-sage-color-base-purple-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-purple-050-hex,
+      code: $sd-sage-color-base-purple-050-code,
+      classname: $sd-sage-color-base-purple-050-classname,
+    ),
   ),
   charcoal: (
     100: (
@@ -2190,71 +1875,16 @@ $sd-sage-color: (
     ),
   ),
   grey: (
-    5: (
-      hex: $sd-sage-color-base-grey-5-hex,
-      code: $sd-sage-color-base-grey-5-code,
-      classname: $sd-sage-color-base-grey-5-classname,
-    ),
-    10: (
-      hex: $sd-sage-color-base-grey-10-hex,
-      code: $sd-sage-color-base-grey-10-code,
-      classname: $sd-sage-color-base-grey-10-classname,
-    ),
-    15: (
-      hex: $sd-sage-color-base-grey-15-hex,
-      code: $sd-sage-color-base-grey-15-code,
-      classname: $sd-sage-color-base-grey-15-classname,
-    ),
-    20: (
-      hex: $sd-sage-color-base-grey-20-hex,
-      code: $sd-sage-color-base-grey-20-code,
-      classname: $sd-sage-color-base-grey-20-classname,
-    ),
-    30: (
-      hex: $sd-sage-color-base-grey-30-hex,
-      code: $sd-sage-color-base-grey-30-code,
-      classname: $sd-sage-color-base-grey-30-classname,
-    ),
-    40: (
-      hex: $sd-sage-color-base-grey-40-hex,
-      code: $sd-sage-color-base-grey-40-code,
-      classname: $sd-sage-color-base-grey-40-classname,
-    ),
-    50: (
-      hex: $sd-sage-color-base-grey-50-hex,
-      code: $sd-sage-color-base-grey-50-code,
-      classname: $sd-sage-color-base-grey-50-classname,
-    ),
-    60: (
-      hex: $sd-sage-color-base-grey-60-hex,
-      code: $sd-sage-color-base-grey-60-code,
-      classname: $sd-sage-color-base-grey-60-classname,
-    ),
-    70: (
-      hex: $sd-sage-color-base-grey-70-hex,
-      code: $sd-sage-color-base-grey-70-code,
-      classname: $sd-sage-color-base-grey-70-classname,
-    ),
-    80: (
-      hex: $sd-sage-color-base-grey-80-hex,
-      code: $sd-sage-color-base-grey-80-code,
-      classname: $sd-sage-color-base-grey-80-classname,
-    ),
-    90: (
-      hex: $sd-sage-color-base-grey-90-hex,
-      code: $sd-sage-color-base-grey-90-code,
-      classname: $sd-sage-color-base-grey-90-classname,
-    ),
-    95: (
-      hex: $sd-sage-color-base-grey-95-hex,
-      code: $sd-sage-color-base-grey-95-code,
-      classname: $sd-sage-color-base-grey-95-classname,
-    ),
     100: (
       hex: $sd-sage-color-base-grey-100-hex,
       code: $sd-sage-color-base-grey-100-code,
       classname: $sd-sage-color-base-grey-100-classname,
     ),
+    150: (
+      hex: $sd-sage-color-base-grey-150-hex,
+      code: $sd-sage-color-base-grey-150-code,
+      classname: $sd-sage-color-base-grey-150-classname,
+    ),
     200: (
       hex: $sd-sage-color-base-grey-200-hex,
       code: $sd-sage-color-base-grey-200-code,
@@ -2275,6 +1905,36 @@ $sd-sage-color: (
       code: $sd-sage-color-base-grey-500-code,
       classname: $sd-sage-color-base-grey-500-classname,
     ),
+    600: (
+      hex: $sd-sage-color-base-grey-600-hex,
+      code: $sd-sage-color-base-grey-600-code,
+      classname: $sd-sage-color-base-grey-600-classname,
+    ),
+    700: (
+      hex: $sd-sage-color-base-grey-700-hex,
+      code: $sd-sage-color-base-grey-700-code,
+      classname: $sd-sage-color-base-grey-700-classname,
+    ),
+    800: (
+      hex: $sd-sage-color-base-grey-800-hex,
+      code: $sd-sage-color-base-grey-800-code,
+      classname: $sd-sage-color-base-grey-800-classname,
+    ),
+    900: (
+      hex: $sd-sage-color-base-grey-900-hex,
+      code: $sd-sage-color-base-grey-900-code,
+      classname: $sd-sage-color-base-grey-900-classname,
+    ),
+    950: (
+      hex: $sd-sage-color-base-grey-950-hex,
+      code: $sd-sage-color-base-grey-950-code,
+      classname: $sd-sage-color-base-grey-950-classname,
+    ),
+    050: (
+      hex: $sd-sage-color-base-grey-050-hex,
+      code: $sd-sage-color-base-grey-050-code,
+      classname: $sd-sage-color-base-grey-050-classname,
+    ),
   ),
   white: (
     100: (
diff --git a/packages/sage-assets/lib/stylesheets/global/_reboot.scss b/packages/sage-assets/lib/stylesheets/global/_reboot.scss
index d2ee03f90f..a4a12e8009 100644
--- a/packages/sage-assets/lib/stylesheets/global/_reboot.scss
+++ b/packages/sage-assets/lib/stylesheets/global/_reboot.scss
@@ -66,7 +66,7 @@ h6,
 .t-sage-heading-6 {
   margin-top: 0;
   margin-bottom: 0;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif ;
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss
index 7a4ad74b82..401a0ef3c7 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss
@@ -9,9 +9,9 @@
 /// Sage borders token
 ///
 $sage-borders: (
-  default: rem(1px) solid sage-color(grey, 300),
-  error: rem(1px) solid sage-color(red, 300),
-  interactive: rem(1px) solid sage-color(grey, 400),
+  default: rem(1px) solid sage-color(grey, 200),
+  error: rem(1px) solid sage-color(red, 500),
+  interactive: rem(1px) solid sage-color(grey, 300),
   interactive-hover: rem(1px) solid sage-color(grey, 500),
   radius-small: rem(4px),
   radius: rem(8px),
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
index 91ab7c33fa..69c8e04c99 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
@@ -9,13 +9,13 @@
 /// Sage borders interactive token
 ///
 $sage-borders-interactive: (
-  default: 0 0 0 1px sage-color(grey, 400),
+  default: 0 0 0 1px sage-color(grey, 300),
   hover: 0 0 0 1px sage-color(grey, 500),
   focus: 0 0 0 4px sage-color(primary, 200),
-  selected: 0 0 0 4px sage-color(charcoal, 400),
-  error: 0 0 0 1px sage-color(red, 300),
-  error-focus: 0 0 0 4px sage-color(red, 300),
-  disabled: 0 0 0 1px sage-color(grey, 300),
+  selected: 0 0 0 4px sage-color(grey, 900),
+  error: 0 0 0 1px sage-color(red, 500),
+  error-focus: 0 0 0 4px sage-color(red, 500),
+  disabled: 0 0 0 1px sage-color(grey, 200),
 );
 
 ///
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
index 632b1924a9..b53ed8b82b 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
@@ -32,14 +32,38 @@ $sage-color-default-name: "grey 500";
 ///
 /// @return {color} the value retrieved
 ///
-@function sage-color($base, $value: 300) {
+@function sage-color($base, $value: null) {
+  // Map base colors to their default values
+  $default-values: (
+    black: 500,
+    blue: 600,
+    charcoal: 300,
+    grey: 300,
+    green: 600,
+    mercury: 500,
+    orange: 300,
+    primary: 300,
+    purple: 600,
+    red: 500,
+    sage: 300,
+    white: 500,
+    yellow: 400
+  );
+
+  // Get the default value for the given base color
+  $default-value: map-get($default-values, $base);
+
+  // If no value is provided, use the default value
+  $value: if($value == null, $default-value, $value);
+
   $color: sd-sage-color($base, $value, hex);
-  
+
   @if $color {
     @return $color;
   }
 
   @warn "Could not retrieve color: #{$base} #{$value}. Got `#{$color}` from `sd-sage-color()`. Default color #{$sage-color-default-name} (`#{$sage-color-default}`) returned instead.";
-  
+
   @return $sage-color-default;
+
 }
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
index 0540f7fa4b..f4f15b80c5 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
@@ -9,17 +9,17 @@
 /// Sage shadows token
 ///
 $sage-shadows: (
-  sm: (0 1px 2px rgba(sage-color(grey, 95), 0.06), 0 1px 3px rgba(sage-color(grey, 95), 0.1)),
-  md: (0 4px 6px -2px rgba(sage-color(grey, 95), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 95), 0.08)),
-  lg: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)),
-  modal: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.24)),
-  050: (0 1px 2px 0 rgba(sage-color(grey, 95), 0.05)),
-  100: (0 1px 3px 0 rgba(sage-color(grey, 95), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 95), 0.06)),
-  150: (0 4px 8px -2px rgba(sage-color(grey, 95), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 95), 0.06)),
-  200: (0 12px 16px -4px rgba(sage-color(grey, 95), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 95), 0.03)),
-  300: (0 20px 24px -4px rgba(sage-color(grey, 95), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 95), 0.03)),
-  400: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)),
-  500: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.14)),
+  sm: (0 1px 2px rgba(sage-color(grey, 950), 0.06), 0 1px 3px rgba(sage-color(grey, 950), 0.1)),
+  md: (0 4px 6px -2px rgba(sage-color(grey, 950), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 950), 0.08)),
+  lg: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)),
+  modal: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.24)),
+  050: (0 1px 2px 0 rgba(sage-color(grey, 950), 0.05)),
+  100: (0 1px 3px 0 rgba(sage-color(grey, 950), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 950), 0.06)),
+  150: (0 4px 8px -2px rgba(sage-color(grey, 950), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 950), 0.06)),
+  200: (0 12px 16px -4px rgba(sage-color(grey, 950), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 950), 0.03)),
+  300: (0 20px 24px -4px rgba(sage-color(grey, 950), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 950), 0.03)),
+  400: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)),
+  500: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.14)),
 );
 
 ///
diff --git a/packages/sage-react/lib/Chart/Chart.story.jsx b/packages/sage-react/lib/Chart/Chart.story.jsx
index 0721c11e43..8216863544 100644
--- a/packages/sage-react/lib/Chart/Chart.story.jsx
+++ b/packages/sage-react/lib/Chart/Chart.story.jsx
@@ -72,7 +72,7 @@ MultipleBars.args = {
       {
         dataKey: 'thisYear',
         name: 'This Year',
-        fill: SageTokens.COLOR_PALETTE.SAGE_100,
+        fill: SageTokens.COLOR_PALETTE.GREEN_150,
       },
       {
         dataKey: 'lastYear',
@@ -124,7 +124,7 @@ Donut.args = {
     {
       name: 'Healthy',
       value: 2467,
-      fill: SageTokens.COLOR_PALETTE.SAGE_100,
+      fill: SageTokens.COLOR_PALETTE.GREEN_150,
     },
     {
       name: 'Unengaged',
@@ -134,7 +134,7 @@ Donut.args = {
     {
       name: 'Inactive',
       value: 153,
-      fill: SageTokens.COLOR_PALETTE.RED_200,
+      fill: SageTokens.COLOR_PALETTE.RED_300,
     },
     {
       name: 'Hungry',
@@ -144,7 +144,7 @@ Donut.args = {
     {
       name: 'Grumpy',
       value: 53,
-      fill: SageTokens.COLOR_PALETTE.PURPLE_200,
+      fill: SageTokens.COLOR_PALETTE.PURPLE_300,
     },
   ],
   loading: false,
diff --git a/packages/sage-react/lib/Chart/types/Bar.jsx b/packages/sage-react/lib/Chart/types/Bar.jsx
index d0eb5b8e9d..ebf5386e4f 100644
--- a/packages/sage-react/lib/Chart/types/Bar.jsx
+++ b/packages/sage-react/lib/Chart/types/Bar.jsx
@@ -72,7 +72,7 @@ Bar.defaultProps = {
   aspect: 1.8,
   bars: [{
     dataKey: 'value',
-    fill: SageTokens.COLOR_PALETTE.SAGE_100,
+    fill: SageTokens.COLOR_PALETTE.GREEN_150,
     name: 'Value'
   }],
   showLegend: false,
diff --git a/packages/sage-react/lib/Drawer/Drawer.story.jsx b/packages/sage-react/lib/Drawer/Drawer.story.jsx
index 4c8aacbd66..41156bb8bf 100644
--- a/packages/sage-react/lib/Drawer/Drawer.story.jsx
+++ b/packages/sage-react/lib/Drawer/Drawer.story.jsx
@@ -7,7 +7,7 @@ import { Grid } from '../Grid';
 
 const drawerChildren = (
   <>
-    <h3 className={`${SageClassnames.TYPE.HEADING_4} ${SageClassnames.TYPE_COLORS.CHARCOAL_500}`}>
+    <h3 className={`${SageClassnames.TYPE.HEADING_4} ${SageClassnames.TYPE_COLORS.GREY_950}`}>
       Drawer
     </h3>
     <p>👋  Any content can go here.</p>
@@ -112,7 +112,7 @@ export const WiredExample = () => {
 
   const drawerExpandedChildren = (
     <>
-      <h3 className={`${SageClassnames.TYPE.HEADING_4} ${SageClassnames.TYPE_COLORS.CHARCOAL_500}`}>
+      <h3 className={`${SageClassnames.TYPE.HEADING_4} ${SageClassnames.TYPE_COLORS.GREY_950}`}>
         Drawer
       </h3>
       <p>👋  Any content can go here.</p>
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
index 9e2ac7347a..21331d83ca 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -44,7 +44,7 @@ export const EmptyState = ({
       {icon && (
         <div
           className="sage-empty-state__icon-container"
-          style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_30 }}
+          style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_300 }}
         >
           <Icon
             color={Icon.COLORS.WHITE}
diff --git a/packages/sage-react/lib/Frame/Frame.story.jsx b/packages/sage-react/lib/Frame/Frame.story.jsx
index 00fd694eda..9cc0d74792 100644
--- a/packages/sage-react/lib/Frame/Frame.story.jsx
+++ b/packages/sage-react/lib/Frame/Frame.story.jsx
@@ -112,7 +112,7 @@ export const NestingFrames = () => (
         <h4 className={SageClassnames.TYPE.HEADING_3}>
           Lorem ipsum dolor sit
         </h4>
-        <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.CHARCOAL_200}`}>
+        <p className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_700}`}>
           Consectetur adipiscing elit
         </p>
       </Frame>
@@ -225,7 +225,7 @@ export const StatBox = () => (
   >
     <Frame gap={Frame.GAPS.SM}>
       <Frame gap={Frame.GAPS.NONE}>
-        <h3 className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.CHARCOAL_200}`}>
+        <h3 className={`${SageClassnames.TYPE.BODY_SMALL} ${SageClassnames.TYPE_COLORS.GREY_700}`}>
           All payments
         </h3>
         <Frame
@@ -237,7 +237,7 @@ export const StatBox = () => (
           <b className={SageClassnames.TYPE.HEADING_5}>
             40
           </b>
-          <span className={`${SageClassnames.TYPE.BODY_XSMALL} ${SageClassnames.TYPE_COLORS.CHARCOAL_100}`}>
+          <span className={`${SageClassnames.TYPE.BODY_XSMALL} ${SageClassnames.TYPE_COLORS.GREY_600}`}>
             successful payments
           </span>
         </Frame>
diff --git a/packages/sage-react/lib/IconList/IconListItem.jsx b/packages/sage-react/lib/IconList/IconListItem.jsx
index c83db42f8c..3c7e5b40fd 100644
--- a/packages/sage-react/lib/IconList/IconListItem.jsx
+++ b/packages/sage-react/lib/IconList/IconListItem.jsx
@@ -93,7 +93,7 @@ IconListItem.defaultProps = {
   children: null,
   className: null,
   icon: null,
-  iconColor: Icon.COLORS.CHARCOAL_100,
+  iconColor: Icon.COLORS.GREY_600,
   input: null,
   inputId: null,
   inputName: null,
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
index bfd1803c21..f37175394c 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
@@ -85,7 +85,7 @@ KitchenSink.args = {
   ),
   mediaConfigs: {
     aspectRatio: 1.8,
-    backgroundColor: SageTokens.COLOR_PALETTE.SAGE_100,
+    backgroundColor: SageTokens.COLOR_PALETTE.GREEN_150,
     padded: true,
   },
   tileLink: null,
diff --git a/packages/sage-react/lib/Modal/ModalHeader.jsx b/packages/sage-react/lib/Modal/ModalHeader.jsx
index bece5f83c6..b7c2f86a95 100644
--- a/packages/sage-react/lib/Modal/ModalHeader.jsx
+++ b/packages/sage-react/lib/Modal/ModalHeader.jsx
@@ -55,7 +55,7 @@ export const ModalHeader = ({
         </Card.Row>
         {subheader && (
           <Card.Row>
-            <h2 className={`${SageClassnames.TYPE.BODY} ${SageClassnames.TYPE_COLORS.CHARCOAL_300}`}>{subheader}</h2>
+            <h2 className={`${SageClassnames.TYPE.BODY} ${SageClassnames.TYPE_COLORS.GREY_800}`}>{subheader}</h2>
             {popover && (
               <Popover
                 title={popover.title}
diff --git a/packages/sage-react/lib/Search/Search.jsx b/packages/sage-react/lib/Search/Search.jsx
index de47b1f17a..092ba90848 100644
--- a/packages/sage-react/lib/Search/Search.jsx
+++ b/packages/sage-react/lib/Search/Search.jsx
@@ -44,7 +44,7 @@ export const Search = React.forwardRef(({
         <pds-icon
           name="search-small"
           class={SageClassnames.SPACERS.SM_LEFT}
-          color={SageTokens.COLOR_PALETTE.CHARCOAL_200}
+          color={SageTokens.COLOR_PALETTE.GREY_700}
           style={{ zIndex: '2' }}
         />
         <input
diff --git a/packages/sage-react/lib/Select/Select.jsx b/packages/sage-react/lib/Select/Select.jsx
index c65a0b6b22..3a920693bc 100644
--- a/packages/sage-react/lib/Select/Select.jsx
+++ b/packages/sage-react/lib/Select/Select.jsx
@@ -84,7 +84,7 @@ export const Select = ({
       <pds-icon
         aria-hidden="true"
         class="sage-select__arrow"
-        color={SageTokens.COLOR_PALETTE.CHARCOAL_100}
+        color={SageTokens.COLOR_PALETTE.GREY_600}
         name="caret-down"
       />
       {label && (
diff --git a/packages/sage-react/lib/configs/classnames/type.js b/packages/sage-react/lib/configs/classnames/type.js
index 2a3673f87b..b38969617a 100644
--- a/packages/sage-react/lib/configs/classnames/type.js
+++ b/packages/sage-react/lib/configs/classnames/type.js
@@ -27,8 +27,24 @@ export const CLASSNAMES_TYPE = {
 // CLASSNAMES_TYPE_COLORS.RED_200 ---> `t-sage--color-red-200`
 export const CLASSNAMES_TYPE_COLORS = {};
 Object.keys(SageDictionary.COLOR).forEach((colorName) => {
+  const defaultIndex = {
+    black: 500,
+    blue: 600,
+    charcoal: 300,
+    grey: 300,
+    green: 600,
+    mercury: 500,
+    orange: 300,
+    primary: 300,
+    purple: 600,
+    red: 500,
+    sage: 300,
+    white: 500,
+    yellow: 400
+  }[colorName.toLowerCase()];
+
   Object.keys(SageDictionary.COLOR[colorName]).forEach((index) => {
-    if (index === '300') {
+    if (Number(index) === defaultIndex) {
       CLASSNAMES_TYPE_COLORS[`${colorName}`] = SageDictionary.COLOR[colorName][index].CLASSNAME;
     }
     CLASSNAMES_TYPE_COLORS[`${colorName}_${index}`] = SageDictionary.COLOR[colorName][index].CLASSNAME;
diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js
index fc6635ea4f..af0c112b98 100644
--- a/packages/sage-react/lib/configs/dictionary/tokens.js
+++ b/packages/sage-react/lib/configs/dictionary/tokens.js
@@ -19,114 +19,114 @@
 //
 // Static vars for COLOR BASE
 //
-export const COLOR_BASE_BLUE_5_HEX = '#fafcff';
-export const COLOR_BASE_BLUE_5_CODE = 'blue-5';
-export const COLOR_BASE_BLUE_5_CLASSNAME = 't-sage--color-blue-5';
-export const COLOR_BASE_BLUE_10_HEX = '#eff6ff';
-export const COLOR_BASE_BLUE_10_CODE = 'blue-10';
-export const COLOR_BASE_BLUE_10_CLASSNAME = 't-sage--color-blue-10';
-export const COLOR_BASE_BLUE_15_HEX = '#dbe9fe';
-export const COLOR_BASE_BLUE_15_CODE = 'blue-15';
-export const COLOR_BASE_BLUE_15_CLASSNAME = 't-sage--color-blue-15';
-export const COLOR_BASE_BLUE_20_HEX = '#bfdbfe';
-export const COLOR_BASE_BLUE_20_CODE = 'blue-20';
-export const COLOR_BASE_BLUE_20_CLASSNAME = 't-sage--color-blue-20';
-export const COLOR_BASE_BLUE_30_HEX = '#92c5fd';
-export const COLOR_BASE_BLUE_30_CODE = 'blue-30';
-export const COLOR_BASE_BLUE_30_CLASSNAME = 't-sage--color-blue-30';
-export const COLOR_BASE_BLUE_40_HEX = '#60a5fa';
-export const COLOR_BASE_BLUE_40_CODE = 'blue-40';
-export const COLOR_BASE_BLUE_40_CLASSNAME = 't-sage--color-blue-40';
-export const COLOR_BASE_BLUE_50_HEX = '#3c82f6';
-export const COLOR_BASE_BLUE_50_CODE = 'blue-50';
-export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50';
-export const COLOR_BASE_BLUE_60_HEX = '#2463eb';
-export const COLOR_BASE_BLUE_60_CODE = 'blue-60';
-export const COLOR_BASE_BLUE_60_CLASSNAME = 't-sage--color-blue-60';
-export const COLOR_BASE_BLUE_70_HEX = '#1c4ed8';
-export const COLOR_BASE_BLUE_70_CODE = 'blue-70';
-export const COLOR_BASE_BLUE_70_CLASSNAME = 't-sage--color-blue-70';
-export const COLOR_BASE_BLUE_80_HEX = '#1d40ae';
-export const COLOR_BASE_BLUE_80_CODE = 'blue-80';
-export const COLOR_BASE_BLUE_80_CLASSNAME = 't-sage--color-blue-80';
-export const COLOR_BASE_BLUE_90_HEX = '#1f3a8a';
-export const COLOR_BASE_BLUE_90_CODE = 'blue-90';
-export const COLOR_BASE_BLUE_90_CLASSNAME = 't-sage--color-blue-90';
-export const COLOR_BASE_BLUE_95_HEX = '#172554';
-export const COLOR_BASE_BLUE_95_CODE = 'blue-95';
-export const COLOR_BASE_BLUE_95_CLASSNAME = 't-sage--color-blue-95';
-export const COLOR_BASE_GREEN_5_HEX = '#fbfefc';
-export const COLOR_BASE_GREEN_5_CODE = 'green-5';
-export const COLOR_BASE_GREEN_5_CLASSNAME = 't-sage--color-green-5';
-export const COLOR_BASE_GREEN_10_HEX = '#edfcf2';
-export const COLOR_BASE_GREEN_10_CODE = 'green-10';
-export const COLOR_BASE_GREEN_10_CLASSNAME = 't-sage--color-green-10';
-export const COLOR_BASE_GREEN_15_HEX = '#d3f8df';
-export const COLOR_BASE_GREEN_15_CODE = 'green-15';
-export const COLOR_BASE_GREEN_15_CLASSNAME = 't-sage--color-green-15';
-export const COLOR_BASE_GREEN_20_HEX = '#aaf0c4';
-export const COLOR_BASE_GREEN_20_CODE = 'green-20';
-export const COLOR_BASE_GREEN_20_CLASSNAME = 't-sage--color-green-20';
-export const COLOR_BASE_GREEN_30_HEX = '#73e2a3';
-export const COLOR_BASE_GREEN_30_CODE = 'green-30';
-export const COLOR_BASE_GREEN_30_CLASSNAME = 't-sage--color-green-30';
-export const COLOR_BASE_GREEN_40_HEX = '#3dcb7f';
-export const COLOR_BASE_GREEN_40_CODE = 'green-40';
-export const COLOR_BASE_GREEN_40_CLASSNAME = 't-sage--color-green-40';
-export const COLOR_BASE_GREEN_50_HEX = '#17b365';
-export const COLOR_BASE_GREEN_50_CODE = 'green-50';
-export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50';
-export const COLOR_BASE_GREEN_60_HEX = '#079250';
-export const COLOR_BASE_GREEN_60_CODE = 'green-60';
-export const COLOR_BASE_GREEN_60_CLASSNAME = 't-sage--color-green-60';
-export const COLOR_BASE_GREEN_70_HEX = '#097443';
-export const COLOR_BASE_GREEN_70_CODE = 'green-70';
-export const COLOR_BASE_GREEN_70_CLASSNAME = 't-sage--color-green-70';
-export const COLOR_BASE_GREEN_80_HEX = '#085c37';
-export const COLOR_BASE_GREEN_80_CODE = 'green-80';
-export const COLOR_BASE_GREEN_80_CLASSNAME = 't-sage--color-green-80';
-export const COLOR_BASE_GREEN_90_HEX = '#094c2f';
-export const COLOR_BASE_GREEN_90_CODE = 'green-90';
-export const COLOR_BASE_GREEN_90_CLASSNAME = 't-sage--color-green-90';
-export const COLOR_BASE_GREEN_95_HEX = '#052e1c';
-export const COLOR_BASE_GREEN_95_CODE = 'green-95';
-export const COLOR_BASE_GREEN_95_CLASSNAME = 't-sage--color-green-95';
-export const COLOR_BASE_MERCURY_5_HEX = '#fffcfa';
-export const COLOR_BASE_MERCURY_5_CODE = 'mercury-5';
-export const COLOR_BASE_MERCURY_5_CLASSNAME = 't-sage--color-mercury-5';
-export const COLOR_BASE_MERCURY_10_HEX = '#fff3ed';
-export const COLOR_BASE_MERCURY_10_CODE = 'mercury-10';
-export const COLOR_BASE_MERCURY_10_CLASSNAME = 't-sage--color-mercury-10';
-export const COLOR_BASE_MERCURY_15_HEX = '#ffe3d4';
-export const COLOR_BASE_MERCURY_15_CODE = 'mercury-15';
-export const COLOR_BASE_MERCURY_15_CLASSNAME = 't-sage--color-mercury-15';
-export const COLOR_BASE_MERCURY_20_HEX = '#ffc3a8';
-export const COLOR_BASE_MERCURY_20_CODE = 'mercury-20';
-export const COLOR_BASE_MERCURY_20_CLASSNAME = 't-sage--color-mercury-20';
-export const COLOR_BASE_MERCURY_30_HEX = '#ff9970';
-export const COLOR_BASE_MERCURY_30_CODE = 'mercury-30';
-export const COLOR_BASE_MERCURY_30_CLASSNAME = 't-sage--color-mercury-30';
-export const COLOR_BASE_MERCURY_40_HEX = '#ff6337';
-export const COLOR_BASE_MERCURY_40_CODE = 'mercury-40';
-export const COLOR_BASE_MERCURY_40_CLASSNAME = 't-sage--color-mercury-40';
-export const COLOR_BASE_MERCURY_50_HEX = '#ff3e15';
-export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50';
-export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50';
-export const COLOR_BASE_MERCURY_60_HEX = '#f11f06';
-export const COLOR_BASE_MERCURY_60_CODE = 'mercury-60';
-export const COLOR_BASE_MERCURY_60_CLASSNAME = 't-sage--color-mercury-60';
-export const COLOR_BASE_MERCURY_70_HEX = '#c81307';
-export const COLOR_BASE_MERCURY_70_CODE = 'mercury-70';
-export const COLOR_BASE_MERCURY_70_CLASSNAME = 't-sage--color-mercury-70';
-export const COLOR_BASE_MERCURY_80_HEX = '#9e110e';
-export const COLOR_BASE_MERCURY_80_CODE = 'mercury-80';
-export const COLOR_BASE_MERCURY_80_CLASSNAME = 't-sage--color-mercury-80';
-export const COLOR_BASE_MERCURY_90_HEX = '#7f120f';
-export const COLOR_BASE_MERCURY_90_CODE = 'mercury-90';
-export const COLOR_BASE_MERCURY_90_CLASSNAME = 't-sage--color-mercury-90';
-export const COLOR_BASE_MERCURY_95_HEX = '#450506';
-export const COLOR_BASE_MERCURY_95_CODE = 'mercury-95';
-export const COLOR_BASE_MERCURY_95_CLASSNAME = 't-sage--color-mercury-95';
+export const COLOR_BASE_BLUE_100_HEX = '#eff6ff';
+export const COLOR_BASE_BLUE_100_CODE = 'blue-100';
+export const COLOR_BASE_BLUE_100_CLASSNAME = 't-sage--color-blue-100';
+export const COLOR_BASE_BLUE_150_HEX = '#dbe9fe';
+export const COLOR_BASE_BLUE_150_CODE = 'blue-150';
+export const COLOR_BASE_BLUE_150_CLASSNAME = 't-sage--color-blue-150';
+export const COLOR_BASE_BLUE_200_HEX = '#bfdbfe';
+export const COLOR_BASE_BLUE_200_CODE = 'blue-200';
+export const COLOR_BASE_BLUE_200_CLASSNAME = 't-sage--color-blue-200';
+export const COLOR_BASE_BLUE_300_HEX = '#92c5fd';
+export const COLOR_BASE_BLUE_300_CODE = 'blue-300';
+export const COLOR_BASE_BLUE_300_CLASSNAME = 't-sage--color-blue-300';
+export const COLOR_BASE_BLUE_400_HEX = '#60a5fa';
+export const COLOR_BASE_BLUE_400_CODE = 'blue-400';
+export const COLOR_BASE_BLUE_400_CLASSNAME = 't-sage--color-blue-400';
+export const COLOR_BASE_BLUE_500_HEX = '#3c82f6';
+export const COLOR_BASE_BLUE_500_CODE = 'blue-500';
+export const COLOR_BASE_BLUE_500_CLASSNAME = 't-sage--color-blue-500';
+export const COLOR_BASE_BLUE_600_HEX = '#2463eb';
+export const COLOR_BASE_BLUE_600_CODE = 'blue-600';
+export const COLOR_BASE_BLUE_600_CLASSNAME = 't-sage--color-blue-600';
+export const COLOR_BASE_BLUE_700_HEX = '#1c4ed8';
+export const COLOR_BASE_BLUE_700_CODE = 'blue-700';
+export const COLOR_BASE_BLUE_700_CLASSNAME = 't-sage--color-blue-700';
+export const COLOR_BASE_BLUE_800_HEX = '#1d40ae';
+export const COLOR_BASE_BLUE_800_CODE = 'blue-800';
+export const COLOR_BASE_BLUE_800_CLASSNAME = 't-sage--color-blue-800';
+export const COLOR_BASE_BLUE_900_HEX = '#1f3a8a';
+export const COLOR_BASE_BLUE_900_CODE = 'blue-900';
+export const COLOR_BASE_BLUE_900_CLASSNAME = 't-sage--color-blue-900';
+export const COLOR_BASE_BLUE_950_HEX = '#172554';
+export const COLOR_BASE_BLUE_950_CODE = 'blue-950';
+export const COLOR_BASE_BLUE_950_CLASSNAME = 't-sage--color-blue-950';
+export const COLOR_BASE_BLUE_050_HEX = '#fafcff';
+export const COLOR_BASE_BLUE_050_CODE = 'blue-050';
+export const COLOR_BASE_BLUE_050_CLASSNAME = 't-sage--color-blue-050';
+export const COLOR_BASE_GREEN_100_HEX = '#edfcf2';
+export const COLOR_BASE_GREEN_100_CODE = 'green-100';
+export const COLOR_BASE_GREEN_100_CLASSNAME = 't-sage--color-green-100';
+export const COLOR_BASE_GREEN_150_HEX = '#d3f8df';
+export const COLOR_BASE_GREEN_150_CODE = 'green-150';
+export const COLOR_BASE_GREEN_150_CLASSNAME = 't-sage--color-green-150';
+export const COLOR_BASE_GREEN_200_HEX = '#aaf0c4';
+export const COLOR_BASE_GREEN_200_CODE = 'green-200';
+export const COLOR_BASE_GREEN_200_CLASSNAME = 't-sage--color-green-200';
+export const COLOR_BASE_GREEN_300_HEX = '#73e2a3';
+export const COLOR_BASE_GREEN_300_CODE = 'green-300';
+export const COLOR_BASE_GREEN_300_CLASSNAME = 't-sage--color-green-300';
+export const COLOR_BASE_GREEN_400_HEX = '#3dcb7f';
+export const COLOR_BASE_GREEN_400_CODE = 'green-400';
+export const COLOR_BASE_GREEN_400_CLASSNAME = 't-sage--color-green-400';
+export const COLOR_BASE_GREEN_500_HEX = '#17b365';
+export const COLOR_BASE_GREEN_500_CODE = 'green-500';
+export const COLOR_BASE_GREEN_500_CLASSNAME = 't-sage--color-green-500';
+export const COLOR_BASE_GREEN_600_HEX = '#079250';
+export const COLOR_BASE_GREEN_600_CODE = 'green-600';
+export const COLOR_BASE_GREEN_600_CLASSNAME = 't-sage--color-green-600';
+export const COLOR_BASE_GREEN_700_HEX = '#097443';
+export const COLOR_BASE_GREEN_700_CODE = 'green-700';
+export const COLOR_BASE_GREEN_700_CLASSNAME = 't-sage--color-green-700';
+export const COLOR_BASE_GREEN_800_HEX = '#085c37';
+export const COLOR_BASE_GREEN_800_CODE = 'green-800';
+export const COLOR_BASE_GREEN_800_CLASSNAME = 't-sage--color-green-800';
+export const COLOR_BASE_GREEN_900_HEX = '#094c2f';
+export const COLOR_BASE_GREEN_900_CODE = 'green-900';
+export const COLOR_BASE_GREEN_900_CLASSNAME = 't-sage--color-green-900';
+export const COLOR_BASE_GREEN_950_HEX = '#052e1c';
+export const COLOR_BASE_GREEN_950_CODE = 'green-950';
+export const COLOR_BASE_GREEN_950_CLASSNAME = 't-sage--color-green-950';
+export const COLOR_BASE_GREEN_050_HEX = '#fbfefc';
+export const COLOR_BASE_GREEN_050_CODE = 'green-050';
+export const COLOR_BASE_GREEN_050_CLASSNAME = 't-sage--color-green-050';
+export const COLOR_BASE_MERCURY_100_HEX = '#fff3ed';
+export const COLOR_BASE_MERCURY_100_CODE = 'mercury-100';
+export const COLOR_BASE_MERCURY_100_CLASSNAME = 't-sage--color-mercury-100';
+export const COLOR_BASE_MERCURY_150_HEX = '#ffe3d4';
+export const COLOR_BASE_MERCURY_150_CODE = 'mercury-150';
+export const COLOR_BASE_MERCURY_150_CLASSNAME = 't-sage--color-mercury-150';
+export const COLOR_BASE_MERCURY_200_HEX = '#ffc3a8';
+export const COLOR_BASE_MERCURY_200_CODE = 'mercury-200';
+export const COLOR_BASE_MERCURY_200_CLASSNAME = 't-sage--color-mercury-200';
+export const COLOR_BASE_MERCURY_300_HEX = '#ff9970';
+export const COLOR_BASE_MERCURY_300_CODE = 'mercury-300';
+export const COLOR_BASE_MERCURY_300_CLASSNAME = 't-sage--color-mercury-300';
+export const COLOR_BASE_MERCURY_400_HEX = '#ff6337';
+export const COLOR_BASE_MERCURY_400_CODE = 'mercury-400';
+export const COLOR_BASE_MERCURY_400_CLASSNAME = 't-sage--color-mercury-400';
+export const COLOR_BASE_MERCURY_500_HEX = '#ff3e15';
+export const COLOR_BASE_MERCURY_500_CODE = 'mercury-500';
+export const COLOR_BASE_MERCURY_500_CLASSNAME = 't-sage--color-mercury-500';
+export const COLOR_BASE_MERCURY_600_HEX = '#f11f06';
+export const COLOR_BASE_MERCURY_600_CODE = 'mercury-600';
+export const COLOR_BASE_MERCURY_600_CLASSNAME = 't-sage--color-mercury-600';
+export const COLOR_BASE_MERCURY_700_HEX = '#c81307';
+export const COLOR_BASE_MERCURY_700_CODE = 'mercury-700';
+export const COLOR_BASE_MERCURY_700_CLASSNAME = 't-sage--color-mercury-700';
+export const COLOR_BASE_MERCURY_800_HEX = '#9e110e';
+export const COLOR_BASE_MERCURY_800_CODE = 'mercury-800';
+export const COLOR_BASE_MERCURY_800_CLASSNAME = 't-sage--color-mercury-800';
+export const COLOR_BASE_MERCURY_900_HEX = '#7f120f';
+export const COLOR_BASE_MERCURY_900_CODE = 'mercury-900';
+export const COLOR_BASE_MERCURY_900_CLASSNAME = 't-sage--color-mercury-900';
+export const COLOR_BASE_MERCURY_950_HEX = '#450506';
+export const COLOR_BASE_MERCURY_950_CODE = 'mercury-950';
+export const COLOR_BASE_MERCURY_950_CLASSNAME = 't-sage--color-mercury-950';
+export const COLOR_BASE_MERCURY_050_HEX = '#fffcfa';
+export const COLOR_BASE_MERCURY_050_CODE = 'mercury-050';
+export const COLOR_BASE_MERCURY_050_CLASSNAME = 't-sage--color-mercury-050';
 export const COLOR_BASE_PRIMARY_100_HEX = '#dbe9fe';
 export const COLOR_BASE_PRIMARY_100_CODE = 'primary-100';
 export const COLOR_BASE_PRIMARY_100_CLASSNAME = 't-sage--color-primary-100';
@@ -157,108 +157,78 @@ export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400';
 export const COLOR_BASE_SAGE_500_HEX = '#052e1c';
 export const COLOR_BASE_SAGE_500_CODE = 'sage-500';
 export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500';
-export const COLOR_BASE_YELLOW_5_HEX = '#fffefa';
-export const COLOR_BASE_YELLOW_5_CODE = 'yellow-5';
-export const COLOR_BASE_YELLOW_5_CLASSNAME = 't-sage--color-yellow-5';
-export const COLOR_BASE_YELLOW_10_HEX = '#fffbeb';
-export const COLOR_BASE_YELLOW_10_CODE = 'yellow-10';
-export const COLOR_BASE_YELLOW_10_CLASSNAME = 't-sage--color-yellow-10';
-export const COLOR_BASE_YELLOW_15_HEX = '#fff3c6';
-export const COLOR_BASE_YELLOW_15_CODE = 'yellow-15';
-export const COLOR_BASE_YELLOW_15_CLASSNAME = 't-sage--color-yellow-15';
-export const COLOR_BASE_YELLOW_20_HEX = '#fee589';
-export const COLOR_BASE_YELLOW_20_CODE = 'yellow-20';
-export const COLOR_BASE_YELLOW_20_CLASSNAME = 't-sage--color-yellow-20';
-export const COLOR_BASE_YELLOW_30_HEX = '#fed04b';
-export const COLOR_BASE_YELLOW_30_CODE = 'yellow-30';
-export const COLOR_BASE_YELLOW_30_CLASSNAME = 't-sage--color-yellow-30';
-export const COLOR_BASE_YELLOW_40_HEX = '#fdbb21';
-export const COLOR_BASE_YELLOW_40_CODE = 'yellow-40';
-export const COLOR_BASE_YELLOW_40_CLASSNAME = 't-sage--color-yellow-40';
-export const COLOR_BASE_YELLOW_50_HEX = '#f79a0b';
-export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50';
-export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50';
-export const COLOR_BASE_YELLOW_60_HEX = '#db7303';
-export const COLOR_BASE_YELLOW_60_CODE = 'yellow-60';
-export const COLOR_BASE_YELLOW_60_CLASSNAME = 't-sage--color-yellow-60';
-export const COLOR_BASE_YELLOW_70_HEX = '#b64f06';
-export const COLOR_BASE_YELLOW_70_CODE = 'yellow-70';
-export const COLOR_BASE_YELLOW_70_CLASSNAME = 't-sage--color-yellow-70';
-export const COLOR_BASE_YELLOW_80_HEX = '#943d0e';
-export const COLOR_BASE_YELLOW_80_CODE = 'yellow-80';
-export const COLOR_BASE_YELLOW_80_CLASSNAME = 't-sage--color-yellow-80';
-export const COLOR_BASE_YELLOW_90_HEX = '#79330e';
-export const COLOR_BASE_YELLOW_90_CODE = 'yellow-90';
-export const COLOR_BASE_YELLOW_90_CLASSNAME = 't-sage--color-yellow-90';
-export const COLOR_BASE_YELLOW_95_HEX = '#451902';
-export const COLOR_BASE_YELLOW_95_CODE = 'yellow-95';
-export const COLOR_BASE_YELLOW_95_CLASSNAME = 't-sage--color-yellow-95';
-export const COLOR_BASE_YELLOW_100_HEX = '#fff3c6';
+export const COLOR_BASE_YELLOW_100_HEX = '#fffbeb';
 export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100';
 export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100';
-export const COLOR_BASE_YELLOW_200_HEX = '#fed04b';
+export const COLOR_BASE_YELLOW_150_HEX = '#fff3c6';
+export const COLOR_BASE_YELLOW_150_CODE = 'yellow-150';
+export const COLOR_BASE_YELLOW_150_CLASSNAME = 't-sage--color-yellow-150';
+export const COLOR_BASE_YELLOW_200_HEX = '#fee589';
 export const COLOR_BASE_YELLOW_200_CODE = 'yellow-200';
 export const COLOR_BASE_YELLOW_200_CLASSNAME = 't-sage--color-yellow-200';
-export const COLOR_BASE_YELLOW_300_HEX = '#fdbb21';
+export const COLOR_BASE_YELLOW_300_HEX = '#fed04b';
 export const COLOR_BASE_YELLOW_300_CODE = 'yellow-300';
 export const COLOR_BASE_YELLOW_300_CLASSNAME = 't-sage--color-yellow-300';
-export const COLOR_BASE_YELLOW_400_HEX = '#db7303';
+export const COLOR_BASE_YELLOW_400_HEX = '#fdbb21';
 export const COLOR_BASE_YELLOW_400_CODE = 'yellow-400';
 export const COLOR_BASE_YELLOW_400_CLASSNAME = 't-sage--color-yellow-400';
-export const COLOR_BASE_YELLOW_500_HEX = '#451902';
+export const COLOR_BASE_YELLOW_500_HEX = '#f79a0b';
 export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500';
 export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500';
-export const COLOR_BASE_RED_5_HEX = '#fffafa';
-export const COLOR_BASE_RED_5_CODE = 'red-5';
-export const COLOR_BASE_RED_5_CLASSNAME = 't-sage--color-red-5';
-export const COLOR_BASE_RED_10_HEX = '#fef2f2';
-export const COLOR_BASE_RED_10_CODE = 'red-10';
-export const COLOR_BASE_RED_10_CLASSNAME = 't-sage--color-red-10';
-export const COLOR_BASE_RED_15_HEX = '#fee2e1';
-export const COLOR_BASE_RED_15_CODE = 'red-15';
-export const COLOR_BASE_RED_15_CLASSNAME = 't-sage--color-red-15';
-export const COLOR_BASE_RED_20_HEX = '#fecaca';
-export const COLOR_BASE_RED_20_CODE = 'red-20';
-export const COLOR_BASE_RED_20_CLASSNAME = 't-sage--color-red-20';
-export const COLOR_BASE_RED_30_HEX = '#fda5a5';
-export const COLOR_BASE_RED_30_CODE = 'red-30';
-export const COLOR_BASE_RED_30_CLASSNAME = 't-sage--color-red-30';
-export const COLOR_BASE_RED_40_HEX = '#f87171';
-export const COLOR_BASE_RED_40_CODE = 'red-40';
-export const COLOR_BASE_RED_40_CLASSNAME = 't-sage--color-red-40';
-export const COLOR_BASE_RED_50_HEX = '#ef4444';
-export const COLOR_BASE_RED_50_CODE = 'red-50';
-export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50';
-export const COLOR_BASE_RED_60_HEX = '#dc2625';
-export const COLOR_BASE_RED_60_CODE = 'red-60';
-export const COLOR_BASE_RED_60_CLASSNAME = 't-sage--color-red-60';
-export const COLOR_BASE_RED_70_HEX = '#b91c1b';
-export const COLOR_BASE_RED_70_CODE = 'red-70';
-export const COLOR_BASE_RED_70_CLASSNAME = 't-sage--color-red-70';
-export const COLOR_BASE_RED_80_HEX = '#991b1b';
-export const COLOR_BASE_RED_80_CODE = 'red-80';
-export const COLOR_BASE_RED_80_CLASSNAME = 't-sage--color-red-80';
-export const COLOR_BASE_RED_90_HEX = '#7f1c1d';
-export const COLOR_BASE_RED_90_CODE = 'red-90';
-export const COLOR_BASE_RED_90_CLASSNAME = 't-sage--color-red-90';
-export const COLOR_BASE_RED_95_HEX = '#572627';
-export const COLOR_BASE_RED_95_CODE = 'red-95';
-export const COLOR_BASE_RED_95_CLASSNAME = 't-sage--color-red-95';
-export const COLOR_BASE_RED_100_HEX = '#fee2e1';
+export const COLOR_BASE_YELLOW_600_HEX = '#db7303';
+export const COLOR_BASE_YELLOW_600_CODE = 'yellow-60';
+export const COLOR_BASE_YELLOW_600_CLASSNAME = 't-sage--color-yellow-600';
+export const COLOR_BASE_YELLOW_700_HEX = '#b64f06';
+export const COLOR_BASE_YELLOW_700_CODE = 'yellow-700';
+export const COLOR_BASE_YELLOW_700_CLASSNAME = 't-sage--color-yellow-700';
+export const COLOR_BASE_YELLOW_800_HEX = '#943d0e';
+export const COLOR_BASE_YELLOW_800_CODE = 'yellow-800';
+export const COLOR_BASE_YELLOW_800_CLASSNAME = 't-sage--color-yellow-800';
+export const COLOR_BASE_YELLOW_900_HEX = '#79330e';
+export const COLOR_BASE_YELLOW_900_CODE = 'yellow-900';
+export const COLOR_BASE_YELLOW_900_CLASSNAME = 't-sage--color-yellow-900';
+export const COLOR_BASE_YELLOW_950_HEX = '#451902';
+export const COLOR_BASE_YELLOW_950_CODE = 'yellow-950';
+export const COLOR_BASE_YELLOW_950_CLASSNAME = 't-sage--color-yellow-950';
+export const COLOR_BASE_YELLOW_050_HEX = '#fffefa';
+export const COLOR_BASE_YELLOW_050_CODE = 'yellow-050';
+export const COLOR_BASE_YELLOW_050_CLASSNAME = 't-sage--color-yellow-050';
+export const COLOR_BASE_RED_100_HEX = '#fef2f2';
 export const COLOR_BASE_RED_100_CODE = 'red-100';
 export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100';
-export const COLOR_BASE_RED_200_HEX = '#fda5a5';
+export const COLOR_BASE_RED_150_HEX = '#fee2e1';
+export const COLOR_BASE_RED_150_CODE = 'red-150';
+export const COLOR_BASE_RED_150_CLASSNAME = 't-sage--color-red-150';
+export const COLOR_BASE_RED_200_HEX = '#fecaca';
 export const COLOR_BASE_RED_200_CODE = 'red-200';
 export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200';
-export const COLOR_BASE_RED_300_HEX = '#ef4444';
+export const COLOR_BASE_RED_300_HEX = '#fda5a5';
 export const COLOR_BASE_RED_300_CODE = 'red-300';
 export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300';
-export const COLOR_BASE_RED_400_HEX = '#991b1b';
+export const COLOR_BASE_RED_400_HEX = '#f87171';
 export const COLOR_BASE_RED_400_CODE = 'red-400';
 export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400';
-export const COLOR_BASE_RED_500_HEX = '#572627';
+export const COLOR_BASE_RED_500_HEX = '#ef4444';
 export const COLOR_BASE_RED_500_CODE = 'red-500';
 export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500';
+export const COLOR_BASE_RED_600_HEX = '#dc2625';
+export const COLOR_BASE_RED_600_CODE = 'red-600';
+export const COLOR_BASE_RED_600_CLASSNAME = 't-sage--color-red-600';
+export const COLOR_BASE_RED_700_HEX = '#b91c1b';
+export const COLOR_BASE_RED_700_CODE = 'red-700';
+export const COLOR_BASE_RED_700_CLASSNAME = 't-sage--color-red-700';
+export const COLOR_BASE_RED_800_HEX = '#991b1b';
+export const COLOR_BASE_RED_800_CODE = 'red-800';
+export const COLOR_BASE_RED_800_CLASSNAME = 't-sage--color-red-800';
+export const COLOR_BASE_RED_900_HEX = '#7f1c1d';
+export const COLOR_BASE_RED_900_CODE = 'red-900';
+export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-900';
+export const COLOR_BASE_RED_950_HEX = '#572627';
+export const COLOR_BASE_RED_950_CODE = 'red-950';
+export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-950';
+export const COLOR_BASE_RED_050_HEX = '#fffafa';
+export const COLOR_BASE_RED_050_CODE = 'red-050';
+export const COLOR_BASE_RED_050_CLASSNAME = 't-sage--color-red-050';
 export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4';
 export const COLOR_BASE_ORANGE_100_CODE = 'orange-100';
 export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100';
@@ -274,57 +244,42 @@ export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400';
 export const COLOR_BASE_ORANGE_500_HEX = '#450506';
 export const COLOR_BASE_ORANGE_500_CODE = 'orange-500';
 export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500';
-export const COLOR_BASE_PURPLE_5_HEX = '#fafbff';
-export const COLOR_BASE_PURPLE_5_CODE = 'purple-5';
-export const COLOR_BASE_PURPLE_5_CLASSNAME = 't-sage--color-purple-5';
-export const COLOR_BASE_PURPLE_10_HEX = '#edf1ff';
-export const COLOR_BASE_PURPLE_10_CODE = 'purple-10';
-export const COLOR_BASE_PURPLE_10_CLASSNAME = 't-sage--color-purple-10';
-export const COLOR_BASE_PURPLE_15_HEX = '#e0e4ff';
-export const COLOR_BASE_PURPLE_15_CODE = 'purple-15';
-export const COLOR_BASE_PURPLE_15_CLASSNAME = 't-sage--color-purple-15';
-export const COLOR_BASE_PURPLE_20_HEX = '#c7cdfe';
-export const COLOR_BASE_PURPLE_20_CODE = 'purple-20';
-export const COLOR_BASE_PURPLE_20_CLASSNAME = 't-sage--color-purple-20';
-export const COLOR_BASE_PURPLE_30_HEX = '#a3acfd';
-export const COLOR_BASE_PURPLE_30_CODE = 'purple-30';
-export const COLOR_BASE_PURPLE_30_CLASSNAME = 't-sage--color-purple-30';
-export const COLOR_BASE_PURPLE_40_HEX = '#8081f9';
-export const COLOR_BASE_PURPLE_40_CODE = 'purple-40';
-export const COLOR_BASE_PURPLE_40_CLASSNAME = 't-sage--color-purple-40';
-export const COLOR_BASE_PURPLE_50_HEX = '#6a62f2';
-export const COLOR_BASE_PURPLE_50_CODE = 'purple-50';
-export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50';
-export const COLOR_BASE_PURPLE_60_HEX = '#533be5';
-export const COLOR_BASE_PURPLE_60_CODE = 'purple-60';
-export const COLOR_BASE_PURPLE_60_CLASSNAME = 't-sage--color-purple-60';
-export const COLOR_BASE_PURPLE_70_HEX = '#4f37cb';
-export const COLOR_BASE_PURPLE_70_CODE = 'purple-70';
-export const COLOR_BASE_PURPLE_70_CLASSNAME = 't-sage--color-purple-70';
-export const COLOR_BASE_PURPLE_80_HEX = '#402fa4';
-export const COLOR_BASE_PURPLE_80_CODE = 'purple-80';
-export const COLOR_BASE_PURPLE_80_CLASSNAME = 't-sage--color-purple-80';
-export const COLOR_BASE_PURPLE_90_HEX = '#372d82';
-export const COLOR_BASE_PURPLE_90_CODE = 'purple-90';
-export const COLOR_BASE_PURPLE_90_CLASSNAME = 't-sage--color-purple-90';
-export const COLOR_BASE_PURPLE_95_HEX = '#221b4b';
-export const COLOR_BASE_PURPLE_95_CODE = 'purple-95';
-export const COLOR_BASE_PURPLE_95_CLASSNAME = 't-sage--color-purple-95';
-export const COLOR_BASE_PURPLE_100_HEX = '#e0e4ff';
+export const COLOR_BASE_PURPLE_100_HEX = '#edf1ff';
 export const COLOR_BASE_PURPLE_100_CODE = 'purple-100';
 export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100';
-export const COLOR_BASE_PURPLE_200_HEX = '#a3acfd';
+export const COLOR_BASE_PURPLE_150_HEX = '#e0e4ff';
+export const COLOR_BASE_PURPLE_150_CODE = 'purple-150';
+export const COLOR_BASE_PURPLE_150_CLASSNAME = 't-sage--color-purple-150';
+export const COLOR_BASE_PURPLE_200_HEX = '#c7cdfe';
 export const COLOR_BASE_PURPLE_200_CODE = 'purple-200';
 export const COLOR_BASE_PURPLE_200_CLASSNAME = 't-sage--color-purple-200';
-export const COLOR_BASE_PURPLE_300_HEX = '#533be5';
+export const COLOR_BASE_PURPLE_300_HEX = '#a3acfd';
 export const COLOR_BASE_PURPLE_300_CODE = 'purple-300';
 export const COLOR_BASE_PURPLE_300_CLASSNAME = 't-sage--color-purple-300';
-export const COLOR_BASE_PURPLE_400_HEX = '#402fa4';
+export const COLOR_BASE_PURPLE_400_HEX = '#8081f9';
 export const COLOR_BASE_PURPLE_400_CODE = 'purple-400';
 export const COLOR_BASE_PURPLE_400_CLASSNAME = 't-sage--color-purple-400';
-export const COLOR_BASE_PURPLE_500_HEX = '#221b4b';
+export const COLOR_BASE_PURPLE_500_HEX = '#6a62f2';
 export const COLOR_BASE_PURPLE_500_CODE = 'purple-500';
 export const COLOR_BASE_PURPLE_500_CLASSNAME = 't-sage--color-purple-500';
+export const COLOR_BASE_PURPLE_600_HEX = '#533be5';
+export const COLOR_BASE_PURPLE_600_CODE = 'purple-600';
+export const COLOR_BASE_PURPLE_600_CLASSNAME = 't-sage--color-purple-600';
+export const COLOR_BASE_PURPLE_700_HEX = '#4f37cb';
+export const COLOR_BASE_PURPLE_700_CODE = 'purple-700';
+export const COLOR_BASE_PURPLE_700_CLASSNAME = 't-sage--color-purple-700';
+export const COLOR_BASE_PURPLE_800_HEX = '#402fa4';
+export const COLOR_BASE_PURPLE_800_CODE = 'purple-800';
+export const COLOR_BASE_PURPLE_800_CLASSNAME = 't-sage--color-purple-800';
+export const COLOR_BASE_PURPLE_900_HEX = '#372d82';
+export const COLOR_BASE_PURPLE_900_CODE = 'purple-900';
+export const COLOR_BASE_PURPLE_900_CLASSNAME = 't-sage--color-purple-900';
+export const COLOR_BASE_PURPLE_950_HEX = '#221b4b';
+export const COLOR_BASE_PURPLE_950_CODE = 'purple-950';
+export const COLOR_BASE_PURPLE_950_CLASSNAME = 't-sage--color-purple-950';
+export const COLOR_BASE_PURPLE_050_HEX = '#fafbff';
+export const COLOR_BASE_PURPLE_050_CODE = 'purple-050';
+export const COLOR_BASE_PURPLE_050_CLASSNAME = 't-sage--color-purple-050';
 export const COLOR_BASE_CHARCOAL_100_HEX = '#828180';
 export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100';
 export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100';
@@ -340,57 +295,42 @@ export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400';
 export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19';
 export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500';
 export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500';
-export const COLOR_BASE_GREY_5_HEX = '#fcfcfc';
-export const COLOR_BASE_GREY_5_CODE = 'grey-5';
-export const COLOR_BASE_GREY_5_CLASSNAME = 't-sage--color-grey-5';
-export const COLOR_BASE_GREY_10_HEX = '#f8f8f8';
-export const COLOR_BASE_GREY_10_CODE = 'grey-10';
-export const COLOR_BASE_GREY_10_CLASSNAME = 't-sage--color-grey-10';
-export const COLOR_BASE_GREY_15_HEX = '#f0f0f0';
-export const COLOR_BASE_GREY_15_CODE = 'grey-15';
-export const COLOR_BASE_GREY_15_CLASSNAME = 't-sage--color-grey-15';
-export const COLOR_BASE_GREY_20_HEX = '#e4e4e4';
-export const COLOR_BASE_GREY_20_CODE = 'grey-20';
-export const COLOR_BASE_GREY_20_CLASSNAME = 't-sage--color-grey-20';
-export const COLOR_BASE_GREY_30_HEX = '#d2d1d1';
-export const COLOR_BASE_GREY_30_CODE = 'grey-30';
-export const COLOR_BASE_GREY_30_CLASSNAME = 't-sage--color-grey-30';
-export const COLOR_BASE_GREY_40_HEX = '#bbbab9';
-export const COLOR_BASE_GREY_40_CODE = 'grey-40';
-export const COLOR_BASE_GREY_40_CLASSNAME = 't-sage--color-grey-40';
-export const COLOR_BASE_GREY_50_HEX = '#9b9a98';
-export const COLOR_BASE_GREY_50_CODE = 'grey-50';
-export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50';
-export const COLOR_BASE_GREY_60_HEX = '#828180';
-export const COLOR_BASE_GREY_60_CODE = 'grey-60';
-export const COLOR_BASE_GREY_60_CLASSNAME = 't-sage--color-grey-60';
-export const COLOR_BASE_GREY_70_HEX = '#6c6a69';
-export const COLOR_BASE_GREY_70_CODE = 'grey-70';
-export const COLOR_BASE_GREY_70_CLASSNAME = 't-sage--color-grey-70';
-export const COLOR_BASE_GREY_80_HEX = '#4d4d4c';
-export const COLOR_BASE_GREY_80_CODE = 'grey-80';
-export const COLOR_BASE_GREY_80_CLASSNAME = 't-sage--color-grey-80';
-export const COLOR_BASE_GREY_90_HEX = '#343332';
-export const COLOR_BASE_GREY_90_CODE = 'grey-90';
-export const COLOR_BASE_GREY_90_CLASSNAME = 't-sage--color-grey-90';
-export const COLOR_BASE_GREY_95_HEX = '#1a1a19';
-export const COLOR_BASE_GREY_95_CODE = 'grey-95';
-export const COLOR_BASE_GREY_95_CLASSNAME = 't-sage--color-grey-95';
 export const COLOR_BASE_GREY_100_HEX = '#f8f8f8';
 export const COLOR_BASE_GREY_100_CODE = 'grey-100';
 export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100';
-export const COLOR_BASE_GREY_200_HEX = '#f0f0f0';
+export const COLOR_BASE_GREY_150_HEX = '#f0f0f0';
+export const COLOR_BASE_GREY_150_CODE = 'grey-15';
+export const COLOR_BASE_GREY_150_CLASSNAME = 't-sage--color-grey-150';
+export const COLOR_BASE_GREY_200_HEX = '#e4e4e4';
 export const COLOR_BASE_GREY_200_CODE = 'grey-200';
 export const COLOR_BASE_GREY_200_CLASSNAME = 't-sage--color-grey-200';
-export const COLOR_BASE_GREY_300_HEX = '#e4e4e4';
+export const COLOR_BASE_GREY_300_HEX = '#d2d1d1';
 export const COLOR_BASE_GREY_300_CODE = 'grey-300';
 export const COLOR_BASE_GREY_300_CLASSNAME = 't-sage--color-grey-300';
-export const COLOR_BASE_GREY_400_HEX = '#d2d1d1';
+export const COLOR_BASE_GREY_400_HEX = '#bbbab9';
 export const COLOR_BASE_GREY_400_CODE = 'grey-400';
 export const COLOR_BASE_GREY_400_CLASSNAME = 't-sage--color-grey-400';
 export const COLOR_BASE_GREY_500_HEX = '#9b9a98';
 export const COLOR_BASE_GREY_500_CODE = 'grey-500';
 export const COLOR_BASE_GREY_500_CLASSNAME = 't-sage--color-grey-500';
+export const COLOR_BASE_GREY_600_HEX = '#828180';
+export const COLOR_BASE_GREY_600_CODE = 'grey-600';
+export const COLOR_BASE_GREY_600_CLASSNAME = 't-sage--color-grey-600';
+export const COLOR_BASE_GREY_700_HEX = '#6c6a69';
+export const COLOR_BASE_GREY_700_CODE = 'grey-700';
+export const COLOR_BASE_GREY_700_CLASSNAME = 't-sage--color-grey-700';
+export const COLOR_BASE_GREY_800_HEX = '#4d4d4c';
+export const COLOR_BASE_GREY_800_CODE = 'grey-800';
+export const COLOR_BASE_GREY_800_CLASSNAME = 't-sage--color-grey-800';
+export const COLOR_BASE_GREY_900_HEX = '#343332';
+export const COLOR_BASE_GREY_900_CODE = 'grey-900';
+export const COLOR_BASE_GREY_900_CLASSNAME = 't-sage--color-grey-900';
+export const COLOR_BASE_GREY_950_HEX = '#1a1a19';
+export const COLOR_BASE_GREY_950_CODE = 'grey-950';
+export const COLOR_BASE_GREY_950_CLASSNAME = 't-sage--color-grey-950';
+export const COLOR_BASE_GREY_050_HEX = '#fcfcfc';
+export const COLOR_BASE_GREY_050_CODE = 'grey-050';
+export const COLOR_BASE_GREY_050_CLASSNAME = 't-sage--color-grey-050';
 export const COLOR_BASE_WHITE_100_HEX = '#fff';
 export const COLOR_BASE_WHITE_100_CODE = 'white-100';
 export const COLOR_BASE_WHITE_100_CLASSNAME = 't-sage--color-white-100';
@@ -427,189 +367,189 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500';
 //
 export const COLOR = {
   BLUE: {
-    5: {
-      HEX: COLOR_BASE_BLUE_5_HEX,
-      CODE: COLOR_BASE_BLUE_5_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_BLUE_10_HEX,
-      CODE: COLOR_BASE_BLUE_10_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_BLUE_15_HEX,
-      CODE: COLOR_BASE_BLUE_15_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_BLUE_20_HEX,
-      CODE: COLOR_BASE_BLUE_20_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_BLUE_30_HEX,
-      CODE: COLOR_BASE_BLUE_30_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_BLUE_40_HEX,
-      CODE: COLOR_BASE_BLUE_40_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_BLUE_50_HEX,
-      CODE: COLOR_BASE_BLUE_50_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_BLUE_60_HEX,
-      CODE: COLOR_BASE_BLUE_60_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_BLUE_70_HEX,
-      CODE: COLOR_BASE_BLUE_70_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_BLUE_80_HEX,
-      CODE: COLOR_BASE_BLUE_80_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_BLUE_90_HEX,
-      CODE: COLOR_BASE_BLUE_90_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_BLUE_95_HEX,
-      CODE: COLOR_BASE_BLUE_95_CODE,
-      CLASSNAME: COLOR_BASE_BLUE_95_CLASSNAME,
+    100: {
+      HEX: COLOR_BASE_BLUE_100_HEX,
+      CODE: COLOR_BASE_BLUE_100_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_100_CLASSNAME,
+    },
+    150: {
+      HEX: COLOR_BASE_BLUE_150_HEX,
+      CODE: COLOR_BASE_BLUE_150_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_150_CLASSNAME,
+    },
+    200: {
+      HEX: COLOR_BASE_BLUE_200_HEX,
+      CODE: COLOR_BASE_BLUE_200_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_200_CLASSNAME,
+    },
+    300: {
+      HEX: COLOR_BASE_BLUE_300_HEX,
+      CODE: COLOR_BASE_BLUE_300_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_300_CLASSNAME,
+    },
+    400: {
+      HEX: COLOR_BASE_BLUE_400_HEX,
+      CODE: COLOR_BASE_BLUE_400_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_400_CLASSNAME,
+    },
+    500: {
+      HEX: COLOR_BASE_BLUE_500_HEX,
+      CODE: COLOR_BASE_BLUE_500_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_500_CLASSNAME,
+    },
+    600: {
+      HEX: COLOR_BASE_BLUE_600_HEX,
+      CODE: COLOR_BASE_BLUE_600_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_BLUE_700_HEX,
+      CODE: COLOR_BASE_BLUE_700_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_BLUE_800_HEX,
+      CODE: COLOR_BASE_BLUE_800_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_BLUE_900_HEX,
+      CODE: COLOR_BASE_BLUE_900_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_BLUE_950_HEX,
+      CODE: COLOR_BASE_BLUE_950_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_BLUE_050_HEX,
+      CODE: COLOR_BASE_BLUE_050_CODE,
+      CLASSNAME: COLOR_BASE_BLUE_050_CLASSNAME,
     },
   },
   GREEN: {
-    5: {
-      HEX: COLOR_BASE_GREEN_5_HEX,
-      CODE: COLOR_BASE_GREEN_5_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_GREEN_10_HEX,
-      CODE: COLOR_BASE_GREEN_10_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_GREEN_15_HEX,
-      CODE: COLOR_BASE_GREEN_15_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_GREEN_20_HEX,
-      CODE: COLOR_BASE_GREEN_20_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_GREEN_30_HEX,
-      CODE: COLOR_BASE_GREEN_30_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_GREEN_40_HEX,
-      CODE: COLOR_BASE_GREEN_40_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_GREEN_50_HEX,
-      CODE: COLOR_BASE_GREEN_50_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_GREEN_60_HEX,
-      CODE: COLOR_BASE_GREEN_60_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_GREEN_70_HEX,
-      CODE: COLOR_BASE_GREEN_70_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_GREEN_80_HEX,
-      CODE: COLOR_BASE_GREEN_80_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_GREEN_90_HEX,
-      CODE: COLOR_BASE_GREEN_90_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_GREEN_95_HEX,
-      CODE: COLOR_BASE_GREEN_95_CODE,
-      CLASSNAME: COLOR_BASE_GREEN_95_CLASSNAME,
+    100: {
+      HEX: COLOR_BASE_GREEN_100_HEX,
+      CODE: COLOR_BASE_GREEN_100_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_100_CLASSNAME,
+    },
+    150: {
+      HEX: COLOR_BASE_GREEN_150_HEX,
+      CODE: COLOR_BASE_GREEN_150_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_150_CLASSNAME,
+    },
+    200: {
+      HEX: COLOR_BASE_GREEN_200_HEX,
+      CODE: COLOR_BASE_GREEN_200_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_200_CLASSNAME,
+    },
+    300: {
+      HEX: COLOR_BASE_GREEN_300_HEX,
+      CODE: COLOR_BASE_GREEN_300_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_300_CLASSNAME,
+    },
+    400: {
+      HEX: COLOR_BASE_GREEN_400_HEX,
+      CODE: COLOR_BASE_GREEN_400_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_400_CLASSNAME,
+    },
+    500: {
+      HEX: COLOR_BASE_GREEN_500_HEX,
+      CODE: COLOR_BASE_GREEN_500_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_500_CLASSNAME,
+    },
+    600: {
+      HEX: COLOR_BASE_GREEN_600_HEX,
+      CODE: COLOR_BASE_GREEN_600_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_GREEN_700_HEX,
+      CODE: COLOR_BASE_GREEN_700_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_GREEN_800_HEX,
+      CODE: COLOR_BASE_GREEN_800_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_GREEN_900_HEX,
+      CODE: COLOR_BASE_GREEN_900_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_GREEN_950_HEX,
+      CODE: COLOR_BASE_GREEN_950_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_GREEN_050_HEX,
+      CODE: COLOR_BASE_GREEN_050_CODE,
+      CLASSNAME: COLOR_BASE_GREEN_050_CLASSNAME,
     },
   },
   MERCURY: {
-    5: {
-      HEX: COLOR_BASE_MERCURY_5_HEX,
-      CODE: COLOR_BASE_MERCURY_5_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_MERCURY_10_HEX,
-      CODE: COLOR_BASE_MERCURY_10_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_MERCURY_15_HEX,
-      CODE: COLOR_BASE_MERCURY_15_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_MERCURY_20_HEX,
-      CODE: COLOR_BASE_MERCURY_20_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_MERCURY_30_HEX,
-      CODE: COLOR_BASE_MERCURY_30_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_MERCURY_40_HEX,
-      CODE: COLOR_BASE_MERCURY_40_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_MERCURY_50_HEX,
-      CODE: COLOR_BASE_MERCURY_50_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_MERCURY_60_HEX,
-      CODE: COLOR_BASE_MERCURY_60_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_MERCURY_70_HEX,
-      CODE: COLOR_BASE_MERCURY_70_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_MERCURY_80_HEX,
-      CODE: COLOR_BASE_MERCURY_80_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_MERCURY_90_HEX,
-      CODE: COLOR_BASE_MERCURY_90_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_MERCURY_95_HEX,
-      CODE: COLOR_BASE_MERCURY_95_CODE,
-      CLASSNAME: COLOR_BASE_MERCURY_95_CLASSNAME,
+    100: {
+      HEX: COLOR_BASE_MERCURY_100_HEX,
+      CODE: COLOR_BASE_MERCURY_100_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_100_CLASSNAME,
+    },
+    150: {
+      HEX: COLOR_BASE_MERCURY_150_HEX,
+      CODE: COLOR_BASE_MERCURY_150_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_150_CLASSNAME,
+    },
+    200: {
+      HEX: COLOR_BASE_MERCURY_200_HEX,
+      CODE: COLOR_BASE_MERCURY_200_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_200_CLASSNAME,
+    },
+    300: {
+      HEX: COLOR_BASE_MERCURY_300_HEX,
+      CODE: COLOR_BASE_MERCURY_300_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_300_CLASSNAME,
+    },
+    400: {
+      HEX: COLOR_BASE_MERCURY_400_HEX,
+      CODE: COLOR_BASE_MERCURY_400_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_400_CLASSNAME,
+    },
+    500: {
+      HEX: COLOR_BASE_MERCURY_500_HEX,
+      CODE: COLOR_BASE_MERCURY_500_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_500_CLASSNAME,
+    },
+    600: {
+      HEX: COLOR_BASE_MERCURY_600_HEX,
+      CODE: COLOR_BASE_MERCURY_600_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_MERCURY_700_HEX,
+      CODE: COLOR_BASE_MERCURY_700_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_MERCURY_800_HEX,
+      CODE: COLOR_BASE_MERCURY_800_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_MERCURY_900_HEX,
+      CODE: COLOR_BASE_MERCURY_900_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_MERCURY_950_HEX,
+      CODE: COLOR_BASE_MERCURY_950_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_MERCURY_050_HEX,
+      CODE: COLOR_BASE_MERCURY_050_CODE,
+      CLASSNAME: COLOR_BASE_MERCURY_050_CLASSNAME,
     },
   },
   PRIMARY: {
@@ -667,71 +607,16 @@ export const COLOR = {
     },
   },
   YELLOW: {
-    5: {
-      HEX: COLOR_BASE_YELLOW_5_HEX,
-      CODE: COLOR_BASE_YELLOW_5_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_YELLOW_10_HEX,
-      CODE: COLOR_BASE_YELLOW_10_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_YELLOW_15_HEX,
-      CODE: COLOR_BASE_YELLOW_15_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_YELLOW_20_HEX,
-      CODE: COLOR_BASE_YELLOW_20_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_YELLOW_30_HEX,
-      CODE: COLOR_BASE_YELLOW_30_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_YELLOW_40_HEX,
-      CODE: COLOR_BASE_YELLOW_40_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_YELLOW_50_HEX,
-      CODE: COLOR_BASE_YELLOW_50_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_YELLOW_60_HEX,
-      CODE: COLOR_BASE_YELLOW_60_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_YELLOW_70_HEX,
-      CODE: COLOR_BASE_YELLOW_70_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_YELLOW_80_HEX,
-      CODE: COLOR_BASE_YELLOW_80_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_YELLOW_90_HEX,
-      CODE: COLOR_BASE_YELLOW_90_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_YELLOW_95_HEX,
-      CODE: COLOR_BASE_YELLOW_95_CODE,
-      CLASSNAME: COLOR_BASE_YELLOW_95_CLASSNAME,
-    },
     100: {
       HEX: COLOR_BASE_YELLOW_100_HEX,
       CODE: COLOR_BASE_YELLOW_100_CODE,
       CLASSNAME: COLOR_BASE_YELLOW_100_CLASSNAME,
     },
+    150: {
+      HEX: COLOR_BASE_YELLOW_150_HEX,
+      CODE: COLOR_BASE_YELLOW_150_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_150_CLASSNAME,
+    },
     200: {
       HEX: COLOR_BASE_YELLOW_200_HEX,
       CODE: COLOR_BASE_YELLOW_200_CODE,
@@ -752,73 +637,48 @@ export const COLOR = {
       CODE: COLOR_BASE_YELLOW_500_CODE,
       CLASSNAME: COLOR_BASE_YELLOW_500_CLASSNAME,
     },
+    600: {
+      HEX: COLOR_BASE_YELLOW_600_HEX,
+      CODE: COLOR_BASE_YELLOW_600_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_YELLOW_700_HEX,
+      CODE: COLOR_BASE_YELLOW_700_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_YELLOW_800_HEX,
+      CODE: COLOR_BASE_YELLOW_800_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_YELLOW_900_HEX,
+      CODE: COLOR_BASE_YELLOW_900_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_YELLOW_950_HEX,
+      CODE: COLOR_BASE_YELLOW_950_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_YELLOW_050_HEX,
+      CODE: COLOR_BASE_YELLOW_050_CODE,
+      CLASSNAME: COLOR_BASE_YELLOW_050_CLASSNAME,
+    },
   },
   RED: {
-    5: {
-      HEX: COLOR_BASE_RED_5_HEX,
-      CODE: COLOR_BASE_RED_5_CODE,
-      CLASSNAME: COLOR_BASE_RED_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_RED_10_HEX,
-      CODE: COLOR_BASE_RED_10_CODE,
-      CLASSNAME: COLOR_BASE_RED_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_RED_15_HEX,
-      CODE: COLOR_BASE_RED_15_CODE,
-      CLASSNAME: COLOR_BASE_RED_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_RED_20_HEX,
-      CODE: COLOR_BASE_RED_20_CODE,
-      CLASSNAME: COLOR_BASE_RED_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_RED_30_HEX,
-      CODE: COLOR_BASE_RED_30_CODE,
-      CLASSNAME: COLOR_BASE_RED_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_RED_40_HEX,
-      CODE: COLOR_BASE_RED_40_CODE,
-      CLASSNAME: COLOR_BASE_RED_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_RED_50_HEX,
-      CODE: COLOR_BASE_RED_50_CODE,
-      CLASSNAME: COLOR_BASE_RED_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_RED_60_HEX,
-      CODE: COLOR_BASE_RED_60_CODE,
-      CLASSNAME: COLOR_BASE_RED_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_RED_70_HEX,
-      CODE: COLOR_BASE_RED_70_CODE,
-      CLASSNAME: COLOR_BASE_RED_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_RED_80_HEX,
-      CODE: COLOR_BASE_RED_80_CODE,
-      CLASSNAME: COLOR_BASE_RED_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_RED_90_HEX,
-      CODE: COLOR_BASE_RED_90_CODE,
-      CLASSNAME: COLOR_BASE_RED_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_RED_95_HEX,
-      CODE: COLOR_BASE_RED_95_CODE,
-      CLASSNAME: COLOR_BASE_RED_95_CLASSNAME,
-    },
     100: {
       HEX: COLOR_BASE_RED_100_HEX,
       CODE: COLOR_BASE_RED_100_CODE,
       CLASSNAME: COLOR_BASE_RED_100_CLASSNAME,
     },
+    150: {
+      HEX: COLOR_BASE_RED_150_HEX,
+      CODE: COLOR_BASE_RED_150_CODE,
+      CLASSNAME: COLOR_BASE_RED_150_CLASSNAME,
+    },
     200: {
       HEX: COLOR_BASE_RED_200_HEX,
       CODE: COLOR_BASE_RED_200_CODE,
@@ -839,6 +699,36 @@ export const COLOR = {
       CODE: COLOR_BASE_RED_500_CODE,
       CLASSNAME: COLOR_BASE_RED_500_CLASSNAME,
     },
+    600: {
+      HEX: COLOR_BASE_RED_600_HEX,
+      CODE: COLOR_BASE_RED_600_CODE,
+      CLASSNAME: COLOR_BASE_RED_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_RED_700_HEX,
+      CODE: COLOR_BASE_RED_700_CODE,
+      CLASSNAME: COLOR_BASE_RED_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_RED_800_HEX,
+      CODE: COLOR_BASE_RED_800_CODE,
+      CLASSNAME: COLOR_BASE_RED_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_RED_900_HEX,
+      CODE: COLOR_BASE_RED_900_CODE,
+      CLASSNAME: COLOR_BASE_RED_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_RED_950_HEX,
+      CODE: COLOR_BASE_RED_950_CODE,
+      CLASSNAME: COLOR_BASE_RED_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_RED_050_HEX,
+      CODE: COLOR_BASE_RED_050_CODE,
+      CLASSNAME: COLOR_BASE_RED_050_CLASSNAME,
+    },
   },
   ORANGE: {
     100: {
@@ -868,71 +758,16 @@ export const COLOR = {
     },
   },
   PURPLE: {
-    5: {
-      HEX: COLOR_BASE_PURPLE_5_HEX,
-      CODE: COLOR_BASE_PURPLE_5_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_PURPLE_10_HEX,
-      CODE: COLOR_BASE_PURPLE_10_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_PURPLE_15_HEX,
-      CODE: COLOR_BASE_PURPLE_15_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_PURPLE_20_HEX,
-      CODE: COLOR_BASE_PURPLE_20_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_PURPLE_30_HEX,
-      CODE: COLOR_BASE_PURPLE_30_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_PURPLE_40_HEX,
-      CODE: COLOR_BASE_PURPLE_40_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_PURPLE_50_HEX,
-      CODE: COLOR_BASE_PURPLE_50_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_PURPLE_60_HEX,
-      CODE: COLOR_BASE_PURPLE_60_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_PURPLE_70_HEX,
-      CODE: COLOR_BASE_PURPLE_70_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_PURPLE_80_HEX,
-      CODE: COLOR_BASE_PURPLE_80_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_PURPLE_90_HEX,
-      CODE: COLOR_BASE_PURPLE_90_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_PURPLE_95_HEX,
-      CODE: COLOR_BASE_PURPLE_95_CODE,
-      CLASSNAME: COLOR_BASE_PURPLE_95_CLASSNAME,
-    },
     100: {
       HEX: COLOR_BASE_PURPLE_100_HEX,
       CODE: COLOR_BASE_PURPLE_100_CODE,
       CLASSNAME: COLOR_BASE_PURPLE_100_CLASSNAME,
     },
+    150: {
+      HEX: COLOR_BASE_PURPLE_150_HEX,
+      CODE: COLOR_BASE_PURPLE_150_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_150_CLASSNAME,
+    },
     200: {
       HEX: COLOR_BASE_PURPLE_200_HEX,
       CODE: COLOR_BASE_PURPLE_200_CODE,
@@ -953,6 +788,36 @@ export const COLOR = {
       CODE: COLOR_BASE_PURPLE_500_CODE,
       CLASSNAME: COLOR_BASE_PURPLE_500_CLASSNAME,
     },
+    600: {
+      HEX: COLOR_BASE_PURPLE_600_HEX,
+      CODE: COLOR_BASE_PURPLE_600_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_PURPLE_700_HEX,
+      CODE: COLOR_BASE_PURPLE_700_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_PURPLE_800_HEX,
+      CODE: COLOR_BASE_PURPLE_800_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_PURPLE_900_HEX,
+      CODE: COLOR_BASE_PURPLE_900_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_PURPLE_950_HEX,
+      CODE: COLOR_BASE_PURPLE_950_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_PURPLE_050_HEX,
+      CODE: COLOR_BASE_PURPLE_050_CODE,
+      CLASSNAME: COLOR_BASE_PURPLE_050_CLASSNAME,
+    },
   },
   CHARCOAL: {
     100: {
@@ -982,71 +847,16 @@ export const COLOR = {
     },
   },
   GREY: {
-    5: {
-      HEX: COLOR_BASE_GREY_5_HEX,
-      CODE: COLOR_BASE_GREY_5_CODE,
-      CLASSNAME: COLOR_BASE_GREY_5_CLASSNAME,
-    },
-    10: {
-      HEX: COLOR_BASE_GREY_10_HEX,
-      CODE: COLOR_BASE_GREY_10_CODE,
-      CLASSNAME: COLOR_BASE_GREY_10_CLASSNAME,
-    },
-    15: {
-      HEX: COLOR_BASE_GREY_15_HEX,
-      CODE: COLOR_BASE_GREY_15_CODE,
-      CLASSNAME: COLOR_BASE_GREY_15_CLASSNAME,
-    },
-    20: {
-      HEX: COLOR_BASE_GREY_20_HEX,
-      CODE: COLOR_BASE_GREY_20_CODE,
-      CLASSNAME: COLOR_BASE_GREY_20_CLASSNAME,
-    },
-    30: {
-      HEX: COLOR_BASE_GREY_30_HEX,
-      CODE: COLOR_BASE_GREY_30_CODE,
-      CLASSNAME: COLOR_BASE_GREY_30_CLASSNAME,
-    },
-    40: {
-      HEX: COLOR_BASE_GREY_40_HEX,
-      CODE: COLOR_BASE_GREY_40_CODE,
-      CLASSNAME: COLOR_BASE_GREY_40_CLASSNAME,
-    },
-    50: {
-      HEX: COLOR_BASE_GREY_50_HEX,
-      CODE: COLOR_BASE_GREY_50_CODE,
-      CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME,
-    },
-    60: {
-      HEX: COLOR_BASE_GREY_60_HEX,
-      CODE: COLOR_BASE_GREY_60_CODE,
-      CLASSNAME: COLOR_BASE_GREY_60_CLASSNAME,
-    },
-    70: {
-      HEX: COLOR_BASE_GREY_70_HEX,
-      CODE: COLOR_BASE_GREY_70_CODE,
-      CLASSNAME: COLOR_BASE_GREY_70_CLASSNAME,
-    },
-    80: {
-      HEX: COLOR_BASE_GREY_80_HEX,
-      CODE: COLOR_BASE_GREY_80_CODE,
-      CLASSNAME: COLOR_BASE_GREY_80_CLASSNAME,
-    },
-    90: {
-      HEX: COLOR_BASE_GREY_90_HEX,
-      CODE: COLOR_BASE_GREY_90_CODE,
-      CLASSNAME: COLOR_BASE_GREY_90_CLASSNAME,
-    },
-    95: {
-      HEX: COLOR_BASE_GREY_95_HEX,
-      CODE: COLOR_BASE_GREY_95_CODE,
-      CLASSNAME: COLOR_BASE_GREY_95_CLASSNAME,
-    },
     100: {
       HEX: COLOR_BASE_GREY_100_HEX,
       CODE: COLOR_BASE_GREY_100_CODE,
       CLASSNAME: COLOR_BASE_GREY_100_CLASSNAME,
     },
+    150: {
+      HEX: COLOR_BASE_GREY_150_HEX,
+      CODE: COLOR_BASE_GREY_150_CODE,
+      CLASSNAME: COLOR_BASE_GREY_150_CLASSNAME,
+    },
     200: {
       HEX: COLOR_BASE_GREY_200_HEX,
       CODE: COLOR_BASE_GREY_200_CODE,
@@ -1067,6 +877,36 @@ export const COLOR = {
       CODE: COLOR_BASE_GREY_500_CODE,
       CLASSNAME: COLOR_BASE_GREY_500_CLASSNAME,
     },
+    600: {
+      HEX: COLOR_BASE_GREY_600_HEX,
+      CODE: COLOR_BASE_GREY_600_CODE,
+      CLASSNAME: COLOR_BASE_GREY_600_CLASSNAME,
+    },
+    700: {
+      HEX: COLOR_BASE_GREY_700_HEX,
+      CODE: COLOR_BASE_GREY_700_CODE,
+      CLASSNAME: COLOR_BASE_GREY_700_CLASSNAME,
+    },
+    800: {
+      HEX: COLOR_BASE_GREY_800_HEX,
+      CODE: COLOR_BASE_GREY_800_CODE,
+      CLASSNAME: COLOR_BASE_GREY_800_CLASSNAME,
+    },
+    900: {
+      HEX: COLOR_BASE_GREY_900_HEX,
+      CODE: COLOR_BASE_GREY_900_CODE,
+      CLASSNAME: COLOR_BASE_GREY_900_CLASSNAME,
+    },
+    950: {
+      HEX: COLOR_BASE_GREY_950_HEX,
+      CODE: COLOR_BASE_GREY_950_CODE,
+      CLASSNAME: COLOR_BASE_GREY_950_CLASSNAME,
+    },
+    '050': {
+      HEX: COLOR_BASE_GREY_050_HEX,
+      CODE: COLOR_BASE_GREY_050_CODE,
+      CLASSNAME: COLOR_BASE_GREY_050_CLASSNAME,
+    },
   },
   WHITE: {
     100: {
diff --git a/packages/sage-react/lib/configs/tokens/recharts.js b/packages/sage-react/lib/configs/tokens/recharts.js
index adfeb54419..d838260596 100644
--- a/packages/sage-react/lib/configs/tokens/recharts.js
+++ b/packages/sage-react/lib/configs/tokens/recharts.js
@@ -4,7 +4,7 @@ const gridConfigs = {
   stroke: TOKENS_COLOR_PALETTE.GREY_300,
 };
 const tickConfigs = {
-  fill: TOKENS_COLOR_PALETTE.CHARCOAL_100,
+  fill: TOKENS_COLOR_PALETTE.GREY_600,
   fontSize: 12,
 };
 
diff --git a/style-dictionary/bin/templating.js b/style-dictionary/bin/templating.js
index 43243efe3f..da65211e46 100644
--- a/style-dictionary/bin/templating.js
+++ b/style-dictionary/bin/templating.js
@@ -112,6 +112,13 @@ Handlebars.registerHelper('lowercase', function (value) {
 });
 
 
+Handlebars.registerHelper('startsWithZero', function(value, options) {
+  if (value && value.toString().startsWith('0')) {
+      return "'" + value.toString() + "'";
+  }
+  return value;
+});
+
 //
 // Templates compilation
 //
diff --git a/style-dictionary/templates/presets/jsx/tokens.hbs b/style-dictionary/templates/presets/jsx/tokens.hbs
index d7bf41a20c..f265d01ba8 100644
--- a/style-dictionary/templates/presets/jsx/tokens.hbs
+++ b/style-dictionary/templates/presets/jsx/tokens.hbs
@@ -34,13 +34,13 @@ export const {{constantCase ../category}}{{#if (notBaseType type)}}_{{constantCa
   {{constantCase item}}: {
         {{#each subitems}}
           {{#if (hasAny states)}}
-    {{constantCase subitem}}: {
+    {{{ startsWithZero (constantCase subitem) }}}: {
             {{#each states}}
-      {{constantCase state}}: {{name}},
+      {{{startsWithZero (constantCase state) }}}: {{name}},
             {{/each}}
     },
           {{else}}
-    {{constantCase subitem}}: {{name}},
+    {{{startsWithZero (constantCase subitem)}}}: {{name}},
           {{/if}}
         {{/each}}
   },
diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json
index 04e1dadf4a..bf918421b3 100644
--- a/style-dictionary/tokens/color/base.json
+++ b/style-dictionary/tokens/color/base.json
@@ -2,645 +2,545 @@
   "color": {
     "base": {
       "blue": {
-        "5": {
+        "050": {
           "hex": { "value": "#fafcff" },
-          "code": { "value": "blue-5" },
-          "classname": { "value": "t-sage--color-blue-5" }
+          "code": { "value": "blue-050" },
+          "classname": { "value": "t-sage--color-blue-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#eff6ff" },
-          "code": { "value": "blue-10" },
-          "classname": { "value": "t-sage--color-blue-10" }
+          "code": { "value": "blue-100" },
+          "classname": { "value": "t-sage--color-blue-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#dbe9fe" },
-          "code": { "value": "blue-15" },
-          "classname": { "value": "t-sage--color-blue-15" }
+          "code": { "value": "blue-150" },
+          "classname": { "value": "t-sage--color-blue-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#bfdbfe" },
-          "code": { "value": "blue-20" },
-          "classname": { "value": "t-sage--color-blue-20" }
+          "code": { "value": "blue-200" },
+          "classname": { "value": "t-sage--color-blue-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#92c5fd" },
-          "code": { "value": "blue-30" },
-          "classname": { "value": "t-sage--color-blue-30" }
+          "code": { "value": "blue-300" },
+          "classname": { "value": "t-sage--color-blue-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#60a5fa" },
-          "code": { "value": "blue-40" },
-          "classname": { "value": "t-sage--color-blue-40" }
+          "code": { "value": "blue-400" },
+          "classname": { "value": "t-sage--color-blue-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#3c82f6" },
-          "code": { "value": "blue-50" },
-          "classname": { "value": "t-sage--color-blue-50" }
+          "code": { "value": "blue-500" },
+          "classname": { "value": "t-sage--color-blue-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#2463eb" },
-          "code": { "value": "blue-60" },
-          "classname": { "value": "t-sage--color-blue-60" }
+          "code": { "value": "blue-600" },
+          "classname": { "value": "t-sage--color-blue-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#1c4ed8" },
-          "code": { "value": "blue-70" },
-          "classname": { "value": "t-sage--color-blue-70" }
+          "code": { "value": "blue-700" },
+          "classname": { "value": "t-sage--color-blue-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#1d40ae" },
-          "code": { "value": "blue-80" },
-          "classname": { "value": "t-sage--color-blue-80" }
+          "code": { "value": "blue-800" },
+          "classname": { "value": "t-sage--color-blue-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#1f3a8a" },
-          "code": { "value": "blue-90" },
-          "classname": { "value": "t-sage--color-blue-90" }
+          "code": { "value": "blue-900" },
+          "classname": { "value": "t-sage--color-blue-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#172554" },
-          "code": { "value": "blue-95" },
-          "classname": { "value": "t-sage--color-blue-95" }
+          "code": { "value": "blue-950" },
+          "classname": { "value": "t-sage--color-blue-950" }
         }
       },
       "green": {
-        "5": {
+        "050": {
           "hex": { "value": "#fbfefc" },
-          "code": { "value": "green-5" },
-          "classname": { "value": "t-sage--color-green-5" }
+          "code": { "value": "green-050" },
+          "classname": { "value": "t-sage--color-green-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#edfcf2" },
-          "code": { "value": "green-10" },
-          "classname": { "value": "t-sage--color-green-10" }
+          "code": { "value": "green-100" },
+          "classname": { "value": "t-sage--color-green-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#d3f8df" },
-          "code": { "value": "green-15" },
-          "classname": { "value": "t-sage--color-green-15" }
+          "code": { "value": "green-150" },
+          "classname": { "value": "t-sage--color-green-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#aaf0c4" },
-          "code": { "value": "green-20" },
-          "classname": { "value": "t-sage--color-green-20" }
+          "code": { "value": "green-200" },
+          "classname": { "value": "t-sage--color-green-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#73e2a3" },
-          "code": { "value": "green-30" },
-          "classname": { "value": "t-sage--color-green-30" }
+          "code": { "value": "green-300" },
+          "classname": { "value": "t-sage--color-green-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#3dcb7f" },
-          "code": { "value": "green-40" },
-          "classname": { "value": "t-sage--color-green-40" }
+          "code": { "value": "green-400" },
+          "classname": { "value": "t-sage--color-green-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#17b365" },
-          "code": { "value": "green-50" },
-          "classname": { "value": "t-sage--color-green-50" }
+          "code": { "value": "green-500" },
+          "classname": { "value": "t-sage--color-green-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#079250" },
-          "code": { "value": "green-60" },
-          "classname": { "value": "t-sage--color-green-60" }
+          "code": { "value": "green-600" },
+          "classname": { "value": "t-sage--color-green-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#097443" },
-          "code": { "value": "green-70" },
-          "classname": { "value": "t-sage--color-green-70" }
+          "code": { "value": "green-700" },
+          "classname": { "value": "t-sage--color-green-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#085c37" },
-          "code": { "value": "green-80" },
-          "classname": { "value": "t-sage--color-green-80" }
+          "code": { "value": "green-800" },
+          "classname": { "value": "t-sage--color-green-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#094c2f" },
-          "code": { "value": "green-90" },
-          "classname": { "value": "t-sage--color-green-90" }
+          "code": { "value": "green-900" },
+          "classname": { "value": "t-sage--color-green-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#052e1c" },
-          "code": { "value": "green-95" },
-          "classname": { "value": "t-sage--color-green-95" }
+          "code": { "value": "green-950" },
+          "classname": { "value": "t-sage--color-green-950" }
         }
       },
       "mercury": {
-        "5": {
+        "050": {
           "hex": { "value": "#fffcfa" },
-          "code": { "value": "mercury-5" },
-          "classname": { "value": "t-sage--color-mercury-5" }
+          "code": { "value": "mercury-050" },
+          "classname": { "value": "t-sage--color-mercury-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#fff3ed" },
-          "code": { "value": "mercury-10" },
-          "classname": { "value": "t-sage--color-mercury-10" }
+          "code": { "value": "mercury-100" },
+          "classname": { "value": "t-sage--color-mercury-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#ffe3d4" },
-          "code": { "value": "mercury-15" },
-          "classname": { "value": "t-sage--color-mercury-15" }
+          "code": { "value": "mercury-150" },
+          "classname": { "value": "t-sage--color-mercury-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#ffc3a8" },
-          "code": { "value": "mercury-20" },
-          "classname": { "value": "t-sage--color-mercury-20" }
+          "code": { "value": "mercury-200" },
+          "classname": { "value": "t-sage--color-mercury-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#ff9970" },
-          "code": { "value": "mercury-30" },
-          "classname": { "value": "t-sage--color-mercury-30" }
+          "code": { "value": "mercury-300" },
+          "classname": { "value": "t-sage--color-mercury-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#ff6337" },
-          "code": { "value": "mercury-40" },
-          "classname": { "value": "t-sage--color-mercury-40" }
+          "code": { "value": "mercury-400" },
+          "classname": { "value": "t-sage--color-mercury-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#ff3e15" },
-          "code": { "value": "mercury-50" },
-          "classname": { "value": "t-sage--color-mercury-50" }
+          "code": { "value": "mercury-500" },
+          "classname": { "value": "t-sage--color-mercury-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#f11f06" },
-          "code": { "value": "mercury-60" },
-          "classname": { "value": "t-sage--color-mercury-60" }
+          "code": { "value": "mercury-600" },
+          "classname": { "value": "t-sage--color-mercury-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#c81307" },
-          "code": { "value": "mercury-70" },
-          "classname": { "value": "t-sage--color-mercury-70" }
+          "code": { "value": "mercury-700" },
+          "classname": { "value": "t-sage--color-mercury-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#9e110e" },
-          "code": { "value": "mercury-80" },
-          "classname": { "value": "t-sage--color-mercury-80" }
+          "code": { "value": "mercury-800" },
+          "classname": { "value": "t-sage--color-mercury-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#7f120f" },
-          "code": { "value": "mercury-90" },
-          "classname": { "value": "t-sage--color-mercury-90" }
+          "code": { "value": "mercury-900" },
+          "classname": { "value": "t-sage--color-mercury-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#450506" },
-          "code": { "value": "mercury-95" },
-          "classname": { "value": "t-sage--color-mercury-95" }
+          "code": { "value": "mercury-950" },
+          "classname": { "value": "t-sage--color-mercury-950" }
         }
       },
       "primary": {
         "100": {
-          "hex": { "value": "{color.base.blue.15.hex.value}" },
+          "hex": { "value": "{color.base.blue.150.hex.value}" },
           "code": { "value": "primary-100" },
           "classname": { "value": "t-sage--color-primary-100" }
         },
         "200": {
-          "hex": { "value": "{color.base.blue.30.hex.value}" },
+          "hex": { "value": "{color.base.blue.300.hex.value}" },
           "code": { "value": "primary-200" },
           "classname": { "value": "t-sage--color-primary-200" }
         },
         "300": {
-          "hex": { "value": "{color.base.blue.60.hex.value}" },
+          "hex": { "value": "{color.base.blue.600.hex.value}" },
           "code": { "value": "primary-300" },
           "classname": { "value": "t-sage--color-primary-300" }
         },
         "400": {
-          "hex": { "value": "{color.base.blue.70.hex.value}" },
+          "hex": { "value": "{color.base.blue.700.hex.value}" },
           "code": { "value": "primary-400" },
           "classname": { "value": "t-sage--color-primary-400" }
         },
         "500": {
-          "hex": { "value": "{color.base.blue.95.hex.value}" },
+          "hex": { "value": "{color.base.blue.950.hex.value}" },
           "code": { "value": "primary-500" },
           "classname": { "value": "t-sage--color-primary-500" }
         }
       },
       "sage": {
         "100": {
-          "hex": { "value": "{color.base.green.15.hex.value}" },
+          "hex": { "value": "{color.base.green.150.hex.value}" },
           "code": { "value": "sage-100" },
           "classname": { "value": "t-sage--color-sage-100" }
         },
         "200": {
-          "hex": { "value": "{color.base.green.30.hex.value}" },
+          "hex": { "value": "{color.base.green.300.hex.value}" },
           "code": { "value": "sage-200" },
           "classname": { "value": "t-sage--color-sage-200" }
         },
         "300": {
-          "hex": { "value": "{color.base.green.60.hex.value}" },
+          "hex": { "value": "{color.base.green.600.hex.value}" },
           "code": { "value": "sage-300" },
           "classname": { "value": "t-sage--color-sage-300" }
         },
         "400": {
-          "hex": { "value": "{color.base.green.80.hex.value}" },
+          "hex": { "value": "{color.base.green.800.hex.value}" },
           "code": { "value": "sage-400" },
           "classname": { "value": "t-sage--color-sage-400" }
         },
         "500": {
-          "hex": { "value": "{color.base.green.95.hex.value}" },
+          "hex": { "value": "{color.base.green.950.hex.value}" },
           "code": { "value": "sage-500" },
           "classname": { "value": "t-sage--color-sage-500" }
         }
       },
       "yellow": {
-        "5": {
+        "050": {
           "hex": { "value": "#fffefa" },
-          "code": { "value": "yellow-5" },
-          "classname": { "value": "t-sage--color-yellow-5" }
+          "code": { "value": "yellow-050" },
+          "classname": { "value": "t-sage--color-yellow-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#fffbeb" },
-          "code": { "value": "yellow-10" },
-          "classname": { "value": "t-sage--color-yellow-10" }
+          "code": { "value": "yellow-100" },
+          "classname": { "value": "t-sage--color-yellow-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#fff3c6" },
-          "code": { "value": "yellow-15" },
-          "classname": { "value": "t-sage--color-yellow-15" }
+          "code": { "value": "yellow-150" },
+          "classname": { "value": "t-sage--color-yellow-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#fee589" },
-          "code": { "value": "yellow-20" },
-          "classname": { "value": "t-sage--color-yellow-20" }
+          "code": { "value": "yellow-200" },
+          "classname": { "value": "t-sage--color-yellow-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#fed04b" },
-          "code": { "value": "yellow-30" },
-          "classname": { "value": "t-sage--color-yellow-30" }
+          "code": { "value": "yellow-300" },
+          "classname": { "value": "t-sage--color-yellow-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#fdbb21" },
-          "code": { "value": "yellow-40" },
-          "classname": { "value": "t-sage--color-yellow-40" }
+          "code": { "value": "yellow-400" },
+          "classname": { "value": "t-sage--color-yellow-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#f79a0b" },
-          "code": { "value": "yellow-50" },
-          "classname": { "value": "t-sage--color-yellow-50" }
+          "code": { "value": "yellow-500" },
+          "classname": { "value": "t-sage--color-yellow-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#db7303" },
           "code": { "value": "yellow-60" },
-          "classname": { "value": "t-sage--color-yellow-60" }
+          "classname": { "value": "t-sage--color-yellow-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#b64f06" },
-          "code": { "value": "yellow-70" },
-          "classname": { "value": "t-sage--color-yellow-70" }
+          "code": { "value": "yellow-700" },
+          "classname": { "value": "t-sage--color-yellow-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#943d0e" },
-          "code": { "value": "yellow-80" },
-          "classname": { "value": "t-sage--color-yellow-80" }
+          "code": { "value": "yellow-800" },
+          "classname": { "value": "t-sage--color-yellow-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#79330e" },
-          "code": { "value": "yellow-90" },
-          "classname": { "value": "t-sage--color-yellow-90" }
+          "code": { "value": "yellow-900" },
+          "classname": { "value": "t-sage--color-yellow-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#451902" },
-          "code": { "value": "yellow-95" },
-          "classname": { "value": "t-sage--color-yellow-95" }
-        },
-        "100": {
-          "hex": { "value": "{color.base.yellow.15.hex.value}" },
-          "code": { "value": "yellow-100" },
-          "classname": { "value": "t-sage--color-yellow-100" }
-        },
-        "200": {
-          "hex": { "value": "{color.base.yellow.30.hex.value}" },
-          "code": { "value": "yellow-200" },
-          "classname": { "value": "t-sage--color-yellow-200" }
-        },
-        "300": {
-          "hex": { "value": "{color.base.yellow.40.hex.value}" },
-          "code": { "value": "yellow-300" },
-          "classname": { "value": "t-sage--color-yellow-300" }
-        },
-        "400": {
-          "hex": { "value": "{color.base.yellow.60.hex.value}" },
-          "code": { "value": "yellow-400" },
-          "classname": { "value": "t-sage--color-yellow-400" }
-        },
-        "500": {
-          "hex": { "value": "{color.base.yellow.95.hex.value}" },
-          "code": { "value": "yellow-500" },
-          "classname": { "value": "t-sage--color-yellow-500" }
+          "code": { "value": "yellow-950" },
+          "classname": { "value": "t-sage--color-yellow-950" }
         }
       },
       "red": {
-        "5": {
+        "050": {
           "hex": { "value": "#fffafa" },
-          "code": { "value": "red-5" },
-          "classname": { "value": "t-sage--color-red-5" }
+          "code": { "value": "red-050" },
+          "classname": { "value": "t-sage--color-red-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#fef2f2" },
-          "code": { "value": "red-10" },
-          "classname": { "value": "t-sage--color-red-10" }
+          "code": { "value": "red-100" },
+          "classname": { "value": "t-sage--color-red-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#fee2e1" },
-          "code": { "value": "red-15" },
-          "classname": { "value": "t-sage--color-red-15" }
+          "code": { "value": "red-150" },
+          "classname": { "value": "t-sage--color-red-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#fecaca" },
-          "code": { "value": "red-20" },
-          "classname": { "value": "t-sage--color-red-20" }
+          "code": { "value": "red-200" },
+          "classname": { "value": "t-sage--color-red-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#fda5a5" },
-          "code": { "value": "red-30" },
-          "classname": { "value": "t-sage--color-red-30" }
+          "code": { "value": "red-300" },
+          "classname": { "value": "t-sage--color-red-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#f87171" },
-          "code": { "value": "red-40" },
-          "classname": { "value": "t-sage--color-red-40" }
+          "code": { "value": "red-400" },
+          "classname": { "value": "t-sage--color-red-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#ef4444" },
-          "code": { "value": "red-50" },
-          "classname": { "value": "t-sage--color-red-50" }
+          "code": { "value": "red-500" },
+          "classname": { "value": "t-sage--color-red-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#dc2625" },
-          "code": { "value": "red-60" },
-          "classname": { "value": "t-sage--color-red-60" }
+          "code": { "value": "red-600" },
+          "classname": { "value": "t-sage--color-red-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#b91c1b" },
-          "code": { "value": "red-70" },
-          "classname": { "value": "t-sage--color-red-70" }
+          "code": { "value": "red-700" },
+          "classname": { "value": "t-sage--color-red-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#991b1b" },
-          "code": { "value": "red-80" },
-          "classname": { "value": "t-sage--color-red-80" }
+          "code": { "value": "red-800" },
+          "classname": { "value": "t-sage--color-red-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#7f1c1d" },
-          "code": { "value": "red-90" },
-          "classname": { "value": "t-sage--color-red-90" }
+          "code": { "value": "red-900" },
+          "classname": { "value": "t-sage--color-red-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#572627" },
-          "code": { "value": "red-95" },
-          "classname": { "value": "t-sage--color-red-95" }
-        },
-        "100": {
-          "hex": { "value": "{color.base.red.15.hex.value}" },
-          "code": { "value": "red-100" },
-          "classname": { "value": "t-sage--color-red-100" }
-        },
-        "200": {
-          "hex": { "value": "{color.base.red.30.hex.value}" },
-          "code": { "value": "red-200" },
-          "classname": { "value": "t-sage--color-red-200" }
-        },
-        "300": {
-          "hex": { "value": "{color.base.red.50.hex.value}" },
-          "code": { "value": "red-300" },
-          "classname": { "value": "t-sage--color-red-300" }
-        },
-        "400": {
-          "hex": { "value": "{color.base.red.80.hex.value}" },
-          "code": { "value": "red-400" },
-          "classname": { "value": "t-sage--color-red-400" }
-        },
-        "500": {
-          "hex": { "value": "{color.base.red.95.hex.value}" },
-          "code": { "value": "red-500" },
-          "classname": { "value": "t-sage--color-red-500" }
+          "code": { "value": "red-950" },
+          "classname": { "value": "t-sage--color-red-950" }
         }
       },
       "orange": {
         "100": {
-          "hex": { "value": "{color.base.mercury.15.hex.value}" },
+          "hex": { "value": "{color.base.mercury.150.hex.value}" },
           "code": { "value": "orange-100" },
           "classname": { "value": "t-sage--color-orange-100" }
         },
         "200": {
-          "hex": { "value": "{color.base.mercury.30.hex.value}" },
+          "hex": { "value": "{color.base.mercury.300.hex.value}" },
           "code": { "value": "orange-200" },
           "classname": { "value": "t-sage--color-orange-200" }
         },
         "300": {
-          "hex": { "value": "{color.base.mercury.50.hex.value}" },
+          "hex": { "value": "{color.base.mercury.500.hex.value}" },
           "code": { "value": "orange-300" },
           "classname": { "value": "t-sage--color-orange-300" }
         },
         "400": {
-          "hex": { "value": "{color.base.mercury.80.hex.value}" },
+          "hex": { "value": "{color.base.mercury.800.hex.value}" },
           "code": { "value": "orange-400" },
           "classname": { "value": "t-sage--color-orange-400" }
         },
         "500": {
-          "hex": { "value": "{color.base.mercury.95.hex.value}" },
+          "hex": { "value": "{color.base.mercury.950.hex.value}" },
           "code": { "value": "orange-500" },
           "classname": { "value": "t-sage--color-orange-500" }
         }
       },
       "purple": {
-        "5": {
+        "050": {
           "hex": { "value": "#fafbff" },
-          "code": { "value": "purple-5" },
-          "classname": { "value": "t-sage--color-purple-5" }
+          "code": { "value": "purple-050" },
+          "classname": { "value": "t-sage--color-purple-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#edf1ff" },
-          "code": { "value": "purple-10" },
-          "classname": { "value": "t-sage--color-purple-10" }
+          "code": { "value": "purple-100" },
+          "classname": { "value": "t-sage--color-purple-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#e0e4ff" },
-          "code": { "value": "purple-15" },
-          "classname": { "value": "t-sage--color-purple-15" }
+          "code": { "value": "purple-150" },
+          "classname": { "value": "t-sage--color-purple-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#c7cdfe" },
-          "code": { "value": "purple-20" },
-          "classname": { "value": "t-sage--color-purple-20" }
+          "code": { "value": "purple-200" },
+          "classname": { "value": "t-sage--color-purple-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#a3acfd" },
-          "code": { "value": "purple-30" },
-          "classname": { "value": "t-sage--color-purple-30" }
+          "code": { "value": "purple-300" },
+          "classname": { "value": "t-sage--color-purple-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#8081f9" },
-          "code": { "value": "purple-40" },
-          "classname": { "value": "t-sage--color-purple-40" }
+          "code": { "value": "purple-400" },
+          "classname": { "value": "t-sage--color-purple-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#6a62f2" },
-          "code": { "value": "purple-50" },
-          "classname": { "value": "t-sage--color-purple-50" }
+          "code": { "value": "purple-500" },
+          "classname": { "value": "t-sage--color-purple-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#533be5" },
-          "code": { "value": "purple-60" },
-          "classname": { "value": "t-sage--color-purple-60" }
+          "code": { "value": "purple-600" },
+          "classname": { "value": "t-sage--color-purple-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#4f37cb" },
-          "code": { "value": "purple-70" },
-          "classname": { "value": "t-sage--color-purple-70" }
+          "code": { "value": "purple-700" },
+          "classname": { "value": "t-sage--color-purple-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#402fa4" },
-          "code": { "value": "purple-80" },
-          "classname": { "value": "t-sage--color-purple-80" }
+          "code": { "value": "purple-800" },
+          "classname": { "value": "t-sage--color-purple-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#372d82" },
-          "code": { "value": "purple-90" },
-          "classname": { "value": "t-sage--color-purple-90" }
+          "code": { "value": "purple-900" },
+          "classname": { "value": "t-sage--color-purple-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#221b4b" },
-          "code": { "value": "purple-95" },
-          "classname": { "value": "t-sage--color-purple-95" }
-        },
-        "100": {
-          "hex": { "value": "{color.base.purple.15.hex.value}" },
-          "code": { "value": "purple-100" },
-          "classname": { "value": "t-sage--color-purple-100" }
-        },
-        "200": {
-          "hex": { "value": "{color.base.purple.30.hex.value}" },
-          "code": { "value": "purple-200" },
-          "classname": { "value": "t-sage--color-purple-200" }
-        },
-        "300": {
-          "hex": { "value": "{color.base.purple.60.hex.value}" },
-          "code": { "value": "purple-300" },
-          "classname": { "value": "t-sage--color-purple-300" }
-        },
-        "400": {
-          "hex": { "value": "{color.base.purple.80.hex.value}" },
-          "code": { "value": "purple-400" },
-          "classname": { "value": "t-sage--color-purple-400" }
-        },
-        "500": {
-          "hex": { "value": "{color.base.purple.95.hex.value}" },
-          "code": { "value": "purple-500" },
-          "classname": { "value": "t-sage--color-purple-500" }
+          "code": { "value": "purple-950" },
+          "classname": { "value": "t-sage--color-purple-950" }
         }
       },
       "charcoal": {
         "100": {
-          "hex": { "value": "{color.base.grey.60.hex.value}" },
+          "hex": { "value": "{color.base.grey.600.hex.value}" },
           "code": { "value": "charcoal-100" },
           "classname": { "value": "t-sage--color-charcoal-100" }
         },
         "200": {
-          "hex": { "value": "{color.base.grey.70.hex.value}" },
+          "hex": { "value": "{color.base.grey.700.hex.value}" },
           "code": { "value": "charcoal-200" },
           "classname": { "value": "t-sage--color-charcoal-200" }
         },
         "300": {
-          "hex": { "value": "{color.base.grey.80.hex.value}" },
+          "hex": { "value": "{color.base.grey.800.hex.value}" },
           "code": { "value": "charcoal-300" },
           "classname": { "value": "t-sage--color-charcoal-300" }
         },
         "400": {
-          "hex": { "value": "{color.base.grey.90.hex.value}" },
+          "hex": { "value": "{color.base.grey.900.hex.value}" },
           "code": { "value": "charcoal-400" },
           "classname": { "value": "t-sage--color-charcoal-400" }
         },
         "500": {
-          "hex": { "value": "{color.base.grey.95.hex.value}" },
+          "hex": { "value": "{color.base.grey.950.hex.value}" },
           "code": { "value": "charcoal-500" },
           "classname": { "value": "t-sage--color-charcoal-500" }
         }
       },
       "grey": {
-        "5": {
+        "050": {
           "hex": { "value": "#fcfcfc" },
-          "code": { "value": "grey-5" },
-          "classname": { "value": "t-sage--color-grey-5" }
+          "code": { "value": "grey-050" },
+          "classname": { "value": "t-sage--color-grey-050" }
         },
-        "10": {
+        "100": {
           "hex": { "value": "#f8f8f8" },
-          "code": { "value": "grey-10" },
-          "classname": { "value": "t-sage--color-grey-10" }
+          "code": { "value": "grey-100" },
+          "classname": { "value": "t-sage--color-grey-100" }
         },
-        "15": {
+        "150": {
           "hex": { "value": "#f0f0f0" },
           "code": { "value": "grey-15" },
-          "classname": { "value": "t-sage--color-grey-15" }
+          "classname": { "value": "t-sage--color-grey-150" }
         },
-        "20": {
+        "200": {
           "hex": { "value": "#e4e4e4" },
-          "code": { "value": "grey-20" },
-          "classname": { "value": "t-sage--color-grey-20" }
+          "code": { "value": "grey-200" },
+          "classname": { "value": "t-sage--color-grey-200" }
         },
-        "30": {
+        "300": {
           "hex": { "value": "#d2d1d1" },
-          "code": { "value": "grey-30" },
-          "classname": { "value": "t-sage--color-grey-30" }
+          "code": { "value": "grey-300" },
+          "classname": { "value": "t-sage--color-grey-300" }
         },
-        "40": {
+        "400": {
           "hex": { "value": "#bbbab9" },
-          "code": { "value": "grey-40" },
-          "classname": { "value": "t-sage--color-grey-40" }
+          "code": { "value": "grey-400" },
+          "classname": { "value": "t-sage--color-grey-400" }
         },
-        "50": {
+        "500": {
           "hex": { "value": "#9b9a98" },
-          "code": { "value": "grey-50" },
-          "classname": { "value": "t-sage--color-grey-50" }
+          "code": { "value": "grey-500" },
+          "classname": { "value": "t-sage--color-grey-500" }
         },
-        "60": {
+        "600": {
           "hex": { "value": "#828180" },
-          "code": { "value": "grey-60" },
-          "classname": { "value": "t-sage--color-grey-60" }
+          "code": { "value": "grey-600" },
+          "classname": { "value": "t-sage--color-grey-600" }
         },
-        "70": {
+        "700": {
           "hex": { "value": "#6c6a69" },
-          "code": { "value": "grey-70" },
-          "classname": { "value": "t-sage--color-grey-70" }
+          "code": { "value": "grey-700" },
+          "classname": { "value": "t-sage--color-grey-700" }
         },
-        "80": {
+        "800": {
           "hex": { "value": "#4d4d4c" },
-          "code": { "value": "grey-80" },
-          "classname": { "value": "t-sage--color-grey-80" }
+          "code": { "value": "grey-800" },
+          "classname": { "value": "t-sage--color-grey-800" }
         },
-        "90": {
+        "900": {
           "hex": { "value": "#343332" },
-          "code": { "value": "grey-90" },
-          "classname": { "value": "t-sage--color-grey-90" }
+          "code": { "value": "grey-900" },
+          "classname": { "value": "t-sage--color-grey-900" }
         },
-        "95": {
+        "950": {
           "hex": { "value": "#1a1a19" },
-          "code": { "value": "grey-95" },
-          "classname": { "value": "t-sage--color-grey-95" }
-        },
-        "100": {
-          "hex": { "value": "#f8f8f8" },
-          "code": { "value": "grey-100" },
-          "classname": { "value": "t-sage--color-grey-100" }
-        },
-        "200": {
-          "hex": { "value": "#f0f0f0" },
-          "code": { "value": "grey-200" },
-          "classname": { "value": "t-sage--color-grey-200" }
-        },
-        "300": {
-          "hex": { "value": "#e4e4e4" },
-          "code": { "value": "grey-300" },
-          "classname": { "value": "t-sage--color-grey-300" }
-        },
-        "400": {
-          "hex": { "value": "#d2d1d1" },
-          "code": { "value": "grey-400" },
-          "classname": { "value": "t-sage--color-grey-400" }
-        },
-        "500": {
-          "hex": { "value": "#9b9a98" },
-          "code": { "value": "grey-500" },
-          "classname": { "value": "t-sage--color-grey-500" }
+          "code": { "value": "grey-950" },
+          "classname": { "value": "t-sage--color-grey-950" }
         }
       },
       "white": {
diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json
index 751ccbf373..95aa028e6d 100644
--- a/style-dictionary/tokens/color/combos.json
+++ b/style-dictionary/tokens/color/combos.json
@@ -4,38 +4,38 @@
       "draft": {
         "default": {
           "foreground": {
-            "value": "{color.base.charcoal.400.hex}"
+            "value": "{color.base.grey.900.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.charcoal.500.hex}"
+            "value": "{color.base.grey.950.hex}"
           },
           "background": {
-            "value": "{color.base.grey.300.hex}"
+            "value": "{color.base.grey.200.hex}"
           },
           "background-accent": {
-            "value": "{color.base.grey.400.hex}"
+            "value": "{color.base.grey.300.hex}"
           },
           "icon-background-accent": {
-            "value": "{color.base.charcoal.200.hex}"
+            "value": "{color.base.grey.700.hex}"
           }
         },
         "subtle": {
           "foreground": {
-            "value": "{color.base.charcoal.200.hex}"
+            "value": "{color.base.grey.700.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.charcoal.100.hex}"
+            "value": "{color.base.grey.600.hex}"
           },
           "background": {
-            "value": "{color.base.charcoal.100.hex}"
+            "value": "{color.base.grey.600.hex}"
           }
         },
         "bold": {
           "foreground": {
-            "value": "{color.base.grey.200.hex}"
+            "value": "{color.base.grey.150.hex}"
           },
           "background": {
-            "value": "{color.base.charcoal.400.hex}"
+            "value": "{color.base.grey.900.hex}"
           }
         }
       },
@@ -118,68 +118,68 @@
       "locked": {
         "default": {
           "foreground": {
-            "value": "{color.base.purple.400.hex}"
+            "value": "{color.base.purple.800.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.purple.500.hex}"
+            "value": "{color.base.purple.950.hex}"
           },
           "background": {
-            "value": "{color.base.purple.100.hex}"
+            "value": "{color.base.purple.150.hex}"
           },
           "background-accent": {
-            "value": "{color.base.purple.200.hex}"
+            "value": "{color.base.purple.300.hex}"
           },
           "icon-background-accent": {
-            "value": "{color.base.purple.300.hex}"
+            "value": "{color.base.purple.600.hex}"
           }
         },
         "subtle": {
           "foreground": {
-            "value": "{color.base.purple.400.hex}"
+            "value": "{color.base.purple.800.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.purple.300.hex}"
+            "value": "{color.base.purple.600.hex}"
           },
           "background": {
-            "value": "{color.base.purple.200.hex}"
+            "value": "{color.base.purple.300.hex}"
           }
         },
         "bold": {
           "foreground": {
-            "value": "{color.base.purple.100.hex}"
+            "value": "{color.base.purple.150.hex}"
           },
           "background": {
-            "value": "{color.base.purple.300.hex}"
+            "value": "{color.base.purple.600.hex}"
           }
         }
       },
       "warning": {
         "default": {
           "foreground": {
-            "value": "{color.base.yellow.400.hex}"
+            "value": "{color.base.yellow.600.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.yellow.500.hex}"
+            "value": "{color.base.yellow.950.hex}"
           },
           "background": {
-            "value": "{color.base.yellow.100.hex}"
+            "value": "{color.base.yellow.150.hex}"
           },
           "background-accent": {
-            "value": "{color.base.yellow.200.hex}"
+            "value": "{color.base.yellow.300.hex}"
           },
           "icon-background-accent": {
-            "value": "{color.base.yellow.400.hex}"
+            "value": "{color.base.yellow.600.hex}"
           }
         },
         "subtle": {
           "foreground": {
-            "value": "{color.base.yellow.400.hex}"
+            "value": "{color.base.yellow.600.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.yellow.300.hex}"
+            "value": "{color.base.yellow.400.hex}"
           },
           "background": {
-            "value": "{color.base.yellow.300.hex}"
+            "value": "{color.base.yellow.400.hex}"
           }
         },
         "bold": {
@@ -187,45 +187,45 @@
             "value": "{color.base.white.300.hex}"
           },
           "background": {
-            "value": "{color.base.yellow.300.hex}"
+            "value": "{color.base.yellow.400.hex}"
           }
         }
       },
       "danger": {
         "default": {
           "foreground": {
-            "value": "{color.base.red.400.hex}"
+            "value": "{color.base.red.800.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.red.500.hex}"
+            "value": "{color.base.red.950.hex}"
           },
           "background": {
-            "value": "{color.base.red.100.hex}"
+            "value": "{color.base.red.150.hex}"
           },
           "background-accent": {
-            "value": "{color.base.red.200.hex}"
+            "value": "{color.base.red.300.hex}"
           },
           "icon-background-accent": {
-            "value": "{color.base.red.300.hex}"
+            "value": "{color.base.red.500.hex}"
           }
         },
         "subtle": {
           "foreground": {
-            "value": "{color.base.red.400.hex}"
+            "value": "{color.base.red.800.hex}"
           },
           "foreground-accent": {
-            "value": "{color.base.red.200.hex}"
+            "value": "{color.base.red.300.hex}"
           },
           "background": {
-            "value": "{color.base.red.200.hex}"
+            "value": "{color.base.red.300.hex}"
           }
         },
         "bold": {
           "foreground": {
-            "value": "{color.base.red.100.hex}"
+            "value": "{color.base.red.150.hex}"
           },
           "background": {
-            "value": "{color.base.red.200.hex}"
+            "value": "{color.base.red.300.hex}"
           }
         }
       },
diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json
index 96e442ee28..c50693319f 100644
--- a/style-dictionary/tokens/color/core.json
+++ b/style-dictionary/tokens/color/core.json
@@ -2,13 +2,13 @@
   "color": {
     "core": {
       "blue": {
-        "value": "{color.base.blue.60.hex}"
+        "value": "{color.base.blue.600.hex}"
       },
       "green": {
-        "value": "{color.base.green.60.hex}"
+        "value": "{color.base.green.600.hex}"
       },
       "mercury": {
-        "value": "{color.base.mercury.50.hex}"
+        "value": "{color.base.mercury.500.hex}"
       },
       "primary": {
         "value": "{color.base.primary.300.hex}"
@@ -17,22 +17,22 @@
         "value": "{color.base.sage.300.hex}"
       },
       "yellow": {
-        "value": "{color.base.yellow.300.hex}"
+        "value": "{color.base.yellow.400.hex}"
       },
       "red": {
-        "value": "{color.base.red.300.hex}"
+        "value": "{color.base.red.500.hex}"
       },
       "orange": {
         "value": "{color.base.orange.300.hex}"
       },
       "purple": {
-        "value": "{color.base.purple.300.hex}"
+        "value": "{color.base.purple.600.hex}"
       },
       "charcoal": {
-        "value": "{color.base.charcoal.300.hex}"
+        "value": "{color.base.grey.800.hex}"
       },
       "grey": {
-        "value": "{color.base.charcoal.100.hex}"
+        "value": "{color.base.grey.600.hex}"
       },
       "white": {
         "value": "{color.base.white.500.hex}"